UI Style Guide
A comprehensive component library and design system for the Clear Sections template. Engineered for clarity, consistency, and scale.
Version 1.0.4
Typography
| Level | Details | Example |
|---|---|---|
| H1 - ExtraBold | 48px / 1.2 / 800 | The quick brown fox |
| H2 - Bold | 32px / 1.3 / 700 | Jumps over the lazy dog |
| Body - Regular | 16px / 1.6 / 400 | This is how body text looks. It is designed to be highly readable with a generous line height for long-form content. |
| Caption - Medium | 12px / 1.4 / 500 | System Metadata Caption |
Color Palette
Primary Teal
#0E776C
Light Teal
#E7F3F2
Rich Black
#121214
Surface
#FAFAFA
Error Red
#EF4444
Buttons Matrix
| Type | Default | Hover | Disabled |
|---|---|---|---|
| Primary | |||
| Secondary | |||
| Outline |
Forms
Please enter a valid email address.
https://
0 / 500
Drag and drop or browse
PNG, JPG, PDF up to 10MB