Design Tokens — uicraft

Architecture

Two-layer system: raw palette scales mapped to semantic tokens.

Palette (raw scales)

--grey-50 … --grey-950

--blue-50 … --blue-950

--green-50 … --green-950

--red-50 … --red-950

--orange-50 … --orange-950

Semantic Tokens

--fg-primary → grey-950

--neutrals-surface → generic-0

--accents-blue → blue-500

--border-default → grey-100

--tint-red → red-50

Color Tokens

Semantic color tokens organized by purpose. All switch automatically in dark mode.

Group	Token	UC Class	Description
Foreground	--fg-primary	text-fg-primary	Primary text & icons
Foreground	--fg-secondary	text-fg-secondary	Secondary text
Foreground	--fg-tertiary	text-fg-tertiary	Tertiary / subtle text
Foreground	--fg-disabled	text-fg-disabled	Disabled / placeholder
Neutrals	--neutrals-background	bg-neutrals-background	Page background
Neutrals	--neutrals-surface	bg-neutrals-surface	Card / panel surface
Neutrals	--neutrals-subtle	bg-neutrals-subtle	Hover fills
Neutrals	--neutrals-muted	bg-neutrals-muted	Secondary fills
Neutrals	--neutrals-emphasis	bg-neutrals-emphasis	Stronger fills
Border	--border-default	border-border-default	Standard border
Border	--border-strong	border-border-strong	Prominent border
Accents	--accents-blue	bg-accents-blue / text-accents-blue	Primary / Info / Focus
Accents	--accents-green	bg-accents-green / text-accents-green	Success
Accents	--accents-red	bg-accents-red / text-accents-red	Error / Danger
Accents	--accents-orange	bg-accents-orange / text-accents-orange	Warning
Tints	--tint-blue	bg-tint-blue	Info tint background
Tints	--tint-green	bg-tint-green	Success tint background
Tints	--tint-red	bg-tint-red	Danger tint background
Tints	--tint-orange	bg-tint-orange	Warning tint background
Constant	--constant-white	text-constant-white / bg-constant-white	Always white
Constant	--constant-black	text-constant-black / bg-constant-black	Always black

Usage

Reuse ready uicraft classes and components — they already consume semantic tokens.

html

Utility Classes

UC

Primary text token

Disabled text token

Surface + border via semantic utility classes

Ready Components

UI

Semantic tokens in components

Colors/radius/typography come from active theme tokens.

&lt;!-- Reuse ready uicraft classes/components --&gt;
&lt;div class="uc-card"&gt;
  &lt;div class="uc-card-header"&gt;
    &lt;span class="uc-badge uc-badge-secondary"&gt;Token-driven UI&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="uc-card-body"&gt;
    &lt;p class="uc-text-fg-primary"&gt;Primary text token&lt;/p&gt;
    &lt;p class="uc-text-fg-disabled"&gt;Secondary text token&lt;/p&gt;
    &lt;button class="uc-btn uc-btn-primary"&gt;Primary Action&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;

Spacing

Consistent spacing scale used for padding, margin, and gap.

Key	Value	Example Classes
0	0	uc-p-0 uc-m-0 uc-gap-0
0.5	0.125rem (2px)	uc-p-0.5 uc-m-0.5 uc-gap-0.5
1	0.25rem (4px)	uc-p-1 uc-m-1 uc-gap-1
1.5	0.375rem (6px)	uc-p-1.5 uc-m-1.5 uc-gap-1.5
2	0.5rem (8px)	uc-p-2 uc-m-2 uc-gap-2
3	0.75rem (12px)	uc-p-3 uc-m-3 uc-gap-3
4	1rem (16px)	uc-p-4 uc-m-4 uc-gap-4
5	1.25rem (20px)	uc-p-5 uc-m-5 uc-gap-5
6	1.5rem (24px)	uc-p-6 uc-m-6 uc-gap-6
8	2rem (32px)	uc-p-8 uc-m-8 uc-gap-8
10	2.5rem (40px)	uc-p-10 uc-m-10 uc-gap-10
12	3rem (48px)	uc-p-12 uc-m-12 uc-gap-12
16	4rem (64px)	uc-p-16 uc-m-16 uc-gap-16

Typography

Font size scale with corresponding utility classes.

Name	Size	Class	Preview
xs	0.75rem (12px)	uc-text-xs	Aa
sm	0.875rem (14px)	uc-text-sm	Aa
base	1rem (16px)	uc-text-base	Aa
lg	1.125rem (18px)	uc-text-lg	Aa
xl	1.25rem (20px)	uc-text-xl	Aa
2xl	1.5rem (24px)	uc-text-2xl	Aa
3xl	1.875rem (30px)	uc-text-3xl	Aa
4xl	2.25rem (36px)	uc-text-4xl	Aa

Border Radius

Radius tokens control the roundness of components.

--radius-sm

8px

--radius-lg

12px

--radius-xl

16px

--radius-2xl

20px

--radius-3xl

24px

Shadows

Elevation system for layered interfaces.

--shadow-sm

Subtle shadow for inputs

--shadow

Default component shadow

--shadow-md

Medium elevation

--shadow-lg

High elevation (dropdowns)

--shadow-xl

Maximum elevation (modals)

Z-Index

Layering system to keep overlapping elements in the right order.

Token	Value	Usage
--z-dropdown	1000	Dropdowns
--z-sticky	1020	Sticky headers
--z-fixed	1030	Fixed elements
--z-drawer	1040	Drawers / sheets
--z-modal	1050	Modals / dialogs
--z-popover	1060	Popovers
--z-tooltip	1070	Tooltips

Transitions

Timing tokens for consistent animation speed.

Token	Value	Usage
--transition-fast	150ms ease	Hover / micro-interactions
--transition-normal	200ms ease	Default transitions
--transition-slow	300ms ease	Page / layout transitions