Colors

Semantic colors describe intent, not appearance. Toggle Light / Dark and switch platform in the bar below — values and downloads follow.

Each token resolves to a different primitive per theme. Every row shows its use case and the primitive it points at. Always build from these — never a raw hex.

Showing resolved values for Light mode

Surface

Use these background fills for the surfaces behind screens and containers. They work from the base canvas up through raised cards and recessed wells.

colorBackgroundPrimary
Use the default screen background as the base canvas for everything on the screen.
color.core.0
→ #FFFFFF
colorBackgroundSecondary
Use raised surfaces for cards, sheets, and grouped sections that sit above the primary background.
color.neutral.50
→ #F3F3F6
colorBackgroundTertiary
Use recessed surfaces to make content feel inset, like input wells, nested rows, or review cards.
color.neutral.300
→ #B6BABF
colorBackgroundElevatedPrimary
Use the primary raised surface for layers that float above the page, like cards, sheets, popovers, and menus.
color.core.0
→ #FFFFFF
colorBackgroundElevatedSecondary
Use the secondary raised surface for a subtly tinted floating layer that needs to sit apart from the primary elevated white.
color.neutral.50
→ #F3F3F6
colorBackgroundAccentPrimary
Use a brand-tinted surface to promote a feature or highlight a whole section without a full action fill.
color.brand.500
→ #4B56C7
colorBackgroundAccentPrimarySubtle
Use a faint brand tint for gentle emphasis on selected rows, highlighted cards, and informational panels.
color.alpha.brand.100
→ #4B56C71F
colorBackgroundAccentSecondary
Use the secondary indigo accent for a supporting feature surface that needs to stand apart from the primary brand fill.
color.indigo.500
→ #7D44C1

Action

Defines button fills for primary and secondary actions across default, pressed, and disabled states. Use them to keep interactive elements clear and consistent.

primary
colorBackgroundActionPrimaryDefault
Use this fill for the primary button or main call to action. It’s the brand-colored choice for the action you want people to notice first.
color.brand.500
→ #4B56C7
colorBackgroundActionPrimaryPressed
Shows a primary button while it’s being pressed. Use it to give clear feedback that the action is in progress.
color.brand.700
→ #2E368A
secondary
colorBackgroundActionSecondaryDefault
Use this fill for secondary buttons that need a neutral surface with a visible border.
color.alpha.black.50
→ #0000000A
colorBackgroundActionSecondaryPressed
Shows a secondary button while the user is pressing it. Use it to give immediate feedback during a click or tap.
color.alpha.black.100
→ #00000014
tertiary
colorBackgroundActionTertiaryDefault
color.alpha.white.0
→ #FFFFFF00
colorBackgroundActionTertiaryPressed
color.alpha.black.100
→ #00000014
blur
colorBackgroundActionBlurDefault
Use this translucent fill for controls layered over photos or content, where a blurred backdrop keeps them legible.
color.alpha.white.200
→ #FFFFFF33
colorBackgroundActionBlurPressed
Shows a translucent (blur) control while it’s being pressed, for feedback over imagery.
color.alpha.white.600
→ #FFFFFF99
destructive
colorBackgroundActionDestructivePrimaryDestructive
color.red.500
→ #EB515E
colorBackgroundActionDestructivePrimaryPressed
color.red.600
→ #C91726
colorBackgroundActionDestructiveSecondaryDestructive
color.alpha.black.50
→ #0000000A
colorBackgroundActionDestructiveSecondaryPressed
color.alpha.black.100
→ #00000014
colorBackgroundActionDestructiveTertiaryDestructive
color.alpha.white.0
→ #FFFFFF00
colorBackgroundActionDestructiveTertiaryPressed
color.alpha.black.100
→ #00000014

Status

Feedback colors show success, error, warning, and info states. Use primary for strong fills and secondary for subtle tints.

success
colorBackgroundStatusSuccessPrimary
Strong success fill — confirmations, positive amounts, success buttons.
color.green.500
→ #13C66A
colorBackgroundStatusSuccessSecondary
A soft success tint for banners and backgrounds. Use it when you want success feedback to feel calm and unobtrusive.
color.alpha.green.100
→ #13C66A14
error
colorBackgroundStatusErrorPrimary
Use this fill for strong error states and destructive actions. It helps signal that something went wrong or that an action is irreversible.
color.red.500
→ #EB515E
colorBackgroundStatusErrorSecondary
Use this subtle error tint for error banners and field backgrounds.
color.alpha.red.100
→ #EB515E1F
warning
colorBackgroundStatusWarningPrimary
Use a strong warning fill to emphasize caution states that need quick attention.
color.amber.500
→ #FFB230
colorBackgroundStatusWarningSecondary
Use this subtle warning tint for warning banners that need to signal caution without overwhelming the page.
color.alpha.amber.100
→ #FFB2301F
info
colorBackgroundStatusInfoPrimary
Use this informational blue fill to give neutral, non-urgent messages strong emphasis.
color.blue.500
→ #56B5E3
colorBackgroundStatusInfoSecondary
A subtle informational tint for `info` banners. Use it when you want to call attention to a non-urgent message without making it feel like a warning.
color.alpha.blue.100
→ #56B5E314
neutral
colorBackgroundStatusNeutralPrimary
Use this muted gray fill for a strong neutral status, like a default or pending badge that carries no positive or negative meaning.
color.neutral.200
→ #D3D5D8
colorBackgroundStatusNeutralSecondary
Use this faint translucent tint for a soft neutral status background, such as an inactive chip or a quiet informational row.
color.alpha.black.75
→ #0000000F

