# Flat Design > Pure 2D: solid colour blocks, no shadows, no gradients, no borders on cards — just bright flat fills, simple icons and clean type. - Nickname: Flat UI - Also called: Flat UI, Flat 2.0, Metro-style flat - Category: Minimal & Clean - Moods: Friendly, Playful, Trustworthy - Industries: Education, Startup & Tech, SaaS, Kids & Family, Government & Nonprofit - Style page: https://uilingo.dev/styles/flat-design/ 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 ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Flat Design" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Pure 2D: solid colour blocks, no shadows, no gradients, no borders on cards — just bright flat fills, simple icons and clean type. Design keywords: no shadows, solid colour blocks, flat UI colours, simple line icons, icons on coloured circles, small 4px radius, white text on colour, big touch targets. ## Visual language Pure two-dimensional UI from the iOS 7 / Flat UI era: every surface is a solid fill with zero elevation — no shadows, no gradients, no bevels, no textures. Hierarchy comes from big confident blocks of saturated 'flat UI' colour (peter-river blue, turquoise, wisteria purple, sunflower yellow, pomegranate red) set against white and a dark midnight-blue (#2C3E50) for chrome. Shapes are plain rectangles with small 3–6px corners, icons are simple single-weight glyphs on solid circles, and the page feels bright, orderly and friendly, like a well-organised classroom poster. ## Signature details (must be visible) - box-shadow: none and no gradients on every surface, including buttons, cards, inputs, tab bars and modals - Palette beyond the tokens, declared as named custom properties next to them: --flat-blue #1F6FB2, --flat-turq #1ABC9C, --flat-yellow #F1C40F, --flat-red #C0392B, --flat-purple #8E44AD, --flat-sea #117A65, --flat-ink #1B2631, --flat-midnight #2C3E50, --flat-midnight-2 #34495E, --flat-clouds #ECF0F1, plus badge tint pairs #D6EAF8/#1A5D96, #D5F5E3/#186A3B, #FDEBD0/#8A4B08, #FADBD8/#922B21. Every colour comes from the tokens or this list - Feature cards are full solid colour blocks rotating #1F6FB2, #1ABC9C, #8E44AD, #F1C40F, #C0392B, #117A65 — white text on blue/purple/red/sea, #1B2631 text on turquoise/yellow - Chrome in solid midnight #2C3E50: top nav, footer, dashboard sidebar, mobile tab bar, testimonials and FAQ, with white text and a #F1C40F active marker - Small radius only: 4px on buttons/inputs, 6px on cards, 8px on big panels — never pill-shaped cards - Icons are 1.75–2px line glyphs centred in 52px circles: white at 20% on blue, purple, red and sea cards; #1B2631 at 14% on turquoise and yellow cards; solid #1F6FB2 with a white glyph on grey or white surfaces - A full-bleed solid #1F6FB2 stats band with 6px #F1C40F left bars on each number - Eyebrows are solid #1ABC9C tags with #1B2631 text, 3px radius, 700 weight, 0.74rem; Thai eyebrows 0.85rem with no tracking - Montserrat 700–800 headings with Lato body; Thai in Prompt / Anuphan. Uppercase and negative tracking apply to Latin-only strings; when a heading or label is Thai (:lang(th)), use letter-spacing 0, no uppercase, and line-height of at least 1.3 ## Design tokens — use these exact values Colours (light mode): - background #FFFFFF - surface #ECF0F1 - surface-2 #F5F7F8 - text #2C3E50 - text-muted #5D6D7E - primary #1F6FB2 (text on it #FFFFFF) - secondary #F1C40F (text on it #2C3E50) - accent #1ABC9C - border #D5DBDF - success #1E8449 · warning #E67E22 · danger #C0392B - chart series #3498DB, #1ABC9C, #F1C40F, #E74C3C, #9B59B6 Radius: sm 3px, md 4px, lg 6px, xl 8px, pill 999px Border width: 2px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 150ms ease-out ## Typography (Latin + Thai) - Headings: Montserrat 600/700/800 with Thai fallback Prompt 500/600/700/800 - Body: Lato 400/700 with Thai fallback Anuphan 400/500/700 - Google Fonts URL: 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 - CSS stacks: heading `"Montserrat", "Prompt", system-ui, sans-serif`; body `"Lato", "Anuphan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.6vw, 4.5rem), heading weight 700, heading tracking -0.015em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Prompt shares Montserrat’s wide geometric bowls and loopless construction; Anuphan matches Lato’s friendly, rounded-humanist body texture. ## Components - Buttons: solid rectangle, 4px radius, 48px min height (56px large), 700 weight, no border; hover = darken 14% (color-mix(in srgb, fill 86%, #000)), pressed = darken 28% (color-mix 72% with #000); never translate or add shadow. The same hover/pressed rule applies to every button variant - Secondary button: #ECF0F1 fill with #2C3E50 text; inside a #ECF0F1 card it switches to #D5DBDF so it never disappears; accent button: #F1C40F with #1B2631 text - Cards: #ECF0F1 fill (or a flat colour block), no border, no shadow, 24px padding; hover = brightness(0.96) only - Inputs: white fill, 2px solid #D5DBDF border, 4px radius, 48px tall; focus = border turns #1F6FB2, no glow ring; error = #C0392B border on a #FDEDEC fill - Checkbox/switch/radio cards: checkbox checked = turquoise fill with dark tick; switch track #BDC3C7 → #1ABC9C, white knob without shadow; radio cards are #ECF0F1 blocks (white when sitting inside a grey card) and the selected one gets a 2px #1F6FB2 border on a pale blue tint - Badges: solid pale tints with dark text (#D6EAF8/#1A5D96, #D5F5E3/#186A3B, #FDEBD0/#8A4B08, #FADBD8/#922B21), 3px radius; solid badge = sunflower yellow - Tabs: active tab = 4px solid primary underline and primary text; segmented control = grey track with solid primary selected segment - Dashboard KPIs: each KPI a solid colour tile (blue, turquoise, purple, yellow) with all text, delta and sparkline in the tile's text colour; non-KPI widgets are #F5F7F8 fills with no border - Charts: 3.5px solid lines (second series solid, not dashed), flat 14% area fill, square-ended bars in the 5 flat colours, thick 9px donut - Mobile tab bar: solid #2C3E50 bar, grey-blue icons, active item = icon inside a #F1C40F rounded rectangle - Testimonials: #34495E cards on the #2C3E50 section, white text, a large #F1C40F quote mark, 6px radius, no border - Pricing: #ECF0F1 tiles on white; the highlighted plan is solid #1F6FB2 with white text, a white secondary button and #F1C40F check icons - FAQ: rows separated by a 2px border with a #F1C40F '+' toggle, on the midnight section with white text - Tables: zebra rows in #F5F7F8, 2px #ECF0F1 header rule, no cell borders, 10px inline padding; status badges never wrap ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → features → stats → steps → testimonials → pricing → faq → cta. Feature section as grid. Landing: split hero with a huge 800-weight headline and two solid buttons on white. Hero media = the UI mock card (white cards) on a solid #1ABC9C panel with 8px radius and a 96px #F1C40F circle tucked behind its top-right corner, with no illustration. Section colours: features, steps and pricing on white; stats band solid #1F6FB2; testimonials and FAQ on solid #2C3E50 with #34495E cards and white text; CTA a solid #F1C40F block with an 8px radius and a #2C3E50 button; footer #2C3E50 with #F1C40F column headings. Features are a 3-column grid of differently coloured solid cards; steps use coloured numbered squares (blue, turquoise, purple, red). Flat geometric scenes (a #F1C40F sun circle, clip-path #2C3E50 mountains and a #117A65 ground strip on #3498DB) are used only for alternating feature art and article figures. Dashboard: midnight #2C3E50 sidebar with a turquoise active item, white canvas with a 2px #ECF0F1 topbar rule, coloured KPI tiles, and every other widget a #F5F7F8 fill with no border. ## Content Use realistic product copy (fictional brand) suited to: Education and e-learning apps. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Any drop shadow, long shadow, inner shadow, bevel or gradient — even subtle ones turn it into Material or skeuomorphism - Outlining cards or widgets with borders (that is neubrutalism / wireframe) — separate with colour and space - Pastel or muted palettes; flat design needs saturated flat-UI hues - Large rounded pill cards or 20px+ radii, which read as soft UI or Material 3 - Glass, blur, noise or photographic textures - Mixing detailed or 3D icons with the flat line icons ## Stack notes One self-contained HTML file with a