Design

The tokens every component in this library is built from — neutral + one accent, a restrained radius scale, one signature motion moment per interaction. Nothing here is hardcoded downstream; every value below is a CSS variable.

Palette

Color

Background

--color-bg

Surface

--color-surface

Surface 2

--color-surface-2

Foreground

--color-fg

Muted

--color-muted

Subtle

--color-subtle

Border

--color-border

Border strong

--color-border-strong

Accent

--color-accent

Error

--color-error

Success

--color-success

New

--color-new

Shape

Radius

Small

--radius-sm

Medium

--radius-md

Large

--radius-lg

Extra large

--radius-xl

Full

9999px

Shape

Corner treatment

Rounded

Squircle

Pill / squircle

Type

Typography

12 / xsThe quick brown fox
14 / smThe quick brown fox
16 / baseThe quick brown fox
18 / lgThe quick brown fox
20 / xlThe quick brown fox
24 / 2xlThe quick brown fox
30 / 3xlThe quick brown fox

--font-sans

Segoe UI, ui-sans-serif, system-ui

--font-handwriting

Nexvyn/Ui, handwritten accents

Grid

Spacing

4px
8px
12px
16px
24px
32px
48px
64px