Flat Design 2.0

---
name: flat-design-2
description: Apply the Flat Design 2.0 visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Flat Design 2.0, mentions semi-flat design, almost flat, flat 2.0, or describes flat colors with subtle elevation, 0 2px 8px soft shadows, ghost buttons — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Flat Design 2.0 Design System

The pragmatic successor to pure flat design: bright flat fills and clean geometric type, but with subtle shadows, faint elevation, and light layering restored so users can tell what's clickable. Card grids, ghost buttons, and one confident accent color over calm neutrals.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Flat Design 2.0.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (semi-flat design, almost flat, flat 2.0, post-flat, flat with depth), or describes its traits: flat colors with subtle elevation; 0 2px 8px soft shadows; ghost buttons; card grid layouts; one dominant accent; 8px rounded corners; no gradients or textures.

## Design tokens

### Color palette

- Page background, pure white: `#ffffff` (--color-bg)
- Section and well background (Flat UI 'clouds'): `#ecf0f1` (--color-surface)
- Primary text, midnight blue: `#2c3e50` (--color-text)
- Secondary text and captions: `#7f8c8d` (--color-text-muted)
- Primary accent for links and buttons (Belize Hole blue): `#2980b9` (--color-accent)
- Bright blue for fills, hovers, and large UI: `#3498db` (--color-accent-bright)
- Success states: `#27ae60` (--color-positive)
- Errors and destructive actions: `#e74c3c` (--color-negative)
- Hairline card and input borders: `#dfe6e9` (--color-border)

### Typography

- Display / headings: Montserrat (fallback: Futura, Helvetica Neue, sans-serif)
- Body: Source Sans 3 (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.25, letter-spacing -0.01em
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64 — Balanced and grid-disciplined: 24px card padding, 24–32px grid gaps, generous but not extravagant section spacing.
- Border radius: sm 4px, md 8px — 8px on cards and buttons, 4px on inputs and tags. No pills, no sharp corners — moderation is the point.
- Border treatment: 1px solid #dfe6e9 — Hairlines pair with the subtle shadow on cards; either alone is acceptable, never a heavy border.

### Shadows

- subtle: `0 2px 8px rgba(44, 62, 80, 0.1)` — Default card and dropdown elevation
- raised: `0 4px 16px rgba(44, 62, 80, 0.15)` — Hover state and modals
- pressed: `0 1px 2px rgba(44, 62, 80, 0.1)` — Active buttons settle closer to the page

### Layout

- Max content width: 1200px
- 12-column grid with card-based content blocks
- Three- and four-up feature card rows
- Alternating white and clouds-gray section bands
- Flat solid-color hero band with white type

### Effects

- Flat single-color icon style (line or glyph, no gradients)
- Solid accent-colored hero and CTA bands

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 100ms / 200ms / 300ms
- Hover lifts cards from subtle to raised shadow with a 2px translateY
- Color transitions on buttons and links at fast duration
- No parallax, no scroll-jacking — motion stays utilitarian

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #ecf0f1;
  --color-text: #2c3e50;
  --color-text-muted: #7f8c8d;
  --color-accent: #2980b9;
  --color-accent-bright: #3498db;
  --color-positive: #27ae60;
  --color-negative: #e74c3c;
  --color-border: #dfe6e9;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-subtle: 0 2px 8px rgba(44, 62, 80, 0.1);
  --shadow-raised: 0 4px 16px rgba(44, 62, 80, 0.15);
  --shadow-pressed: 0 1px 2px rgba(44, 62, 80, 0.1);
  --border-default: 1px solid #dfe6e9;
  --font-display: Montserrat, Futura, "Helvetica Neue", sans-serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.25;
  --leading-body: 1.5;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** White bar with 1px bottom hairline, flat wordmark, quiet text links, solid accent button on the right
- **Hero:** Solid accent-blue band, white Montserrat headline, short subcopy, one solid white-on-blue button and one ghost button beside it
- **Card:** White fill, 8px radius, hairline border, subtle shadow, flat icon in accent color, title plus two lines of muted copy
- **Button (primary):** Solid accent fill, white text, 8px radius, darkens one step on hover, pressed shadow on active
- **Button (secondary):** Ghost button: transparent fill, 1px accent border, accent text; fills with accent and flips text white on hover
- **Form fields:** White fill, 4px radius, 1px border; focus border switches to accent with a soft 3px rgba blue ring

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Flat-filled cards that float just barely off the page on a 0 2px 8px shadow — enough depth to signal hierarchy and affordance, never enough to look skeuomorphic. Spend boldness here; keep everything else quiet.

## Do

- Keep fills perfectly flat and reserve the 0 2px 8px shadow for genuinely elevated surfaces
- Commit to one accent hue and use the semantic green/red only for status
- Use ghost buttons for every secondary action
- Signal affordance with elevation and color, since gradients and bevels are off the table

## Don't

- No gradients, textures, or glossy highlights — depth comes only from shadow and layering
- Don't stack multiple shadow sizes on one card; one level per surface
- Don't use long-shadow icons or other flat-1.0 gimmicks
- Don't let bright #3498db carry body text; it's a fill color, not a text color

## Accessibility notes

- Bright blue #3498db is only ~3.1:1 on white — restrict it to large fills; even accent #2980b9 is ~4.3:1 on white, so use it for large text, icons, and UI chrome, and darken toward #21618c for small link text
- White text on #2980b9 (~4.3:1) and #3498db passes only at large/bold sizes; darken button fills one step when the label is small
- Muted gray #7f8c8d is ~3.5:1 on white — captions and metadata at large-ish sizes only; use #2c3e50 for any essential body copy
- Because affordance relies on subtle shadows, keep focus rings high-contrast and never remove outlines

## Reference sites

- Flat design (Wikipedia): https://en.wikipedia.org/wiki/Flat_design
- Flat UI Colors palette: https://flatuicolors.com
- NN/g on flat design usability: https://www.nngroup.com/articles/flat-design/

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip flat-design-2.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/flat-design-2.json

Settings → Capabilities → Skills → Upload skill → flat-design-2.zip