# Geometric primary — style recipe

## The idea

- Circles, squares and triangles in red, yellow and blue on warm off-white, held together by heavy black rules, with type set like a poster.

## Use it when

- Toy, craft and making brands that want to feel bold and well built
- Event posters, shop fronts and launch pages with a few strong messages
- Brands that want order and play at the same time

## Avoid it when

- Pages are mostly long reading text
- The brand needs softness, luxury or quiet restraint
- Content changes too often to compose each screen by hand

## Principles

- The shapes are the composition: circles, squares and triangles build each screen
- Only three colours plus black: red, yellow and blue, flat and never blended
- Heavy black rules, three to six pixels, frame blocks and divide the page
- Headings are large, light and often uppercase, set like a poster
- Square corners everywhere; roundness comes only from whole circles
- Yellow is for shapes only, never behind text or as text

## Colour

- Workshop paper (background): #f4f1e8
- Clean board (surface): #ffffff
- Rule black (text): #111111
- Pencil grey (muted): #4a4a4a
- Primary red (accent): #c62a1f
- Primary blue (accent-2): #1d4fa3
- Heavy rule (border): #111111
- Text on background contrast: 16.72:1

## Type

- Headings: Jost, weights 400 — Set large, often uppercase, with open letter-spacing on short labels
- Body: Work Sans, weights 400, 500 — Plain and sturdy; medium for prices and labels
- Scale: 13px, 16px, 20px, 28px, 44px, 72px, 104px
- A geometric sans for the poster headings over a sturdy grotesque for reading.

## Spacing and shape

- Base unit: 8px
- Spacing steps: 8px, 16px, 24px, 40px, 64px, 96px
- Blocks butt up against each other along shared black rules; space opens up between sections.
- Corner radii: 0px
- Borders: Heavy black rules, 3 to 6 px, around blocks and between sections
- Shadows: None

## Imagery and motion

- Imagery: No photos: flat circles, squares and triangles in the three primaries, built in code.
- Motion: None, or a single shape sliding into place; nothing bounces or fades for long.

## Do

- Build each section from a few large, flat shapes
- Frame blocks with heavy black rules
- Keep text on off-white, white, black, red or blue grounds
- Let one heading per screen fill the width

## Don't

- No gradients, shadows or rounded corners
- No yellow behind or as text
- No more than three colours besides black and white
- No small decorative icons scattered around