Theme

Orbital theming is token-driven: wrap your app in OrbitalThemeProvider, hold a Theme signal, and components pick up brand, neutral, spacing, and shadow values as CSS variables.

Use this catalog preview to experiment with light/dark mode, brand hex, density, and elevation scale before committing tokens in app config. Theme fields map to CSS custom properties (for example --orb-color-brand-bg, --orb-space-inline-md) injected on the provider element — customize brand ramps through the Theme signal and custom_light / custom_dark slots.

Theme designer

Interactive designer with brand palette generation and component gallery.

Theme designer
Brand presets
DensityDefault
Shadow depth1.00×
Theme preview
Generated brand palette
10
20
30
40
50
60
70
80
90
100
110
120
130
140
150
160
Sample surface
Typography sample
Elevated card (shadow4 token)
ABC
AR
JL
Jordan Lee
BrandSuccess
Learn more about theming
Provider scope
Sample surface
Brand ramp

Generated palette from a single brand hex.

16-shade ramp generated from a single brand hex via HSL interpolation.
10
20
30
40
50
60
70
80
90
100
110
120
130
140
150
160
Density

Compact, default, and spacious density presets scale spacing tokens.

DensityDefault
Density scales spacing tokens — compare button padding after switching.
Color reference

Key semantic and brand color tokens from the active theme.

NeutralBackground1
NeutralBackground3
NeutralForeground1
NeutralForeground2
NeutralStroke1
BrandBackground
BrandForeground1
StatusSuccessBackground1
StatusDangerBackground1
Shadow reference

Elevation shadow tokens from subtle to pronounced depth.

--orb-elev-raised-xs--orb-elev-raised-xs
--orb-elev-raised-sm--orb-elev-raised-sm
--orb-elev-raised-md--orb-elev-raised-md
--orb-elev-floating--orb-elev-floating
--orb-elev-overlay--orb-elev-overlay
--orb-elev-modal--orb-elev-modal