UI Design System
Typography
H1: Heading
Used for main page titles
H2: Subheading
Used for major section headings
H3: Section Heading
Used for section headings
H4: Subsection Heading
Used for subsection headings
Body Text
Used for main content text
Small Text
Used for captions or descriptions
Colors
Buttons
Used for main actions
Used when an action is unavailable
Used for secondary actions
Used for destructive actions
Used for compact UI areas
Form Elements
Used for single line text input
Used for selecting from options
Used for multi-line text input
Used for multiple selections or toggles
Used for single selection from options
Cards
This is the content area of the card. Use cards to group related information.
Used for displaying grouped information with header and actions
Flat Card
This is a flat card with minimal styling
Used for subtle grouping of content
Alerts
Operation completed successfully!
Used to display success messages
Error: Something went wrong!
Used to display error messages
Warning: This action might have consequences
Used to display warning messages
Information: This is for your information
Used to display informational messages
Tables
| Column 1 | Column 2 | Column 3 | Actions |
|---|---|---|---|
| Data 1-1 | Data 1-2 | Data 1-3 | |
| Data 2-1 | Data 2-2 | Data 2-3 |
Used for displaying structured data
Badges
Default badge style
Indicates successful status
Indicates warning status
Indicates critical status
Indicates informational status