# Colour

URL: https://docs.atomus.io/foundations/color/

Use **semantic tokens** only. Each has a Light and Dark value and follows the Brand collection. Names below are the CSS variables (Figma names in brackets).

## Text

Text colour. `primary` for headings and body, `secondary` for supporting copy, `tertiary` for hints and meta, `placeholder` in inputs, `brand` for links/highlights, `on-brand` on brand fills.

| Token                                                   | Light           | Dark            |
| ------------------------------------------------------- | --------------- | --------------- |
| `--color-text-primary` Figma: Text/text-primary         | `#18181b`       | `#fafafa`       |
| `--color-text-secondary` Figma: Text/text-secondary     | `#3f3f46`       | `#d4d4d8`       |
| `--color-text-white` Figma: Text/text-white             | `#ffffff`       | `#ffffff`       |
| `--color-text-opacity` Figma: Text/text-opacity         | `#00000099` 60% | `#ffffff99` 60% |
| `--color-text-link` Figma: Text/text-link               | `#4057ff`       | `#6e96ff`       |
| `--color-text-tertiary` Figma: Text/text-tertiary       | `#71717a`       | `#a1a1aa`       |
| `--color-text-placeholder` Figma: Text/text-placeholder | `#71717a`       | `#a1a1aa`       |
| `--color-text-disabled` Figma: Text/text-disabled       | `#d4d4d8`       | `#52525b`       |
| `--color-text-brand` Figma: Text/text-brand             | `#4057ff`       | `#6e96ff`       |
| `--color-text-on-brand` Figma: Text/text-on-brand       | `#ffffff`       | `#ffffff`       |
| `--color-text-error` Figma: Text/text-error             | `#be123c`       | `#fda4af`       |
| `--color-text-warning` Figma: Text/text-warning         | `#b45309`       | `#fbbf24`       |
| `--color-text-success` Figma: Text/text-success         | `#15803d`       | `#49de80`       |
| `--color-text-brand-hover` Figma: Text/text-brand_hover | `#2335d6`       | `#97bdff`       |
| `--color-text-inverse` Figma: Text/text-inverse         | `#ffffff`       | `#18181b`       |
| `--color-text-on-warning` Figma: Text/text-on-warning   | `#18181b`       | `#18181b`       |

## Background

Surface fills. `primary` page and cards, `secondary` sections and table headers, `tertiary` subtle fills and image placeholders, `brand-solid` primary buttons, `brand-subtle` selected/tinted areas, `overlay` behind modals.

| Token                                                                 | Light           | Dark            |
| --------------------------------------------------------------------- | --------------- | --------------- |
| `--color-bg-primary` Figma: Background/bg-primary                     | `#ffffff`       | `#18181b`       |
| `--color-bg-primary-hover` Figma: Background/bg-primary_hover         | `#fafafa`       | `#27272a`       |
| `--color-bg-secondary` Figma: Background/bg-secondary                 | `#fafafa`       | `#27272a`       |
| `--color-bg-tertiary` Figma: Background/bg-tertiary                   | `#f4f4f5`       | `#3f3f46`       |
| `--color-bg-inverse` Figma: Background/bg-inverse                     | `#18181b`       | `#ffffff`       |
| `--color-bg-disabled` Figma: Background/bg-disabled                   | `#f4f4f5`       | `#27272a`       |
| `--color-bg-brand-solid` Figma: Background/bg-brand-solid             | `#4057ff`       | `#4057ff`       |
| `--color-bg-brand-solid-hover` Figma: Background/bg-brand-solid_hover | `#2335d6`       | `#2335d6`       |
| `--color-bg-brand-subtle` Figma: Background/bg-brand-subtle           | `#ebf5ff`       | `#121f8c`       |
| `--color-bg-error-solid` Figma: Background/bg-error-solid             | `#e11d48`       | `#e11d48`       |
| `--color-bg-error-subtle` Figma: Background/bg-error-subtle           | `#fff1f2`       | `#881337`       |
| `--color-bg-warning-subtle` Figma: Background/bg-warning-subtle       | `#fffbeb`       | `#78350f`       |
| `--color-bg-success-subtle` Figma: Background/bg-success-subtle       | `#f0fdf4`       | `#14532d`       |
| `--color-bg-tertiary-hover` Figma: Background/bg-tertiary_hover       | `#e4e4e7`       | `#52525b`       |
| `--color-bg-warning-solid` Figma: Background/bg-warning-solid         | `#f59e0b`       | `#f59e0b`       |
| `--color-bg-success-solid` Figma: Background/bg-success-solid         | `#15803d`       | `#15803d`       |
| `--color-bg-overlay` Figma: Background/bg-overlay                     | `#18181bb2` 70% | `#000000b2` 70% |
| `--color-bg-quaternary` Figma: Background/bg-quaternary               | `#e4e4e7`       | `#3f3f46`       |
| `--color-bg-quaternary-hover` Figma: Background/bg-quaternary_hover   | `#d4d4d8`       | `#52525b`       |

