Warm, chunky, and unmistakably hand-set.
Every value on this page was read directly from the Figma draft — the Component Kit board and the built Carousel Hero. The palette is locked to nine colours; the personality comes from heavy ink borders, hard offset shadows, and Fredoka doing the talking.
Toggle the theme in the header — dark mode is built from the kit's own Calendar widget.
Nine colours, each with one job
Nothing here is decorative. If a colour is doing a job that isn't listed, it's the wrong colour.
Working on ink
#FDF3E4 · secondary at 50–62% ·
inert tiles at 15% · selection #D5A000
✓ Do
- Let cream and surface carry most of the area.
- Use red and gold as blocks — full fills, pills, buttons.
- Tint on-photo with alpha when you need a third level on ink.
✕ Don't
- Put red text on cream at body size — it's for fills and 11px eyebrows.
- Set white on gold. Gold always carries ink.
- Introduce a grey. The neutral is muted at 60%, which stays warm.
Fredoka carries the voice, Inter carries the information
Two families, no exceptions. Fredoka's rounded terminals are the friendliest thing in the brand — which is exactly why it never gets used for paragraphs.
--font-display · Fredoka 500 / 600 / 700
Headings, the wordmark, buttons, pills, eyebrows, numbers. Weight 600 is the workhorse; 700 only for glyphs like carousel arrows.
--font-body · Inter 400 / 500 / 600
Every session starts with five minutes of just talking — no camera. That's usually enough to find the pose and the lighting that actually fits you, instead of forcing a template. Milwaukee-based, studio or on-location by request.
Paragraphs, form fields, nav links, captions, labels. Line height 1.6 for copy, 1.5 for dense UI.
uppercase · letter-spacing .02–.03em
Eyebrows are Fredoka 600 / 11px / .03em in red (gold on ink). Structural labels are Inter 600 / 12px / .02em in muted. Don't swap them.
Type scale
| Role | Face | Size |
|---|---|---|
| Display | Fredoka 600 | 40 / 1.15 |
| H1 | Fredoka 600 | 32 / 1.15 |
| H2 | Fredoka 600 | 24 / 1.2 |
| H3 | Fredoka 600 | 17 / 1.3 |
| Body | Inter 400 | 16 / 1.6 |
| Small | Inter 400 | 14 / 1.5 |
| Button | Fredoka 600 | 15 / 1 |
| Eyebrow | Fredoka 600 | 11 / 1 |
| Label | Inter 600 | 12 / 1 |
Rules of thumb
- If it's a sentence, it's Inter. If it's a label, it's Fredoka.
- Never run Fredoka past two lines at display size.
- Headlines cap around 28 characters per line; body around 62.
- Only uppercase at 11–12px, and always with tracking.
- There is no mono brand face — the monospace on this page is a spec-sheet utility only.
The border and the hard shadow are the brand
Strip the colour out and you should still recognise it: a 2px ink outline and a shadow that never blurs.
Offset shadows
6px cards4px buttons3px controls
Always Xpx Xpx 0 — equal offsets, zero blur, zero spread. Cards drop onto
Surface Alt; buttons and small controls drop onto Ink. Pressing a button
translates it into its own shadow.
Radii
18 card12 media10 button8 thumb6 bar999 pillBorders are 2px ink everywhere. The one exception is a selected item, which goes 3px red — the only place border weight changes meaning.
The parts you'll actually reach for
Buttons
One primary per view. Gold is the alternative, not a second primary. The quiet button has no shadow until hover so it never competes.
Pills, tags & captions
Photo captions use rgba(59,17,8,0.82) so the image reads through.
Selection & navigation
Selected thumbnail: 3px red border. Active dot fills red. Arrows are gold circles with an ink border and a 3px drop.
Form fields
Fields carry the same 2px ink border as everything else — no thin hairlines.
Layout blocks from the Component Kit
Rebuilt in flow layout rather than Figma's absolute positioning, so they're drop-in ready.
Direction that makes you look like you already know your good side.
Every session starts with five minutes of just talking — no camera. That's usually enough to find the pose and the lighting that actually fits you, instead of forcing a template. Milwaukee-based, studio or on-location by request.
Book a Session