Design for AIFlat 2.0: UI design prompt
Palette, type rules and a pasteable prompt for flat 2.0. Also called flat design 2.0, semi-flat, almost flat, flat with shadows, Material-lite. 2014-2018 (correction to pure flat design after 2013).
Traits
- flat colours and simple shapes, but with light shadows to show what is clickable
- subtle gradients (two close shades) instead of pure flat fills
- 4-8px radius, soft 2-8px shadows on cards and buttons
- bright, saturated but harmonious palettes (blue, teal, orange, red)
- simple line or filled icons, flat vector illustrations
- clear affordances: raised buttons, elevated cards, outlined inputs
- gentle motion: 200ms ease on hover, ripple or fade on click
Palette
#ffffff page, #f5f7fa surface, #2d3748 text, #718096 muted, #3182ce primary, #38b2ac secondary, #ed8936 warm accent
Type
Roboto, Open Sans, Lato or Source Sans 3; headings 600-700 at 28-48px, body 400 at 16px, buttons 500 at 14-16px
Do
- give interactive elements a 2px shadow at rest and 6px on hover so affordance is obvious
- use one saturated primary for actions and one secondary for highlights only
- keep icons in one set at one stroke weight
Don't
- do not go fully flat; the difference from 2013 flat is the shadow
- do not use long shadows or 45-degree diagonal "flat shadow" gimmicks
- do not use more than three colours plus greys
Known for it: Google Material 1 era products, Dropbox 2015, Slack 2016, Mailchimp 2016
CSS seed
:root {
--bg: #ffffff;
--surface: #f5f7fa;
--fg: #2d3748;
--muted: #718096;
--accent: #3182ce;
--accent2: #38b2ac;
--radius: 6px;
--shadow: 0 2px 4px rgba(45,55,72,0.12);
--font: 'Open Sans',sans-serif
}
Prompt
Build the site in Flat 2.0 style. Background #ffffff, section surfaces #f5f7fa, text #2d3748, muted #718096, primary #3182ce, secondary #38b2ac, one warm accent #ed8936. Font Open Sans: headings 700 at 44/30/22px, body 400 at 16px line-height 1.6, buttons 600 at 15px. Cards: white, border-radius 6px, box-shadow 0 2px 4px rgba(45,55,72,0.12), hover 0 6px 16px rgba(45,55,72,0.16) with translateY(-2px), 200ms ease. Primary button: #3182ce background with a gradient to #2b6cb0 at the bottom, white text, radius 6px, shadow 0 2px 4px rgba(49,130,206,0.35); active state removes the shadow. Inputs: 1px #cbd5e0 border, radius 6px, focus ring 2px #3182ce. Icons: 24px line icons at 2px stroke in #3182ce. Simple flat vector illustration in the hero using the three colours. Spacing 8px scale, 64-96px section padding. No glass, no heavy gradients, no dark mode.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in Flat 2.0 style. Background #ffffff, section surfaces #f5f7fa, text #2d3748, muted #718096, primary #3182ce, secondary #38b2ac, one warm accent #ed8936. Font Open Sans: headings 700 at 44/30/22px, body 400 at 16px line-height 1.6, buttons 600 at 15px. Cards: white, border-radius 6px, box-shadow 0 2px 4px rgba(45,55,72,0.12), hover 0 6px 16px rgba(45,55,72,0.16) with translateY(-2px), 200ms ease. Primary button: #3182ce background with a gradient to #2b6cb0 at the bottom, white text, radius 6px, shadow 0 2px 4px rgba(49,130,206,0.35); active state removes the shadow. Inputs: 1px #cbd5e0 border, radius 6px, focus ring 2px #3182ce. Icons: 24px line icons at 2px stroke in #3182ce. Simple flat vector illustration in the hero using the three colours. Spacing 8px scale, 64-96px section padding. No glass, no heavy gradients, no dark mode.
## Tokens
:root { --bg:#ffffff; --surface:#f5f7fa; --fg:#2d3748; --muted:#718096; --accent:#3182ce; --accent2:#38b2ac; --radius:6px; --shadow:0 2px 4px rgba(45,55,72,0.12); --font:'Open Sans',sans-serif }
Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.