## Border

Strokes. `secondary` for cards and dividers, `primary` for inputs and outlined controls, `brand` / `focus` for selected and focused states.

| Token                                                     | Light     | Dark      |
| --------------------------------------------------------- | --------- | --------- |
| `--color-border-primary` Figma: Border/border-primary     | `#d4d4d8` | `#3f3f46` |
| `--color-border-secondary` Figma: Border/border-secondary | `#e4e4e7` | `#27272a` |
| `--color-border-disabled` Figma: Border/border-disabled   | `#e4e4e7` | `#3f3f46` |
| `--color-border-brand` Figma: Border/border-brand         | `#4057ff` | `#6e96ff` |
| `--color-border-focus` Figma: Border/border-focus         | `#4c70ff` | `#6e96ff` |
| `--color-border-error` Figma: Border/border-error         | `#e11d48` | `#fb7185` |
| `--color-border-warning` Figma: Border/border-warning     | `#f59e0b` | `#fbbf24` |
| `--color-border-success` Figma: Border/border-success     | `#16a34a` | `#49de80` |

## Foreground

Icons and graphics. Same roles as Text.

| Token                                                               | Light     | Dark      |
| ------------------------------------------------------------------- | --------- | --------- |
| `--color-fg-primary` Figma: Foreground/fg-primary                   | `#18181b` | `#ffffff` |
| `--color-fg-secondary` Figma: Foreground/fg-secondary               | `#52525b` | `#d4d4d8` |
| `--color-fg-tertiary` Figma: Foreground/fg-tertiary                 | `#71717a` | `#a1a1aa` |
| `--color-fg-disabled` Figma: Foreground/fg-disabled                 | `#d4d4d8` | `#52525b` |
| `--color-fg-brand` Figma: Foreground/fg-brand                       | `#4057ff` | `#6e96ff` |
| `--color-fg-on-brand` Figma: Foreground/fg-on-brand                 | `#ffffff` | `#ffffff` |
| `--color-fg-error` Figma: Foreground/fg-error                       | `#e11d48` | `#fb7185` |
| `--color-fg-warning` Figma: Foreground/fg-warning                   | `#d97706` | `#fbbf24` |
| `--color-fg-success` Figma: Foreground/fg-success                   | `#16a34a` | `#49de80` |
| `--color-fg-inverse` Figma: Foreground/fg-inverse                   | `#ffffff` | `#18181b` |
| `--color-fg-on-warning` Figma: Foreground/fg-on-warning             | `#18181b` | `#18181b` |
| `--color-fg-contrast` Figma: Foreground/fg-contrast                 | `#000000` | `#ffffff` |
| `--color-fg-contrast-inverse` Figma: Foreground/fg-contrast-inverse | `#ffffff` | `#000000` |

`fg-contrast` is the maximum-contrast foreground (pure black in Light, pure white in Dark) for marks that must read on any surface, such as the Stop button of the Prompt input; put `fg-contrast-inverse` on top of it.

## AI

