Design System
Colors, typography, spacing, shadows and other design tokens.
Colors
accent
surface
surface-alt
text
text-muted
border
Accent variants
subtle (92%)
muted (80%)
light (60%)
medium (40%)
strong (20%)
Typography
Instrument Serif
Every day is a new beginning.
Instrument Sans
I build things on the internet. Projects, experiments, notes.
JetBrains Mono
const design = tokens.map(t => t.value);
Spacing
--space-0 0 --space-px 1px --space-0-5 2px --space-1 4px --space-1-5 6px --space-2 8px --space-3 12px --space-4 16px --space-5 20px --space-6 24px --space-8 32px --space-10 40px --space-12 48px --space-16 64px Border Radius
--radius-xs 2px --radius-sm 4px --radius-md 8px --radius-lg 12px --radius-xl 1rem --radius-2xl 1.25rem --radius-full 9999px Shadows
XS
--shadow-xs SM
--shadow-sm MD
--shadow-md LG
--shadow-lg XL
--shadow-xl Z-Index
Base
--z-base 0 Raised
--z-raised 1 Overlay BG
--z-overlay-bg 10 Noise
--z-noise 50 Header Overlay
--z-header-overlay 55 Header
--z-header 60 Dropdown
--z-dropdown 70 Progress
--z-progress 200 Modal
--z-modal 9999 Transitions
--duration-menu 150ms --duration-fast 160ms --duration-normal 200ms --duration-drawer 220ms --duration-slow 300ms Hover over the bars to see the animation.