Flat Design

Also called: Flat UI, Flat 2.0, Metro-style flat

Pure 2D: solid colour blocks, no shadows, no gradients, no borders on cards — just bright flat fills, simple icons and clean type.

“Flat UI”Minimal & CleanEra: 2012 → todayFriendlyPlayfulTrustworthy

Open full screen ↗

flat-design / landingEN

flat-design / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm3pxRadius md4pxRadius lg6pxRadius xl8pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

This recipe redefines bg, surface, surface-2, text, text-muted, border in its own rules, so edits to those colours may show only in part.

Design keywords

Say these words to ask for this style.

no shadowssolid colour blocksflat UI colourssimple line iconsicons on coloured circlessmall 4px radiuswhite text on colourbig touch targets

Flat Design (the iOS 7 / Windows Metro / "Flat UI" kit era) removed every fake material. Surfaces are solid fills with zero shadow and zero gradient; hierarchy comes from colour blocks, size and whitespace. A palette of 5–6 saturated "flat UI colours" (turquoise, peter-river blue, wisteria, sunflower, pomegranate) is used in big confident blocks with white or midnight text. Icons are simple single-weight glyphs on coloured circles, and buttons are plain rectangles with a 4px radius that simply darken on press.

Best for

Education and e-learning apps
Onboarding-heavy consumer products
Admin templates and simple dashboards
Info sites that must load fast on low-end phones

Avoid for

Luxury and premium brands that need depth or materiality
Dense pro tools where colour blocks overload
Brands that need a photographic, emotional feel

✓ Do

Use 5–6 saturated flat colours as full-bleed card and section fills
Keep elevation at zero: box-shadow none on every surface
Make touch targets 48px+ and use solid colour for state (hover = darken 14%, pressed = darken 28%)
Use one simple icon set on solid circles

✕ Don't

No drop shadows, inner shadows, bevels or gradients
No textures, blur or glass
Don’t outline cards — separate them with colour and space
Don’t mix flat fills with skeuomorphic icons

Not to be confused with

Material 3 Expressive →Material uses tonal elevation, shadows and large rounded shapes; Flat Design is zero-elevation with small 4px corners and fully saturated fills.Neubrutalism →Neubrutalism outlines everything in thick black and adds hard offset shadows; Flat Design has no outlines and no shadows at all.Vibrant & Block-based →Vibrant block-based goes loud and asymmetric with clashing neon and huge type; Flat Design is orderly, grid-based and uses a calm classic flat-UI palette.

On mobile

Flat is the most touch-friendly style: 48px+ solid buttons, full-width colour cards and a solid-colour tab bar. Press state = darker fill, never a shadow. Costs nothing on low-end phones.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinMontserrat · 600/700/800

The quick brown fox

Heading · ThaiPrompt · 500/600/700/800

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinLato · 400/700

Clear words make shared decisions.

Body · ThaiAnuphan · 400/500/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Prompt shares Montserrat’s wide geometric bowls and loopless construction; Anuphan matches Lato’s friendly, rounded-humanist body texture.

Colour palette

Light

Dark

Design tokens

Radius	`sm 3px · md 4px · lg 6px · xl 8px · pill 999px`
Border	`2px`
Shadow	`none`
Display	`clamp(2.6rem, 5.6vw, 4.5rem)`
Motion	`150ms ease-out`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Flat Design (flat-design) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Lato:wght@400;700&family=Prompt:wght@500;600;700;800&family=Anuphan:wght@400;500;700&display=swap
 */
:root {
  --radius: 6px;
  --background: #FFFFFF;
  --foreground: #2C3E50;
  --card: #ECF0F1;
  --card-foreground: #2C3E50;
  --popover: #ECF0F1;
  --popover-foreground: #2C3E50;
  --primary: #1F6FB2;
  --primary-foreground: #FFFFFF;
  --secondary: #F1C40F;
  --secondary-foreground: #2C3E50;
  --muted: #F5F7F8;
  --muted-foreground: #5D6D7E;
  --accent: #F5F7F8;
  --accent-foreground: #2C3E50;
  --destructive: #C0392B;
  --border: #D5DBDF;
  --input: #D5DBDF;
  --ring: #1F6FB2;
  --chart-1: #3498DB;
  --chart-2: #1ABC9C;
  --chart-3: #F1C40F;
  --chart-4: #E74C3C;
  --chart-5: #9B59B6;
  --sidebar: #ECF0F1;
  --sidebar-foreground: #2C3E50;
  --sidebar-primary: #1F6FB2;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F5F7F8;
  --sidebar-accent-foreground: #2C3E50;
  --sidebar-border: #D5DBDF;
  --sidebar-ring: #1F6FB2;
}

