design systempackages/design/tokens
tokens package
Runtime CSS variables + ThemeProvider — single source of truth for colors, spacing, radii in every app. @import in your globals.css.
- Stability
- Stable
- Scope
- Global
- Boundary
- packages/design/tokens
Design tokens
Runtime CSS variables, single source of truth
Neutral scale
12 steps--neutral-1
--neutral-2
--neutral-3
--neutral-4
--neutral-5
--neutral-6
--neutral-7
--neutral-8
--neutral-9
--neutral-10
--neutral-11
--neutral-12
Brand and status
--brand-primary
--brand-accent
--brand-gradient
--status-danger
--status-success
--status-warning
Type ramp
Aa Display
display
Aa Heading
heading
Body copy renders at a comfortable reading rhythm.
body
Captions live at the smallest typographic step.
caption
Radius
--radius-sm
--radius-md
--radius-lg
--radius-panel
Usagetokens.css
typescripttokens.css
1@import "@nebutra/tokens/styles.css";
2
3:root {
4 --brand-primary: oklch(0.55 0.24 256);
5 --brand-accent: oklch(0.85 0.18 175);
6 --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
7}
8
9.cta {
10 background: var(--brand-gradient);
11 color: var(--neutral-1);
12 border-radius: var(--radius-md);
13}