Colour
Three colours come straight from your logo files and keep their names. Five more do the jobs the logo colours can't.
Biro on Page is the brand. Peach stays rare so it reads as the thing worth noticing. From Message and Promise: Pillar 2 From Dream Client: the notebook
On dark, Peach is strong enough to carry text and links. Status colours switch to their Light versions so they still read.
| Text on background | Sample | Ratio | Result |
|---|---|---|---|
| Biro on Page | Leave it with me. | 13.10:1 | Pass, all text |
| Biro on Sheet | Leave it with me. | 14.28:1 | Pass, all text |
| Pencil on Page | Caption text | 5.50:1 | Pass, all text |
| Tick on Page | Confirmed | 4.96:1 | Pass, all text |
| Red Pen on Page | You must have a WWCC. | 5.90:1 | Pass, all text |
| Biro on Ruled | Card label | 9.31:1 | Pass, all text |
| Biro on Peach | Friday. No later. | 6.45:1 | Pass, all text |
| Page on Biro | Let’s make it happen | 13.10:1 | Pass, all text |
| Peach on Biro | Yay | 6.45:1 | Pass, all text |
| Page on Ink (dark) | Cheers | 15.77:1 | Pass, all text |
| Pencil Light on Ink (dark) | Caption text | 8.31:1 | Pass, all text |
| Peach on Ink (dark) | Yay | 7.76:1 | Pass, all text |
| Pencil on Ruled | Caption text | 3.91:1 | Large text only |
| Red Pen on Ruled | Warning | 4.19:1 | Large text only |
| Tick on Ruled | Done | 3.52:1 | Large text only |
| Peach on Page | Hiya | 2.03:1 | Fails. Never use |
| Page on Peach | Hiya | 2.03:1 | Fails. Never use |
| Pencil on Peach | Caption | 2.71:1 | Fails. Never use |
| Tick, Red Pen or Pencil on Biro | Done | 2.22–2.64:1 | Fails. Use the Light versions |
| Ruled or Ruled Dark as text | Lines only | 1.41–1.73:1 | Fails. Lines only |
You must have a WWCC. Safety and compliance notes get a Red Pen outline and a warning icon, with plain Biro text inside. No peach, no highlighter, no jokes. Red and green never carry meaning on their own: always pair them with an icon or a word. From Voice: safety and compliance
Typography
Two faces, both free from Google Fonts. Neither is a script, so nothing competes with the handwriting in your logo.
Fraunces
A soft, slightly wonky serif. It feels like a good idea written down by hand, warm enough to read as a person and sturdy enough for a council proposal. Use weights 600 and 700, with italic for one stressed word at a time.
fonts.google.com/specimen/Fraunces · free (SIL Open Font Licence)
Instrument Sans
A clean, plain sans that stays readable at small sizes, in eDMs and on printed run sheets. It does the steady work so Fraunces can have the personality. Use 400 for reading, 500 for leads and 700 for labels and buttons.
fonts.google.com/specimen/Instrument+Sans · free (SIL Open Font Licence)
No utility face. Instrument Sans already covers labels, numbers and captions, with tabular figures for budgets and attendance counts. A third face would add weight without a job. From Voice: plain, light and friendly
Type scale and hierarchy
Eight levels. Sizes are for desktop screens; on phones, Hero drops to 56px, Headline to 36px and Subhead to 26px.
That idea deserves daylight.
Let’s talk about that notebook. The fat one. The one with the big idea you’ve been circling for weeks.
Your bucket has holes. We bring corks.
We find what’s missing.
The stuff you don’t know you don’t know.
See it before it’s built.
The look comes early, so the idea is visible before it’s real.
One person who knows the game.
The rules, the strategy, the steps, how to win.
[Body copy for this page goes here: one short paragraph on how a first call works.]
Nothing’s perfect. We’ll get you pretty damn close.
Serious about the work. Potato tornado van optional.
Brand marks
Your logo stays exactly as it is. This section only adds how much room it needs, how small it can go, and which colour version goes where.
xxKeep a margin of x on every side, where x is a quarter of the logo’s height (about the height of the peach’s leaf). Nothing else goes inside the dashed line.
Screen: 140px wide
Print: 30mm wide
Below these sizes the outline and the inner lines of the peach fill in and the script stops reading cleanly. For anything smaller, such as a social avatar or a favicon, use the small version below.
Biro on Page. The main version. Use it unless there’s a reason not to.
Page on Biro. Reversed, for dark panels, business card fronts and Ink screens.
Peach on Biro or Ink. For celebration moments: launch posts, thank-yous, the last slide.
Biro on Peach. Only on a full peach field, such as a social tile, never a small peach patch.
Neon. A photo, not a logo file. For event-night posts and dark hero images, never for small or print use.
Page on Page: never. It disappears, as you can see.
Biro on Page. Main small version.
Page on Biro. Reversed.
Peach on Biro or Ink. Celebration.
Minimum: 24px tall on screen, 8mm in print.
The peach drawing from your logo, unchanged, for social avatars, favicons, stamps and anywhere the full logo would fall below its minimum. The thin outer sticker line is left off, because in your logo it wraps the peach and the name together as one shape. Use the full logo wherever it fits; the small version never sits next to the full logo on the same piece.
Peach on Page or Sheet. At 2.0:1 the fine lines vanish.
Stretching or squashing.
Recolouring into Tick, Ruled or any other colour.
Shadows, glows or bevels. The neon photo is the only glow.
Shape, space and depth
Flat paper, biro outlines and a lot of room. Things only lift off the page when they float.
s2–s5 inside components, s6–s8 between blocks, s9–s10 between page sections. Decorative ruled lines sit 44px apart.
Corners stay nearly square, like paper. The only uneven shape is the highlighter swipe. No pill-shaped buttons.
Confirmed: cards, final plans
Still a draft: concepts, proposals
Dividers and table rows
Dashed means “not built yet”. Solid means “this is happening”. From Message and Promise: Pillar 3
One shadow only, for things that float above the page: menus, pop-ups, a card laid over a photo. Lift: 0 1px 0 #C9CFDE, 0 10px 24px rgba(34,38,75,0.10).
Imagery and icons
Real people in their own patch, taped into the notebook. Icons drawn like quick biro doodles.
Photo: [the park picnic]
Photo: [the scarecrow trail]
Photo: [setting up]
- Real locals mid-moment, the people who’d usually stay home. From Purpose: proof points
- Places people recognise: the main street, the hall, the oval. From Positioning: community first
- The work in progress: plans, mock-ups, setup. From Message and Promise: Pillars 3 and 4
- Natural light, eye level, full colour with no filters. Square corners, two strips of Ruled tape, a Pencil caption underneath.
- Stock crowds, lens flare, hands stacked in a circle. From Voice: fun, real, positive
- Boardrooms, handshakes, people smiling at laptops. From Voice: cosy, not corporate
- Empty venues and drone shots with no faces. From Purpose: who turns up
- Text over faces, and confetti as decoration.
Peach appears in an icon only as a highlighter dot behind it. Red Pen is kept for the must-have icon. From Dream Client: the notebook
In use
Four everyday pieces, built only from the parts above.
Your bucket has holes. We bring corks.
Social post · 1080 × 1080. Ruled page, peach margin line, one highlighted word.
How it worksThe workSay hiyaThat idea deserves daylight.
Let’s talk about that notebook. The fat one.
Let’s make it happenWebsite hero. Fraunces hero, the plan as a lifted card, one Biro button.
Business card · 90 × 55mm. Biro front with the reversed logo; Sheet back with one highlighted line.
Here’s what comes first.
- Poke holes in the idea
- Find what’s missing
- See it before it’s built
- Let’s make the magic happen
Presentation slide · 16:9. Ticked checklist, highlighter on the current step.
Spec card
Plain text, ready to paste into your deck and website prompts as your design system.
PEACHED AS · DESIGN SYSTEM · "THE NOTEBOOK" · v1 (2 Nov 2026) Feel: biro on paper. The big idea written down, circled, ticked off. Peach is the highlighter. COLOURS (light) Page #F6F3EC background, ~50% Biro #22264B text, rules, logo, buttons, ~22% Sheet #FFFDF8 cards and panels on Page, ~10% Pencil #5E6175 secondary text, captions, ~6% Ruled #C9CFDE lines, dividers, tape (never text), ~5% Peach #FF8F5A highlighter and accent, ~5% (never text on Page/Sheet) Tick #2A7655 status: done, confirmed, ~1% Red Pen #B3261E status: must-haves, warnings, ~1% COLOURS (dark) Ink #15182E background · Biro #22264B cards · Page #F6F3EC text Pencil Light #AEB2C7 · Ruled Dark #3A3F66 (lines only) · Peach #FF8F5A (may be text) Tick Light #5DBE8C · Red Pen Light #FF8A80 CONTRAST RULES Pass for all text: Biro on Page/Sheet/Ruled/Peach; Pencil, Tick, Red Pen on Page/Sheet; Page or Peach on Biro; Page, Pencil Light, Peach, Tick Light, Red Pen Light on Ink. Never: Peach text on Page/Sheet (2.0:1); Page text on Peach; Pencil on Peach; Tick/Red Pen/Pencil on Biro (use the Light versions); Ruled as text. Red and green never carry meaning alone: pair with an icon or a word. FONTS (Google Fonts, free, SIL OFL) Display: Fraunces, weights 600/700, italic for one stressed word Text: Instrument Sans, weights 400/500/700 No script fonts (the logo is the only script). TYPE SCALE (desktop; phone in brackets) Hero Fraunces 700, 96/96, tracking -2% (56) Headline Fraunces 600, 56/60 (36) Subhead Fraunces 600, 32/38 (26) Lead Instrument Sans 500, 22/34 (19) Body Instrument Sans 400, 18/29 (17), max 65 characters a line Small Instrument Sans 400, 15/22, Pencil Label Instrument Sans 700, 13/16, uppercase, tracking +14% Quote Fraunces 500 italic, 30/40 SPACING (4px base) 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 Components 8-24 · between blocks 32-64 · between sections 96-128 · ruled lines 44px apart SHAPE AND DEPTH Radii: 0 photos · 4px tags, inputs · 6px cards, buttons · highlighter 6/14/8/12px. No pill buttons. Borders: 2px solid Biro = confirmed · 2px dashed Biro = draft · 1px Ruled = dividers Shadow: flat by default; one "lift" for floating items only: 0 1px 0 #C9CFDE, 0 10px 24px rgba(34,38,75,0.10) DEVICES Peach highlighter swipe behind one word or phrase (Biro text on it) Ruled lines 44px apart with a 3px Peach margin line Tick boxes for plans and steps (Tick green check) Biro circles around a key word LOGO (keep exactly as supplied; never redraw) Files: Biro, Page, Peach and Neon versions Main: Biro on Page · Reversed: Page on Biro/Ink · Celebration: Peach on Biro/Ink Biro on Peach only on a full peach field · Neon only as a photo, large, on dark Clear space: 1/4 of logo height on every side Minimum: 140px wide on screen, 30mm in print Small version: the peach drawing alone, unchanged, without the outer sticker line For avatars, favicons, stamps and anything below the full logo's minimum Colours as the full logo · minimum 24px tall on screen, 8mm in print Never next to the full logo on the same piece Never: Peach logo on Page/Sheet, stretching, recolouring, shadows or glows IMAGERY Real locals mid-moment, recognisable local places, work in progress. Natural light, eye level, full colour, square corners, Ruled tape corners, Pencil caption. Avoid: stock crowds, lens flare, hands in a circle, boardrooms, handshakes, empty venues, text over faces, confetti. ICONS 24px grid, 2px Biro stroke, round caps and joins, no fills. Peach only as a highlight dot behind. AVOID EVERYWHERE Purple-to-blue gradients, emoji as decoration, everything centred, pill buttons, drop shadows on text or logo.