Flat Design

# Flat Design (Flat UI)

You are building a frontend UI. Apply the **Flat Design** visual style consistently to every screen and component. Treat the tokens and rules below as hard constraints, not suggestions.

## Essence

A thorough rejection of skeuomorphism: no gradients, no drop shadows, no materials. Interfaces are organized with large solid color blocks, simple icons and clear type, which makes them lighter, faster and better suited to every screen size.

## Design tokens

### Colors

- `background` `#ECF0F1` — page background
- `surface` `#FFFFFF` — cards, panels and raised surfaces
- `text` `#2C3E50` — primary text
- `muted` `#566573` — secondary text, captions, placeholders
- `accent` `#2471A3` — primary actions, links, key highlights
- `on-accent` `#FFFFFF` — text and icons placed on the accent color
- `border` `#BDC3C7` — dividers, outlines, input borders
- `highlight` `#F1C40F` — secondary emphasis, badges, selection

### Typography

- Display / headings: `Lato` (Google Fonts, weights 700 / 900) → fallback `"Helvetica Neue", "Segoe UI", Arial, sans-serif`
- Body text: `Lato` (Google Fonts, weights 400 / 700) → fallback `"Helvetica Neue", "Segoe UI", Arial, sans-serif`
- Type scale (px): 12 · 14 · 16 · 20 · 26 · 36 · 52

### Spacing & Shape

- Base unit: 8px · Spacing scale (px): 8 · 16 · 24 · 32 · 48 · 64
- Corner radius (sm / md / lg): 4 / 6 / 8 px
- Border: 2px solid
- Shadows (sm / md / lg): none / none / none

### Motion

- Durations (fast / base): 150ms / 250ms
- Easing: `ease-out`

### Signature effects

- `--flat-turquoise`: `#1ABC9C`
- `--flat-orange`: `#E67E22`
- `--flat-red`: `#E74C3C`

## Do

- Use solid fills only — no gradients, shadows, highlights or textures.
- Use a set of bright solid colors (turquoise #1ABC9C, orange #E67E22, red #E74C3C, yellow #F1C40F) for blocks.
- Make buttons solid with 4–6px radii; hover changes only the color’s lightness.
- Draw icons as single-color simple geometric shapes inside solid circles.
- Separate page sections with full-width solid color bands.

## Don't

- Do not use box-shadow, text-shadow or gradients.
- Do not use realistic icons, photographic textures or skeuomorphic controls.
- Do not put small white body text on bright color blocks.
- Do not let buttons become visually indistinguishable from plain text.

## Components

- **Buttons**: Solid filled buttons with small radii, no shadow, no gradient; hover slightly lightens the color, press slightly darkens it. Secondary buttons use a 2px outline in the same color.
- **Cards**: White cards with no shadow, separated from the page by a light background or a 2px light grey outline; a solid color band may run across the top.
- **Forms**: Inputs with a 2px light grey outline on white; focus turns the outline to the primary color. No inset shadows.
- **Navigation**: A solid-color top bar with white text links; the current item is marked with a bottom bar or a color block.
- **Layout**: Full-width solid color bands separate sections, on a clear grid with generous whitespace.
- **Imagery & icons**: Flat geometric illustrations and single-color icons, often in colored circles — never photo-realistic textures.

## Accessibility

- White text on many classic flat colors (turquoise, orange) falls short of 4.5:1 — use deeper colors or dark text for body copy.
- Clickable elements need a clear shape (solid buttons, underlined links), not color alone.

_Generated by Style Museum._