The Agent kit’s layer for AI content (see `components/ai-label.md`). Each value is the brand ramp blended with purple, so AI reads as related to the brand but distinct from it, and follows the Brand mode. Hex values below are for the Atomus brand. `bg-ai-subtle` tints AI surfaces (AI label, assistant avatar, reasoning, active citations), `border-ai` is their hairline, `text-ai` their label and accent text. `--gradient-ai` (brand-500 → purple → pink-400 at 135°; 400/300 stops in Dark) fills the AI mark, the streaming caret and the focused Prompt input border.

| Token                                                 | Light     | Dark            |
| ----------------------------------------------------- | --------- | --------------- |
| `--color-bg-ai-subtle` Figma: Background/bg-ai-subtle | `#f2f5ff` | `#938efe1f` 12% |
| `--color-border-ai` Figma: Border/border-ai           | `#b4b9ff` | `#938efe66` 40% |
| `--color-text-ai` Figma: Text/text-ai                 | `#4c2cd2` | `#b4b9ff`       |

Use the AI layer only to identify AI content. Never decorate other UI with it, and never let it be the only signal: pair it with the AI label.

## Primitives

Raw ramps (`--color-gray-25 … 950`, `--color-red-*`, … `--color-alpha-black-5 … 90`) exist only to be aliased. The brand ramp is `--color-brand-25 … 950` and changes with the Brand mode.

### Brand

Atomus Violet

`brand`

1. 25 `#f5faff`
2. 50 `#ebf5ff`
3. 100 `#dbeaff`
4. 200 `#bed9ff`
5. 300 `#97bdff`
6. 400 `#6e96ff`
7. 500 `#4c70ff`
8. 600 `#4057ff`
9. 700 `#2335d6`
10. 800 `#1d2fb6`
11. 900 `#121f8c`
12. 950 `#0b1354`

`--color-brand-25 … 950` point at `atomus-blue` by default and at `violet` under `data-brand="violet"`.

### Neutrals

`gray`

1. 25 `#fdfdfd`
2. 50 `#fafafa`
3. 100 `#f4f4f5`
4. 200 `#e4e4e7`
5. 300 `#d4d4d8`
6. 400 `#a1a1aa`
7. 500 `#71717a`
8. 600 `#52525b`
9. 700 `#3f3f46`
10. 800 `#27272a`
11. 900 `#18181b`
12. 950 `#0e0e10`

`blue-gray`

1. 25 `#fbfdfd`
2. 50 `#f8fafc`
3. 100 `#f1f5f9`
4. 200 `#e2e8f0`
5. 300 `#cbd5e1`
6. 400 `#94a3b8`
7. 500 `#64748b`
8. 600 `#475569`
9. 700 `#334155`
10. 800 `#1e293c`
11. 900 `#0f172a`
12. 950 `#090e19`

`cool-gray`

1. 25 `#fcfdfd`
2. 50 `#f9fafb`
3. 100 `#f3f4f6`
4. 200 `#e5e7eb`
5. 300 `#d1d5db`
6. 400 `#9ca3af`
7. 500 `#6b7280`
8. 600 `#4b5563`
9. 700 `#374151`
10. 800 `#1f2937`
11. 900 `#111827`
12. 950 `#0a0e17`

`true-gray`

1. 25 `#fdfdfd`
2. 50 `#fafafa`
3. 100 `#f5f5f5`
4. 200 `#e5e5e5`
5. 300 `#d4d4d4`
6. 400 `#a3a3a3`
7. 500 `#737373`
8. 600 `#525252`
9. 700 `#404040`
10. 800 `#262626`
11. 900 `#171717`
12. 950 `#0e0e0e`

`warm-gray`

1. 25 `#fdfdfc`
2. 50 `#fafaf9`
3. 100 `#f5f5f4`
4. 200 `#e7e5e4`
5. 300 `#d6d3d1`
6. 400 `#a8a29e`
7. 500 `#78716c`
8. 600 `#57534e`
9. 700 `#44403c`
10. 800 `#292524`
11. 900 `#1c1917`
12. 950 `#110f0e`

