Zu Logo

Design System

Living reference for all design tokens and UI components. Toggle the theme in the sidebar to preview both modes.

Colors

Semantic tokens

var(--background)

Background

Page background

☀ rgba(255,255,255,1)☾ rgba(14,14,15,1)
var(--surface)

Surface

Cards, panels, widgets

☀ rgba(245,246,247,1)☾ rgba(17,17,18,1)
var(--inverted)

Inverted

Inverted background surfaces

☀ rgba(255,255,255,1)☾ rgba(14,14,15,1)
var(--foreground)

Foreground

Primary text

☀ rgba(32,32,33,1)☾ rgba(245,246,247,1)
var(--secondary)

Secondary

Secondary text and labels

☀ rgba(65,65,66,1)☾ rgba(153,153,153,1)
var(--muted)

Muted

Low-contrast fills and text

☀ rgba(227,227,227,1)☾ rgba(49,49,50,1)
var(--subtle)

Subtle

Subtle fills and surfaces

☀ rgba(233,234,235,1)☾ rgba(32,32,33,1)
var(--border-default)

Border Default

Default border color

☀ rgba(196,196,199,1)☾ rgba(65,65,66,1)
var(--error)

Error

Error state foreground

☀ rgba(247,90,92,1)☾ rgba(255,114,116,1)
var(--error-subtle)

Error Subtle

Error background tint

☀ rgba(247,90,92,0.16)
var(--success)

Success

Success state foreground

☀ rgba(53,201,86,1)☾ rgba(113,221,137,1)
var(--success-subtle)

Success Subtle

Success background tint

☀ rgba(53,201,86,0.16)
var(--warning)

Warning

Warning state foreground

☀ rgba(255,147,52,1)☾ rgba(255,163,83,1)
var(--warning-subtle)

Warning Subtle

Warning background tint

☀ rgba(255,147,52,0.16)
var(--attention)

Attention

Attention state foreground

☀ rgba(211,227,93,1)☾ rgba(243,255,151,1)
var(--attention-subtle)

Attention Subtle

Attention background tint

☀ rgba(211,227,93,0.16)
var(--accent)

Accent

Primary brand / interactive color

☀ rgba(0,143,226,1)☾ rgba(0,161,255,1)
var(--accent-subtle)

Accent Subtle

Soft accent tint for backgrounds / highlights

☀ rgba(0,143,226,0.16)
var(--short)

Short

Trade short side foreground

☀ rgba(247,90,92,1)☾ rgba(255,114,116,1)
var(--short-subtle)

Short Subtle

Trade short side tint

☀ rgba(247,90,92,0.16)
var(--long)

Long

Trade long side foreground

☀ rgba(53,201,86,1)☾ rgba(113,221,137,1)
var(--long-subtle)

Long Subtle

Trade long side tint

☀ rgba(53,201,86,0.16)

All palette colors

Every raw color variable defined in globals.css. Palette values are static — they don't change between themes.

var(--black)

Black

☀ rgba(14,14,15,1)

var(--grey-950)

Grey 950

☀ rgba(17,17,18,1)

var(--grey-900)

Grey 900

☀ rgba(32,32,33,1)

var(--grey-800)

Grey 800

☀ rgba(46,46,46,1)

var(--grey-700)

Grey 700

☀ rgba(49,49,50,1)

var(--grey-600)

Grey 600

☀ rgba(65,65,66,1)

var(--grey-500)

Grey 500

☀ rgba(109,109,110,1)

var(--grey-400)

Grey 400

☀ rgba(153,153,153,1)

var(--grey-350)

Grey 350

☀ rgba(196,196,199,1)

var(--grey-300)

Grey 300

☀ rgba(213,213,214,1)

var(--grey-250)

Grey 250

☀ rgba(227,227,227,1)

var(--grey-200)

Grey 200

☀ rgba(233,234,235,1)

var(--grey-150)

Grey 150

☀ rgba(245,246,247,1)

var(--white)

White

☀ rgba(255,255,255,1)

var(--red-500)

Red 500

☀ rgba(247,90,92,1)

var(--red-400)

Red 400

☀ rgba(255,114,116,1)

var(--red-500--16)

Red 500 / 16%

☀ rgba(247,90,92,0.16)

var(--orange-500)

Orange 500

☀ rgba(255,147,52,1)

var(--orange-400)

Orange 400

☀ rgba(255,163,83,1)

var(--orange-400--16)

Orange 400 / 16%

