# Minimalism & Swiss Style

> A strict grid, a neutral grotesque, black on white and one signal red — clarity as the aesthetic.

- Nickname: Swiss grid
- Also called: International Typographic Style, Swiss Minimal
- Category: Minimal & Clean
- Moods: Calm, Serious, Trustworthy
- Industries: Corporate & B2B, Creative & Portfolio, SaaS, Government & Nonprofit, Real Estate
- Style page: https://uilingo.dev/styles/minimalism-swiss/

Rooted in 1950s Swiss posters, this style lets typography and alignment carry the whole design. Layouts sit on a visible 12-column grid, headings are large and flush-left, decoration is replaced by rules (hairlines) and numbering, and colour is almost absent apart from a single accent. Corners are square and shadows do not exist.

## Best for
- Studios, architects and agencies
- Corporate sites and annual reports
- Documentation and B2B SaaS
- Museums and cultural institutions

## Avoid for
- Kids and playful consumer apps
- Brands that need warmth and emotion
- Gaming

## Do
- Align everything to a 12-column grid
- Create hierarchy with size and weight only
- Red only for small marks (squares, 2px underlines, numerals) plus one closing red CTA block

## Don't
- No shadows, gradients or rounded corners
- Don’t centre long text
- Don’t add decorative illustrations

## 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 "Minimalism & Swiss Style" UI style

Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light

## The style in one line
A strict grid, a neutral grotesque, black on white and one signal red — clarity as the aesthetic.
Design keywords: strict grid, flush-left type, neutral grotesque, hairline rules, one accent colour, square corners, generous whitespace, numbered sections.

## Visual language
A white sheet ruled like a 1950s Swiss poster: a faint 12-column grid is literally visible behind the page, every heading is a huge flush-left grotesque set tight, and structure comes from 1px black hairlines and mono numbering instead of boxes. There is no shadow, no radius, no gradient and no tint — only black #111111 on white #FFFFFF, a 5% grey, and one signal red #E30613 used as a small square, a rule or a single active state. It feels calm, exact and serious, like an annual report or a museum wayfinding system.

## Signature details (must be visible)
- Visible 12-column grid behind the page: 1px vertical lines in text colour at 5% opacity, columns of (100% − 48px) / 12 starting 24px from the edge (4 columns with 20px inset on mobile). Draw it on its own layer: position:fixed; inset:0; z-index:-1; pointer-events:none. Solid blocks (the red CTA, the black featured plan) cover it.
- Hero headline flush-left, 700 weight at -0.035em tracking, breaking into 3–4 stacked lines; long text is never centred. Latin: cap the headline at about 12 characters per line (max-width ≈12ch). Thai: do not cap the width in ch; break at phrase boundaries with <br>, or wrap each phrase in <span style="white-space:nowrap">, so you get 2–4 lines and never split a word (a max-width of about 14ch is only a ceiling).
- Eyebrows: uppercase 0.75rem 500 at 0.12em tracking, preceded by a solid 10×10px red #E30613 square. Positive tracking and uppercase apply to Latin only. Scope them with :lang(en) (or a .latin span for Latin words inside Thai copy), and set letter-spacing:0 and text-transform:none on Thai eyebrows, nav links, badges and table headers.
- Cards are not boxes: only a 1px black top rule, transparent fill, no side borders, with a mono two-digit counter ('01', '02' … in IBM Plex Mono 0.75rem muted) above each title
- Inputs are a single 1px bottom rule with zero side padding; focus turns it into a 2px red #E30613 underline, no glow or ring
- Stats (hero and stats section) = number 2.5–4rem 700 at -0.04em with a 1px black LEFT rule and 16px left padding; no top rule and no card around them.
- Exactly ONE large red AREA per page (the closing CTA block). Allowed small red fills: the primary-button hover state, at most one solid badge per view, the 10px squares, 2px underlines, step numerals, the 48×6 bar and the 4px featured-plan top border. Red #E30613 is the only colour.
- Spacing scale (8px × 1.1 density = unit 8.8px): 9 / 18 / 26 / 35 / 53 / 70 / 106px. Use these steps for gaps and section spacing; the page margin is fixed at 24px desktop / 20px mobile.

## Design tokens — use these exact values
Colours (light mode):
  - background #FFFFFF
  - surface #FFFFFF
  - surface-2 #F4F4F4
  - text #111111
  - text-muted #5E5E5E
  - primary #111111 (text on it #FFFFFF)
  - secondary #E30613 (text on it #FFFFFF)
  - accent #E30613
  - border #111111
  - success #1A7F37 · warning #B26B00 · danger #E30613
  - chart series #111111, #E30613, #8C8C8C, #C4C4C4, #5E5E5E
Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 0px
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.1 density
Motion: 150ms linear

