Colors
Semantic roles first, then the primitive ramps they alias. Light and dark are the resolved values.
Every colour role is also a Tailwind utility: bg-, text- and border- plus the role name.
Surfaces
Section titled “Surfaces”Hover fill for ghost controls and list or menu rows, and the fill of a focused ghost control.
#f3f6f4Dark#3e413fThe page, inside the shell. Cards sit on it.
#ffffffDark#151816Groups on the page. Pair with border and shadow/xs.
#ffffffDark#1c1f1dDisabled controls. Exempt from contrast rules.
#f3f6f4Dark#242725Form input background when disabled. Pair with color/text/disabled.
#f3f6f4Dark#080b09Form input background on hover.
#f9faf9Dark#242725Tooltips and toasts.
#080b09Dark#f9faf9Quiet fills: segmented controls, progress tracks, skeletons. Not for buttons; use secondary.
#f3f6f4Dark#242725Menus, dropdowns and dialogs that float above the page.
#ffffffDark#242725Brand-accented badge background.
#e3f9e7Dark#215130Danger badge background.
#f9f0efDark#782523Neutral badge, tag and pill background.
#f3f6f4Dark#242725Success badge background.
#e3f9e7Dark#215130Background for code blocks and inline code. Pair with the code/inline text style.
#f9faf9Dark#1c1f1dPressed container surface, drawn on top of background/*. Not for the page itself.
#f3f6f4Dark#242725Card surface on light — same white, differentiated by shadow.
#ffffffDark#242725Selected option in a segmented track. Lighter than the track in both themes.
#ffffffDark#3e413fSunken input bg on light theme.
#f9faf9Dark#151816For gradient or content fading
#ffffff00Dark#00000000Footer strip attached under a card, for totals and meta. Top edge uses border-subtle.
#f9faf9Dark#1c1f1dText and icons on accent.
#242725Dark#f3f6f4Text and icons on card.
#242725Dark#f3f6f4Text and icons on disabled controls.
#9fa19fDark#515351Default text and icons.
#242725Dark#f3f6f4Text on inverse.
#f9faf9Dark#080b09Hints and meta text on inverse, like the shortcut in a tooltip.
#9fa19fDark#515351Lowest-emphasis text that still passes: descriptions, captions, meta. At least 4.6:1 on white, background and muted.
#6d6f6dDark#9fa19fText and icons on popover.
#242725Dark#f3f6f4Accent text on light — green/600 for WCAG AA compliance on white.
#227e45Dark#37dd79Error text on light.
#c0262cDark#fac6c1Informational text. Pair with color/feedback/info/bg or use on a neutral surface.
#1c65d0Dark#bfd6faHyperlinks on light.
#1c65d0Dark#bfd6faSecond-level text: labels and values that need more weight than muted-foreground. 7.8:1 on white.
#515351Dark#d3d5d3Success text on light.
#227e45Dark#37dd79Warning text on light.
#905f1dDark#facb96Borders and focus
Section titled “Borders and focus”Card and control borders.
#e3e6e4Dark#ffffff0aBorder carrying brand emphasis, e.g. a selected card. Meets 3:1 against the default surface.
#25a156Dark#33bd68Destructive or error border. Meets 3:1 against the default surface, so it may bound a control.
#f97972Dark#f62a36Informational border. Meets 3:1 against the default surface, so it may bound a control.
#71a6f8Dark#3a84f6Inverted (on an opposite-tone surface) border. Meets 3:1 against the default surface, so it may bound a control.
#ffffffDark#080b09Borders that must stand out, like a selected outline in neutral.
#d3d5d3Dark#515351Hairlines inside a card: row dividers, tray top edge.
#f3f6f4Dark#ffffff08Success border. Meets 3:1 against the default surface, so it may bound a control.
#25a156Caution border. Meets 3:1 against the default surface, so it may bound a control.
#b87920Focus ring offset — matches white surface.
#ffffffDark#151816Text field border. It doesn't change on hover; focus turns it ring green. Fields are white with 8px corners.
#d3d5d3Dark#515351Focus ring. At least 3:1 on its surface.
#25a156Dark#37dd79Brand-accented icon. Icons need 3:1 against their surface, not 4.5:1.
#25a156Dark#33bd68Destructive or error icon. Icons need 3:1 against their surface, not 4.5:1.
#f62a36Dark#fac6c1Disabled icon. Icons need 3:1 against their surface, not 4.5:1.
#d3d5d3Dark#3e413fInformational icon. Icons need 3:1 against their surface, not 4.5:1.
#1c65d0Dark#bfd6faInverted (on an opposite-tone surface) icon. Icons need 3:1 against their surface, not 4.5:1.
#ffffffDark#080b09Icon accompanying a link, matching color/text/link.
#1c65d0Dark#bfd6faHighest-emphasis icon. Icons need 3:1 against their surface, not 4.5:1.
#242725Dark#ffffffMedium-emphasis icon. Icons need 3:1 against their surface, not 4.5:1.
#515351Dark#d3d5d3Success icon. Icons need 3:1 against their surface, not 4.5:1.
#227e45Dark#37dd79Lowest-emphasis icon. Icons need 3:1 against their surface, not 4.5:1.
#6d6f6dDark#9fa19fCaution icon. Icons need 3:1 against their surface, not 4.5:1.
#b87920Dark#facb96Actions
Section titled “Actions”Irreversible or risky actions and error states. Not for price down; use negative.
#c0262cBackground while pressed of the danger action. Every action variant exposes the same seven parts, so this token always resolves.
#952627Dark#782523Border of a destructive callout.
#f9dfddDark#952627Text and icons on destructive.
#ffffffDestructive on hover.
#952627Icon of a destructive or error message — banners, inline validation and toasts. Use the four danger parts together.
#f62a36Dark#fa9f97Tinted destructive background for callouts and chips.
#f9f0efDark#401615Text and icons on destructive-muted, or destructive text on neutral surfaces.
#952627Dark#fac6c1Border of the danger action. Every action variant exposes the same seven parts, so this token always resolves.
#fac6c1Dark#952627Danger action border while pressed.
#f97972Dark#f62a36Danger action border on hover.
#fa9f97Dark#c0262cGhost action while pressed.
#080b091aDark#ffffff1fGhost action on hover. A translucent tint so it shows on white and muted surfaces.
#080b090fDark#ffffff14The one main action per view, as a black pill. Use secondary for other actions. Not for brand.
#080b09Dark#f9faf9Primary while pressed.
#3e413fDark#d3d5d3Border of the primary action. Matches its fill, so a filled primary reads as a single solid shape.
#33bd68Primary action border while pressed.
#25a156Primary action border on hover.
#37dd79Text and icons on primary.
#ffffffDark#080b09Primary on hover.
#242725Dark#e3e6e4Every other action: Deposit, Withdraw, Cancel. A raised white pill with a border and shadow/xs.
#ffffffDark#242725Secondary action while pressed. Drop the shadow when pressed.
#f3f6f4Dark#363836Border of the secondary action.
#e3e6e4Dark#ffffff0aSecondary action border while pressed.
#d3d5d3Dark#ffffff14Secondary action border on hover.
#d3d5d3Dark#ffffff14Text and icons on secondary.
#242725Dark#f3f6f4Secondary action on hover.
#f9faf9Dark#2f3230Background of the tertiary action. Every action variant exposes the same seven parts, so this token always resolves.
#080b09Dark#ffffffBackground while pressed of the tertiary action. Every action variant exposes the same seven parts, so this token always resolves.
#3e413fDark#e3e6e4Border of the tertiary action. Matches its fill.
#080b09Dark#ffffffTertiary action border while pressed.
#3e413fDark#e3e6e4Tertiary action border on hover.
#242725Dark#f3f6f4Label of the tertiary action. Every action variant exposes the same seven parts, so this token always resolves.
#ffffffDark#080b09Background on hover of the tertiary action. Every action variant exposes the same seven parts, so this token always resolves.
#242725Dark#f3f6f4Status
Section titled “Status”Solid info fill for badges and banners.
#1c65d0Dark#95bdfaBorder of an info callout.
#dce7f9Dark#1d51a1Text and icons on info.
#ffffffDark#080b09Icon of a informational message — banners, inline validation and toasts. Use the four info parts together.
#3a84f6Dark#95bdfaTinted info background for callouts and chips.
#eef3f9Dark#112543Text and icons on info-muted, or info text on neutral surfaces.
#1d51a1Dark#bfd6faPrice down, loss, Fail. Not for errors; use destructive.
Standard #c0262cColor-blind #a54f1d#c0262cDark#fa9f97Tint behind negative chips.
Standard #f9f0efColor-blind #f9f0ec#f9f0efDark#401615Price up, gain, Pass. Not for success messages; use success.
Standard #227e45Color-blind #1c65d0#227e45Dark#37dd79Tint behind positive chips and selected Pass tiles.
Standard #e3f9e7Color-blind #eef3f9#e3f9e7Dark#142b1bSolid success fill for badges and banners.
#227e45Dark#37dd79Border of a success callout.
#b6f9c6Dark#226339Text and icons on success.
#ffffffDark#080b09Icon of a success message — banners, inline validation and toasts. Use the four success parts together.
#25a156Dark#37dd79Tinted success background for callouts and chips.
#e3f9e7Dark#142b1bText and icons on success-muted, or success text on neutral surfaces.
#226339Dark#4ff98eSolid warning fill for badges and banners.
#905f1dDark#faa732Border of a warning callout.
#f9e2c9Dark#704c1eText and icons on warning.
#ffffffDark#080b09Status that needs attention now, like a market closing soon. One per card at most.
#fad055Text and icons on warning-highlight.
#2c2512Icon of a caution message — banners, inline validation and toasts. Use the four warning parts together.
#b87920Dark#facb96Tinted warning background for callouts and chips.
#f9f1e8Dark#302212Text and icons on warning-muted, or warning text on neutral surfaces.
#704c1eDark#facb96Accent colours
Section titled “Accent colours”Active blue accent fill, for emphasis that is not an action.
#1c65d0Dark#3a84f6Hover blue accent fill, for emphasis that is not an action.
#3a84f6Dark#95bdfaSubtle blue accent fill, for emphasis that is not an action.
#f8f9fbDark#112543Green accent pressed.
#227e45Dark#25a156#33bd68Green accent hover (darker on light).
#25a156Dark#37dd79Green subtle background — tinted bg for green badges/chips.
#f4fbf6Dark#142b1bActive red accent fill, for emphasis that is not an action.
#c0262cDark#f62a36Red accent.
#f97972Red accent hover.
#f62a36Dark#fa9f97Red subtle background.
#fbf8f8Dark#401615Logomark and small accents. Never a button or a surface.
#33bd68Blue-tinted section background. Use for brand hero areas and featured content.
#f8f9fbDark#1c4481Subtle blue-tinted background. Use for secondary brand sections and info panels.
#eef3f9Dark#1d51a1Green-tinted section background. Use for positive outcomes, profit, and growth areas.
#f4fbf6Dark#215130Subtle green-tinted background. Use for success states and positive metric areas.
#e3f9e7Dark#226339Red-tinted section background. Use for alerts, losses, and high-urgency areas.
#fbf8f8Dark#782523Subtle red-tinted background. Use for warning zones and at-risk metric areas.
#f9f0efDark#952627The original electric lime brand highlight (#DFF248). Kept as a standalone accent because it is too light (L=0.92) to sit at 500 in a well-formed ramp. Use sparingly for brand moments, never as a text colour.
#dff248brand-secondary
#71a6f8brand-tertiary
#f97972Start stop of the CTA gradient. Interpolate in oklab so the midpoint stays vivid.
#33bd68End stop of the CTA gradient.
#2fbeabStart stop of the hero backdrop wash.
#e3f9e7Dark#142b1bEnd stop of the hero backdrop wash.
#ffffffDark#151816Charts
Section titled “Charts”Chart series 1. Use in order.
#9167f6Dark#bdaefaChart series 2. Use in order.
#2db1f4Dark#70c6faChart series 3. Use in order.
#de9329Dark#faa732Chart series 4. Use in order.
#f96dadDark#fa98c1Chart series 5. Use in order.
#2fbeabDark#37d6c1Chart series 6. Use in order.
#f97e39Dark#faa377Chart series 7. Use in order.
#919cf8Dark#abb6faChart series 8. Use in order.
#6d9820Dark#97d130Chart axis lines and ticks. Meets 3:1 against the default surface.
#6d6f6dDark#9fa19fThe highlighted series. Use with color/chart/neutral to make one series stand out.
#25a156Dark#33bd68Hover state for categorical series 1. Always pair with color/chart/categorical/1.
#f22962Dark#fac5caHover state for categorical series 2. Always pair with color/chart/categorical/2.
#6d9820Dark#aeec47Hover state for categorical series 3. Always pair with color/chart/categorical/3.
#2598abDark#83e6faHover state for categorical series 4. Always pair with color/chart/categorical/4.
#aa54f6Dark#dfcafaHover state for categorical series 5. Always pair with color/chart/categorical/5.
#d3631fDark#fac8b0Hover state for categorical series 6. Always pair with color/chart/categorical/6.
#259c8dDark#4ff2dbHover state for categorical series 7. Always pair with color/chart/categorical/7.
#6f77f6Dark#cbd2faHover state for categorical series 8. Always pair with color/chart/categorical/8.
#ea2892Dark#fac3d8Chart gridlines. Decorative, so exempt from the 3:1 non-text rule.
#f3f6f4Dark#242725De-emphasised series, shown alongside color/chart/brand.
#d3d5d3Dark#515351Ordinal step 1 of 3 — a single-hue ramp for ranked buckets, not unrelated categories.
#dce7f9Dark#1d51a1Ordinal step 2 of 3 — a single-hue ramp for ranked buckets, not unrelated categories.
#95bdfaDark#3a84f6Ordinal step 3 of 3 — a single-hue ramp for ranked buckets, not unrelated categories.
#3a84f6Dark#95bdfaSequential step 1 of 4 — for funnel or stage progressions.
#dce7f9Dark#1c4481Sequential step 2 of 4 — for funnel or stage progressions.
#95bdfaDark#1c65d0Sequential step 3 of 4 — for funnel or stage progressions.
#3a84f6Dark#71a6f8Sequential step 4 of 4 — for funnel or stage progressions.
#1d51a1Dark#bfd6faThe unfilled remainder of a bar, meter or progress track.
#f3f6f4Dark#242725Shell and navigation
Section titled “Shell and navigation”Divider between navigation chrome and content.
#f3f6f4Dark#242725Navigation item background on hover. Sits on the shell, darker than it in light, lighter in dark.
#e3e6e4Dark#ffffff14The app frame around panels: flat neutral, one step off the page (neutral/100 light, neutral/1000 dark, below the page so panels lift). App shell only.
#f3f6f4Dark#030403Selected item background on the shell (Discover pill).
#ffffffDark#ffffff14Active icons and text on the shell.
#242725Dark#ffffffIdle icons and secondary text on the shell.
#6d6f6dDark#d3d5d3Overlays and effects
Section titled “Overlays and effects”Scrim behind dialogs and sheets.
#00000080Dark#000000b3Scrim overlay — 80% black.
#000000ccEdge shadow indicating scrollable overflow.
#0000001fDark#00000080Scrim overlay — 60% black.
#00000099Resting background of a loading placeholder.
#f3f6f4Dark#242725Moving highlight of a loading placeholder. Suppress the animation under reduced motion.
#e3e6e4Dark#3e413fTranslucent panel background. Pair with blur/md; never place body text directly on it without checking contrast.
#ffffff99Dark#1a1a1a99Hairline edge of a glass panel.
#ffffff47Dark#ffffff1fTop-edge sheen on a glass panel.
#ffffff73Dark#ffffff14Contrast
Section titled “Contrast”WCAG 2.x relative-luminance contrast of text on its surface. AA for body text is 4.5:1. Translucent colours are composited over the surface first. --color-text-secondary stands in for secondary text.
| Text | On | Light | Dark | AA (light / dark) |
|---|---|---|---|---|
--color-foreground |
--color-background |
15.09 | 16.44 | PassPass |
--color-muted-foreground |
--color-background |
5.07 | 6.88 | PassPass |
--color-text-secondary |
--color-background |
7.76 | 12.12 | PassPass |
--color-foreground |
--color-card |
15.09 | 15.28 | PassPass |
--color-muted-foreground |
--color-card |
5.07 | 6.39 | PassPass |
--color-text-secondary |
--color-card |
7.76 | 11.26 | PassPass |
--color-foreground |
--color-popover |
15.09 | 13.87 | PassPass |
--color-muted-foreground |
--color-popover |
5.07 | 5.80 | PassPass |
--color-text-secondary |
--color-popover |
7.76 | 10.22 | PassPass |
--color-foreground |
--color-muted |
13.87 | 13.87 | PassPass |
--color-muted-foreground |
--color-muted |
4.66 | 5.80 | PassPass |
--color-text-secondary |
--color-muted |
7.13 | 10.22 | PassPass |
--color-accent-foreground |
--color-accent |
13.87 | 9.49 | PassPass |
--color-card-foreground |
--color-card |
15.09 | 15.28 | PassPass |
--color-destructive-foreground |
--color-destructive |
5.91 | 5.91 | PassPass |
--color-destructive-muted-foreground |
--color-destructive-muted |
7.25 | 10.35 | PassPass |
--color-disabled-foreground |
--color-disabled |
2.39 | 1.94 | FailFail |
--color-info-foreground |
--color-info |
5.49 | 10.30 | PassPass |
--color-info-muted-foreground |
--color-info-muted |
6.86 | 10.38 | PassPass |
--color-inverse-foreground |
--color-inverse |
18.90 | 18.90 | PassPass |
--color-popover-foreground |
--color-popover |
15.09 | 13.87 | PassPass |
--color-primary-foreground |
--color-primary |
19.77 | 18.90 | PassPass |
--color-secondary-foreground |
--color-secondary |
15.09 | 13.87 | PassPass |
--color-shell-foreground |
--color-shell |
13.87 | 20.54 | PassPass |
--color-success-foreground |
--color-success |
5.07 | 11.09 | PassPass |
--color-success-muted-foreground |
--color-success-muted |
6.51 | 10.98 | PassPass |
--color-tertiary-foreground |
--color-tertiary |
19.77 | 19.77 | PassPass |
--color-warning-foreground |
--color-warning |
5.47 | 10.02 | PassPass |
--color-warning-highlight-foreground |
--color-warning-highlight |
10.30 | 10.30 | PassPass |
--color-warning-muted-foreground |
--color-warning-muted |
6.85 | 10.30 | PassPass |