Semantic colors
The Reva theme — intent roles that reference the foundation palettes, mapped across light and dark modes side by side.
Semantic colours are the roles components actually consume. Each one references a foundation stop rather than hard-coding a colour, and is defined for both modes in two files that share an identical key tree — light neutrals point at brass, dark neutrals at olive. Components flip automatically through the :root / .dark cascade; there are no dark: overrides.
Every table below shows the light and dark resolution side by side, with each swatch composited over its own mode's canvas so translucent tints read truthfully.
lightAccent
Portfolio balance
Updated moments ago
PrimarySecondary
ErrorSuccessWarningInfo
Search clients…
darkAccent
Portfolio balance
Updated moments ago
PrimarySecondary
ErrorSuccessWarningInfo
Search clients…
Backgrounds
Named, role-specific surfaces you assign directly — the opaque canvas base, the translucent card, the editable input well, and the floating popover / modal / tooltip panels.
| Token | Utility | Light | Dark |
|---|---|---|---|
bg.canvas --canvas | bg-canvas | brass.50 99% 0.0102 91.56 | olive.900 22.8% 0.013 107.4 |
bg.card --card | bg-card | brass.alpha.a8 65.05% 0.1018 91.56 / 0.08 | white.alpha.a8 100% 0 0 / 0.08 |
bg.input --input | bg-input | white.solid 100% 0 0 | olive.750 33.98% 0.0193 107.36 |
bg.popover --popover | bg-popover | brass.50 99% 0.0102 91.56 | olive.900 22.8% 0.013 107.4 |
bg.modal --modal | bg-modal | brass.50 99% 0.0102 91.56 | olive.800 28.6% 0.016 107.4 |
bg.tooltip --tooltip | bg-tooltip | olive.900 22.8% 0.013 107.4 | olive.100 96.6% 0.005 106.5 |
Surfaces
The elevation ramp for nesting and hover lifts: faint → subtle → muted → default → emphasized, each in a translucent finish (default). faint has no -solid sibling — its opaque equivalent is the canvas (bg-canvas). The other steps also have opaque -solid siblings for fills that must read at a fixed value regardless of background.
| Token | Utility | Light | Dark |
|---|---|---|---|
surface.faint --faint | bg-faint | brass.alpha.a4 65.05% 0.1018 91.56 / 0.04 | white.alpha.a4 100% 0 0 / 0.04 |
surface.subtle --subtle | bg-subtle | brass.alpha.a6 65.05% 0.1018 91.56 / 0.06 | white.alpha.a6 100% 0 0 / 0.06 |
surface.muted --muted | bg-muted | brass.alpha.a10 65.05% 0.1018 91.56 / 0.1 | white.alpha.a10 100% 0 0 / 0.1 |
surface.default --default | bg-default | brass.alpha.a15 65.05% 0.1018 91.56 / 0.15 | white.alpha.a15 100% 0 0 / 0.15 |
surface.emphasized --emphasized | bg-emphasized | brass.alpha.a20 65.05% 0.1018 91.56 / 0.2 | white.alpha.a20 100% 0 0 / 0.2 |
surface.subtle-solid --subtle-solid | bg-subtle-solid | brass.100 97.06% 0.0174 91.56 | olive.850 25.71% 0.0144 107.35 |
surface.muted-solid --muted-solid | bg-muted-solid | brass.150 94.99% 0.025 91.56 | olive.800 28.6% 0.016 107.4 |
surface.default-solid --default-solid | bg-default-solid | brass.200 92.77% 0.0328 91.56 | olive.750 33.98% 0.0193 107.36 |
surface.emphasized-solid --emphasized-solid | bg-emphasized-solid | brass.250 90.35% 0.0411 91.56 | olive.700 39.4% 0.023 107.4 |
Foreground
Text and icon ink. fg is alpha-ink — black-alpha rungs in light, white-alpha in dark — so type composites over and picks up the warmth of the canvas. The nested onSolid scale is the ink used on saturated solid intent fills.
| Token | Utility | Light | Dark |
|---|---|---|---|
fg.default --fg-default | text-fg-default | black.alpha.a80 0% 0 0 / 0.8 | white.alpha.a90 100% 0 0 / 0.9 |
fg.muted --fg-muted | text-fg-muted | black.alpha.a50 0% 0 0 / 0.5 | white.alpha.a50 100% 0 0 / 0.5 |
fg.subtle --fg-subtle | text-fg-subtle | black.alpha.a30 0% 0 0 / 0.3 | white.alpha.a30 100% 0 0 / 0.3 |
fg.placeholder --fg-placeholder | text-fg-placeholder | black.alpha.a40 0% 0 0 / 0.4 | white.alpha.a40 100% 0 0 / 0.4 |
fg.disabled --fg-disabled | text-fg-disabled | black.alpha.a30 0% 0 0 / 0.3 | white.alpha.a30 100% 0 0 / 0.3 |
fg.link --fg-link | text-fg-link | amber.600 58.54% 0.1429 48.11 | amber.500 71.96% 0.1692 58.57 |
fg.inverted --fg-inverted | text-fg-inverted | white.alpha.a90 100% 0 0 / 0.9 | black.alpha.a80 0% 0 0 / 0.8 |
fg.onSolid.default --fg-onSolid-default | text-fg-onSolid-default | white.solid 100% 0 0 | white.solid 100% 0 0 |
fg.onSolid.muted --fg-onSolid-muted | text-fg-onSolid-muted | white.alpha.a60 100% 0 0 / 0.6 | white.alpha.a60 100% 0 0 / 0.6 |
fg.onSolid.subtle --fg-onSolid-subtle | text-fg-onSolid-subtle | white.alpha.a40 100% 0 0 / 0.4 | white.alpha.a40 100% 0 0 / 0.4 |
fg.onSolid.placeholder --fg-onSolid-placeholder | text-fg-onSolid-placeholder | white.alpha.a30 100% 0 0 / 0.3 | white.alpha.a30 100% 0 0 / 0.3 |
fg.onSolid.disabled --fg-onSolid-disabled | text-fg-onSolid-disabled | white.alpha.a30 100% 0 0 / 0.3 | white.alpha.a30 100% 0 0 / 0.3 |
Borders
Solid brass / olive stops for crisp corners, plus the translucent separator, and the two global rings: focus (gold) and error (mulberry).
| Token | Utility | Light | Dark |
|---|---|---|---|
border.default --border-default | border-border-default | brass.200 92.77% 0.0328 91.56 | olive.700 39.4% 0.023 107.4 |
border.subtle --border-subtle | border-border-subtle | brass.150 94.99% 0.025 91.56 | olive.750 33.98% 0.0193 107.36 |
border.emphasized --border-emphasized | border-border-emphasized | brass.250 90.35% 0.0411 91.56 | olive.650 42.99% 0.0238 107.34 |
border.separator --border-separator | border-border-separator | brass.alpha.a10 65.05% 0.1018 91.56 / 0.1 | white.alpha.a10 100% 0 0 / 0.1 |
border.focus --border-focus | ring-border-focus | gold.alpha.a50 75.77% 0.1403 76.72 / 0.5 | gold.alpha.a75 75.77% 0.1403 76.72 / 0.75 |
border.error --border-error | ring-border-error | mulberry.500 56.55% 0.1528 18.00 | mulberry.400 71.19% 0.1005 18.00 |
Overlay
The modal scrim — black-alpha rungs in both modes.
| Token | Utility | Light | Dark |
|---|---|---|---|
overlay.default --overlay-default | bg-overlay-default | black.alpha.a60 0% 0 0 / 0.6 | black.alpha.a60 0% 0 0 / 0.6 |
overlay.muted --overlay-muted | bg-overlay-muted | black.alpha.a40 0% 0 0 / 0.4 | black.alpha.a40 0% 0 0 / 0.4 |
overlay.subtle --overlay-subtle | bg-overlay-subtle | black.alpha.a30 0% 0 0 / 0.3 | black.alpha.a30 0% 0 0 / 0.3 |
Intents
primary
accent
neutral
destructive
constructive
warning
caution
info
Eight intents, each carrying an identical sub-shape so a neutral variant is expressed exactly like a destructive or primary one:
| Sub-shape | What it is | Utility |
|---|---|---|
solid | The intent colour — saturated fills, dots | bg-primary-solid |
translucent/{faint…strong} | Six-rung alpha ladder; tints composite over whatever surface they sit on | bg-primary-subtle |
opaque/{faint…strong} | Matching six-rung solid-stop ladder — fixed value regardless of background | bg-primary-subtle-solid |
fg/{default,highContrast,onSolid} | Intent ink — tinted-surface text, a stronger step for small text and hover, and ink on the solid fill | text-primary-fg-default |
border | The intent border stop | border-primary-border |
Each intent below resolves the full sub-shape across light and dark.
Primary
| Token | Utility | Light | Dark |
|---|---|---|---|
primary.solid --primary-solid | bg-primary-solid | amber.600 58.54% 0.1429 48.11 | amber.500 71.96% 0.1692 58.57 |
primary.translucent.faint --primary-faint | bg-primary-faint | amber.alpha.a6 71.96% 0.1692 58.57 / 0.06 | amber.alpha.a10 71.96% 0.1692 58.57 / 0.1 |
primary.translucent.subtle --primary-subtle | bg-primary-subtle | amber.alpha.a10 71.96% 0.1692 58.57 / 0.1 | amber.alpha.a20 71.96% 0.1692 58.57 / 0.2 |
primary.translucent.muted --primary-muted | bg-primary-muted | amber.alpha.a15 71.96% 0.1692 58.57 / 0.15 | amber.alpha.a30 71.96% 0.1692 58.57 / 0.3 |
primary.translucent.default --primary-default | bg-primary-default | amber.alpha.a20 71.96% 0.1692 58.57 / 0.2 | amber.alpha.a35 71.96% 0.1692 58.57 / 0.35 |
primary.translucent.emphasized --primary-emphasized | bg-primary-emphasized | amber.alpha.a30 71.96% 0.1692 58.57 / 0.3 | amber.alpha.a45 71.96% 0.1692 58.57 / 0.45 |
primary.translucent.strong --primary-strong | bg-primary-strong | amber.alpha.a45 71.96% 0.1692 58.57 / 0.45 | amber.alpha.a60 71.96% 0.1692 58.57 / 0.6 |
primary.opaque.faint --primary-faint-solid | bg-primary-faint-solid | amber.50 99% 0.0135 73.57 | amber.950 20% 0.0508 28.57 |
primary.opaque.subtle --primary-subtle-solid | bg-primary-subtle-solid | amber.100 96.28% 0.0275 72.39 | amber.900 25.23% 0.0639 30.95 |
primary.opaque.muted --primary-muted-solid | bg-primary-muted-solid | amber.150 93.53% 0.0419 71.15 | amber.850 30.52% 0.0771 33.41 |
primary.opaque.default --primary-default-solid | bg-primary-default-solid | amber.200 90.73% 0.0567 69.87 | amber.800 35.89% 0.0902 35.99 |
primary.opaque.emphasized --primary-emphasized-solid | bg-primary-emphasized-solid | amber.300 84.99% 0.0878 67.08 | amber.700 46.92% 0.1166 41.57 |
primary.opaque.strong --primary-strong-solid | bg-primary-strong-solid | amber.400 78.95% 0.1225 63.81 | amber.600 58.54% 0.1429 48.11 |
primary.fg.default --primary-fg-default | text-primary-fg-default | amber.600 58.54% 0.1429 48.11 | amber.300 84.99% 0.0878 67.08 |
primary.fg.highContrast --primary-fg-highContrast | text-primary-fg-highContrast | amber.700 46.92% 0.1166 41.57 | amber.200 90.73% 0.0567 69.87 |
primary.fg.onSolid --primary-fg-onSolid | text-primary-fg-onSolid | amber.50 99% 0.0135 73.57 | amber.950 20% 0.0508 28.57 |
primary.border --primary-border | border-primary-border | amber.200 90.73% 0.0567 69.87 | amber.800 35.89% 0.0902 35.99 |
Accent
| Token | Utility | Light | Dark |
|---|---|---|---|
accent.solid --accent-solid | bg-accent-solid | gold.500 75.77% 0.1403 76.72 | gold.500 75.77% 0.1403 76.72 |
accent.translucent.faint --accent-faint | bg-accent-faint | gold.alpha.a6 75.77% 0.1403 76.72 / 0.06 | gold.alpha.a10 75.77% 0.1403 76.72 / 0.1 |
accent.translucent.subtle --accent-subtle | bg-accent-subtle | gold.alpha.a10 75.77% 0.1403 76.72 / 0.1 | gold.alpha.a20 75.77% 0.1403 76.72 / 0.2 |
accent.translucent.muted --accent-muted | bg-accent-muted | gold.alpha.a15 75.77% 0.1403 76.72 / 0.15 | gold.alpha.a30 75.77% 0.1403 76.72 / 0.3 |
accent.translucent.default --accent-default | bg-accent-default | gold.alpha.a20 75.77% 0.1403 76.72 / 0.2 | gold.alpha.a35 75.77% 0.1403 76.72 / 0.35 |
accent.translucent.emphasized --accent-emphasized | bg-accent-emphasized | gold.alpha.a30 75.77% 0.1403 76.72 / 0.3 | gold.alpha.a45 75.77% 0.1403 76.72 / 0.45 |
accent.translucent.strong --accent-strong | bg-accent-strong | gold.alpha.a45 75.77% 0.1403 76.72 / 0.45 | gold.alpha.a60 75.77% 0.1403 76.72 / 0.6 |
accent.opaque.faint --accent-faint-solid | bg-accent-faint-solid | gold.50 99.30% 0.0070 76.72 | gold.950 20.00% 0.0561 71.72 |
accent.opaque.subtle --accent-subtle-solid | bg-accent-subtle-solid | gold.100 97.18% 0.0176 76.72 | gold.900 25.01% 0.0628 72.17 |
accent.opaque.muted --accent-muted-solid | bg-accent-muted-solid | gold.150 95.01% 0.0285 76.72 | gold.850 30.16% 0.0697 72.63 |
accent.opaque.default --accent-default-solid | bg-accent-default-solid | gold.200 92.78% 0.0399 76.72 | gold.800 35.45% 0.0769 73.10 |
accent.opaque.emphasized --accent-emphasized-solid | bg-accent-emphasized-solid | gold.300 88.07% 0.0647 76.72 | gold.700 46.62% 0.0926 74.11 |
accent.opaque.strong --accent-strong-solid | bg-accent-strong-solid | gold.400 82.83% 0.0938 76.72 | gold.600 59.03% 0.1109 75.22 |
accent.fg.default --accent-fg-default | text-accent-fg-default | gold.600 59.03% 0.1109 75.22 | gold.300 88.07% 0.0647 76.72 |
accent.fg.highContrast --accent-fg-highContrast | text-accent-fg-highContrast | gold.700 46.62% 0.0926 74.11 | gold.200 92.78% 0.0399 76.72 |
accent.fg.onSolid --accent-fg-onSolid | text-accent-fg-onSolid | gold.950 20.00% 0.0561 71.72 | gold.950 20.00% 0.0561 71.72 |
accent.border --accent-border | border-accent-border | gold.200 92.78% 0.0399 76.72 | gold.800 35.45% 0.0769 73.10 |
Neutral
| Token | Utility | Light | Dark |
|---|---|---|---|
neutral.solid --neutral-solid | bg-neutral-solid | brass.500 65.05% 0.1018 91.56 | olive.300 88% 0.011 106.6 |
neutral.translucent.faint --neutral-faint | bg-neutral-faint | brass.alpha.a6 65.05% 0.1018 91.56 / 0.06 | olive.alpha.a10 58% 0.031 107.3 / 0.1 |
neutral.translucent.subtle --neutral-subtle | bg-neutral-subtle | brass.alpha.a10 65.05% 0.1018 91.56 / 0.1 | olive.alpha.a20 58% 0.031 107.3 / 0.2 |
neutral.translucent.muted --neutral-muted | bg-neutral-muted | brass.alpha.a15 65.05% 0.1018 91.56 / 0.15 | olive.alpha.a30 58% 0.031 107.3 / 0.3 |
neutral.translucent.default --neutral-default | bg-neutral-default | brass.alpha.a20 65.05% 0.1018 91.56 / 0.2 | olive.alpha.a35 58% 0.031 107.3 / 0.35 |
neutral.translucent.emphasized --neutral-emphasized | bg-neutral-emphasized | brass.alpha.a30 65.05% 0.1018 91.56 / 0.3 | olive.alpha.a45 58% 0.031 107.3 / 0.45 |
neutral.translucent.strong --neutral-strong | bg-neutral-strong | brass.alpha.a45 65.05% 0.1018 91.56 / 0.45 | olive.alpha.a60 58% 0.031 107.3 / 0.6 |
neutral.opaque.faint --neutral-faint-solid | bg-neutral-faint-solid | brass.50 99% 0.0102 91.56 | olive.900 22.8% 0.013 107.4 |
neutral.opaque.subtle --neutral-subtle-solid | bg-neutral-subtle-solid | brass.100 97.06% 0.0174 91.56 | olive.850 25.71% 0.0144 107.35 |
neutral.opaque.muted --neutral-muted-solid | bg-neutral-muted-solid | brass.150 94.99% 0.025 91.56 | olive.800 28.6% 0.016 107.4 |
neutral.opaque.default --neutral-default-solid | bg-neutral-default-solid | brass.200 92.77% 0.0328 91.56 | olive.750 33.98% 0.0193 107.36 |
neutral.opaque.emphasized --neutral-emphasized-solid | bg-neutral-emphasized-solid | brass.300 87.68% 0.0499 91.56 | olive.700 39.4% 0.023 107.4 |
neutral.opaque.strong --neutral-strong-solid | bg-neutral-strong-solid | brass.400 81.05% 0.0699 91.56 | olive.600 46.6% 0.025 107.3 |
neutral.fg.default --neutral-fg-default | text-neutral-fg-default | brass.600 46.37% 0.0826 91.56 | brass.300 87.68% 0.0499 91.56 |
neutral.fg.highContrast --neutral-fg-highContrast | text-neutral-fg-highContrast | brass.700 36.74% 0.0634 91.56 | brass.200 92.77% 0.0328 91.56 |
neutral.fg.onSolid --neutral-fg-onSolid | text-neutral-fg-onSolid | white.solid 100% 0 0 | olive.950 15.3% 0.006 107.1 |
neutral.border --neutral-border | border-neutral-border | brass.200 92.77% 0.0328 91.56 | olive.700 39.4% 0.023 107.4 |
Destructive
| Token | Utility | Light | Dark |
|---|---|---|---|
destructive.solid --destructive-solid | bg-destructive-solid | mulberry.500 56.55% 0.1528 18.00 | mulberry.500 56.55% 0.1528 18.00 |
destructive.translucent.faint --destructive-faint | bg-destructive-faint | mulberry.alpha.a6 56.55% 0.1528 18.00 / 0.06 | mulberry.alpha.a10 56.55% 0.1528 18.00 / 0.1 |
destructive.translucent.subtle --destructive-subtle | bg-destructive-subtle | mulberry.alpha.a10 56.55% 0.1528 18.00 / 0.1 | mulberry.alpha.a20 56.55% 0.1528 18.00 / 0.2 |
destructive.translucent.muted --destructive-muted | bg-destructive-muted | mulberry.alpha.a15 56.55% 0.1528 18.00 / 0.15 | mulberry.alpha.a30 56.55% 0.1528 18.00 / 0.3 |
destructive.translucent.default --destructive-default | bg-destructive-default | mulberry.alpha.a20 56.55% 0.1528 18.00 / 0.2 | mulberry.alpha.a35 56.55% 0.1528 18.00 / 0.35 |
destructive.translucent.emphasized --destructive-emphasized | bg-destructive-emphasized | mulberry.alpha.a30 56.55% 0.1528 18.00 / 0.3 | mulberry.alpha.a45 56.55% 0.1528 18.00 / 0.45 |
destructive.translucent.strong --destructive-strong | bg-destructive-strong | mulberry.alpha.a45 56.55% 0.1528 18.00 / 0.45 | mulberry.alpha.a60 56.55% 0.1528 18.00 / 0.6 |
destructive.opaque.faint --destructive-faint-solid | bg-destructive-faint-solid | mulberry.50 98.50% 0.0031 18.00 | mulberry.950 18.00% 0.0229 18.00 |
destructive.opaque.subtle --destructive-subtle-solid | bg-destructive-subtle-solid | mulberry.100 95.18% 0.0149 18.00 | mulberry.900 21.05% 0.0332 18.00 |
destructive.opaque.muted --destructive-muted-solid | bg-destructive-muted-solid | mulberry.150 91.73% 0.0272 18.00 | mulberry.850 24.22% 0.0439 18.00 |
destructive.opaque.default --destructive-default-solid | bg-destructive-default-solid | mulberry.200 88.13% 0.0401 18.00 | mulberry.800 27.53% 0.0550 18.00 |
destructive.opaque.emphasized --destructive-emphasized-solid | bg-destructive-emphasized-solid | mulberry.300 80.33% 0.0679 18.00 | mulberry.700 34.70% 0.0792 18.00 |
destructive.opaque.strong --destructive-strong-solid | bg-destructive-strong-solid | mulberry.400 71.19% 0.1005 18.00 | mulberry.600 43.10% 0.1075 18.00 |
destructive.fg.default --destructive-fg-default | text-destructive-fg-default | mulberry.600 43.10% 0.1075 18.00 | mulberry.300 80.33% 0.0679 18.00 |
destructive.fg.highContrast --destructive-fg-highContrast | text-destructive-fg-highContrast | mulberry.700 34.70% 0.0792 18.00 | mulberry.200 88.13% 0.0401 18.00 |
destructive.fg.onSolid --destructive-fg-onSolid | text-destructive-fg-onSolid | white.solid 100% 0 0 | white.solid 100% 0 0 |
destructive.border --destructive-border | border-destructive-border | mulberry.200 88.13% 0.0401 18.00 | mulberry.800 27.53% 0.0550 18.00 |
Constructive
| Token | Utility | Light | Dark |
|---|---|---|---|
constructive.solid --constructive-solid | bg-constructive-solid | fern.500 67.24% 0.1425 140.74 | fern.500 67.24% 0.1425 140.74 |
constructive.translucent.faint --constructive-faint | bg-constructive-faint | fern.alpha.a6 67.24% 0.1425 140.74 / 0.06 | fern.alpha.a10 67.24% 0.1425 140.74 / 0.1 |
constructive.translucent.subtle --constructive-subtle | bg-constructive-subtle | fern.alpha.a10 67.24% 0.1425 140.74 / 0.1 | fern.alpha.a20 67.24% 0.1425 140.74 / 0.2 |
constructive.translucent.muted --constructive-muted | bg-constructive-muted | fern.alpha.a15 67.24% 0.1425 140.74 / 0.15 | fern.alpha.a30 67.24% 0.1425 140.74 / 0.3 |
constructive.translucent.default --constructive-default | bg-constructive-default | fern.alpha.a20 67.24% 0.1425 140.74 / 0.2 | fern.alpha.a35 67.24% 0.1425 140.74 / 0.35 |
constructive.translucent.emphasized --constructive-emphasized | bg-constructive-emphasized | fern.alpha.a30 67.24% 0.1425 140.74 / 0.3 | fern.alpha.a45 67.24% 0.1425 140.74 / 0.45 |
constructive.translucent.strong --constructive-strong | bg-constructive-strong | fern.alpha.a45 67.24% 0.1425 140.74 / 0.45 | fern.alpha.a60 67.24% 0.1425 140.74 / 0.6 |
constructive.opaque.faint --constructive-faint-solid | bg-constructive-faint-solid | fern.50 98.50% 0.0029 140.74 | fern.950 18.00% 0.0214 140.74 |
constructive.opaque.subtle --constructive-subtle-solid | bg-constructive-subtle-solid | fern.100 96.03% 0.0139 140.74 | fern.900 21.90% 0.0310 140.74 |
constructive.opaque.muted --constructive-muted-solid | bg-constructive-muted-solid | fern.150 93.46% 0.0254 140.74 | fern.850 25.94% 0.0409 140.74 |
constructive.opaque.default --constructive-default-solid | bg-constructive-default-solid | fern.200 90.78% 0.0374 140.74 | fern.800 30.17% 0.0513 140.74 |
constructive.opaque.emphasized --constructive-emphasized-solid | bg-constructive-emphasized-solid | fern.300 84.96% 0.0633 140.74 | fern.700 39.33% 0.0738 140.74 |
constructive.opaque.strong --constructive-strong-solid | bg-constructive-strong-solid | fern.400 78.15% 0.0938 140.74 | fern.600 50.06% 0.1002 140.74 |
constructive.fg.default --constructive-fg-default | text-constructive-fg-default | fern.600 50.06% 0.1002 140.74 | fern.300 84.96% 0.0633 140.74 |
constructive.fg.highContrast --constructive-fg-highContrast | text-constructive-fg-highContrast | fern.700 39.33% 0.0738 140.74 | fern.200 90.78% 0.0374 140.74 |
constructive.fg.onSolid --constructive-fg-onSolid | text-constructive-fg-onSolid | white.solid 100% 0 0 | white.solid 100% 0 0 |
constructive.border --constructive-border | border-constructive-border | fern.200 90.78% 0.0374 140.74 | fern.800 30.17% 0.0513 140.74 |
Warning
| Token | Utility | Light | Dark |
|---|---|---|---|
warning.solid --warning-solid | bg-warning-solid | copper.500 65.78% 0.1363 50.85 | copper.500 65.78% 0.1363 50.85 |
warning.translucent.faint --warning-faint | bg-warning-faint | copper.alpha.a6 65.78% 0.1363 50.85 / 0.06 | copper.alpha.a10 65.78% 0.1363 50.85 / 0.1 |
warning.translucent.subtle --warning-subtle | bg-warning-subtle | copper.alpha.a10 65.78% 0.1363 50.85 / 0.1 | copper.alpha.a20 65.78% 0.1363 50.85 / 0.2 |
warning.translucent.muted --warning-muted | bg-warning-muted | copper.alpha.a15 65.78% 0.1363 50.85 / 0.15 | copper.alpha.a30 65.78% 0.1363 50.85 / 0.3 |
warning.translucent.default --warning-default | bg-warning-default | copper.alpha.a20 65.78% 0.1363 50.85 / 0.2 | copper.alpha.a35 65.78% 0.1363 50.85 / 0.35 |
warning.translucent.emphasized --warning-emphasized | bg-warning-emphasized | copper.alpha.a30 65.78% 0.1363 50.85 / 0.3 | copper.alpha.a45 65.78% 0.1363 50.85 / 0.45 |
warning.translucent.strong --warning-strong | bg-warning-strong | copper.alpha.a45 65.78% 0.1363 50.85 / 0.45 | copper.alpha.a60 65.78% 0.1363 50.85 / 0.6 |
warning.opaque.faint --warning-faint-solid | bg-warning-faint-solid | copper.50 98.61% 0.0034 67.83 | copper.950 18% 0.0208 52.08 |
warning.opaque.subtle --warning-subtle-solid | bg-warning-subtle-solid | copper.100 95.86% 0.0128 48.65 | copper.900 21.75% 0.0296 51.57 |
warning.opaque.muted --warning-muted-solid | bg-warning-muted-solid | copper.150 93.14% 0.0249 49.77 | copper.850 25.74% 0.0386 53.23 |
warning.opaque.default --warning-default-solid | bg-warning-default-solid | copper.200 90.38% 0.0356 49.23 | copper.800 29.89% 0.0495 52.02 |
warning.opaque.emphasized --warning-emphasized-solid | bg-warning-emphasized-solid | copper.300 84.32% 0.061 51.18 | copper.700 38.69% 0.0707 50.2 |
warning.opaque.strong --warning-strong-solid | bg-warning-strong-solid | copper.400 77.32% 0.0902 51.39 | copper.600 49.07% 0.096 51.1 |
warning.fg.default --warning-fg-default | text-warning-fg-default | copper.600 49.07% 0.096 51.1 | copper.300 84.32% 0.061 51.18 |
warning.fg.highContrast --warning-fg-highContrast | text-warning-fg-highContrast | copper.700 38.69% 0.0707 50.2 | copper.200 90.38% 0.0356 49.23 |
warning.fg.onSolid --warning-fg-onSolid | text-warning-fg-onSolid | white.solid 100% 0 0 | white.solid 100% 0 0 |
warning.border --warning-border | border-warning-border | copper.200 90.38% 0.0356 49.23 | copper.800 29.89% 0.0495 52.02 |
Caution
| Token | Utility | Light | Dark |
|---|---|---|---|
caution.solid --caution-solid | bg-caution-solid | sunflower.500 79.52% 0.1617 86.05 | sunflower.500 79.52% 0.1617 86.05 |
caution.translucent.faint --caution-faint | bg-caution-faint | sunflower.alpha.a6 79.52% 0.1617 86.05 / 0.06 | sunflower.alpha.a10 79.52% 0.1617 86.05 / 0.1 |
caution.translucent.subtle --caution-subtle | bg-caution-subtle | sunflower.alpha.a10 79.52% 0.1617 86.05 / 0.1 | sunflower.alpha.a20 79.52% 0.1617 86.05 / 0.2 |
caution.translucent.muted --caution-muted | bg-caution-muted | sunflower.alpha.a15 79.52% 0.1617 86.05 / 0.15 | sunflower.alpha.a30 79.52% 0.1617 86.05 / 0.3 |
caution.translucent.default --caution-default | bg-caution-default | sunflower.alpha.a20 79.52% 0.1617 86.05 / 0.2 | sunflower.alpha.a35 79.52% 0.1617 86.05 / 0.35 |
caution.translucent.emphasized --caution-emphasized | bg-caution-emphasized | sunflower.alpha.a30 79.52% 0.1617 86.05 / 0.3 | sunflower.alpha.a45 79.52% 0.1617 86.05 / 0.45 |
caution.translucent.strong --caution-strong | bg-caution-strong | sunflower.alpha.a45 79.52% 0.1617 86.05 / 0.45 | sunflower.alpha.a60 79.52% 0.1617 86.05 / 0.6 |
caution.opaque.faint --caution-faint-solid | bg-caution-faint-solid | sunflower.50 98.6% 0.0129 86.05 | sunflower.950 15% 0.0194 78.05 |
caution.opaque.subtle --caution-subtle-solid | bg-caution-subtle-solid | sunflower.100 96.88% 0.0263 86.05 | sunflower.900 22.17% 0.0307 78.77 |
caution.opaque.muted --caution-muted-solid | bg-caution-muted-solid | sunflower.150 95.13% 0.04 86.05 | sunflower.850 29.34% 0.0424 79.5 |
caution.opaque.default --caution-default-solid | bg-caution-default-solid | sunflower.200 93.32% 0.0541 86.05 | sunflower.800 36.51% 0.0546 80.26 |
caution.opaque.emphasized --caution-emphasized-solid | bg-caution-emphasized-solid | sunflower.300 89.5% 0.0839 86.05 | sunflower.700 50.85% 0.081 81.87 |
caution.opaque.strong --caution-strong-solid | bg-caution-strong-solid | sunflower.400 85.25% 0.117 86.05 | sunflower.600 65.19% 0.112 83.65 |
caution.fg.default --caution-fg-default | text-caution-fg-default | sunflower.600 65.19% 0.112 83.65 | sunflower.300 89.5% 0.0839 86.05 |
caution.fg.highContrast --caution-fg-highContrast | text-caution-fg-highContrast | sunflower.700 50.85% 0.081 81.87 | sunflower.200 93.32% 0.0541 86.05 |
caution.fg.onSolid --caution-fg-onSolid | text-caution-fg-onSolid | sunflower.950 15% 0.0194 78.05 | sunflower.950 15% 0.0194 78.05 |
caution.border --caution-border | border-caution-border | sunflower.200 93.32% 0.0541 86.05 | sunflower.800 36.51% 0.0546 80.26 |
Info
| Token | Utility | Light | Dark |
|---|---|---|---|
info.solid --info-solid | bg-info-solid | cobalt.500 60.02% 0.1089 245.45 | cobalt.500 60.02% 0.1089 245.45 |
info.translucent.faint --info-faint | bg-info-faint | cobalt.alpha.a6 60.02% 0.1089 245.45 / 0.06 | cobalt.alpha.a10 60.02% 0.1089 245.45 / 0.1 |
info.translucent.subtle --info-subtle | bg-info-subtle | cobalt.alpha.a10 60.02% 0.1089 245.45 / 0.1 | cobalt.alpha.a20 60.02% 0.1089 245.45 / 0.2 |
info.translucent.muted --info-muted | bg-info-muted | cobalt.alpha.a15 60.02% 0.1089 245.45 / 0.15 | cobalt.alpha.a30 60.02% 0.1089 245.45 / 0.3 |
info.translucent.default --info-default | bg-info-default | cobalt.alpha.a20 60.02% 0.1089 245.45 / 0.2 | cobalt.alpha.a35 60.02% 0.1089 245.45 / 0.35 |
info.translucent.emphasized --info-emphasized | bg-info-emphasized | cobalt.alpha.a30 60.02% 0.1089 245.45 / 0.3 | cobalt.alpha.a45 60.02% 0.1089 245.45 / 0.45 |
info.translucent.strong --info-strong | bg-info-strong | cobalt.alpha.a45 60.02% 0.1089 245.45 / 0.45 | cobalt.alpha.a60 60.02% 0.1089 245.45 / 0.6 |
info.opaque.faint --info-faint-solid | bg-info-faint-solid | cobalt.50 98.46% 0.0017 247.73 | cobalt.950 17.89% 0.0156 248.7 |
info.opaque.subtle --info-subtle-solid | bg-info-subtle-solid | cobalt.100 95.46% 0.011 243.62 | cobalt.900 21.26% 0.0231 246.29 |
info.opaque.muted --info-muted-solid | bg-info-muted-solid | cobalt.150 92.22% 0.0197 245.63 | cobalt.850 24.87% 0.0307 243.58 |
info.opaque.default --info-default-solid | bg-info-default-solid | cobalt.200 88.97% 0.0286 246.49 | cobalt.800 28.47% 0.0386 245.14 |
info.opaque.emphasized --info-emphasized-solid | bg-info-emphasized-solid | cobalt.300 81.92% 0.0489 244.57 | cobalt.700 36.07% 0.0559 246.15 |
info.opaque.strong --info-strong-solid | bg-info-strong-solid | cobalt.400 73.37% 0.0722 245.66 | cobalt.600 45.29% 0.0768 245.33 |
info.fg.default --info-fg-default | text-info-fg-default | cobalt.600 45.29% 0.0768 245.33 | cobalt.300 81.92% 0.0489 244.57 |
info.fg.highContrast --info-fg-highContrast | text-info-fg-highContrast | cobalt.700 36.07% 0.0559 246.15 | cobalt.200 88.97% 0.0286 246.49 |
info.fg.onSolid --info-fg-onSolid | text-info-fg-onSolid | white.solid 100% 0 0 | white.solid 100% 0 0 |
info.border --info-border | border-info-border | cobalt.200 88.97% 0.0286 246.49 | cobalt.800 28.47% 0.0386 245.14 |
Charts
The categorical ramp chart/1…7 — amber in light mode, gold in dark — plus five role groups, chart/{primary,accent,neutral,positive,negative}/{stroke,fill,area-start,area-end,projected}, for line/area series. Each role group mirrors an intent's rungs directly at the foundation level (primary → primary, accent → accent, neutral → neutral, positive → constructive, negative → destructive): stroke/fill match the intent's solid, area-start its translucent/default, projected its translucent/strong, and area-end is the hue-matched fully-transparent anchor for gradient fades. chart/accent (gold) is the default single-series colour. They reference foundation stops rather than aliasing the intent tokens because the Figma manifest cannot alias semantic→semantic — a mirror test in the package's semantic.test.ts guards against drift.
| Token | Utility | Light | Dark |
|---|---|---|---|
chart.1 --chart-1 | — | amber.300 84.99% 0.0878 67.08 | gold.700 46.62% 0.0926 74.11 |
chart.2 --chart-2 | — | amber.400 78.95% 0.1225 63.81 | gold.600 59.03% 0.1109 75.22 |
chart.3 --chart-3 | — | amber.500 71.96% 0.1692 58.57 | gold.500 75.77% 0.1403 76.72 |
chart.4 --chart-4 | — | amber.600 58.54% 0.1429 48.11 | gold.400 82.83% 0.0938 76.72 |
chart.5 --chart-5 | — | amber.700 46.92% 0.1166 41.57 | gold.300 88.07% 0.0647 76.72 |
chart.6 --chart-6 | — | amber.800 35.89% 0.0902 35.99 | gold.200 92.78% 0.0399 76.72 |
chart.7 --chart-7 | — | amber.900 25.23% 0.0639 30.95 | gold.100 97.18% 0.0176 76.72 |
chart.primary.stroke --chart-primary-stroke | — | amber.600 58.54% 0.1429 48.11 | amber.500 71.96% 0.1692 58.57 |
chart.primary.fill --chart-primary-fill | — | amber.600 58.54% 0.1429 48.11 | amber.500 71.96% 0.1692 58.57 |
chart.primary.area-start --chart-primary-area-start | — | amber.alpha.a20 71.96% 0.1692 58.57 / 0.2 | amber.alpha.a35 71.96% 0.1692 58.57 / 0.35 |
chart.primary.area-end --chart-primary-area-end | — | amber.alpha.transparent 71.96% 0.1692 58.57 / 0 | amber.alpha.transparent 71.96% 0.1692 58.57 / 0 |
chart.primary.projected --chart-primary-projected | — | amber.alpha.a45 71.96% 0.1692 58.57 / 0.45 | amber.alpha.a60 71.96% 0.1692 58.57 / 0.6 |
chart.accent.stroke --chart-accent-stroke | — | gold.500 75.77% 0.1403 76.72 | gold.500 75.77% 0.1403 76.72 |
chart.accent.fill --chart-accent-fill | — | gold.500 75.77% 0.1403 76.72 | gold.500 75.77% 0.1403 76.72 |
chart.accent.area-start --chart-accent-area-start | — | gold.alpha.a20 75.77% 0.1403 76.72 / 0.2 | gold.alpha.a35 75.77% 0.1403 76.72 / 0.35 |
chart.accent.area-end --chart-accent-area-end | — | gold.alpha.transparent 75.77% 0.1403 76.72 / 0 | gold.alpha.transparent 75.77% 0.1403 76.72 / 0 |
chart.accent.projected --chart-accent-projected | — | gold.alpha.a45 75.77% 0.1403 76.72 / 0.45 | gold.alpha.a60 75.77% 0.1403 76.72 / 0.6 |
chart.neutral.stroke --chart-neutral-stroke | — | brass.500 65.05% 0.1018 91.56 | olive.300 88% 0.011 106.6 |
chart.neutral.fill --chart-neutral-fill | — | brass.500 65.05% 0.1018 91.56 | olive.300 88% 0.011 106.6 |
chart.neutral.area-start --chart-neutral-area-start | — | brass.alpha.a20 65.05% 0.1018 91.56 / 0.2 | olive.alpha.a35 58% 0.031 107.3 / 0.35 |
chart.neutral.area-end --chart-neutral-area-end | — | brass.alpha.transparent 65.05% 0.1018 91.56 / 0 | olive.alpha.transparent 58% 0.031 107.3 / 0 |
chart.neutral.projected --chart-neutral-projected | — | brass.alpha.a45 65.05% 0.1018 91.56 / 0.45 | olive.alpha.a60 58% 0.031 107.3 / 0.6 |
chart.positive.stroke --chart-positive-stroke | — | fern.500 67.24% 0.1425 140.74 | fern.500 67.24% 0.1425 140.74 |
chart.positive.fill --chart-positive-fill | — | fern.500 67.24% 0.1425 140.74 | fern.500 67.24% 0.1425 140.74 |
chart.positive.area-start --chart-positive-area-start | — | fern.alpha.a20 67.24% 0.1425 140.74 / 0.2 | fern.alpha.a35 67.24% 0.1425 140.74 / 0.35 |
chart.positive.area-end --chart-positive-area-end | — | fern.alpha.transparent 67.24% 0.1425 140.74 / 0 | fern.alpha.transparent 67.24% 0.1425 140.74 / 0 |
chart.positive.projected --chart-positive-projected | — | fern.alpha.a45 67.24% 0.1425 140.74 / 0.45 | fern.alpha.a60 67.24% 0.1425 140.74 / 0.6 |
chart.negative.stroke --chart-negative-stroke | — | mulberry.500 56.55% 0.1528 18.00 | mulberry.500 56.55% 0.1528 18.00 |
chart.negative.fill --chart-negative-fill | — | mulberry.500 56.55% 0.1528 18.00 | mulberry.500 56.55% 0.1528 18.00 |
chart.negative.area-start --chart-negative-area-start | — | mulberry.alpha.a20 56.55% 0.1528 18.00 / 0.2 | mulberry.alpha.a35 56.55% 0.1528 18.00 / 0.35 |
chart.negative.area-end --chart-negative-area-end | — | mulberry.alpha.transparent 56.55% 0.1528 18.00 / 0 | mulberry.alpha.transparent 56.55% 0.1528 18.00 / 0 |
chart.negative.projected --chart-negative-projected | — | mulberry.alpha.a45 56.55% 0.1528 18.00 / 0.45 | mulberry.alpha.a60 56.55% 0.1528 18.00 / 0.6 |
chart.axis-label --chart-axis-label | — | black.alpha.a30 0% 0 0 / 0.3 | white.alpha.a30 100% 0 0 / 0.3 |
Brand
The literal Reva brand colours surfaced as semantic tokens. Mode-agnostic for now.
| Token | Utility | Light | Dark |
|---|---|---|---|
brand.primary --brand-primary | — | amber.600 58.54% 0.1429 48.11 | amber.600 58.54% 0.1429 48.11 |
brand.accent --brand-accent | — | gold.500 75.77% 0.1403 76.72 | gold.500 75.77% 0.1403 76.72 |
brand.neutral --brand-neutral | — | brass.500 65.05% 0.1018 91.56 | brass.500 65.05% 0.1018 91.56 |