### Hues

`red`

1. 25 `#fff9f9`
2. 50 `#fef2f2`
3. 100 `#fee2e2`
4. 200 `#fecaca`
5. 300 `#fca5a5`
6. 400 `#f87171`
7. 500 `#ef4444`
8. 600 `#dc2626`
9. 700 `#b91c1c`
10. 800 `#991b1b`
11. 900 `#7f1d1d`
12. 950 `#4c1111`

`rose`

1. 25 `#fff8f9`
2. 50 `#fff1f2`
3. 100 `#ffe4e6`
4. 200 `#fecdd3`
5. 300 `#fda4af`
6. 400 `#fb7185`
7. 500 `#f43f5e`
8. 600 `#e11d48`
9. 700 `#be123c`
10. 800 `#9f1239`
11. 900 `#881337`
12. 950 `#520b21`

`pink`

1. 25 `#fef9fb`
2. 50 `#fdf2f8`
3. 100 `#fce7f3`
4. 200 `#fbcfe8`
5. 300 `#f9a8d4`
6. 400 `#f472b6`
7. 500 `#ec4899`
8. 600 `#db2777`
9. 700 `#be185d`
10. 800 `#9d174d`
11. 900 `#831843`
12. 950 `#4f0e28`

`fuschia`

1. 25 `#fef9ff`
2. 50 `#fdf4ff`
3. 100 `#fae8ff`
4. 200 `#f5d0fe`
5. 300 `#f0abfc`
6. 400 `#e879f9`
7. 500 `#d946ef`
8. 600 `#c026d3`
9. 700 `#a21caf`
10. 800 `#86198f`
11. 900 `#701a75`
12. 950 `#431046`

`purple`

1. 25 `#fdfaff`
2. 50 `#faf5ff`
3. 100 `#f3e8ff`
4. 200 `#e9d5ff`
5. 300 `#d8b4fe`
6. 400 `#c084fc`
7. 500 `#a855f7`
8. 600 `#9333ea`
9. 700 `#7e22ce`
10. 800 `#6b21a8`
11. 900 `#581c87`
12. 950 `#351151`

`violet`

1. 25 `#faf9ff`
2. 50 `#f5f3ff`
3. 100 `#ede9fe`
4. 200 `#ddd6fe`
5. 300 `#c4b5fd`
6. 400 `#a78bfa`
7. 500 `#8b5cf6`
8. 600 `#7c3aed`
9. 700 `#6d28d9`
10. 800 `#5b21b6`
11. 900 `#4c1d95`
12. 950 `#2e1159`

`indigo`

1. 25 `#f7f9ff`
2. 50 `#eef2ff`
3. 100 `#e0e7ff`
4. 200 `#c7d2fe`
5. 300 `#a5b4fc`
6. 400 `#818cf8`
7. 500 `#6366f1`
8. 600 `#4f46e5`
9. 700 `#4338ca`
10. 800 `#3730a3`
11. 900 `#312e81`
12. 950 `#1d1c4d`

`blue`

1. 25 `#f7fbff`
2. 50 `#eff6ff`
3. 100 `#dbeafe`
4. 200 `#bfdbfe`
5. 300 `#93c5fd`
6. 400 `#60a5fa`
7. 500 `#3b82f6`
8. 600 `#2563eb`
9. 700 `#1d4ed8`
10. 800 `#1e40af`
11. 900 `#1e3a8a`
12. 950 `#122353`

`light-blue`

1. 25 `#f7fcff`
2. 50 `#f0f9ff`
3. 100 `#e0f2fe`
4. 200 `#bae6fd`
5. 300 `#7dd3fc`
6. 400 `#38bdf8`
7. 500 `#0ea5e9`
8. 600 `#0284c7`
9. 700 `#0369a1`
10. 800 `#075985`
11. 900 `#0c4a6e`
12. 950 `#072c42`

`cyan`