☀ rgba(255,147,52,0.16)

var(--lime-yellow-500)

Lime Yellow 500

☀ rgba(211,227,93,1)

var(--lime-yellow-400)

Lime Yellow 400

☀ rgba(243,255,151,1)

var(--lime-yellow-500--16)

Lime Yellow 500 / 16%

☀ rgba(211,227,93,0.16)

var(--green-500)

Green 500

☀ rgba(53,201,86,1)

var(--green-400)

Green 400

☀ rgba(113,221,137,1)

var(--green-400--16)

Green 400 / 16%

☀ rgba(53,201,86,0.16)

var(--blue-500)

Blue 500

☀ rgba(0,143,226,1)

var(--blue-400)

Blue 400

☀ rgba(0,161,255,1)

var(--blue-400--16)

Blue 400 / 16%

☀ rgba(0,143,226,0.16)

Typography

Font family

Primary —var(--font-inter)active

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789

Monospace —font-monosystem fallback

0x1a2b3c4d5e6f · 3.14159265 · 1,000.00 USDC

Canonical type styles

✦ Figma

The 5 styles defined in Figma. Every text element in the UI should resolve to one of these. Target: 5–6 distinct components total, each using exactly one style. Tailwind's default rem scale maps exactly at the browser default 16px root — text-xs=12px, text-sm=14px, text-base=16px, leading-3=12px, leading-4=16px, leading-5=20px. No custom root font-size override required.

Size (px/rem)Line-h (px/rem)WeightTailwind classesLive sample
12 / 0.75rem16 / 1rem500text-xs leading-4 font-mediumLabels, token badges, captions
12 / 0.75rem12 / 0.75rem500text-xs leading-3 font-mediumCompact tags, inline ticks, table cells
14 / 0.875rem20 / 1.25rem500text-sm leading-5 font-mediumSecondary body, input values, list items
14 / 0.875rem20 / 1.25rem600text-sm leading-5 font-semiboldEmphasis labels, active tab, button text
16 / 1rem16 / 1rem400text-base leading-4 font-normalPrimary body copy, descriptions

Other styles in codebase

Not in Figma spec — migrate or remove

These combinations currently exist in the code but were not specified in Figma. Map each usage to the closest canonical style above.

Size (px/rem)Line-h (px/rem)WeightTailwind classesLive sample
10px12 / 0.75rem500text-xs leading-3 font-mediumMicro labels, chart ticks
12 / 0.75rem16 / 1rem700text-xs leading-4 font-boldCompact card headings
14 / 0.875rem20 / 1.25rem400text-sm leading-5 font-normalMuted secondary text
16 / 1rem24 / 1.5rem600text-base leading-6 font-semiboldWidget sub-headings
18 / 1.125rem28 / 1.75rem600text-lg leading-7 font-semiboldSection headings
24 / 1.5rem32 / 2rem700text-2xl leading-8 font-boldPage titles
30 / 1.875rem36 / 2.25rem700text-3xl leading-9 font-boldHero / display heading

Spacing & Radius

Border radius

rounded-sm
2px

rounded-md
6px

rounded-lg
8px

rounded-xl
12px

rounded-2xl
16px

rounded-full
9999px

Borders

border (1px)
Default border everywhere

border-2 (2px)
Focus / active outlines

Components

TextInput

Shared <TextInput> from components/shared/TextInput.tsx. Height 42px, border 1px gunpowder, hover santas-gray, focus accent. Compose via leftSlot / rightSlot for labels, chips, icons, etc.

Plain

Label left + chip right

Percent slot right

%

Search — icon left, clear right

Disabled

Button

Shared <Button> component from components/shared/Button.tsx. Supports variant (primary | outline | ghost), size (sm | md), isLoading, disabled, and fullWidth.

Variants — size=md (default)

Sizes

sm · h-9
md · h-11

States

Tabs

Generic tab bar. Typography: text-xs leading-3 font-medium (12/12/500). Height: h-7 (28px). Active tab gets accent text + 1px accent bottom border. Pass className / tabClassName for layout customisation.

StatCell

Single market-data cell used in the ticker / pair-stats bar. Label on top in text-secondary (12/12/400), value on bottom in text-foreground (12/12/500).

24H Change+2.40%
24H High$0.869
24H Low$0.814
24H Vol$4.21M

PercentSlider

Draggable range with snap points at 0 / 25 / 50 / 75 / 100 and a custom % input. Snap kicks in within ±5 units of a tick.

0255075100

Value: 30%