Color
Aura’s 12-step accent and gray scales, alpha variants, status pairs, and the semantic tokens that point at them.
Color in Aura is two 12-step scales — accent and gray — plus alpha twins and a short list of semantic names. Components consume the tokens. Hex samples in this page are the values shipped in packages/registry/styles/globals.css and the theme switcher defaults. They are a theme, not a license to hard-code a swatch in a component.
@shadcn/lint rule shadcn/no-raw-colors rejects raw palette classes (bg-pink-500 and similar) when a token exists.
Step roles
The same step means the same job in light and dark. Only the hex changes.
| Step | Use |
|---|---|
| 1–2 | App background, cards, sidebars, canvas |
| 3 | Default UI fill |
| 4 | Hover fill |
| 5 | Active or selected fill |
| 6 | Subtle borders, separators, headers |
| 7 | Interactive borders |
| 8 | Strong borders and focus rings |
| 9 | Solid brand surfaces |
| 10 | Hover on a step-9 surface |
| 11 | Secondary text |
| 12 | Primary text and headings |
On a transparent default, hover may use step 3. --primary maps to --accent-9. Text on that fill uses --primary-foreground, which aliases --accent-contrast.
Steps 11 and 12 are chosen so APCA Lc 60 and Lc 90 hold on a step 2 background.
Shipped accent scale
Light lives on :root. Dark lives in @media (prefers-color-scheme: dark) on :root:not(.light) and on .dark. Step 9 is #4015ca in both schemes. See Theming.
Light:
| Token | Value |
|---|---|
--accent-1 | #fdfdff |
--accent-2 | #f7f8ff |
--accent-3 | #eef1ff |
--accent-4 | #e2e7ff |
--accent-5 | #d5dcff |
--accent-6 | #c5cdff |
--accent-7 | #b0b9ff |
--accent-8 | #939bff |
--accent-9 | #4015ca |
--accent-10 | #3500b6 |
--accent-11 | #5446e1 |
--accent-12 | #272370 |
--accent-contrast | #fff |
--accent-surface | #f5f6ffcc |
--accent-indicator, --accent-track | #4015ca |
Dark (Somos Gente Digital scale, #30a written as #3300aa):
| Token | Value |
|---|---|
--accent-1 | #0b0c22 |
--accent-2 | #121331 |
--accent-3 | #1e1167 |
--accent-4 | #2b0096 |
--accent-5 | #3300aa |
--accent-6 | #3b18bb |
--accent-7 | #4626d4 |
--accent-8 | #542bfd |
--accent-9 | #4015ca |
--accent-10 | #3400ab |
--accent-11 | #a3acff |
--accent-12 | #d9dfff |
--accent-surface | #15175280 |
--accent-indicator, --accent-track | #4015ca |
Alpha steps --accent-a1 through --accent-a12 are defined beside the solid scale in the same file. Tailwind reads them as accent-1 … accent-a12 through the @theme inline color mappings (--color-accent-9: var(--accent-9), and the same pattern for every step).
Semantic aliases in that file:
--primary: var(--accent-9);
--primary-foreground: var(--accent-contrast);
--secundary: var(--accent-8);
--secundary-foreground: var(--accent-contrast);The token is spelled --secundary in source. --aura-accents-primary and --aura-accents-secondary both point at --accent-9. --aura-bg is --gray-1. --aura-text-primary is --accent-12 in this theme file.
ThemeColorSwitcher Aura seeds are accent #4015ca and gray #7254cb in both modes. Derived canvases are #faf9ff (light) and #120e20 (dark). The switcher generates a scale with generateRadixColors and stores both modes under aura-theme-colors. The shipped dark scale in globals.css is the Somos Gente Digital ramp, not a fresh generator pass. Production components still read the CSS variables, not those seeds.
Shipped gray scale
Light (:root):
| Token | Value |
|---|---|
--gray-1 | #fcfaff |
--gray-2 | #f9f6ff |
--gray-3 | #f0ecff |
--gray-4 | #e8e2ff |
--gray-5 | #e0daff |
--gray-6 | #d9d1ff |
--gray-7 | #cfc4ff |
--gray-8 | #bcabff |
--gray-9 | #936cff |
--gray-10 | #8863f2 |
--gray-11 | #6949bf |
--gray-12 | #27005f |
Dark (prefers-color-scheme: dark and .dark):
| Token | Value |
|---|---|
--gray-1 | #100b21 |
--gray-2 | #19152b |
--gray-3 | #231d3c |
--gray-4 | #2b214d |
--gray-5 | #33265c |
--gray-6 | #3c2d6c |
--gray-7 | #4a3786 |
--gray-8 | #6548b6 |
--gray-9 | #7254cb |
--gray-10 | #7f63d9 |
--gray-11 | #b5a2ff |
--gray-12 | #eeecff |
--gray-contrast is #ffffff in both schemes. Light --gray-surface is #ffffffcc. Dark --gray-surface is rgba(0, 0, 0, 0.05). --gray-indicator and --gray-track follow step 9 (#936cff light, #7254cb dark). Alpha steps sit next to the solid scale. --ecru is #debc7a and paints ::selection. Chart series are --chart-1 through --chart-5. Light --chart-1 is --accent-9. Dark --chart-1 is --accent-11 so the series clears 3:1 on gray-1. --chart-2 through --chart-5 follow the status contrast tokens.
Body copy uses the gray scale. DESIGN.md tells you to reach for gray-12 and leave pure #000 out of text.
Status pairs
@theme inline in globals.css:
| Role | Surface | Contrast |
|---|---|---|
| Info | --info: #e8ebfe | --info-contrast: #0927ec |
| Success | --success: #e8fef7 | --success-contrast: #045d3c |
| Danger | --danger: #feefe8 | --danger-contrast: #8e3106 |
| Warning | --warning: #fefbe8 | --warning-contrast: #5d5104 |
.dark overrides those four pairs (info #0D2157 / #8CB4FF, success #0B2E1E / #67CF9D, danger #3C1405 / #FF9469, warning #2A2402 / #EFE08E).
Stylus still paints status through older names. packages/styled-system/src/tokens/_root.styl sets --aura-accents-success: #045D3C, --aura-accents-info: #0927EC, --aura-accents-danger: #8E3106, and a warning darkened from yellow. fundations/_colors.styl loops warning, info, danger, and success into .{state} background classes. The compiled main.css still emits .warning, .info, .danger, .success against --aura-accents-*-bg.
Related
- Aura skill
- Theming
- Taste
- Lint
packages/registry/styles/globals.csspackages/registry/registry/default/components/ThemeColorSwitcher.tsx