Design System

The complete DST component library — colors, typography, buttons, badges, inputs, icons, spacing, radii, and shadows.

Color Palette

$bg-base
#090d1a

$bg-secondary
#0f1529

$bg-surface
#151d35

$bg-card
#1a2340

$bg-elevated
#202c4e

$primary
#6366f1

$primary-light
#818cf8

$cyan
#06b6d4

$purple
#a855f7

$green
#10b981

$amber
#f59e0b

$red
#ef4444

$pink
#ec4899

Typography

Heading 1 — 1.875rem / 900

Heading 2 — 1.375rem / 700

Heading 3 — 1rem / 600

Body — 0.875rem / 400 · Inter

Caption — 0.75rem / 400 · muted

Mono — 0.875rem · JetBrains Mono

Buttons

Badges

Topic Badges

setslogicgraphstreesrecurrencecombinatoricsquizvennprimesrsaexamprogress

Status Badges

easymediumhardprimarycyansuccesswarningdangermuted

Inputs

Default input

Mono input

With prefix

Module Icons

⊆Sets

⊢Logic

⬡Graphs

⋮Trees

∑Recurrence

nCrCombinator.

◎Venn

℘Primes

🔑RSA

✎Quiz

📋Exam

📈Progress

Spacing Scale

0.250rem

0.500rem

0.750rem

1.000rem

24px

1.500rem

32px

2.000rem

48px

3.000rem

64px

4.000rem

Border Radius

$radius-xs

4px

$radius-sm

8px

$radius-md

12px

$radius-lg

16px

$radius-xl

24px

$radius-full

full

Elevation / Shadows

$shadow-sm

$shadow-md

$shadow-lg

$shadow-glow