Orbit
Colors
Source
Semantic color tokens for surfaces, text, and borders. Pass token names to Box props such as backgroundColor, color, and borderColor.
Every color token is defined with the CSS light-dark() function, so it resolves to the correct value for light or dark mode automatically. You never write dark: variants or duplicate values. Use semantic tokens by role, not by their literal appearance.
Background colors
Surface tokens for pages, sections, cards, and status backgrounds. Apply with backgroundColor.
background-primary
Page background
background-secondary
Sectioned / raised surface
background-card
Card / inset panel surface
background-card-raised
Raised card (dark only)
background-inverse
Inverted, high-contrast surface
background-warning
Warning surface
background-success
Success surface
background-danger
Danger surface
background-pending
Pending / neutral surface
Text colors
Foreground tokens for copy and status text. Apply with the color prop on Box, then use Text with color inherit.
text-primary
Primary copy
text-secondary
De-emphasised copy
text-tertiary
Hints, captions, placeholders
text-success
Success text
text-danger
Danger text
text-warning
Warning text
text-pending
Pending / neutral text
Border colors
Tokens for borders and dividers. Apply with borderColor alongside borderWidth and borderStyle.
border-primary
Default borders & dividers
border-secondary
Subtle / secondary dividers
border-warning
Warning borders
border-card
Card outlines