1. Fonts
Inter (sans-serif)
The quick brown fox jumps over the lazy dog
Semi-bold text 600
Bold text 700
JetBrains Mono (monospace)
const x = 123.456;bold: 700
2. Colors
bg-body
bg-surface
bg-elevated
accent
success
warning
error
3. Typography
text-xs (0.75rem)
text-sm (0.8125rem)
text-base (0.875rem)
text-lg (1rem)
text-xl (1.125rem)
text-2xl (1.5rem)
4. Buttons
5. Forms
6. Cards
Card Title
Subtitle text
Card body content here.
Elevated card with shadow.
7. Status & Badges
Success
Warning
Error
Info
Neutral
8. Tables
| Name | Category | Time | Status |
|---|---|---|---|
| Jan Novak | C1M | 94.52 | Final |
| Petr Svoboda | K1M | 88.31 | Pending |
| Marie Kralova | K1W | 102.18 | DSQ |
9. Layout
Col 1
Col 2
Col 3
Flex start
Flex center
Flex end
10. Modal
11. Tabs
Overview content
Details content
Settings content
12. Toast
13. Spacing Utilities
p-1
p-2
p-3
p-4