BahriUISet / Token Browser

Reference

Token Browser

Every CSS custom property in the design system. Switch theme or mode above to see all colour values update live.

Colour

Semantic colour tokens. All values are theme- and mode-aware.

Background

--color-bg-canvas
--color-bg-subtle

Surface

--color-surface-default
--color-surface-raised
--color-surface-overlay

Text

Aa
--color-text-primary
Aa
--color-text-secondary
Aa
--color-text-tertiary
--color-text-inverse
Aa
--color-text-disabled

Border

--color-border-subtle
--color-border-default
--color-border-strong
--color-border-focus

Icon

--color-icon-primary
--color-icon-secondary
--color-icon-inverse

Action — Primary

--color-action-primary-bg
--color-action-primary-bg-hover
Aa
--color-action-primary-text

Action — Secondary

--color-action-secondary-bg
--color-action-secondary-bg-hover
Aa
--color-action-secondary-text

Feedback — Success

--color-feedback-success-bg
Aa
--color-feedback-success-text
--color-feedback-success-border

Feedback — Warning

--color-feedback-warning-bg
Aa
--color-feedback-warning-text
--color-feedback-warning-border

Feedback — Danger

--color-feedback-danger-bg
Aa
--color-feedback-danger-text
--color-feedback-danger-border

Focus & Overlay

--color-focus-ring
--color-overlay-scrim

Shadows

Box-shadow tokens. Values shift between light and dark modes.

--shadow-raised
--shadow-overlay

Spacing scale

Shared across all themes. Values shown at 4× scale for readability.

--space-2
0.125rem · 2px
--space-4
0.25rem · 4px
--space-8
0.5rem · 8px
--space-12
0.75rem · 12px
--space-16
1rem · 16px
--space-20
1.25rem · 20px
--space-24
1.5rem · 24px
--space-32
2rem · 32px
--space-40
2.5rem · 40px
--space-48
3rem · 48px

Border radius

Shared across all themes.

--radius-sm
0.5rem · 8px
--radius-md
0.75rem · 12px
--radius-lg
1rem · 16px
--radius-full
999px

Typography scale

Font size and line-height pairs. Shared across all themes.

display-lg
2.5rem / 3rem
The quick brown fox
display-md
2rem / 2.5rem
The quick brown fox
heading-xl
1.75rem / 2.25rem
The quick brown fox jumps
heading-lg
1.5rem / 2rem
The quick brown fox jumps over the lazy dog
heading-md
1.25rem / 1.75rem
The quick brown fox jumps over the lazy dog
body-lg
1.125rem / 1.75rem
The quick brown fox jumps over the lazy dog
body-md
1rem / 1.5rem
The quick brown fox jumps over the lazy dog
body-sm
0.875rem / 1.25rem
The quick brown fox jumps over the lazy dog
caption
0.75rem / 1rem
The quick brown fox jumps over the lazy dog
label
0.875rem / 1.25rem
Form label · UI label
code
0.8125rem / 1.125rem
const value = token("--color-action-primary-bg");

Motion

Duration and easing tokens. Hover the squares to preview each speed.

--motion-fast
140ms
--motion-normal
200ms
ease
--easing-standard
ease