Typography
Font scale, weights, colors, and text utilities using Inter typeface.
Headings
Heading hierarchy from H1 to H6.
Body Text
Standard paragraph and body text sizes.
The quick brown fox jumps over the lazy dog. This is the standard body text size used for main content and descriptions throughout the platform.
The quick brown fox jumps over the lazy dog. This is the default text size used for most UI elements, form labels, and navigation items.
The quick brown fox jumps over the lazy dog. Used for captions, help text, timestamps, and secondary information.
Font Weights
Available weight variants for Inter.
Regular (400) — The quick brown fox
Medium (500) — The quick brown fox
Semibold (600) — The quick brown fox
Bold (700) — The quick brown fox
Text Colors
Semantic color tokens for text hierarchy.
Primary — Main headings and body text
Secondary — Supporting text and descriptions
Muted — Captions, timestamps, and hints
Accent — Links, CTAs, and active elements
Accent Text — Inline links and references
Success — Positive feedback and confirmation
Danger — Errors and destructive actions
Warning — Caution and attention needed
Section Labels
Uppercase tracking labels for section headers.
Section Label — 10px
Section Label — 12px
Inline Elements
Code, links, and emphasis.
Use rounded-xl for standard component corners.
Visit the documentation for more details.
This text has bold emphasis and italic emphasis.
You can also use highlighted text for attention.
Lists
Ordered and unordered list styles.
Unordered
- Buttons and interactive elements
- Cards and containers
- Form inputs and controls
- Navigation components
Ordered
- 1.Set up the theme variables
- 2.Import the component
- 3.Pass required props
- 4.Customize as needed