Skip to content
Nana UI

Design Tokens

Every component is built from a shared set of design tokens — CSS custom properties (prefixed --nana-) for color, spacing, radius, shadow, typography, z-index, and transition. Override them at any scope to re-theme without touching component internals.

Import the token foundation once in your app’s global stylesheet:

@import "@nana-tec/ui-themes/base";

This pulls in @nana-tec/ui-tokens/css (the raw scales below) plus the surface semantics and dark-mode overrides.

primary

50
100
200
300
400
500
600
700
800
900
950

neutral

0
50
100
200
300
400
500
600
700
800
900
950
1000

success

50
100
300
500
600
700
900

warning

50
100
300
500
600
700
900

danger

50
100
300
500
600
700
900

info

50
100
300
500
600
700
900

Spacing

--nana-spacing-0
--nana-spacing-0-5
--nana-spacing-1
--nana-spacing-1-5
--nana-spacing-2
--nana-spacing-2-5
--nana-spacing-3
--nana-spacing-3-5
--nana-spacing-4
--nana-spacing-5
--nana-spacing-6
--nana-spacing-7
--nana-spacing-8
--nana-spacing-9
--nana-spacing-10
--nana-spacing-12
--nana-spacing-14
--nana-spacing-16
--nana-spacing-20
--nana-spacing-24
--nana-spacing-32
--nana-spacing-40
--nana-spacing-48
--nana-spacing-64

Radius

none
sm
base
md
lg
xl
2xl
3xl
full

Shadow

none
xs
sm
md
lg
xl
2xl
inner

Z-index

--nana-z-index-0 0
--nana-z-index-10 10
--nana-z-index-20 20
--nana-z-index-30 30
--nana-z-index-40 40
--nana-z-index-50 50
--nana-z-index-auto auto
--nana-z-index-overlay 100
--nana-z-index-modal 200
--nana-z-index-popover 300
--nana-z-index-toast 400
--nana-z-index-tooltip 500

Transition

Duration

--nana-transition-duration-fast
--nana-transition-duration-base
--nana-transition-duration-slow
--nana-transition-duration-slower

Easing

--nana-transition-easing-linear
--nana-transition-easing-in
--nana-transition-easing-out
--nana-transition-easing-in-out

Typography

The quick brown fox xs
The quick brown fox sm
The quick brown fox base
The quick brown fox lg
The quick brown fox xl
The quick brown fox 2xl
The quick brown fox 3xl
The quick brown fox 4xl

Using tokens

Section titled “Using tokens”

Reference any token directly, or scope an override to re-theme a subtree:

.checkout {
  --nana-color-primary-600: #2563eb;
  --nana-radius-md: 9999px;
}

See Theming for surface semantics (--nana-surface-*) and dark mode.