Design System
This page demonstrates a consistent design system with CSS variables, typography, colors, and spacing.
Typography Scale
Extra small text (12px, weight 300)
Small text (14px, weight 400)
Medium text (16px, weight 400)
Large heading (20px, weight 500)
Extra large heading (24px, weight 500)
XXL heading (32px, weight 700)
Code text with monospace font
Color Palette
Success alert with green color scheme
Error alert with red color scheme
Warning alert with yellow/orange color scheme
Info alert with blue color scheme
Spacing Scale
Elements use consistent spacing values:
4px, 8px, 16px, 24px, 32px, 48px