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-large Spacer Medium —
--spacer-medium Layout
| 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) | #fff | 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-700) | #fff | var(--color-green-900) |
| Text / Primary | transparent | var(--color-blue-700) | transparent | var(--color-blue-900) |
| Text / Secondary | transparent | var(--color-green-700) | transparent | var(--color-green-900) |