Design tokens
Summary
Neura's design tokens are CSS custom properties defined on
:root (in src/css/_tokens.scss). They
are the single styling contract of the library: every component reads
them, themes override them, and your
own CSS may use them to stay palette-consistent with whatever
theme is active. The layout, spacing, and status values were
translated 1:1 from AUI 5.4's variables at parity; the brand
colors were rebranded to Neura's own indigo in 0.2.
Using tokens
Read a token anywhere with var(...):
.my-callout {
border-inline-start: 3px solid var(--neura-color-primary);
background: var(--neura-color-faint);
border-radius: var(--neura-border-radius);
}
Override a token on any subtree. Custom properties cascade, so
every Neura component (and any of your own CSS reading the
token) inside that subtree follows:
[data-my-area] {
--neura-color-link: #b91c1c;
}
Reference
The complete token surface, grouped as in
src/css/_tokens.scss. The Value
column shows the default (Neura indigo) value as written in the
file; the swatches render through var(...), so they
always show the active palette. Switch themes on the
Theming page and the brand swatches
below recolor live.
Brand - Neura indigo
| Token | Value | Swatch / Notes |
|---|
--neura-color-primary | #3f3d9c | 8.9:1 on white (WCAG) |
--neura-color-hero | #6665e6 | |
--neura-color-focus | #5655c4 | Focus rings |
--neura-color-link | #5655c4 | 6.0:1 on white (WCAG) |
--neura-color-link-visited | #7b4cb0 | |
Brand - primary button surface
The gradient, hover, and disabled stops of
.neura-button-primary. Hand-tuned indigo shades
mirroring the lightness relationships of AUI's original blues.
| Token | Value | Swatch / Notes |
|---|
--neura-button-primary-bg-top | #6665e6 | Gradient top stop |
--neura-button-primary-bg-bottom | #5655c4 | Gradient bottom stop |
--neura-button-primary-border | #3d36a3 | |
--neura-button-primary-hover-top | #7b7ff4 | Hover gradient top |
--neura-button-primary-hover-bottom | #4946b3 | Hover gradient bottom |
--neura-button-primary-active | #4946b3 | Pressed state |
--neura-button-primary-disabled-top | #ccd1f9 | Disabled gradient top |
--neura-button-primary-disabled-bottom | #b6bdf1 | Disabled gradient bottom |
--neura-button-primary-disabled-border | #7b7ff4 | |
--neura-button-primary-text-shadow | #3d36a3 | |
Brand - header chrome
| Token | Value | Swatch / Notes |
|---|
--neura-header-border | #2f2886 | Bottom border of the app header |
Surfaces
| Token | Value | Swatch / Notes |
|---|
--neura-color-page | #fff | Page background |
--neura-color-faint | #f5f5f5 | Subtle fill |
--neura-color-mid | #707070 | Secondary text |
--neura-color-text | #333 | Body text |
--neura-color-highlight-primary | #f5f5f5 | |
--neura-color-highlight-secondary | #e6e6e6 | |
Borders
| Token | Value | Swatch / Notes |
|---|
--neura-border-color | #ccc | |
--neura-border-radius | 3px | Corner radius of buttons, inputs, panels, popovers |
Grid
| Token | Value | Swatch / Notes |
|---|
--neura-grid-unit | 10px | Base spacing unit |
--neura-grid-unit-half | 5px | Half spacing unit |
Status - default
Each status palette carries a bold set (-bg /
-border / -fg) and a subtle set
(-*-subtle) - the pairing lozenges, messages, and
progress components draw from.
| Token | Value | Swatch / Notes |
|---|
--neura-color-status-default-bg | #ccc | |
--neura-color-status-default-border | #ccc | |
--neura-color-status-default-fg | #333 | |
--neura-color-status-default-bg-subtle | #fff | |
--neura-color-status-default-border-subtle | #ccc | |
--neura-color-status-default-fg-subtle | #333 | |
Status - success
| Token | Value | Swatch / Notes |
|---|
--neura-color-status-success-bg | #14892c | |
--neura-color-status-success-border | #14892c | |
--neura-color-status-success-fg | #fff | |
--neura-color-status-success-bg-subtle | #fff | |
--neura-color-status-success-border-subtle | #b2d8b9 | |
--neura-color-status-success-fg-subtle | #14892c | |
Status - error
| Token | Value | Swatch / Notes |
|---|
--neura-color-status-error-bg | #d04437 | |
--neura-color-status-error-border | #d04437 | |
--neura-color-status-error-fg | #fff | |
--neura-color-status-error-bg-subtle | #fff | |
--neura-color-status-error-border-subtle | #f8d3d1 | |
--neura-color-status-error-fg-subtle | #d04437 | |
Status - current (in progress / warning)
| Token | Value | Swatch / Notes |
|---|
--neura-color-status-current-bg | #ffd351 | |
--neura-color-status-current-border | #ffd351 | |
--neura-color-status-current-fg | #594300 | |
--neura-color-status-current-bg-subtle | #fff | |
--neura-color-status-current-border-subtle | #ffe28c | |
--neura-color-status-current-fg-subtle | #594300 | |
Status - complete
| Token | Value | Swatch / Notes |
|---|
--neura-color-status-complete-bg | #4a6785 | |
--neura-color-status-complete-border | #4a6785 | |
--neura-color-status-complete-fg | #fff | |
--neura-color-status-complete-bg-subtle | #fff | |
--neura-color-status-complete-border-subtle | #e4e8ed | |
--neura-color-status-complete-fg-subtle | #4a6785 | |
Status - moved
| Token | Value | Swatch / Notes |
|---|
--neura-color-status-moved-bg | #815b3a | |
--neura-color-status-moved-border | #815b3a | |
--neura-color-status-moved-fg | #fff | |
--neura-color-status-moved-bg-subtle | #fff | |
--neura-color-status-moved-border-subtle | #ece7e2 | |
--neura-color-status-moved-fg-subtle | #815b3a | |
The theming surface
The built-in themes (src/css/_themes.scss) override
exactly the sixteen brand tokens (the three
groups at the top of the reference):
--neura-color-primary, --neura-color-hero,
--neura-color-focus, --neura-color-link,
--neura-color-link-visited, the ten
--neura-button-primary-* stops, and
--neura-header-border. That set is the theming
surface: a custom palette supplies those and nothing else.
Surfaces, borders, grid, and the status palettes are theme-neutral
- every theme leaves them untouched.
See the Theming page for the built-in
palettes (including legacy, the exact AUI 5.4
Atlassian palette), the data-neura-theme attribute,
the Neura.theme() API, and the custom-theme recipe.