Website Design Explorer

Style

Eighties pop

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

  • playful
  • friendly
  • dense
  • retro
  • cool

Copy the idea

See it live

Example: event page for a roller-disco night for Wigglewave, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.

Open the example on its own

Copy the idea

Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.

The recipe

When to use it and the principles behind it. The palette, type, spacing and the do's and don'ts are drawn below; the brief you copy carries all ten sections.

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

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.

Palette

  • Lilac hazebackground#f3f0ff
  • Flyer whitesurface#ffffff
  • Night purpletext#1a1033
  • Dusk violetmuted#4b3f66
  • Hot magentaaccent#c2187a
  • Deep tealaccent-2#007a7a
  • Outline purpleborder#1a1033

Text on background: 16.06:1 — passes AA

Type

Headings Josefin Sans, weights 600

The quick brown fox jumps over the lazy dog

Geometric capitals with wide letter-spacing; tilt a word now and then

Body Nunito, weights 400, 700

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Round and friendly; bold for times, prices and labels

Scale A tall, geometric display face in capitals over a soft, rounded sans for everything you read.
  • 80pxThe quick brown fox jumps over the lazy dog
  • 52pxThe quick brown fox jumps over the lazy dog
  • 34pxThe quick brown fox jumps over the lazy dog
  • 24pxThe quick brown fox jumps over the lazy dog
  • 19pxThe quick brown fox jumps over the lazy dog
  • 16pxThe quick brown fox jumps over the lazy dog
  • 13pxThe quick brown fox jumps over the lazy dog

Spacing and shape

Spacing base unit 8px
  • 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

Do and don't

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

Similar styles

The styles closest to this one in mood, density, era, warmth and accent colour.