// system

Design System

Design tokens, typography scale and UI components - built with React, TypeScript and Tailwind CSS.

// colors

--color-bg

#080E0F

--color-surface-cool

#0D1A1C

--color-surface-warm

#130F09

--color-border

#1A2A2E

--color-text-primary

#F2EDE6

--color-text-secondary

#8B7355

--color-accent-amber

#C4893A

--color-accent-teal

#4A9BAF

--color-accent-moss

#6B8A4E

--color-accent-gold

#E8A44A

// typography

Aa

Clash Display

Headings & display text

Aa

Satoshi

Body & UI text

Aa

JetBrains Mono

Code & monospace labels

// type scale

48pxThe quick brown fox jumps over the lazy dog
32pxThe quick brown fox jumps over the lazy dog
24pxThe quick brown fox jumps over the lazy dog
18pxThe quick brown fox jumps over the lazy dog
16pxThe quick brown fox jumps over the lazy dog
14pxThe quick brown fox jumps over the lazy dog
12pxThe quick brown fox jumps over the lazy dog

// buttons

Exploration

Utility

Ghost

// badges

React 18+Next.jsDesign SystemsTypeScript

// spacing

4px
8px
16px
24px
32px
48px
80px