Design for AIMinimalism: UI design prompt
Palette, type rules and a pasteable prompt for minimalism. Also called minimal web design, less is more, clean UI, white space design. timeless; web waves 2008 (Apple), 2013 (flat), 2019 (Linear/Notion), ongoing.
Traits
- very few elements; each one has a job
- one typeface, two sizes, two weights, one accent colour
- white space carries hierarchy; no boxes, no dividers unless essential
- mostly black on white or near-white, thin hairlines
- small, precise radius (4-8px) or none; shadows almost invisible
- imagery is sparse and large when it appears
- motion is subtle: opacity and 4px translate, 150-250ms
Palette
#ffffff page, #111111 text, #6b7280 secondary, #e5e7eb hairline, #2563eb single accent
Type
Geist, Helvetica Neue or system-ui; headings 600 at 32-56px with -0.02em, body 400 at 16-17px, line-height 1.6; no more than 4 sizes on the whole site
Do
- delete anything that does not change what the user does next
- align to an 8px grid and a 640-720px reading width
- let type size and spacing do the hierarchy instead of colour and boxes
Don't
- do not add icons next to every heading
- do not use cards or borders to group; use space
- do not use more than one accent colour or a gradient
Known for it: Apple.com, Notion, Linear (light mode), Muji
CSS seed
:root {
--bg: #ffffff;
--fg: #111111;
--muted: #6b7280;
--accent: #2563eb;
--line: #e5e7eb;
--radius: 6px;
--shadow: none;
--font: 'Geist',system-ui,sans-serif
}
Prompt
Build the site in strict minimalism. Background #ffffff, text #111111, secondary #6b7280, hairline #e5e7eb, one accent #2563eb used for links and the primary button only. Font Geist: exactly four sizes - 48px 600 (h1, -0.02em), 24px 600 (h2), 16px 400 (body, line-height 1.6), 13px 400 (meta). Content column 680px, page padding 24px, sections separated by 96px of space and nothing else (no rules, no backgrounds). No cards, no icons, no shadows, no gradients. Buttons: 40px tall, radius 6px, solid #111111 with white text; secondary buttons are plain text links. Images, when used, are full column width with 8px radius and no border. Nav is the logo left and three text links right. Motion: 150ms opacity on hover; nothing animates on scroll.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in strict minimalism. Background #ffffff, text #111111, secondary #6b7280, hairline #e5e7eb, one accent #2563eb used for links and the primary button only. Font Geist: exactly four sizes - 48px 600 (h1, -0.02em), 24px 600 (h2), 16px 400 (body, line-height 1.6), 13px 400 (meta). Content column 680px, page padding 24px, sections separated by 96px of space and nothing else (no rules, no backgrounds). No cards, no icons, no shadows, no gradients. Buttons: 40px tall, radius 6px, solid #111111 with white text; secondary buttons are plain text links. Images, when used, are full column width with 8px radius and no border. Nav is the logo left and three text links right. Motion: 150ms opacity on hover; nothing animates on scroll.
## Tokens
:root { --bg:#ffffff; --fg:#111111; --muted:#6b7280; --accent:#2563eb; --line:#e5e7eb; --radius:6px; --shadow:none; --font:'Geist',system-ui,sans-serif }
Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.