Theen Design System
Design tokens, typography scale, components, and color system.
Colors
--bg-base
Background Base
--bg-surface
Background Surface
--bg-card
Background Card
--accent
Accent
--text-primary
Text Primary
--text-secondary
Text Secondary
--text-muted
Text Muted
Pearl Line
Typography
Display Headline
Page Headline
Section Heading
Subheading
Body Large — The quick brown fox jumps over the lazy dog.
Body — The quick brown fox jumps over the lazy dog.
Body Small — The quick brown fox jumps over the lazy dog.
LABEL / EYEBROW
Icons
Buttons
Cards
Card — Default
Card body text with secondary color.
Card — Hover
Card body text with secondary color.
Card — Accent
Card body text with secondary color.
Token Reference
| Token | Light | Dark |
|---|---|---|
| --bg-base | #F3F0EA | #060C18 |
| --accent | #0A9FA4 | #29C5CA |
| --text-primary | #0D1520 | #ECF0F5 |
| --text-secondary | #485870 | #7A8EA8 |