Skip to content
Design System Supply Chain

tokens

Runtime CSS variables + ThemeProvider — single source of truth for colors, spacing, radii in every app. @import in your globals.css.

packages/design/tokens · Source ↗ · Docs ↗

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

In code

tokens.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, hsl(var(--primary)), var(--brand-accent));
7}
8
9.cta {
10  background: hsl(var(--primary));
11  color: var(--neutral-1);
12  border-radius: var(--radius-md);
13}

More in nebutra.com

All 9 packages