Wildroot
Order for tomorrow

As handmade as the bread

Style guide

The organic system behind Wildroot: earthy tokens, soft serif headings, handwriting used sparingly, blobs instead of boxes and a single 2px ink line for every drawing.

Colour

  • Aa--flour#F7F1E5Page background, paper grain
  • Aa--crust#8B5A2BPrimary, buttons, footer
  • Aa--rye#3E2C1CText and ink lines
  • Aa--sage#8FA37EAccents, “available”
  • Aa--terracotta#C9694AHighlights, “few left”
  • Aa--butter#F2D58ABlobs, specials
  • Aa--oat#E7DCC6Card fills, sections
  • Aa--chalkboard#232B26Specials board

Contrast, checked at build time

PairingUseRatio
rye on flourBody text11.8:1 AA
flour on crustButton text5.2:1 AA
rye on oatText on cards9.8:1 AA
rye on butterText on blobs9.3:1 AA
rye on sageTint“Plenty” chip10.1:1 AA
rye on terracottaTint“Few left” chip9.5:1 AA
ryeSoft on soldOutTint“Sold out” chip5.3:1 AA
ryeSoft on flourSecondary text6.2:1 AA
chalk on chalkboardChalkboard12.5:1 AA

Type

Slow bread for busy mornings.

Display: Fraunces, soft axis at 100, 38px → 80px

Baked at 5am!

Handwritten accents: Caveat, 22px → 32px. Short, non-essential notes only; never prices, allergens or instructions.

Body: DM Sans, 16px → 18px, clean and legible. Prices use DM Sans 600 with tabular figures: £5.20 £12.40

Illustrations

30 drawings in one inline SVG sprite, a consistent 2px ink line in currentColor. Decorative, so hidden from screen readers unless they carry meaning.

  • wheat
  • loaf
  • batard
  • baguette
  • rye
  • focaccia
  • croissant
  • painChoc
  • bun
  • danish
  • cake
  • cookie
  • cup
  • juice
  • rollingPin
  • oven
  • hands
  • jar
  • whisk
  • banneton
  • knife
  • scale
  • flourSack
  • bag
  • clock
  • pin
  • calendar
  • basket
  • sprig
  • moon
  • arrowCurl
  • arrowDown
  • arrow
  • underline
  • circle
  • sparkle

Hand-drawn marks draw themselves on scroll: an underline and a circle.

Shapes

  • blob a
  • blob b
  • blob c
  • blob d
  • blob arch

Wavy section edges: 12px amplitude on phones, 20px on tablets, 32px on desktop.

Components

Order for tomorrowSecondary
PlentyFew leftOnly 3 leftSold out
2
2

Chalkboard panel

  • Real text in CaveatSelectable, translatable, readable£0.00

Seasonal bakes

  • Prices stay in DM Sans