Cubitt uses a semantic color system built on CSS custom properties. Colors automatically adapt to light and dark modes.

All colors use a numbered scale where **1 = most prominent**, higher numbers = more subtle.

## Background [#background]

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

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

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

## Surfaces [#surfaces]

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

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

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

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

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

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

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

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

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

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

    <div>
      <div className="font-medium text-sm">
        Surface 4
      </div>

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

## Foreground [#foreground]

<div className="not-prose grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
  <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-xs text-fg-2">
        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-xs text-fg-2">
        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-xs text-fg-2">
        text-fg-3
      </code>
    </div>
  </div>
</div>

## Borders [#borders]

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

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

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

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

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

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

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

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

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

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

    <div>
      <div className="font-medium text-sm">
        Border 4
      </div>

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

## Brand [#brand]

Brand colors are set via the brand class (`.mobius`, `.tilt`) on the html element.

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

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

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

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

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

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

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

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

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

## Semantic Colors [#semantic-colors]

Each semantic category uses the same numbered pattern.

### Success [#success]

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

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

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

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

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

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

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

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

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

### Warning [#warning]

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

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

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

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

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

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

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

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

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

### Info [#info]

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

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

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

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

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

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

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

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

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

### Destructive [#destructive]

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

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

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

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

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

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

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

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

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

## Usage [#usage]

### Tailwind [#tailwind]

```tsx
<div className="bg-surface-1 text-fg-1 border border-border-2 rounded-lg p-6">
  <h2 className="text-fg-1">Title</h2>
  <p className="text-fg-2">Description</p>
</div>
```

### CSS Variables [#css-variables]

```css
.element {
  background: var(--surface-1);
  color: var(--fg-1);
  border: 1px solid var(--border-2);
}
```

### Semantic Example [#semantic-example]

```tsx
<div className="bg-success-3 text-success-1 border border-success-2 rounded-md px-4 py-2">
  Operation successful
</div>
```

## Dark Mode [#dark-mode]

Colors automatically adapt when `.dark` is on the html element.

```html
<html class="dark mobius">
```