Styleguide
01 – Colors
Core color system for the Oparko brand and digital products.
Brand Colors
Primary 1
HEX Code: #54939E
HSB Code: 189 , 47 , 62
Primary 2
HEX Code: #748FA1
HSB Code: 204, 28 , 63
Secondary 1
HEX Code: #EDF5F7
HSB Code: 190 , 4 , 97
Secondary 2
HEX Code: #3C4F5E
HSB Code: 206 , 37 , 36
Feedback & Text Colors
Success
HEX Code: #89CD78
HSB Code: 108 , 41 , 80
Error
HEX Code: #ED1E24
HSB Code: 358 , 87 , 93
Legacy 1
HEX Code: #003A46
HSB Code: 190 , 100 , 27
Legacy 2
HEX Code: #00303A
HSB Code: 190 , 100 , 23
Neutral Colors
Dark Coal
HEX Code: #222222
HSB Code: 0 , 0 , 13
Light Grey
HEX Code: #E5E7EB
HSB Code: 220 , 3 , 92
White
HEX Code: #FFFF
HSB Code: 0,0,100
Grey
HEX Code: #8D8D8D
HSB Code: 0 , 0 , 55
02. Typography
Oparko’s typography system ensures a clear, consistent, and modern visual hierarchy across web, app, and platform.
Archivo
Google Fonts
Aa
Heading
Line height and paragraph spacing for headings is 1.25× font size
Line height and paragraph spacing for body text is 1.5× font size
| Name | Font Size | Line Height |
|---|---|---|
| Heading 1 (H1) | 70 px | 65 px |
| Heading 2 (H2) | 48 px | 60 px |
| Heading 3 (H3) | 40 px | 50 px |
| Heading 4 (H4) | 32 px | 40 px |
| Heading 5 (H5) | 24 px | 30 px |
| Heading 6 (H6) | 20 px | 25 px |
| Large Body | 18 px | 28 px |
| Body / Paragraph | 16 px | 24 px |
| Small Text | 14 px | 20 px |
| Button Text | 16 px | 22 px |
| Input Labels | 12 px | 18 px |
| Caption / Helper Text | 12 px | 16 px |
