Colors

Cubitt colors are semantic CSS custom properties exposed through Tailwind classes. This page is a token reference. For surface behavior, nesting, and provider setup, see Surface System.

Surfaces

Token	Class	Light value	Dark value
`--surface-1`	`bg-surface-1`	`oklch(99.600% 0 0)`	`oklch(20.463% 0 0)`
`--surface-2`	`bg-surface-2`	`oklch(98.700% 0.002 106.47)`	`oklch(23.503% 0 0)`
`--surface-3`	`bg-surface-3`	`oklch(97.831% 0.004 106.47)`	`oklch(26.448% 0 0)`
`--surface-4`	`bg-surface-4`	`oklch(94.886% 0.0054 95.1)`	`oklch(29.313% 0 0)`
`--surface-5`	`bg-surface-5`	`oklch(94.831% 0.0054 95.1)`	`oklch(32.109% 0 0)`
`--surface-6`	`bg-surface-6`	`oklch(91.886% 0.0068 97.36)`	`oklch(34.846% 0 0)`
`--surface-7`	`bg-surface-7`	`oklch(91.831% 0.0068 97.36)`	`oklch(37.530% 0 0)`
`--surface-8`	`bg-surface-8`	`oklch(88.886% 0.0068 97.36)`	`oklch(40.167% 0 0)`

surface-1

surface-2

surface-3

surface-4

surface-5

surface-6

surface-7

surface-8

Foreground

Token	Class	Light value	Dark value
`--fg-1`	`text-fg-1`	`oklch(26.308% 0.0127 100.51)`	`oklch(0.9348 0.0011 17.18)`
`--fg-2`	`text-fg-2`	`oklch(57.494% 0.0082 101.51)`	`oklch(0.6334 0.0046 91.47)`
`--fg-3`	`text-fg-3`	`oklch(71.444% 0.0066 102.54)`	`oklch(0.4825 0.0068 84.58)`

Foreground 1

text-fg-1

Foreground 2

text-fg-2

Foreground 3

text-fg-3

Borders

Token	Class	Value
`--border-1`	`border-border-1`	`oklch(from var(--fg-1) l c h / 0.04)`
`--border-2`	`border-border-2`	`oklch(from var(--fg-1) l c h / 0.049)`
`--border-3`	`border-border-3`	`oklch(from var(--fg-1) l c h / 0.098)`
`--border-4`	`border-border-4`	`oklch(from var(--fg-1) l c h / 0.05)`
`--border-5`	`border-border-5`	`oklch(from var(--fg-1) l c h / 0.1)`
`--border-6`	`border-border-6`	`oklch(from var(--fg-1) l c h / 0.052)`
`--border-7`	`border-border-7`	`oklch(from var(--fg-1) l c h / 0.104)`
`--border-8`	`border-border-8`	`oklch(from var(--fg-1) l c h / 0.109)`

Brand

Brand tokens are provided by the active brand class, such as .mobius or .tilt, on the root element.

brand-bg-* is for filled and soft brand backgrounds. brand-fg-* is for brand text, icons, borders, and rings. The old --brand-1, --brand-2, and --brand-3 variables temporarily alias to --brand-bg-1, --brand-bg-2, and --brand-bg-3.

Brand Backgrounds

Token	Common class	Mobius light	Mobius dark	Tilt light	Tilt dark
`--brand-bg-1`	`bg-brand-bg-1`	`oklch(0.4391 0.0373 133.69)`	`oklch(45.5% 0.0373 145)`	`oklch(0.3421 0.0428 266.06)`	`oklch(31.5% 0.0428 266.06)`
`--brand-bg-2`	`bg-brand-bg-2`	`oklch(88.441% 0.01432 162.814)`	`oklch(0.3 0.015 160)`	`oklch(0.6083 0.0966 265.73)`	`oklch(0.5228 0.1317 254.93)`
`--brand-bg-3`	`bg-brand-bg-3`	`oklch(94.7% 0.0041 145.39)`	`oklch(24.2% 0.0061 165.453)`	`oklch(94.7% 0.0048 277.76)`	`oklch(24.8% 0.018 259.73)`

Brand Foregrounds

Token	Common class	Mobius light	Mobius dark	Tilt light	Tilt dark
`--brand-fg-1`	`text-brand-fg-1`	`oklch(0.4391 0.0373 133.69)`	`oklch(63.3% 0.05 160.653)`	`oklch(0.3421 0.0428 266.06)`	`oklch(63.3% 0.135 254.93)`
`--brand-fg-2`	`text-brand-fg-2`	`oklch(88.441% 0.01432 162.814)`	`oklch(0.3 0.015 160)`	`oklch(0.6083 0.0966 265.73)`	`oklch(0.5228 0.1317 254.93)`
`--brand-fg-3`	`text-brand-fg-3`	`oklch(94.7% 0.0041 145.39)`	`oklch(24.2% 0.0061 165.453)`	`oklch(94.7% 0.0048 277.76)`	`oklch(24.8% 0.018 259.73)`

Semantic Colors

Semantic color families use 1 for strong text/icons, 2 for lines or secondary emphasis, and 3 for soft backgrounds.

Family	Strong	Secondary	Background
Success	`text-success-1`	`border-success-2`	`bg-success-3`
Warning	`text-warning-1`	`border-warning-2`	`bg-warning-3`
Caution	`text-caution-1`	`border-caution-2`	`bg-caution-3`
Info	`text-info-1`	`border-info-2`	`bg-info-3`
Destructive	`text-destructive-1`	`border-destructive-2`	`bg-destructive-3`
Accent	`text-accent-1`	`border-accent-2`	`bg-accent-3`

Success

bg-success-3 text-success-1

Warning

bg-warning-3 text-warning-1

Caution

bg-caution-3 text-caution-1

Info

bg-info-3 text-info-1

Destructive

bg-destructive-3 text-destructive-1

Accent

bg-accent-3 text-accent-1

CSS Variables

.panel {
  background: var(--surface-3);
  border: 1px solid var(--border-3);
  color: var(--fg-1);
}

.popover {
  background: var(--surface-5);
  border: 1px solid var(--border-5);
  box-shadow: var(--shadow-surface-5);
}

Colors

On this page