POKPOK DESIGN SYSTEM — V1
The Brand System
A single reference for how POKPOK looks, reads, and feels. Built on a monospace-meets-serif voice, an acid-yellow accent, and a deep-teal foundation. Use the tokens and text styles documented here — don’t reinvent them per page.
01 — FOUNDATIONS
Logo & core assets
Primary lockup. Keep clear space equal to the cap height on all sides. Never stretch, recolor outside the approved palette, or place on low-contrast backgrounds. The acid-yellow dot is reserved for active/marker states.
Signature accent — F5F900
Social / OG image
Aa
Aa
Instrument Serif + JetBrains Mono
02 — COLOR
Color system
PRIMARY
Primary/Yellow
rgb(245 249 0)
Primary/Primary Dark
rgb(10 59 68)
Primary/Grey
rgb(142 160 163)
Primary/Pink
rgb(255 196 214)
BACKGROUNDS
BG/dark-beige
rgb(232 224 209)
BG/off-white
rgb(253 253 252)
BG/neutral-warm
rgb(245 243 240)
BG/neutral-beige
rgb(250 249 247)
BG/light-blue
rgb(216 234 244)
STATUS
Healthy/Accent
rgb(0 130 54)
Healthy/BG
rgb(232 252 237)
Stable/Accent
rgb(20 71 230)
Stable/BG
rgb(235 243 255)
Guarded/Accent
rgb(229 115 0)
Guarded/BG
rgb(254 246 231)
Critical/Accent
p3 0.95 .18 .14
Critical/BG
rgb(255 229 231)
LED + ADDITIONAL
LED/red
rgb(255 75 51)
LED/green
rgb(17 200 59)
LED/orange
rgb(245 209 61)
additional/magenta
p3 1 .28 .50
additional/blue
rgb(152 201 249)
additional/dark blue
rgb(10 48 163)
03 — TYPOGRAPHY
Type scale
Two voices: Instrument Serif for display moments, JetBrains Mono for everything functional — body, labels, data and tabs.
Instrument Serif · 72
The brand voice
Instrument Serif · 48
Editorial headline
Instrument Serif · 34
Section heading
JetBrains Mono · 30
MONO DISPLAY 30
JetBrains Mono · body
Body copy default — the workhorse for paragraphs and descriptions across the product.
JetBrains Mono · small
Smaller supporting text for captions and meta.
JetBrains Mono · 600 label
LABEL — UI & TAGS
04 — RECOMMENDATIONS
Where to take it next
01
Add dark-mode token values
Every color token only defines a light value. Set a dark equivalent on each so the whole system can theme automatically instead of hardcoding per page.
02
Normalise color formats
A few colors mix rgb and display-p3 (Critical/Accent, additional/magenta). Standardise on one format per token for predictable output and easier auditing.
03
Consolidate text presets
34 presets include near-duplicates (multiple 30px and 72px serif variants). Merge overlaps into a smaller, intentional scale to reduce drift.
04
Define semantic aliases
Map raw tokens to roles — e.g. text/primary → Primary Dark, accent → Yellow, surface → off-white — so usage intent is explicit and swappable.
05
Document component states
Buttons, tabs and accordions exist as components; capture their hover/active/disabled states here so usage stays consistent across pages.