Design for AI

Typographic-only: UI design prompt

Palette, type rules and a pasteable prompt for typographic-only. Also called type-driven design, typography-first, text-only website, no-image design, type as image. 1960s posters; web 2010 onward (studios, type foundries, manifestos, personal sites).

Traits

  • no photos, no illustration, no icons: type is the only visual material
  • extreme scale contrast, from 200px headlines to 12px footnotes
  • the grid is visible through alignment alone
  • one or two typefaces, exploited fully: weights, italics, small caps, figures
  • colour used as a single field or a single word, if at all
  • text can be the layout: rotated, outlined, overlapping, running vertically
  • motion: variable font axes animating, text reveals, marquee

Palette

#ffffff paper (or #111111 inverted), #111111 ink, #ff3b00 one accent (optional), #9a9a9a muted

Type

one expressive family with range: Fraunces (variable optical size and weight), Geist or IBM Plex Sans variable, Space Grotesk, Playfair Display, or a mono like JetBrains Mono; headlines 96-240px, body 16-18px, footnotes 12px

Do

  • choose a variable font and use its axes (weight, optical size, width) as the design system
  • set a strict type scale (12, 16, 24, 40, 72, 128, 240) and never leave it
  • use outlined text (-webkit-text-stroke 1px) and overlapping lines for hierarchy instead of images

Don't

  • do not sneak in icons or decorative shapes; if it is not a glyph, it is off-style
  • do not use more than two families
  • do not make body text hard to read to look clever; only display text gets experimental

Known for it: Pentagram (partial), Klim Type Foundry, Dinamo, Bureau Borsche, Readymag showcases

CSS seed
:root {
  --bg: #ffffff;
   --fg: #111111;
   --accent: #ff3b00;
   --muted: #9a9a9a;
   --radius: 0;
   --scale: 1.6;
   --font: 'Fraunces',serif;
   --font-ui: 'Geist',sans-serif
}
Prompt

Build the site as a typographic-only design. No images, no icons, no illustrations, no decorative shapes. Background #ffffff, ink #111111, muted #9a9a9a, one accent #ff3b00 used for a single word per screen. Fonts: Fraunces variable for display and body, Geist 400 at 13px for nav and footnotes. Type scale fixed at 12, 16, 24, 40, 72, 128 and 240px. Hero: a 240px headline in Fraunces at weight 900 and optical size 144, line-height 0.85, tracking -0.04em, wrapping across three lines flush left, with the second line outlined (-webkit-text-stroke 1px #111111, transparent fill). Below it a 24px paragraph in weight 300 at max-width 40ch. Section titles run vertically (writing-mode vertical-rl) in the left margin at 16px uppercase 0.2em. Rules are 1px #111111. Motion: on load the headline animates its weight axis from 300 to 900 over 1.2s; a 16px uppercase marquee runs at 30s linear infinite. No radius, no shadows.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site as a typographic-only design. No images, no icons, no illustrations, no decorative shapes. Background #ffffff, ink #111111, muted #9a9a9a, one accent #ff3b00 used for a single word per screen. Fonts: Fraunces variable for display and body, Geist 400 at 13px for nav and footnotes. Type scale fixed at 12, 16, 24, 40, 72, 128 and 240px. Hero: a 240px headline in Fraunces at weight 900 and optical size 144, line-height 0.85, tracking -0.04em, wrapping across three lines flush left, with the second line outlined (-webkit-text-stroke 1px #111111, transparent fill). Below it a 24px paragraph in weight 300 at max-width 40ch. Section titles run vertically (writing-mode vertical-rl) in the left margin at 16px uppercase 0.2em. Rules are 1px #111111. Motion: on load the headline animates its weight axis from 300 to 900 over 1.2s; a 16px uppercase marquee runs at 30s linear infinite. No radius, no shadows.

## Tokens
:root { --bg:#ffffff; --fg:#111111; --accent:#ff3b00; --muted:#9a9a9a; --radius:0; --scale:1.6; --font:'Fraunces',serif; --font-ui:'Geist',sans-serif }

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