Want this look?

Build me a complete, responsive business website in the SWISS MINIMALISM style — the International Typographic tradition of Müller-Brockmann, Helvetica, Dieter Rams's Braun, and Apple's product pages: a strict grid you can feel but barely see, oceans of negative space treated as a real material, one neutral typeface set with surgical care, and colour rationed so hard that a single accent mark reads like a held breath released. This is earned calm — not empty, but everything unnecessary already found and cut. Combine this style seed with my brief below. If I don't give you the details, invent a plausible business that suits this considered, premium calm — a design consultancy, an architecture practice, a private wealth advisor, a specialist clinic — and build a full, real demo for it, not a placeholder. This style is a FAMILY, not a single template — the same seed should produce visibly different sites for different businesses. A few dimensions are yours to choose: the exact ACCENT hue, the neutral TYPEFACE, and the overall LAYOUT APPROACH. Pick one of each that fits my brand and COMMIT to it across the whole site — every option below is equally on-style, so don't second-guess the choice with your own taste. ── INVARIANTS (never break these — they define the style) ── • A strict mathematical column grid underlies everything — every element aligns to it; nothing is placed by eye, nothing floats free. Alignment is provable, not guessed. • Negative space is a designed material with its own weight — generous, deliberate emptiness that gives importance room to breathe. Crowding signals panic; space signals confidence. Do not fill the space you saved. • ONE neutral sans-serif only. Build all hierarchy from scale, weight, and spacing — never introduce a second decorative typeface. The message is what should be remembered, not the typesetter's personality. • Structural and material honesty — flat surfaces, no faked depth, no drop shadows, no gradients, no ornament that isn't load-bearing. Corner radius 0 (or so slight it reads as square). What you see is genuinely what's there. • Colour is rationed: a field of neutral tones interrupted by exactly ONE accent, used as information, never decoration. When colour is this rare it becomes a signal — one accent mark on a quiet page reads as urgent precisely because everything around it agreed to stay silent. • Motion is "settle / resolve / arrive": elements align to the grid and come to rest with precise, almost surgical timing — a decision being finalised, never a generic bouncy or floaty fade. Honour prefers-reduced-motion, and keep ALL content visible without JavaScript — never leave a section stuck invisible. • CONTRAST (WCAG 2.2 AA, non-negotiable): every text/background pair is ≥4.5:1 for body, ≥3:1 for large/headline text. On the near-white paper ground use near-black ink; on any dark or accent-filled panel flip to near-white ink. Muted grey caption text must still clear 4.5:1 — "quiet" means a step toward the ground, never below the threshold. Re-check every block on its own actual background. ── VARIABLES (choose one of each that fits my brand, then commit) ── • ACCENT — bring my own brand colour if I give it; otherwise choose ONE. Keep the ground and text strictly neutral (a warm or cool near-white paper, near-black ink, one quiet grey for secondary text) and let a single saturated accent do all the colour work. Express it as tone and role: high enough in saturation to read as a deliberate signal against the neutrals, used only for the one thing that matters in each place (a key link, the primary action, a single rule or mark) — never spread decoratively. Example accents (not required): signal red · cobalt · a deep green · burnt orange. One accent only, ever. • TYPEFACE — one neutral, characterless sans, loaded via Google Fonts. Pick one and set everything in it: Inter · Helvetica Neue / Arial · Space Grotesk · Neue Haas Grotesk-alike · IBM Plex Sans. Tune size, weight, and letter-spacing with care; that IS the hierarchy. • LAYOUT APPROACH — choose one structural feel and commit: a tight symmetric column grid with wide margins; an asymmetric grid where content sits deliberately off-centre against generous ground; a single-column ledger with strong baseline rhythm; or a modular grid of aligned cells separated by space, not borders. Also settle your own margin scale, baseline rhythm, and overall density — but keep the space generous. ── MEDIA MODEL (restraint, not decoration) ── Lead with type, grid, and space; add imagery only where it earns its place. Where the business genuinely needs a photo (a product, a space, the team), use a real placeholder <img>, cropped cleanly and aligned hard to the grid, presented flat with no frame, no shadow, no rounding — the image sits in the composition as honestly as the type does. Do NOT fake an image with a coloured div or gradient. Generate imagery appropriate to MY business, not a reuse of any demo. One rationed accent mark can stand in for most "graphics." WHAT THIS SITE MUST ACHIEVE (business goal): Make it instantly clear who this business helps and what it offers; explain the value with quiet, precise confidence; reduce a first-time visitor's risk with real proof (results, credentials, client names, guarantees — whatever is true for the business); and drive one clear next step — an enquiry, a booking, a quote, a call. Let the business and its brief decide which sections serve that goal, include exactly those in a sensible order, and build each one fully. BUILD REQUIREMENTS — ship a complete, usable site, not a hero mock: • Real information architecture driven by MY business and goal — whatever sections genuinely move a stranger toward enquiring, each with one clear job, in an order that builds understanding then trust then action. Include working navigation and a footer, both aligned to the grid. • Don't be lazy with any section: each carries real content depth (never a title plus one thin line), proper internal hierarchy built from scale and space, and the full minimalist treatment. Restraint is not the same as thinness — say the necessary thing completely, then stop. If a section only pads the page, cut it; if a section serves the goal but reads thin, deepen its content, not its decoration. • Real, tailored copy for MY business — precise, unshowy, trustworthy because it isn't trying to impress, written to explain and build confidence. Never lorem. • Fully responsive and accessible: semantic landmarks, alt text, and the CONTRAST invariant enforced on EVERY section. On mobile, keep the generous space and grid discipline — collapse columns cleanly, never crowd. • Apply the chosen accent, typeface, and layout approach — and the same generous space — to EVERY section, not just the hero.

