# Eighties pop — style recipe

## The idea

- Squiggles, confetti dots and zigzags, tilted colour blocks and a clash of pastel and bold, like a 1980s party flyer.

## Use it when

- Parties, club nights, festivals and other events that should feel like fun before anyone arrives
- Youthful brands, games and music projects that want energy and a wink
- Short campaign pages where a loud first impression matters more than calm reading

## Avoid it when

- The page must feel trustworthy and sober, such as banking, health or law
- Visitors come to read long text or compare dense figures
- The brand is quiet, premium or minimal

## Principles

- Pattern is the texture: squiggles, confetti dots, zigzags and stripes fill the space around the content
- Pastel grounds clash with one loud magenta and one deep teal
- Blocks tilt a few degrees off the grid, each one a different way
- Every block has a 2 px dark outline and no shadow
- Corners are either square or fully round, nothing in between
- Pack the page: sections butt up against each other with little empty space
- Patterns stay behind and around text, never under it

## Colour

- Lilac haze (background): #f3f0ff
- Flyer white (surface): #ffffff
- Night purple (text): #1a1033
- Dusk violet (muted): #4b3f66
- Hot magenta (accent): #c2187a
- Deep teal (accent-2): #007a7a
- Outline purple (border): #1a1033
- Text on background contrast: 16.06:1

## Type

- Headings: Josefin Sans, weights 600 — Geometric capitals with wide letter-spacing; tilt a word now and then
- Body: Nunito, weights 400, 700 — Round and friendly; bold for times, prices and labels
- Scale: 13px, 16px, 19px, 24px, 34px, 52px, 80px
- A tall, geometric display face in capitals over a soft, rounded sans for everything you read.

## Spacing and shape

- Base unit: 8px
- Spacing steps: 4px, 8px, 12px, 16px, 24px, 40px, 64px
- Tight inside blocks and between them; the page feels full, with pattern filling any gap.
- Corner radii: 0px, 999px
- Borders: 2 px dark outlines on every block, pill and badge
- Shadows: None: depth comes from tilt and overlap, not from offset shadows

## Imagery and motion

- Imagery: No photos: patterns drawn in code, such as squiggle lines, confetti dots, zigzag strips and stripes, in mint, lemon, lilac, magenta and teal.
- Motion: A short wiggle or tilt on hover; nothing loops, and everything stays still when the visitor prefers less motion.

## Do

- Tilt a few blocks by two to four degrees, each a different way
- Fill gaps with squiggles, dots and zigzags drawn in code
- Outline every block in dark purple
- Keep text on plain white, lilac, magenta, teal or dark grounds

## Don't

- No pattern behind text
- No hard offset shadows or raw, unfinished edges
- No soft gradients or glossy chrome
- No corner radius between square and fully round