1. 25 `#f5ffff`
2. 50 `#ecfeff`
3. 100 `#cffafe`
4. 200 `#a5f3fc`
5. 300 `#67e8f9`
6. 400 `#22d3ee`
7. 500 `#06b6d4`
8. 600 `#0891b2`
9. 700 `#0e7490`
10. 800 `#155e75`
11. 900 `#164e63`
12. 950 `#0d2f3b`

`teal`

1. 25 `#f7fefd`
2. 50 `#f0fdfa`
3. 100 `#ccfbf1`
4. 200 `#99f6e4`
5. 300 `#5eead4`
6. 400 `#2dd4bf`
7. 500 `#14b8a6`
8. 600 `#0d9488`
9. 700 `#0f766e`
10. 800 `#115e59`
11. 900 `#134e4a`
12. 950 `#0b2f2c`

`emerald`

1. 25 `#f5fefa`
2. 50 `#ecfdf5`
3. 100 `#d1fae5`
4. 200 `#a7f3d0`
5. 300 `#6ee7b7`
6. 400 `#34d399`
7. 500 `#10b981`
8. 600 `#059669`
9. 700 `#047857`
10. 800 `#065f46`
11. 900 `#064e3b`
12. 950 `#042f23`

`green`

1. 25 `#f7fef9`
2. 50 `#f0fdf4`
3. 100 `#dcfce7`
4. 200 `#baf7d0`
5. 300 `#85efab`
6. 400 `#49de80`
7. 500 `#22c55d`
8. 600 `#16a34a`
9. 700 `#15803d`
10. 800 `#166534`
11. 900 `#14532d`
12. 950 `#0c321b`

`lime`

1. 25 `#fbfff3`
2. 50 `#f7fee7`
3. 100 `#ecfccb`
4. 200 `#d9f99d`
5. 300 `#bef264`
6. 400 `#a3e635`
7. 500 `#84cc16`
8. 600 `#65a30d`
9. 700 `#4d7c0f`
10. 800 `#3f6212`
11. 900 `#365314`
12. 950 `#20320c`

`yellow`

1. 25 `#fffdf3`
2. 50 `#fefce8`
3. 100 `#fef9c3`
4. 200 `#fef08a`
5. 300 `#fde047`
6. 400 `#facc15`
7. 500 `#eab308`
8. 600 `#ca8a04`
9. 700 `#a16207`
10. 800 `#854d0e`
11. 900 `#713f12`
12. 950 `#44260b`

`amber`

1. 25 `#fffdf5`
2. 50 `#fffbeb`
3. 100 `#fef3c7`
4. 200 `#fde68a`
5. 300 `#fcd34d`
6. 400 `#fbbf24`
7. 500 `#f59e0b`
8. 600 `#d97706`
9. 700 `#b45309`
10. 800 `#92400e`
11. 900 `#78350f`
12. 950 `#482009`

`orange`

1. 25 `#fffbf6`
2. 50 `#fff7ed`
3. 100 `#ffedd5`
4. 200 `#fed7aa`
5. 300 `#fdba74`
6. 400 `#fb923c`
7. 500 `#f97316`
8. 600 `#ea580c`
9. 700 `#c2410c`
10. 800 `#9a3412`
11. 900 `#7c2d12`
12. 950 `#4a1b0b`

### Alpha

`alpha-black`

1. 5 `#0000000d`
2. 10 `#0000001a`
3. 20 `#00000033`
4. 30 `#0000004d`
5. 40 `#00000066`
6. 50 `#00000080`
7. 60 `#00000099`
8. 70 `#000000b2`
9. 80 `#000000cc`
10. 90 `#000000e5`

`alpha-white`

1. 5 `#ffffff0d`
2. 10 `#ffffff1a`
3. 20 `#ffffff33`
4. 30 `#ffffff4d`
5. 40 `#ffffff66`
6. 50 `#ffffff80`
7. 60 `#ffffff99`
8. 70 `#ffffffb2`
9. 80 `#ffffffcc`
10. 90 `#ffffffe5`

---
All Atomus docs for agents: https://docs.atomus.io/llms.txt