Typography
Sizes are the base pixel value in calc(Xpx * var(--type-scale)). Parsed from global.css at build time.
| Token | Element | Weight | Base (mobile) | sm (640px) | lg (1024px) | xl (1280px) | 3xl (1920px) |
|---|---|---|---|---|---|---|---|
| Heading 1 | h1 | 600 | 50px | 96px | 48px | 60px | 72px |
| Heading 2 | h2 | 300 | 50px | 96px | 48px | 60px | 72px |
| Heading 3 | h3 | 300 | 36px | 60px | 30px | 36px | 48px |
| Heading 4 | h4 | 800 | 30px | 48px | 24px | 30px | 36px |
| Heading 5 | h5 | 800 | 16px | 24px | 14px | 16px | 20px |
| Body | body | 400 | 20px | 30px | 18px | 20px | 24px |
| Body Large | .body-large | 400 | 24px | 36px | 20px | 24px | 30px |
| Body Small | .body-small | 400 | 16px | 24px | 14px | 16px | 20px |
Preview
Heading 1 — The quick brown fox
Heading 2 — The quick brown fox
Heading 3 — The quick brown fox
Heading 4 — The quick brown fox
Heading 5 — The quick brown fox
Body — The quick brown fox jumps over the lazy dog
Body Large — The quick brown fox jumps over the lazy dog
Body Small — The quick brown fox jumps over the lazy dog
Colors
Blue
Blue 100--color-blue-100#e4dff4
Blue 300--color-blue-300#c2b3f2
Blue 500--color-blue-500#8e70ee
Blue 700--color-blue-700#4a18e9
Blue 900--color-blue-900#1d086f
Green
Green 100--color-green-100#b6eedf
Green 300--color-green-300#b6eedf
Green 500--color-green-500#75e6c9
Green 700--color-green-700#20dcab
Green 900--color-green-900#114862
Gray
Gray 100--color-gray-100#f2f1ec
Gray 300--color-gray-300#eeece1
Gray 500--color-gray-500#dfddd1
Other
Purple Text--color-purple-text#361953
Spacing
| Token | CSS variable | Base (mobile) | sm (640px) | lg (1024px) | xl (1280px) | 3xl (1920px) |
|---|---|---|---|---|---|---|
| Spacer Large | --spacer-large | 60px | 160px | 80px | 150px | 150px |
| Spacer Medium | --spacer-medium | 40px | 80px | 40px | 75px | 75px |
Visual preview (current breakpoint)
Spacer Large —
--spacer-largeSpacer Medium —
--spacer-mediumLayout
| Token | CSS variable | Base (mobile) | sm (640px) | lg (1024px) | xl (1280px) | 3xl (1920px) |
|---|---|---|---|---|---|---|
| Section Padding X | --section-padding-x | 20px | 40px | 30px | 50px | 100px |
| Grid Gutter X | --grid-gutter-x | 20px | 40px | 20px | 20px | 50px |
| Grid Gutter Y | --grid-gutter-y | 50px | 80px | 50px | 50px | 75px |
Buttons
Sizing per breakpoint
| Variant | Property | Base (mobile) | sm (640px) | lg (1024px) | xl (1280px) | 3xl (1920px) |
|---|---|---|---|---|---|---|
| Normal | Padding | 14px 20px | 36px 20px | 10px 18px | 14px 20px | 22px 28px |
| Border radius | 6px | 8px | 4px | 6px | 6px | |
| Width | 100% | 100% | auto | auto | auto | |
| Small | Padding | 10px 16px | 28px 16px | 8px 14px | 10px 16px | 16px 22px |
| Border radius | 6px | 8px | 4px | 6px | 6px | |
| Width | 100% | 100% | auto | auto | auto |
Font size / line-height per breakpoint
| Variant | sm | md (768px) | lg (1024px) | xl (1280px) | 3xl (1920px) |
|---|---|---|---|---|---|
| Default | 36px | 48px | 23px | 28px | 30px |
| Diap | 30px | 36px | 23px | 28px | 30px |
Color variants
| Variant | Background | Text | Hover BG | Hover Text |
|---|---|---|---|---|
| Normal / Primary | var(--color-blue-700) | #fff | var(--color-blue-900) | #fff |
| Normal / Secondary | var(--color-green-700) | var(--color-green-900) | var(--color-green-900) | #fff |
| Normal / Tertiary | var(--color-gray-300) | var(--color-blue-700) | var(--color-gray-500) | var(--color-blue-900) |
| Diap / Primary | #fff | var(--color-blue-700) | #fff | var(--color-blue-900) |
| Diap / Secondary | #fff | var(--color-green-900) | #fff | var(--color-green-700) |
| Text / Primary | transparent | var(--color-blue-700) | transparent | var(--color-blue-900) |
| Text / Secondary | transparent | var(--color-green-900) | transparent | var(--color-green-700) |