# Colors

Neutrals with a slight lean toward the brand green, and one brand color, `primary`. In Tailwind each token becomes `bg-*`, `text-*` and `border-*`.

## Surfaces and text

| Token | Light | Dark | Usage |
| --- | --- | --- | --- |
| `background` | `#ffffff` | `#0a1110` | Page background. Tailwind: bg-background. |
| `foreground` | `#0d1615` | `#e6eeec` | Primary text on background, card and popover (18:1 light, 16:1 dark). |
| `card` | `#ffffff` | `#101918` | Card and raised panel background. Tailwind: bg-card. |
| `card-foreground` | `{foreground}` | `{foreground}` | Text inside a card. |
| `popover` | `#ffffff` | `#101918` | Background of popovers, menus, the open Select and tooltips. |
| `popover-foreground` | `{foreground}` | `{foreground}` | Text inside a popover. |
| `secondary` | `#f0f4f3` | `#1a2624` | Secondary buttons and surfaces. Tailwind: bg-secondary. |
| `secondary-foreground` | `#14211f` | `#e6eeec` | Text on secondary. |
| `muted` | `#f0f4f3` | `#1a2624` | Quiet backgrounds: table row hover, Skeleton, empty areas. |
| `muted-foreground` | `#576865` | `#93a5a1` | Secondary text, descriptions, placeholders, metadata. Reads on background, card and muted (≥5.3:1). |
| `accent` | `#e3f1ee` | `#16302c` | Hover and highlight for menu items, ghost buttons and selected rows. |
| `accent-foreground` | `#0e3c36` | `#c3ebe3` | Text on accent (10:1). |
| `border` | `#dce4e2` | `#24332f` | Dividers and card borders. Decorative: carries no meaning on its own. |
| `input` | `#82928e` | `#56706b` | Field borders (Input, Select, Checkbox, Switch off). Strong enough to reach 3:1. |
| `ring` | `{primary}` | `{primary}` | Focus ring: 2px solid + 2px offset on background. ≥6:1 in both themes. |

## Brand

| Token | Light | Dark | Usage |
| --- | --- | --- | --- |
| `primary` | `#0b6b60` | `#45c4b0` | The PUI brand color (deep teal). Primary action, active item, links. As text it reads on background and card (6.4:1 / 8.9:1). One primary action per area. |
| `primary-foreground` | `#f3fbf9` | `#032019` | Text and icons on primary (6.1:1 / 8:1). Dark text in the dark theme: never hard-code white on primary. |

## Status

| Token | Light | Dark | Usage |
| --- | --- | --- | --- |
| `destructive` | `#c8321f` | `#f0715f` | Destructive actions and errors. As text it reads on background (5.3:1 / 6.6:1). |
| `destructive-foreground` | `#ffffff` | `#2a0804` | Text on destructive (≥5.3:1 in both themes). |
| `success` | `#13734a` | `#4cc38a` | Success and confirmation states. Always pair it with an icon or a word. |
| `success-foreground` | `#ffffff` | `#03200f` | Text on success. |
| `warning` | `#a35a00` | `#f0a54a` | Warnings and pending states. Always pair it with an icon or a word. |
| `warning-foreground` | `#ffffff` | `#2a1600` | Text on warning. |

## Charts

| Token | Light | Dark | Usage |
| --- | --- | --- | --- |
| `chart-1` | `#0b6b60` | `#45c4b0` | Chart series 1 (the brand). |
| `chart-2` | `#2f74b5` | `#6aa9e6` | Chart series 2. |
| `chart-3` | `#c9821f` | `#f0b257` | Chart series 3. |
| `chart-4` | `#7a52b3` | `#b08ae0` | Chart series 4. |
| `chart-5` | `#5b6b68` | `#a3b3af` | Chart series 5 ("other"). |

## Sidebar

| Token | Light | Dark | Usage |
| --- | --- | --- | --- |
| `sidebar` | `#f7f9f9` | `#0d1514` | Sidebar background. |
| `sidebar-foreground` | `{foreground}` | `{foreground}` | Sidebar text. |
| `sidebar-primary` | `{primary}` | `{primary}` | Active sidebar item. |
| `sidebar-primary-foreground` | `{primary-foreground}` | `{primary-foreground}` | Text on sidebar-primary. |
| `sidebar-accent` | `{accent}` | `{accent}` | Sidebar item hover. |
| `sidebar-accent-foreground` | `{accent-foreground}` | `{accent-foreground}` | Text on sidebar-accent. |
| `sidebar-border` | `{border}` | `{border}` | Sidebar borders. |
| `sidebar-ring` | `{ring}` | `{ring}` | Sidebar focus. |

---
PUI documentation · https://aline-aroucha.github.io/pui/colors.html