Exaggerated Minimalism

Also called: Maximal Minimalism, Big Type Minimal, Oversized Minimal

Headlines blown up to poster size on an almost empty page — no boxes, no icons, one electric-blue accent.

“Giant type, empty page”Minimal & CleanEra: 2018 → todayBoldCalmEdgy

exaggerated-minimalism / landingEN

exaggerated-minimalism / 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 sm0pxRadius md0pxRadius lg0pxRadius xl0pxDensity×1.4Display 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.

Design keywords

Say these words to ask for this style.

giant headlineposter-size typeextreme whitespaceone accent colourno cards or iconstight negative trackinghairline separatorsunderlined text links

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

Not to be confused with

Minimalism & Swiss Style →Swiss keeps a disciplined, readable type scale on a visible grid with red signals; Exaggerated Minimalism blows one headline up to poster size and hides the grid.Bold Typography (Poster) →Bold Typography is loud — heavy condensed caps, colour blocks and collage; Exaggerated Minimalism uses a medium-weight grotesk in sentence case on an empty off-white page.Minimal & Direct →Minimal & Direct is a conversion layout with normal-sized type and visible UI; Exaggerated Minimalism makes the type itself the image and removes nearly all chrome.

On mobile

Keep the giant-type idea with 2.5–3.1rem screen titles (Thai 1.9–2.3rem at line-height 1.3), drop icon tiles and card boxes, make the tab bar plain words with a blue dot for the active tab, and spend the one accent on the featured block or the primary button.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinGeist · 400/500/600

The quick brown fox

Heading · ThaiNoto Sans Thai · 400/500/600

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

Body · LatinGeist · 400/500

Clear words make shared decisions.

