Website Design Explorer

Style

Monochrome fashion

Stark black and white, like a lookbook: an oversized high-contrast serif cropped at the edges, wide margins, hairline rules and a single red.

  • luxurious
  • bold
  • cool
  • airy
  • contemporary
  • neutral

Copy the idea

See it live

Example: autumn collection page of a small label of tailored coats for Halvane, 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

  • Clothing labels, collections and seasonal lookbooks
  • Studios, galleries and shops that sell a few considered things
  • Launch pages where one bold statement matters more than detail

Avoid it when

  • The page carries long reading text, tables or many options
  • The brand should feel warm, cosy or playful
  • The audience needs bright colour to find its way

Principles

  • Black and white do almost all the work; one red is the only colour
  • A huge high-contrast serif, cropped by the edge of the page, is the picture
  • Wide margins and very few words per screen
  • Hairline rules in black divide the page, never boxes or shadows
  • Full-width black panels carry light type, the way a lookbook turns to a dark page
  • Small spaced capitals in a plain sans label every look

Imagery and motion

  • Imagery: Strong flat shapes rather than busy pictures: garment silhouettes, solid cloth swatches or black-and-white photography with hard light.
  • Motion: Almost none: a slow fade as a look comes into view, and nothing at all for reduced motion.

Palette

  • Paper whitebackground#f6f5f2
  • Black panel (light type on it)surface#111111
  • Ink blacktext#111111
  • Graphitemuted#595959
  • Signal redaccent#b00d24
  • Hairlineborder#111111

Text on background: 17.32:1 — passes AA

Type

Headings Cormorant Garamond, weights 500

The quick brown fox jumps over the lazy dog

Set very large at weight 500, with the italic 500 for a single accent word; let it crop at the edge

Body Inter, weights 400, 500

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Short body copy at 400; labels at 500 in spaced capitals, never under 12 px

Scale A dramatic jump from tiny spaced labels to enormous serif headlines, with almost nothing in between.
  • 176pxThe quick brown fox jumps over the lazy dog
  • 112pxThe quick brown fox jumps over the lazy dog
  • 56pxThe quick brown fox jumps over the lazy dog
  • 28pxThe quick brown fox jumps over the lazy dog
  • 18pxThe quick brown fox jumps over the lazy dog
  • 15pxThe quick brown fox jumps over the lazy dog
  • 12pxThe quick brown fox jumps over the lazy dog

Spacing and shape

Spacing base unit 8px
  • 8px
  • 16px
  • 32px
  • 64px
  • 128px
  • 192px

Wide outer margins and long pauses between looks; the empty paper is part of the design.

Corner radii
  • 0px
Borders
1 px hairlines in ink black
Shadows
None; the page is flat paper and flat black

Do and don't

Do

  • Let one oversized word run off the edge of the page
  • Put light type on the black panels, never dark text or red
  • Use red for one thing only: a link, a rule or the price
  • Number the looks and label them in small spaced capitals

Don't

  • No second colour beside the red
  • No rounded corners, cards or drop shadows
  • No long paragraphs; say it in a line
  • No red text on the black panels, where it is too dim to read

Similar styles

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