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 | text-7xl / 72px / 800 | Heading 1 |
| H2 | text-5xl / 48px / 700 | Heading 2 |
| H3 | text-4xl / 36px / 700 | Heading 3 |
| H4 | text-3xl / 30px / 600 | Heading 4 |
| H5 | text-2xl / 24px / 600 | Heading 5 |
| H6 | text-xl / 20px / 600 | Heading 6 |
| Body | text-base / 16px / 400 | 본문 텍스트입니다. Body text for readability. |
| Small | text-sm / 14px / 400 | 작은 텍스트입니다. Small helper text. |
| Caption | text-xs / 12px / 500 | 캡션 텍스트 CAPTION TEXT |
Color Palette
Primary
primary
Primary Light
primary-light
Background
bg-light
Surface
surface
Text Default
text
Text Secondary
text-secondary
Border
border
Success
state-success
Warning
state-warning
Danger
state-danger
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