Internal · not indexed
Design system
Source of truth for gookit's color, typography, and component tokens. Update DESIGN.md first, then sync global.css.
Palette
Brand
brand-50
#edf7f2
Hover/subtle tint, badge bg
brand-100
#d3ecdf
Highlight, selection
brand-200
#a8d8be
Soft dividers, illustrations
brand-300
#72bd97
Numeral markers, muted accent
brand-400
#3b9f75
Charts, secondary accent
brand-500
#008060
Primary CTA, brand
brand-600
#006b4f
Primary hover, emphasis
brand-700
#004c3f
Deep accent text, links
brand-800
#00382f
Dark surface text
brand-900
#002b1f
Selection text
Ink
ink
#1a1c1e
Primary text, headings
ink-subdued
#5f656a
Secondary text, metadata
ink-disabled
#9ba1a7
Placeholder, disabled
Surface
surface
#ffffff
Page background
surface-subdued
#f8f9f5
Section background
surface-muted
#f1f3ee
Code bg, input fill
surface-hover
#eef0ea
Hover states
surface-inverse
#0f1513
Dark blocks, code pre
Border
border
#e3e7df
Default divider, card
border-strong
#c9cfc3
Hover, focused border
Warm accent
warm-50
#fdf5ea
Soft highlight bg
warm-100
#fae8d0
Warm badge bg
warm-500
#d98727
Rare pop accent
warm-700
#8f5416
Warm text emphasis
Semantic
critical-50
#fdeae7
Error bg
critical-500
#d72c0d
Error text, destructive
warning-50
#fff5d9
Warning bg
warning-500
#b98900
Warning text
Typography
All display + body
Geist
Vercel's modern geometric sans. Headings at weight 600 with tight tracking, body at 400. One family everywhere — no mixing.
Mono
Geist Mono
Code, metadata, numerals, tabular data. Cohesive with Geist Sans.
Display 72
Geist 600
Run better stores.
Display 48
Geist 600
Design and ship.
Heading 28
Geist 600
What it does
Heading 20
Geist 600
Create a template
Body 18
Geist 400
Blog body copy. Generous line-height for long-form reading without feeling sloppy.
Body 16
Geist 400
Help center and product body. Default reading size, tight enough to scan, loose enough to read.
Small 14
Geist 400
Secondary text, captions, metadata, nav labels.
Eyebrow 11
Geist 600
Getting started
Mono 14
Geist Mono
npm install barcodeman --save
Components
Buttons
Badges
Brand Warm Critical Neutral
Eyebrows
Help center
Getting started
Hairline label
Our products