Want this look?

Build me a complete, responsive business website in the BAUHAUS style — the form-follows-function language of the original German school: the circle, the square, and the triangle used as a complete alphabet; red, yellow, and blue laid down flat and unmixed; geometric sans type; and asymmetric grids that balance by weight, not by mirroring. Every element earns its place by doing a job. Nothing is decorative; nothing is lying about why it's there. Combine this style seed with my brief below. If I don't give you the details, invent a plausible business that suits this disciplined, convicted look — a design studio, an architecture practice, a coffee roaster, a museum shop — 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. The colour, the three shapes, and the geometric type are FIXED (they are the style). What's yours to choose is the TYPE pairing within the geometric-sans class, and the overall LAYOUT ARCHETYPE. Pick one of each that fits my business 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) ── • THE CLOSED PALETTE — Bauhaus red #E63946, Bauhaus blue #1D3557, and Bauhaus yellow #F4C20D, plus plaster-white ground #F2EDE4 and near-black ink. This triad IS the style; there is no fourth colour. Use each hue FLAT, saturated, and unmixed — NO gradients, NO tints, NO blends. Colour is structure, not mood-lighting: each hue does a defensible job (a red block separates, a yellow mark draws the eye first, a blue field grounds). • THE THREE PURE SHAPES — the circle, the square, and the triangle are the whole formal vocabulary. Build marks, panels, dividers, and accents from them; treat them as irreducible primitives, not illustrations. Classic pairing: blue/circle, red/square, yellow/triangle. • GEOMETRIC SANS TYPE — clean, blunt, geometric, no serifs, no delicate flourish; a face that reads like an instruction, not a suggestion. Set headings large and confident. • ASYMMETRIC GRID TENSION — balance the page by WEIGHT, not mirror symmetry: a large element on one side answered by a few small marks on the other, held in a live tension that has not quite resolved. Every position looks measured, never accidental, never centred-by-default. • STRUCTURAL HONESTY — every element exists because of a job it does (a thick rule because two zones must separate, a bold weight because it must be read first). No ornament added on top of purpose. • Motion is "assemble / lock / resolve-into-grid": shapes snap into position with mechanical precision, primaries arrive with conviction (not a soft fade), and the asymmetric grid visibly balances itself the way a scale settles. Nothing floats or eases softly. Honor 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. Choose the ink from each block's ACTUAL background — near-black text on plaster-white and on yellow blocks; near-white text on blue and red blocks. NEVER white text on a white/yellow block (that's ~1:1, invisible), and NEVER black text on a deep-blue block. Re-check every panel on its own background. ── VARIABLES (choose one of each that fits my business, then commit) ── • TYPE — pick one geometric-sans display + one plain body, loaded via Google Fonts. Display, pick one: Poppins 700 · Futura-like Jost · Archivo · Montserrat 800. Body, pick one: DM Sans · Inter · Work Sans. Lowercase-heavy setting is period-authentic and welcome if it suits my brand. • LAYOUT ARCHETYPE — choose one structural feel and commit: a strict primary-coloured module grid; a large-shape-vs-small-marks asymmetric composition with lots of plaster ground; stacked full-width primary bands; a poster-like type-and-shape front with sparse content zones; or a diagonal triangle-driven split. Also settle on your own shape-to-content rhythm and how heavily each primary is used. ── MEDIA MODEL (geometry-native, honest photography) ── Build most visuals from the THREE SHAPES, FLAT PRIMARY BLOCKS, and TYPE — geometric marks, primary-coloured panels, rule lines, bold headings. Where the business genuinely needs a photo (a product, a space, the team), frame it plainly and square inside the grid, aligned to structure, never rounded-soft or floating. Generate marks and imagery appropriate to MY business, not a reuse of any demo. WHAT THIS SITE MUST ACHIEVE (business goal): Make it instantly clear who this business helps and what it offers; explain the value plainly and with conviction; 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. • Don't be lazy with any section: each carries real content depth (never a title plus one thin line), proper internal hierarchy, and the full Bauhaus treatment. If a section only serves the style, cut it; if a section serves the goal but feels thin, flesh it out. • Real, tailored copy for MY business — plain, confident, convicted, written to build trust and reduce doubt. Never lorem. • Fully responsive and accessible: semantic landmarks, alt text, and the CONTRAST invariant enforced on EVERY section — especially primary-coloured panels. On mobile, restack the grid but keep the flat primaries, the shapes, and the confident geometric type. • Apply the closed palette, the three shapes, the chosen type, and the layout archetype to EVERY section, not just the hero.

Best for AI website builders — Lovable, v0, Bolt

Restyle my existing site into the BAUHAUS look — the form-follows-function language of the original German school: the circle, square, and triangle as a complete alphabet; red, yellow, and blue laid down flat and unmixed; geometric sans type; asymmetric grids balanced by weight, not by mirroring. Keep ALL of my current content, copy, pages, and structure exactly as they are; change only the visual language so every element looks like it earns its place. Do not invent new pages, remove sections, or rewrite my words. This is one of the few styles where the palette itself IS the style, so here you adopt the Bauhaus triad rather than keeping your own hues: map your content onto Bauhaus red #E63946, blue #1D3557, and yellow #F4C20D over plaster-white #F2EDE4 with near-black ink — flat, unmixed, no fourth colour. Keep which element means what; just re-express each as a flat primary doing a structural job. Then make one TYPE choice and COMMIT — a geometric-sans display + plain body that suit my brand. ── INVARIANTS (never break these) ── • The closed triad only — red / blue / yellow + plaster ground + near-black ink. Strip every gradient, tint, and blended fill; each colour sits flat, alone, doing a job. • Rebuild marks, dividers, and accents from the THREE PURE SHAPES — circle, square, triangle (blue/circle, red/square, yellow/triangle) — instead of arbitrary decoration or soft icons. • Headings go large, blunt, geometric sans — clean, confident, no serifs, no delicate flourish. • Rebalance layouts as ASYMMETRIC GRID TENSION — weight against weight, measured, never mirror-symmetric or centred-by-default. • Structural honesty — keep only what does a job; remove ornament that decorates without separating, ranking, or directing. • Motion becomes "assemble / lock / resolve-into-grid": shapes snap into place, primaries arrive with conviction, the grid settles like a scale. Remove soft floats and slow eases. Honor prefers-reduced-motion and never leave a section stuck invisible; keep content visible without JavaScript. • Never: a fourth/fifth colour, gradients or tints, soft shadows, mirror-symmetric layouts, decorative ornament with no job. ── TYPE (pick one pairing to suit my brand, then commit) ── One geometric-sans display (Poppins 700 · Jost · Archivo · Montserrat 800) + one plain body (DM Sans · Inter · Work Sans), via Google Fonts. Frame any existing image plainly and square, aligned to the grid, never rounded-soft or floating; replace decorative gradients and soft icons with flat primary blocks, geometric shape-marks, or bold type. Keep it responsive and accessible — enforce WCAG 2.2 AA contrast on every block (≥4.5:1 body, ≥3:1 large; pick the ink from each block's ACTUAL background: near-black on plaster-white and yellow, near-white on blue and red; NEVER white on yellow or black on deep blue). Restyle what already exists so every section carries the Bauhaus system consistently — same content, new discipline.

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

Design a single section in the BAUHAUS style — the form-follows-function language of the original German school: the circle, square, and triangle as a complete alphabet; red, yellow, and blue flat and unmixed; geometric sans type; asymmetric balance by weight. 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 lands who you are, a services grid, a pricing block, a manifesto statement, a project showcase, a booking call-to-action. If I don't name one, build a bold hero for a plausible business you invent that suits this disciplined style. Whatever the section, build it fully and richly — don't be lazy: real, tailored copy, proper hierarchy, and depth, not a title plus one thin line. ── INVARIANTS ── • The closed triad only — Bauhaus red #E63946, blue #1D3557, yellow #F4C20D, over plaster-white #F2EDE4 with near-black ink. No fourth colour. Each hue flat, saturated, unmixed — no gradients or tints. Build marks and accents from the THREE PURE SHAPES (circle/square/triangle; blue/circle, red/square, yellow/triangle). Large blunt geometric-sans headline. Balance by WEIGHT, not mirror symmetry — measured, never centred-by-default. Every element does a job; no ornament on top of purpose. Motion is "assemble / lock" — shapes snap into position, primaries arrive with conviction; no soft floats or fades; content visible without JavaScript, honoring prefers-reduced-motion. • Never: a fourth colour, gradients or tints, soft shadows, mirror-symmetric layouts, decorative ornament with no structural job. ── VARIABLE (pick one, commit) ── • TYPE — one geometric-sans display (Poppins 700 / Jost / Archivo / Montserrat 800) + one plain body (DM Sans / Inter / Work Sans), via Google Fonts. Lowercase-heavy setting is period-authentic and welcome. Build the section from the THREE SHAPES, FLAT PRIMARY BLOCKS, and TYPE. If it genuinely needs an image, use a real placeholder <img> framed plainly and square, aligned to the grid — never a fake coloured div standing in for a photo, never rounded-soft, never floating. Include a clear primary call-to-action where the section's job calls for one. Make it responsive and accessible — WCAG 2.2 AA contrast (≥4.5:1 body, ≥3:1 large): pick the ink from the actual background (near-black on plaster-white/yellow, near-white on blue/red), never white on yellow or black on deep blue. Write real, tailored copy for the subject, not lorem.

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