Design for AI

Monochrome black and white: UI design prompt

Palette, type rules and a pasteable prompt for monochrome black and white. Also called black and white web design, monochrome UI, achromatic design, no-colour design, greyscale site. timeless; web waves with fashion and photography portfolios, 2016 onward for studios.

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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.

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

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.