# Exaggerated Minimalism > Headlines blown up to poster size on an almost empty page — no boxes, no icons, one electric-blue accent. - Nickname: Giant type, empty page - Also called: Maximal Minimalism, Big Type Minimal, Oversized Minimal - Category: Minimal & Clean - Moods: Bold, Calm, Edgy - Industries: Creative & Portfolio, Startup & Tech, Luxury & Premium, Media & Entertainment - Style page: https://uilingo.dev/styles/exaggerated-minimalism/ Exaggerated Minimalism strips the interface down to words and space, then turns the words up to 10–14vw so the headline itself becomes the hero image. Cards, borders, shadows and icons almost disappear: sections are separated by a single hairline and huge margins, buttons are a blue pill or an underlined word, and inputs are a bare underline. Exactly one saturated accent (ultramarine) marks the action. It feels confident and gallery-like because it refuses to decorate. ## Best for - Studio, agency and designer portfolios - Product launches with one strong message - Fashion, architecture and gallery sites - Campaign pages with a single CTA ## Avoid for - Data-heavy admin tools that need many controls per screen - Content sites with long headlines or many languages per page - Users who need visible affordances (icons, boxed buttons) ## Do - Set the hero headline at 10–14vw Latin (−0.05 to −0.07em tracking, 0.86–0.92 line-height); Thai 9–10vw, no tracking, line-height 1.2 - Leave 128px between sections (72px on mobile) and keep one idea per screen - Use exactly one accent (#2B2BFF) — for the primary action and one highlight per view - Separate content with 1px hairlines instead of boxes ## Don't - Don’t add shadows, gradients, card boxes or icon tiles - Don’t introduce a second accent colour or coloured badges for decoration - Don’t shrink the headline to fit more copy — cut the copy - Don’t track or uppercase Thai; Thai hero display uses line-height 1.2; every other Thai heading (h1, h2, CTA, article title) ≥ 1.3 ## Audit Passed after 3 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 "Exaggerated Minimalism" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Headlines blown up to poster size on an almost empty page — no boxes, no icons, one electric-blue accent. Design keywords: giant headline, poster-size type, extreme whitespace, one accent colour, no cards or icons, tight negative tracking, hairline separators, underlined text links. ## Visual language An almost empty off-white page (#F6F6F3) where one sentence, set in a medium-weight neo-grotesk at 10–14vw (Thai 9–10vw) with very tight Latin tracking, is the entire hero image. There are no cards, shadows, icon tiles or gradients: content is separated by 1px hairlines and 128px of space between sections, buttons are either a single ultramarine pill or an underlined word, and inputs are bare underlines. The only colour is one saturated ultramarine (#2B2BFF), used for the primary action and one highlight per screen. It reads like a gallery wall caption blown up to billboard scale — confident, quiet and slightly provocative. ## Signature details (must be visible) - Hero display: Latin clamp(4rem, 12.4vw, 12rem) / 500 / -0.065em / line-height 0.86; Thai clamp(3.5rem, 9.5vw, 9rem) / 500 / 0 tracking / line-height 1.2. Section h2: Latin clamp(2.25rem, 5vw, 4.25rem) / line-height 0.98, Thai same size at line-height 1.3. The display token clamp(3.25rem, 8vw, 7.5rem) is only for non-hero display text. - Thai line-height precedence: the Thai hero display is the ONLY exception at 1.2; every other Thai heading (h1, h2, h3, CTA sentence, article title, screen titles) uses ≥1.3; Thai body ≥1.7. - A Thai-only hero is 1–2 short lines with about 11–13 spacing glyphs on the longest line (do not count tone marks or above/below vowels), so the LONGEST line reaches ≥75% of the container at 9.5vw; the second line may be shorter. Cut words rather than add a Latin line. - Hero section min-height: min(100vh − nav height, 880px), content bottom-aligned (flex-end), eyebrow 32px above the headline; the longest headline line spans ≥75% of the 1280px container width; the empty space above is intentional. Poster headline only, no visual; lead bottom-left, actions bottom-right. - Exactly one accent, #2B2BFF, and on a landing page only in these places: nav brand dot, eyebrow dots, primary pill, first stat numeral, and one highlighted word in the hero — nothing else. Interaction states (secondary-button hover text, feature-row hover title, input focus underline, focus ring, pressed pill) may use the accent; they do not count toward the one-highlight limit. Pressed pill = color-mix(in srgb, #2B2BFF 85%, #000). - Cards replaced by a 1px #D6D6D1 top hairline with zero side padding; no box, no radius, no shadow. - All spacing is plain 8px multiples: section padding 128px top/bottom (72px under 720px), feature rows 48px top/bottom, feature/stat grid gaps 32–64px. The ×1.4 density figure is already folded into these numbers — do not multiply again. - Eyebrow = 8px #2B2BFF dot + label in Geist Mono 0.8rem, 10px gap (Thai label: Noto Sans Thai 0.9rem 500; digits stay Geist Mono). Counters (01, 02…) and table heads also Geist Mono 0.8rem (Thai: Noto Sans Thai 0.9rem 500); mono stack = "Geist Mono", "Noto Sans Thai", monospace. ## Design tokens — use these exact values Colours (light mode): - background #F6F6F3 - surface #F6F6F3 - surface-2 #EBEBE7 - text #0A0A0A - text-muted #5E5E5A - primary #2B2BFF (text on it #FFFFFF) - secondary #0A0A0A (text on it #F6F6F3) - accent #2B2BFF - border #D6D6D1 - success #1F7A45 · warning #8F6200 · danger #C9252F - chart series #2B2BFF, #0A0A0A, #9A9A95, #C6C6C1, #5E5E5A Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 999px Border width: 1px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.4 density Motion: 420ms cubic-bezier(.2,.7,0,1) ## Typography (Latin + Thai) - Headings: Geist 400/500/600 with Thai fallback Noto Sans Thai 400/500/600 - Body: Geist 400/500 with Thai fallback Noto Sans Thai 400/500 - Mono: Geist Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;600&display=swap - CSS stacks: heading `"Geist", "Noto Sans Thai", system-ui, sans-serif`; body `"Geist", "Noto Sans Thai", system-ui, sans-serif`; mono `"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Noto Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3.25rem, 8vw, 7.5rem), heading weight 500, heading tracking -0.05em (Latin only), sentence-case labels. - 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: Noto Sans Thai is loopless with even, monolinear strokes and an open x-height, so it holds up at poster size next to Geist’s neutral neo-grotesk without adding flourish. ## Components - Buttons: sm 36px / md 48px / lg 64px tall; pill padding-inline 18 / 24 / 34px; secondary (underlined word) padding-inline 2–4px. Focus-visible on buttons, links and inputs: outline 3px solid rgb(43 43 255 / .45), offset 2px. - Primary button: #2B2BFF pill, white 500 text; hover flips to #0A0A0A with #F6F6F3 text, no lift or shadow; pressed = color-mix(in srgb, #2B2BFF 85%, #000) and scale 0.98. - Secondary button: transparent, no border, underlined text (1px underline, 7px offset); hover turns the text #2B2BFF; pressed thickens the underline to 2px. - Input, select and textarea: transparent with only a 1px #0A0A0A bottom border, no box, 1.05rem text, padding-inline 0 (textarea min-height 120px, padding 12px 0). Focus: border-bottom-color #2B2BFF + box-shadow 0 1px 0 #2B2BFF (reads as a 2px line). Surface equals background; surface-2 #EBEBE7 is used only for table row hover and the input autofill track. Radio options are hairline-underlined rows in a 2-column grid, never wrapping their label. - Feature list: 3 tracks — 80px mono counter | title 1.25fr | muted body 1fr (max 34ch), 32px gap after the counter and 40px between title and body; rows padded 48px top/bottom with a 1px #D6D6D1 hairline above each row. Title clamp(2rem, 4.2vw, 3.6rem) / 1 / -0.05em (Thai clamp(1.8rem, 3.4vw, 2.9rem) / 1.3). Single column under 720px. - Stats: exactly 4 stats in a 2×2 grid (1 column under 720px), gaps 64px row / 48px column; each = 1px top hairline, 24px padding-top, numeral clamp(3.5rem, 10vw, 9rem) / 0.9 / -0.07em, then a 1.05rem label 16px below; the first numeral is #2B2BFF. - CTA section: one sentence at Latin clamp(3rem, 8.5vw, 8rem) / 0.9 / -0.065em, Thai clamp(2.4rem, 6vw, 5.5rem) / line-height 1.3, then an underline email input (1px #0A0A0A bottom border) + ultramarine pill on one row. - Footer: a hairline-topped text footer with a large wordmark (clamp(2rem, 4vw, 3rem)) and column heads in Geist Mono 0.8rem muted; no logo tile. - Nav: transparent, no border, 88px tall; brand = 12px #2B2BFF dot + wordmark. On a single landing page, underline the first nav link (aria-current) with 1px at 7px offset; the right-hand CTA is an underlined word, not a pill. - Badges: 1px outline in currentColor, mono 0.72rem (Thai: Noto Sans Thai 0.78rem), no fill (solid badge = ultramarine). success/warning/danger and the chart series are for app screens only (form errors, dashboard status, charts); none appear on the landing page. - Motion: use 420ms cubic-bezier(.2,.7,0,1) only for colour/background and transform transitions on buttons, links, inputs and feature-row hover; no entrance or scroll animations. - (app screens only) Dashboard: icon-only rail, 5rem page title, KPI numerals at 3.4rem, single blue chart line, no chart area fills; forecast range drawn as a 1px dashed grey outline, never filled. - (app screens only) Tab bar: words only, no icons, active tab = text colour + 7px blue dot. Featured card: flat ultramarine block, 2.5rem white title, 2px progress line. ## 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: poster-sized headline that fills the viewport width, visual below. Navigation: minimal style. Sections in order: hero → features → stats → cta. Feature section as list. IGNORE the generic hero line above: no product visual, mockup or illustration above, beside or below the hero — poster headline only, lead bottom-left, actions bottom-right. Landing is hero (poster) → features index → giant stats → one-sentence CTA → text footer; nothing else. Keep the container wide (1280px) but put most content in one or two columns. Every section starts with an eyebrow (8px blue dot + mono label) and a huge left-aligned heading, with 128px padding top and bottom (72px under 720px wide). Dashboards use a slim icon rail, enormous page title and KPI numbers, and hairline-topped widgets with plenty of space between them. ## Content Use realistic product copy (fictional brand) suited to: Studio, agency and designer portfolios. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Set the hero headline at 10–14vw Latin (−0.05 to −0.07em tracking, 0.86–0.92 line-height); Thai 9–10vw, no tracking, line-height 1.2 - Leave 128px between sections (72px on mobile) and keep one idea per screen - Use exactly one accent (#2B2BFF) — for the primary action and one highlight per view - Separate content with 1px hairlines instead of boxes ## Don't - Don’t add shadows, gradients, card boxes or icon tiles - Don’t introduce a second accent colour or coloured badges for decoration - Don’t shrink the headline to fit more copy — cut the copy - Don’t track or uppercase Thai; Thai hero display uses line-height 1.2; every other Thai heading (h1, h2, CTA, article title) ≥ 1.3 - Adding cards with backgrounds, borders or shadows — it collapses into generic SaaS - A second accent colour, coloured icon tiles or colour emoji - Any hero image, mockup or product visual — the headline is the image - Boxed inputs or textareas — every field is a bare underline - Heavy condensed caps or colour blocks behind type (that is Bold Typography / Poster) - Visible grid lines and red signal squares (that is Swiss) - Shrinking the headline, or adding a Latin line under a Thai hero, instead of cutting words - Letter-spacing or forced uppercase on Thai text ## Stack notes One self-contained HTML file with a