Design System
Kolory, typografia, spacing, cienie i inne tokeny projektowe.
Kolory
accent
surface
surface-alt
text
text-muted
border
Warianty akcentu
subtle (92%)
muted (80%)
light (60%)
medium (40%)
strong (20%)
Typografia
Instrument Serif
Każdy dzień jest nowy.
Instrument Sans
Buduję rzeczy w internecie. Projekty, eksperymenty, notatki.
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 Cienie
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 Przejścia
--duration-menu 150ms --duration-fast 160ms --duration-normal 200ms --duration-drawer 220ms --duration-slow 300ms Najedź na paski, aby zobaczyć animację.