Best for AI website builders — Lovable, v0, Bolt

Restyle my existing site into the SWISS MINIMALISM look — the International Typographic tradition of Müller-Brockmann, Helvetica, Rams's Braun, and Apple's product pages: a strict grid you can feel but barely see, negative space treated as a real material, one neutral typeface, and colour rationed to a single accent. Keep ALL of my current content, copy, pages, and structure exactly as they are; change only the visual language so the page reads as earned calm. Do not invent new pages, remove sections, or rewrite my words. Keep MY brand hue — carry my existing brand colour through as the ONE rationed accent rather than swapping in a new one. Push everything else to strict neutrals: a warm or cool near-white paper ground, near-black ink, one quiet grey for secondary text — and let my brand colour do all the colour work, used only where it means something (a key link, the primary action, a single rule or mark). Then make one TYPEFACE choice and COMMIT — a neutral sans that suits my brand. ── INVARIANTS (never break these) ── • Align everything to a strict column grid — remove eyeballed placement, floating elements, and ad-hoc spacing; every block sits on the grid. • Open up negative space — increase margins and gutters, let sections breathe. Do not backfill the space you free; the emptiness is the design. • One neutral sans-serif only — build all hierarchy from scale, weight, and spacing; strip any second decorative or display face. • Strip faked depth — remove drop shadows, gradients, tints, glassy effects, and decorative ornament that isn't load-bearing. Flatten surfaces. Corner radius 0 (or barely square). • Ration colour to ONE accent (my brand hue), used as information, not decoration. Reduce any other colours to neutrals; keep which element means what, just quiet everything but the one signal. • Motion becomes "settle / resolve / arrive": a precise, surgical align-and-rest per section — remove bouncy, floaty, or glitchy transitions. Honour prefers-reduced-motion and never leave a section stuck invisible; keep content visible without JavaScript. • Never: gradients, drop shadows, rounded blobs, a second decorative typeface, more than one accent colour, or crowding that fills the space you saved. ── TYPEFACE (pick one to suit my brand, then commit) ── One neutral, characterless sans (Inter · Helvetica Neue / Arial · Space Grotesk · IBM Plex Sans), loaded via Google Fonts, used for the entire site. Present any existing image flat and aligned hard to the grid — no frame, no shadow, no rounding; replace decorative gradients and soft icons with plain grid alignment, precise type, or at most the one accent mark. Keep it responsive and accessible — enforce WCAG 2.2 AA contrast on every block (≥4.5:1 body, ≥3:1 large; near-black ink on paper, near-white ink on any dark or accent-filled panel; muted grey must still clear 4.5:1; never light-on-light). Restyle what already exists so every section carries the minimalist system consistently — same content, quieter, more considered skin.

Paste alongside your existing site/code for an AI coding agent to apply

Design a single section in the SWISS MINIMALISM style — the International Typographic tradition of Müller-Brockmann, Helvetica, Rams's Braun, and Apple's product pages: a strict grid, negative space treated as a real material, one neutral typeface, and colour rationed to a single accent. A low-commitment preview of the style, built richly for whatever section I ask for. Tell me in your own words, alongside this prompt, which section you want and the job it has to do — a hero that states who you are with quiet authority, a feature/services block, a pricing table, a proof/credentials row, a contact call-to-action, a project index. If I don't name one, build a calm, confident hero for a plausible business you invent that suits this considered style. Whatever the section, build it fully and richly — don't be lazy: real, tailored copy, proper hierarchy built from scale and space, and genuine depth, not a title plus one thin line. Restraint is not thinness. ── INVARIANTS ── • Everything aligns to a strict column grid — nothing placed by eye. Negative space is a designed material: generous, deliberate, not backfilled. One neutral sans-serif only, all hierarchy from scale/weight/spacing. Flat surfaces — no drop shadows, no gradients, no ornament that isn't load-bearing; corner radius 0. Colour rationed to ONE accent used as a signal, not decoration. Motion is one precise "settle / resolve / arrive" — align and come to rest; no bounce or float; content visible without JavaScript, honouring prefers-reduced-motion. • Never: gradients, drop shadows, rounded blobs, a second decorative typeface, more than one accent colour, or crowding that fills the space you saved. ── VARIABLES (pick one of each, commit) ── • ACCENT — bring my brand colour if I give it; otherwise choose ONE. Keep ground and text strictly neutral (near-white paper, near-black ink, one quiet grey) and let a single saturated accent do all the colour work, used only where it means something. Example accents (not required): signal red · cobalt · deep green · burnt orange. One only. • TYPEFACE — one neutral, characterless sans (Inter · Helvetica Neue / Arial · Space Grotesk · IBM Plex Sans), via Google Fonts, for everything. Build the section from type, grid, and space. If it genuinely needs an image, use a real placeholder <img>, cropped cleanly and aligned to the grid, presented flat with no frame, shadow, or rounding — never a fake coloured div standing in for a photo. Where the section's job calls for one action, make it a single clear primary control in the accent colour. Make it responsive and accessible — WCAG 2.2 AA contrast (≥4.5:1 body, ≥3:1 large): near-black ink on paper, near-white on any dark or accent panel, muted grey still clearing 4.5:1, never light-on-light. Write real, tailored copy for the subject, not lorem.

Good for a focused first pass, or a chat-based assistant like ChatGPT/Claude