# Monochrome black and white

Also called: black and white web design, monochrome UI, achromatic design, no-colour design, greyscale site  
Era: timeless; web waves with fashion and photography portfolios, 2016 onward for studios  
Page: https://designforai.dev/style/monochrome-black-and-white

## Traits

- no hue at all: black, white and a short grey ramp
- hierarchy comes from weight, size, spacing and value contrast only
- photography in black and white or heavily desaturated
- thin hairlines and thick black bars as the only decoration
- often large type and generous whitespace; sometimes dense and newspaper-like
- one exception allowed: a single hover or focus colour, or none
- inverted sections (white on black) for rhythm

Palette: #ffffff white, #000000 black, #1a1a1a near-black, #666666 mid grey, #d9d9d9 light grey, #f4f4f4 off-white

Type: one family in two or three weights: Geist, Neue Montreal-alike "Space Grotesk", Archivo, or a serif like Newsreader; headings 500-700 at 40-96px, body 400 at 16-18px

## Do

- build a 5-step grey ramp and use it as strictly as a colour palette
- use inverted blocks (black section, white text) to create rhythm instead of colour
- if you allow a single accent, use it once, for focus rings or one link state

## Don't

- do not use "almost grey" tinted colours; either zero saturation or nothing
- do not add shadows to fake depth; use value steps and lines
- do not desaturate photos with a filter and call it done; choose imagery that works in black and white

Known for it: Ssense, Balenciaga, Studio Dumbar (partial), Massimo Vignelli references, Craig Mod

## CSS seed

```css
:root{--bg:#ffffff; --fg:#000000; --muted:#666666; --line:#d9d9d9; --surface:#f4f4f4; --radius:0; --shadow:none; --font:'Archivo',sans-serif}
```

## Prompt

Build the site in strict monochrome. Only #ffffff, #000000, #1a1a1a, #666666, #d9d9d9 and #f4f4f4; zero saturation anywhere, including images (grayscale sources, not filters where possible). Font Archivo: headings 600 at 80/44/28px with -0.02em tracking, body 400 at 17px line-height 1.6, labels 12px uppercase 0.1em in #666666. Layout on a 12-column grid, 1px #d9d9d9 rules between rows, thick 8px black bars as section openers. Alternate sections: white with black text, then black with white text (invert every colour, including rules to #333333). Buttons: solid black, white text, radius 0, 48px tall; on black sections invert. Links: 1px underline, hover turns the underline to 2px. Images full-bleed or column-aligned, no radius, no border. No shadows, no gradients, no icons beyond arrows. Motion: 150ms colour transitions and a 500ms image fade on scroll. Focus ring is 2px solid black offset 2px.