Lorre Blocks
GitHub

Core elements

Colors

The odamatheme carries AlignUI’s palette. Every value below is resolved from the theme at build time through the same generator that writes the stylesheet, so this page cannot drift from what your components actually render.

Semantic colors

The contract components code against — 73 of 75 read nothing else. These are where AlignUI’s exact values land, stated per mode rather than derived, because a hand-tuned dark mode is not a transform of its light mode.

TokenLightDark
--background#fafafa#171717
--foreground#1f1f1f#ededed
--card#ffffff#252525
--card-foreground#1f1f1f#ededed
--popover#ffffff#2c2c2c
--popover-foreground#1f1f1f#ededed
--primary#335cff#335cff
--primary-foreground#f8fafe#f8fafe
--secondary#f9f9f9#191919
--secondary-foreground#1f1f1f#ededed
--muted#f9f9f9#191919
--muted-foreground#666666#b7b7b7
--accent#e7e7e7#2b2b2b
--accent-foreground#1f1f1f#ededed
--destructive#fb3748#fb3748
--destructive-foreground#fdf9f8#fdf9f8
--success#1fc16b#1fc16b
--success-foreground#1a201b#1a201b
--warning#fa7319#fa7319
--warning-foreground#231c19#231c19
--border#f0f0f0#232323
--input#d1d1d1#3e3e3e
--ring#77a2ff#395abe
--border-active#335cff#335cff

Scales

Twelve steps per hue, following Radix semantics: 1–2 app backgrounds, 3–5 component backgrounds, 6–8 borders, 9–10 solid, 11–12 text. Reach them as bg-neutral-3 and friends.

neutral

light

1
2
3
4
5
6
7
8
9
10
11
12

dark

1
2
3
4
5
6
7
8
9
10
11
12

accent

light

1
2
3
4
5
6
7
8
9
10
11
12

dark

1
2
3
4
5
6
7
8
9
10
11
12

danger

light

1
2
3
4
5
6
7
8
9
10
11
12

dark

1
2
3
4
5
6
7
8
9
10
11
12

success

light

1
2
3
4
5
6
7
8
9
10
11
12

dark

1
2
3
4
5
6
7
8
9
10
11
12

warning

light

1
2
3
4
5
6
7
8
9
10
11
12

dark

1
2
3
4
5
6
7
8
9
10
11
12

To change any of this, edit the theme rather than the components — see Theming.