Icons
Icon Library
Browse
A curated set of 50 icons for essential interface actions. Click on any icon to view its details.
Colors
Primary
Shade10
Shade20
Shade30
Shade40
Shade50
Shade60
Shade70
Shade80
Shade90
Secondary
Shade10
Shade20
Shade30
Shade40
Shade50
Shade60
Shade70
Shade80
Shade90
Neutral
Shade10
Shade20
Shade30
Shade40
Shade50
Shade60
Shade70
Shade80
Shade90
Semantic: Success
Shade10
Shade20
Shade30
Shade40
Shade50
Shade60
Shade70
Shade80
Shade90
Semantic: Warning
Shade10
Shade20
Shade30
Shade40
Shade50
Shade60
Shade70
Shade80
Shade90
Semantic: Error
Shade10
Shade20
Shade30
Shade40
Shade50
Shade60
Shade70
Shade80
Shade90
Typography
Scale
Heading 1 / Playfair Display / 600
The quick brown fox jumps over the lazy dog.
Heading 2 / Playfair Display / 600
The quick brown fox jumps over the lazy dog.
Heading 3 / Playfair Display / 600
The quick brown fox jumps over the lazy dog.
Body / Inter / 400
The quick brown fox jumps over the lazy dog. Build a beautifully responsive interface using vanilla HTML and CSS.
Caption / Inter / 400
Auxiliary text for hints and small notes.
Selection Controls
Checkboxes
Radio Buttons
Toggle Switches
Inputs & Search
Text Inputs
Standard Input
Error State
Search
With Leading Icon
Feedback
Alerts
Information
A new version of the design system is available.
Success
Your changes have been saved successfully.
Error Encountered
There was an issue processing your request.
Badges
Primary
Success
Warning
Error
Overlays
Modal Demo (Interactive)
Tooltip Demo (Hover)
Action required here