## Typography (Latin + Thai)
- Headings: Inter Tight 500/600/700 with Thai fallback IBM Plex Sans Thai 500/600/700
- Body: Inter 400/500/600 with Thai fallback IBM Plex Sans Thai 400/500
- Mono: IBM Plex Mono
- Google Fonts URL: https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap
- CSS stacks: heading `"Inter Tight", "IBM Plex Sans Thai", system-ui, sans-serif`; body `"Inter", "IBM Plex Sans Thai", system-ui, sans-serif`; mono `"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to IBM Plex Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face.
- Display size clamp(3rem, 7.5vw, 6.5rem), heading weight 700, heading tracking -0.035em (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: IBM Plex Sans Thai is a loopless, rational grotesque — the closest Thai match to Helvetica-style neutrality.

## Components
- Primary button: solid #111111, white text 500, square corners, no shadow; hover swaps the fill to red #E30613 with no movement. Motion is almost none everywhere: 150ms linear colour swaps, no lifts, scales or translations.
- Outline button (1px #111111 border, transparent): dark text; hover inverts to black fill and white text. Note: the token named secondary (#E30613) is the red accent. It is used for marks and the CTA block, never for the outline button.
- Nav: white bar with a 1px black bottom rule, brand in 700 at -0.02em next to a small red square logo, links uppercase 0.8rem 500 at 0.08em tracking
- Feature card: 1px top rule only, 22px top padding, mono two-digit counter (digit-only, so no uppercase or tracking), small outline icon in text colour with no icon tile; hover recolours the top rule red
- Highlighted pricing card: solid #111111 block with white text, 26px padding and a 4px red top border; its button is #FFFFFF with #111111 text and on hover turns red #E30613 with white text. Other plans are open columns under a 1px rule.
- Red CTA block: the input is a single 1px white bottom rule that becomes 2px white on focus; the button is #FFFFFF with #111111 text and on hover fills #111111 with white text.
- Badges and labels: badges are square, transparent fill, 1px currentColor border, uppercase 0.68rem at 0.06em (the solid variant is red with white text, at most one per view); labels are uppercase 0.72rem 500 at 0.1em in muted grey #5E5E5E above underline-only inputs
- Tabs and segmented controls: square cells divided by 1px rules; selected = solid black cell with white text, or a 2px red underline for tabs
- Charts: 2px black line plus a red comparison line, 1px dashed #C4C4C4 (chart-4) gridlines, no area fill, square bars; the hero mock sits in a plain 1px black frame
- Steps: oversized red numerals (3rem, 700, -0.04em) left-aligned instead of numbered circles; FAQ rows are separated by 1px rules with a mono "+" on the right and no boxes
- Testimonials: one large pull-quote (2rem, 500; Thai 1.75rem at line-height 1.5) under the 48×6px red bar, plus two small quotes as open columns under a 1px top rule, with the name in muted uppercase label style.

## 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: oversized flush-left headline on a wide column with a narrow supporting column. Navigation: minimal style. Sections in order: hero → features → stats → steps → testimonials → pricing → faq → cta. Feature section as list.
Landing page: editorial hero with an oversized 3–4 line flush-left headline in the left 7–8 columns, a short lead and black + outline buttons below; on the right a framed chart in a 1px black box, then two stat columns BELOW the frame, each opened by a 1px left rule (same treatment as the stats section). The hero ends with a full-width 1px rule. Sections are separated by full-width 1px black rules rather than background bands; every section head (eyebrow + h2) is flush-left, never centred. Features are a 2-column list of ruled, numbered rows; stats are four columns each opened by a left hairline. The closing CTA is the page's one red area: a solid red block with left-aligned white text, an underline input with a white rule and a white button. Dashboard (only when building a dashboard): a top bar with a 1px bottom rule, KPI cells framed in 1px black, line charts without fills and tables with hairline rows; the active nav item gets a 2px red underline. Grid and breakpoints: content sits in a max-width 1200px container centred on the page; the 12-column grid layer spans the full viewport from the 24px inset. Below 768px switch to the 4-column grid with a 20px inset and stack every 2-column block.

## Content
Use realistic product copy (fictional brand) suited to: Studios, architects and agencies. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match.

## Do
- Align everything to a 12-column grid
- Create hierarchy with size and weight only
- Red only for small marks (squares, 2px underlines, numerals) plus one closing red CTA block

## Don't
- No shadows, gradients or rounded corners
- Don’t centre long text
- Don’t add decorative illustrations
- Any border-radius, drop shadow, blur or gradient — every edge is square and flat
- More than one accent colour, or more than one red area per page
- Bold colour fields, rotated type or asymmetric collage — that is Swiss Modernism 2.0
- Bright multi-colour icon tiles and friendly illustration — that is Flat Design
- Single words blown up to fill the whole viewport as a statement — that is Exaggerated Minimalism; keep the display size disciplined and readable
- Boxed cards with full borders and padding in feature grids — use top rules and numbering instead

## Stack notes
One self-contained HTML file with a <style> block. Declare all tokens as CSS custom properties on :root and build every component from them. No frameworks.

## Acceptance checklist
- Someone who knows the "Minimalism & Swiss Style" style recognises it at a glance from the signature details.
- Every colour, radius, border and shadow comes from the tokens above.
- Thai and English text both render in their intended fonts with comfortable line-height.
- Text contrast meets WCAG AA (4.5:1 body, 3:1 large text) unless the style explicitly trades this off.
- Interactive elements have hover, focus-visible and pressed states in the style's language.
```