.dark {
  --background: #1B2631;
  --foreground: #FFFFFF;
  --card: #2C3E50;
  --card-foreground: #FFFFFF;
  --popover: #2C3E50;
  --popover-foreground: #FFFFFF;
  --primary: #3498DB;
  --primary-foreground: #0E1A24;
  --secondary: #F1C40F;
  --secondary-foreground: #1B2631;
  --muted: #22313F;
  --muted-foreground: #BFC9D1;
  --accent: #22313F;
  --accent-foreground: #FFFFFF;
  --destructive: #E74C3C;
  --border: #3D566E;
  --input: #3D566E;
  --ring: #3498DB;
  --chart-1: #3498DB;
  --chart-2: #1ABC9C;
  --chart-3: #F1C40F;
  --chart-4: #E74C3C;
  --chart-5: #9B59B6;
  --sidebar: #2C3E50;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #3498DB;
  --sidebar-primary-foreground: #0E1A24;
  --sidebar-accent: #22313F;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #3D566E;
  --sidebar-ring: #3498DB;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Flat Design (flat-design) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Lato:wght@400;700&family=Prompt:wght@500;600;700;800&family=Anuphan:wght@400;500;700&display=swap
 */
@theme {
  --color-bg: #FFFFFF;
  --color-surface: #ECF0F1;
  --color-surface-2: #F5F7F8;
  --color-text: #2C3E50;
  --color-text-muted: #5D6D7E;
  --color-primary: #1F6FB2;
  --color-on-primary: #FFFFFF;
  --color-secondary: #F1C40F;
  --color-on-secondary: #2C3E50;
  --color-accent: #1ABC9C;
  --color-border: #D5DBDF;
  --color-success: #1E8449;
  --color-warning: #E67E22;
  --color-danger: #C0392B;
  --color-chart-1: #3498DB;
  --color-chart-2: #1ABC9C;
  --color-chart-3: #F1C40F;
  --color-chart-4: #E74C3C;
  --color-chart-5: #9B59B6;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 0 #0000;
  --font-heading: "Montserrat", "Prompt", system-ui, sans-serif;
  --font-body: "Lato", "Anuphan", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #1B2631;
  --color-surface: #2C3E50;
  --color-surface-2: #22313F;
  --color-text: #FFFFFF;
  --color-text-muted: #BFC9D1;
  --color-primary: #3498DB;
  --color-on-primary: #0E1A24;
  --color-secondary: #F1C40F;
  --color-on-secondary: #1B2631;
  --color-accent: #1ABC9C;
  --color-border: #3D566E;
  --color-success: #2ECC71;
  --color-warning: #F39C12;
  --color-danger: #E74C3C;
  --color-chart-1: #3498DB;
  --color-chart-2: #1ABC9C;
  --color-chart-3: #F1C40F;
  --color-chart-4: #E74C3C;
  --color-chart-5: #9B59B6;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Flat Design (flat-design). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Lato:wght@400;700&family=Prompt:wght@500;600;700;800&family=Anuphan:wght@400;500;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.9412,
            0.9451
          ],
          "hex": "#ecf0f1"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.9686,
            0.9725
          ],
          "hex": "#f5f7f8"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.2431,
            0.3137
          ],
          "hex": "#2c3e50"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3647,
            0.4275,
            0.4941
          ],
          "hex": "#5d6d7e"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.4353,
            0.698
          ],
          "hex": "#1f6fb2"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.7686,
            0.0588
          ],
          "hex": "#f1c40f"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.2431,
            0.3137
          ],
          "hex": "#2c3e50"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.7373,
            0.6118
          ],
          "hex": "#1abc9c"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8353,
            0.8588,
            0.8745
          ],
          "hex": "#d5dbdf"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.5176,
            0.2863
          ],
          "hex": "#1e8449"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.4941,
            0.1333
          ],
          "hex": "#e67e22"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7529,
            0.2235,
            0.1686
          ],
          "hex": "#c0392b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.5961,
            0.8588
          ],
          "hex": "#3498db"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.7373,
            0.6118
          ],
          "hex": "#1abc9c"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.7686,
            0.0588
          ],
          "hex": "#f1c40f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9059,
            0.298,
            0.2353
          ],
          "hex": "#e74c3c"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6078,
            0.349,
            0.7137
          ],
          "hex": "#9b59b6"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.149,
            0.1922
          ],
          "hex": "#1b2631"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.2431,
            0.3137
          ],
          "hex": "#2c3e50"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1333,
            0.1922,
            0.2471
          ],
          "hex": "#22313f"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.749,
            0.7882,
            0.8196
          ],
          "hex": "#bfc9d1"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.5961,
            0.8588
          ],
          "hex": "#3498db"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.102,
            0.1412
          ],
          "hex": "#0e1a24"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.7686,
            0.0588
          ],
          "hex": "#f1c40f"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.149,
            0.1922
          ],
          "hex": "#1b2631"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.7373,
            0.6118
          ],
          "hex": "#1abc9c"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.3373,
            0.4314
          ],
          "hex": "#3d566e"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.8,
            0.4431
          ],
          "hex": "#2ecc71"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.6118,
            0.0706
          ],
          "hex": "#f39c12"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9059,
            0.298,
            0.2353
          ],
          "hex": "#e74c3c"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.5961,
            0.8588
          ],
          "hex": "#3498db"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.7373,
            0.6118
          ],
          "hex": "#1abc9c"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.7686,
            0.0588
          ],
          "hex": "#f1c40f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9059,
            0.298,
            0.2353
          ],
          "hex": "#e74c3c"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6078,
            0.349,
            0.7137
          ],
          "hex": "#9b59b6"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 2,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Montserrat",
        "Prompt",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Lato",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 150,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0,
      0,
      0.58,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!