Content

Use these tokens for text and icon colors, ordered by emphasis. `On` tokens stay fixed across themes.

colorContentPrimary
Use primary text and icons for the most important content, like titles and body copy.
color.neutral.950
→ #0C1828
colorContentPrimarySubtle
color.neutral.800
→ #353F4C
colorContentSecondary
Use secondary text for supporting copy, captions, and subtitles.
color.neutral.500
→ #6D747E
colorContentTertiary
Use tertiary text for placeholders, hints, and other low-emphasis details.
color.neutral.400
→ #8E959D
colorContentAccent
Use the brand color for emphasized text and icons — links, active labels, and highlighted values.
color.brand.500
→ #4B56C7
colorContentStatusError
Use this for error text and icons — validation messages and destructive labels.
color.red.600
→ #C91726
colorContentStatusSuccess
Use this for success text and icons — confirmations and positive values.
color.green.600
→ #12B561
colorContentStatusWarning
Use this for warning text and icons — caution messages that need attention without signalling failure.
color.amber.600
→ #E08D00
colorContentStatusInfo
Use this for informational text and icons — neutral, non-urgent messages.
color.blue.700
→ #1E74A9
colorContentInversed
Use inverted colors for text and icons on contrasting surfaces, like a dark card in light mode.
color.core.0
→ #FFFFFF
colorContentOnDark
Use this for text or icons that always appear on dark fills, like labels on brand buttons.
color.core.0
→ #FFFFFF
colorContentOnLight
Use for text and icons that always sit on light fills. It keeps them readable on pale backgrounds.
color.neutral.950
→ #0C1828

Border

Use this for thin separators and outlines, including hairlines, dividers, input borders, and the focus ring.

colorBorderPrimary
Use hairline borders and dividers to separate content with the lightest possible line.
color.neutral.100
→ #E5E5E8
colorBorderSecondary
Stronger borders create clearer separation and more visible input outlines. Use them when nearby elements need extra definition.
color.neutral.200
→ #D3D5D8
colorBorderFocused
Use the brand color for the focus ring on focused inputs and controls.
color.brand.500
→ #4B56C7
colorBorderError
Use this border for invalid inputs and error states that need a clear outline.
color.red.500
→ #EB515E
colorBorderDisabled
Use this border style for disabled elements so they stay visible but read as inactive.
color.neutral.50
→ #F3F3F6
colorBorderBlur
Use this translucent border for controls layered over photos or blurred surfaces.
color.alpha.white.200
→ #FFFFFF33

Overlay

Scrims dim the content behind modals, sheets, and dialogs, helping people focus on the active surface.

colorOverlayPrimary
Use this scrim behind modals, sheets, and dialogs to separate them from the content behind. Use it when you want to focus attention and show that the rest of the interface is out of reach.
color.alpha.black.500
→ #00000080
colorOverlayStickyPrimary
color.alpha.white.800
→ #FFFFFFCC
colorOverlayStickySecondary
color.alpha.neutral.50.800
→ #F3F3F6CC

In use

How these tokens read in real UI: each row pairs a background fill with the text color built to sit on it. Flip Light / Dark to watch both adapt together. Names follow the platform you picked in the bar below.

Showing Light mode
Primary button
Default
BackgroundcolorBackgroundActionPrimaryDefault
TextcolorContentOnDark
Pressed
BackgroundcolorBackgroundActionPrimaryPressed
TextcolorContentOnDark
Disabled
BackgroundcolorBackgroundActionPrimaryDefault
TextcolorContentOnDark
at 32% opacity
Solid badges
Brand
Brand
BackgroundcolorBackgroundAccentPrimarySubtle
TextcolorContentAccent
Info
Info
BackgroundcolorBackgroundSecondary
TextcolorContentPrimary
Success
Success
BackgroundcolorBackgroundStatusSuccessSecondary
TextcolorContentStatusSuccess
Warning
Warning
BackgroundcolorBackgroundStatusWarningSecondary
TextcolorContentStatusWarning
Error
Error
BackgroundcolorBackgroundStatusErrorSecondary
TextcolorContentStatusError
Card
Coming soon

Do & Don’t

✓ DoUse colorBackgroundActionPrimaryDefault for primary CTAs. The token resolves the brand fill and flips automatically in dark mode.
✗ Don’tDon’t borrow a destructive color like colorBackgroundStatusErrorPrimary for a benign action. It reads as danger and breaks the semantic contract.