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](/foundations/surfaces).

## Surfaces [#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)` |

<div className="not-prose mt-6 grid grid-cols-2 gap-3 md:grid-cols-4">
  <div className="rounded-xl border border-border-1 bg-surface-1 p-4">
    <div className="font-medium text-sm">
      surface-1
    </div>
  </div>

  <div className="rounded-xl border border-border-2 bg-surface-2 p-4">
    <div className="font-medium text-sm">
      surface-2
    </div>
  </div>

  <div className="rounded-xl border border-border-3 bg-surface-3 p-4">
    <div className="font-medium text-sm">
      surface-3
    </div>
  </div>

  <div className="rounded-xl border border-border-4 bg-surface-4 p-4">
    <div className="font-medium text-sm">
      surface-4
    </div>
  </div>

  <div className="rounded-xl border border-border-5 bg-surface-5 p-4">
    <div className="font-medium text-sm">
      surface-5
    </div>
  </div>

  <div className="rounded-xl border border-border-6 bg-surface-6 p-4">
    <div className="font-medium text-sm">
      surface-6
    </div>
  </div>

  <div className="rounded-xl border border-border-7 bg-surface-7 p-4">
    <div className="font-medium text-sm">
      surface-7
    </div>
  </div>

  <div className="rounded-xl border border-border-8 bg-surface-8 p-4">
    <div className="font-medium text-sm">
      surface-8
    </div>
  </div>
</div>

## Foreground [#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)` |

<div className="not-prose mt-6 grid grid-cols-1 gap-4 md:grid-cols-3">
  <div className="flex items-center gap-3">
    <div className="size-12 rounded-lg bg-fg-1" />

    <div>
      <div className="font-medium text-sm">
        Foreground 1
      </div>

      <code className="text-fg-2 text-xs">
        text-fg-1
      </code>
    </div>
  </div>

  <div className="flex items-center gap-3">
    <div className="size-12 rounded-lg bg-fg-2" />

    <div>
      <div className="font-medium text-sm">
        Foreground 2
      </div>

      <code className="text-fg-2 text-xs">
        text-fg-2
      </code>
    </div>
  </div>

  <div className="flex items-center gap-3">
    <div className="size-12 rounded-lg bg-fg-3" />

    <div>
      <div className="font-medium text-sm">
        Foreground 3
      </div>

      <code className="text-fg-2 text-xs">
        text-fg-3
      </code>
    </div>
  </div>
</div>

## Borders [#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]

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 [#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 [#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-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`      |

<div className="not-prose mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
  <div className="rounded-xl border border-border-1 bg-success-3 p-4 text-success-1">
    <div className="font-medium">
      Success
    </div>

    <code className="text-xs">
      bg-success-3 text-success-1
    </code>
  </div>

  <div className="rounded-xl border border-border-1 bg-warning-3 p-4 text-warning-1">
    <div className="font-medium">
      Warning
    </div>

    <code className="text-xs">
      bg-warning-3 text-warning-1
    </code>
  </div>

  <div className="rounded-xl border border-border-1 bg-caution-3 p-4 text-caution-1">
    <div className="font-medium">
      Caution
    </div>

    <code className="text-xs">
      bg-caution-3 text-caution-1
    </code>
  </div>

  <div className="rounded-xl border border-border-1 bg-info-3 p-4 text-info-1">
    <div className="font-medium">
      Info
    </div>

    <code className="text-xs">
      bg-info-3 text-info-1
    </code>
  </div>

  <div className="rounded-xl border border-border-1 bg-destructive-3 p-4 text-destructive-1">
    <div className="font-medium">
      Destructive
    </div>

    <code className="text-xs">
      bg-destructive-3 text-destructive-1
    </code>
  </div>

  <div className="rounded-xl border border-border-1 bg-accent-3 p-4 text-accent-1">
    <div className="font-medium">
      Accent
    </div>

    <code className="text-xs">
      bg-accent-3 text-accent-1
    </code>
  </div>
</div>

## CSS Variables [#css-variables]

```css
.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);
}
```