Body · ThaiNoto Sans Thai · 400/500

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

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 999px`
Border	`1px`
Shadow	`none`
Display	`clamp(3.25rem, 8vw, 7.5rem)`
Motion	`420ms cubic-bezier(.2,.7,0,1)`
Density	`×1.4`

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 · Exaggerated Minimalism (exaggerated-minimalism) — 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=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;600&display=swap
 */
:root {
  --radius: 0px;
  --background: #F6F6F3;
  --foreground: #0A0A0A;
  --card: #F6F6F3;
  --card-foreground: #0A0A0A;
  --popover: #F6F6F3;
  --popover-foreground: #0A0A0A;
  --primary: #2B2BFF;
  --primary-foreground: #FFFFFF;
  --secondary: #0A0A0A;
  --secondary-foreground: #F6F6F3;
  --muted: #EBEBE7;
  --muted-foreground: #5E5E5A;
  --accent: #EBEBE7;
  --accent-foreground: #0A0A0A;
  --destructive: #C9252F;
  --border: #D6D6D1;
  --input: #D6D6D1;
  --ring: #2B2BFF;
  --chart-1: #2B2BFF;
  --chart-2: #0A0A0A;
  --chart-3: #9A9A95;
  --chart-4: #C6C6C1;
  --chart-5: #5E5E5A;
  --sidebar: #F6F6F3;
  --sidebar-foreground: #0A0A0A;
  --sidebar-primary: #2B2BFF;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #EBEBE7;
  --sidebar-accent-foreground: #0A0A0A;
  --sidebar-border: #D6D6D1;
  --sidebar-ring: #2B2BFF;
}

.dark {
  --background: #0A0A0A;
  --foreground: #F2F2EE;
  --card: #0A0A0A;
  --card-foreground: #F2F2EE;
  --popover: #0A0A0A;
  --popover-foreground: #F2F2EE;
  --primary: #5C5CFF;
  --primary-foreground: #FFFFFF;
  --secondary: #F2F2EE;
  --secondary-foreground: #0A0A0A;
  --muted: #171717;
  --muted-foreground: #9C9C97;
  --accent: #171717;
  --accent-foreground: #F2F2EE;
  --destructive: #FF5A5F;
  --border: #2C2C2A;
  --input: #2C2C2A;
  --ring: #5C5CFF;
  --chart-1: #7070FF;
  --chart-2: #F2F2EE;
  --chart-3: #6E6E6A;
  --chart-4: #3A3A38;
  --chart-5: #A0A09B;
  --sidebar: #0A0A0A;
  --sidebar-foreground: #F2F2EE;
  --sidebar-primary: #5C5CFF;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #171717;
  --sidebar-accent-foreground: #F2F2EE;
  --sidebar-border: #2C2C2A;
  --sidebar-ring: #5C5CFF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Exaggerated Minimalism (exaggerated-minimalism) — 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=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #F6F6F3;
  --color-surface: #F6F6F3;
  --color-surface-2: #EBEBE7;
  --color-text: #0A0A0A;
  --color-text-muted: #5E5E5A;
  --color-primary: #2B2BFF;
  --color-on-primary: #FFFFFF;
  --color-secondary: #0A0A0A;
  --color-on-secondary: #F6F6F3;
  --color-accent: #2B2BFF;
  --color-border: #D6D6D1;
  --color-success: #1F7A45;
  --color-warning: #8F6200;
  --color-danger: #C9252F;
  --color-chart-1: #2B2BFF;
  --color-chart-2: #0A0A0A;
  --color-chart-3: #9A9A95;
  --color-chart-4: #C6C6C1;
  --color-chart-5: #5E5E5A;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 0 #0000;
  --font-heading: "Geist", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Geist", "Noto Sans Thai", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace;
}

.dark {
  --color-bg: #0A0A0A;
  --color-surface: #0A0A0A;
  --color-surface-2: #171717;
  --color-text: #F2F2EE;
  --color-text-muted: #9C9C97;
  --color-primary: #5C5CFF;
  --color-on-primary: #FFFFFF;
  --color-secondary: #F2F2EE;
  --color-on-secondary: #0A0A0A;
  --color-accent: #7070FF;
  --color-border: #2C2C2A;
  --color-success: #3FB950;
  --color-warning: #D29922;
  --color-danger: #FF5A5F;
  --color-chart-1: #7070FF;
  --color-chart-2: #F2F2EE;
  --color-chart-3: #6E6E6A;
  --color-chart-4: #3A3A38;
  --color-chart-5: #A0A09B;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Exaggerated Minimalism (exaggerated-minimalism). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9647,
            0.9529
          ],
          "hex": "#f6f6f3"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9647,
            0.9529
          ],
          "hex": "#f6f6f3"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9216,
            0.9216,
            0.9059
          ],
          "hex": "#ebebe7"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.3686,
            0.3529
          ],
          "hex": "#5e5e5a"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1686,
            1
          ],
          "hex": "#2b2bff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9647,
            0.9529
          ],
          "hex": "#f6f6f3"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1686,
            1
          ],
          "hex": "#2b2bff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.8392,
            0.8196
          ],
          "hex": "#d6d6d1"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.4784,
            0.2706
          ],
          "hex": "#1f7a45"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.3843,
            0
          ],
          "hex": "#8f6200"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.1451,
            0.1843
          ],
          "hex": "#c9252f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1686,
            1
          ],
          "hex": "#2b2bff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.6039,
            0.5843
          ],
          "hex": "#9a9a95"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7765,
            0.7765,
            0.7569
          ],
          "hex": "#c6c6c1"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.3686,
            0.3529
          ],
          "hex": "#5e5e5a"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0902,
            0.0902
          ],
          "hex": "#171717"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.949,
            0.9333
          ],
          "hex": "#f2f2ee"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6118,
            0.6118,
            0.5922
          ],
          "hex": "#9c9c97"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3608,
            0.3608,
            1
          ],
          "hex": "#5c5cff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.949,
            0.9333
          ],
          "hex": "#f2f2ee"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4392,
            0.4392,
            1
          ],
          "hex": "#7070ff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.1725,
            0.1647
          ],
          "hex": "#2c2c2a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.7255,
            0.3137
          ],
          "hex": "#3fb950"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8235,
            0.6,
            0.1333
          ],
          "hex": "#d29922"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3529,
            0.3725
          ],
          "hex": "#ff5a5f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4392,
            0.4392,
            1
          ],
          "hex": "#7070ff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.949,
            0.9333
          ],
          "hex": "#f2f2ee"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4314,
            0.4314,
            0.4157
          ],
          "hex": "#6e6e6a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2275,
            0.2275,
            0.2196
          ],
          "hex": "#3a3a38"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6275,
            0.6275,
            0.6078
          ],
          "hex": "#a0a09b"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Geist",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Geist",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Geist Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 500
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 420,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.7,
      0,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.4
  }
}

Prompt builder

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

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
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!