# Bauhaus > Primary red, yellow and blue with black on paper — circles, squares and triangles composed like a 1920s school poster. - Nickname: Circle, square, triangle - Also called: Bauhaus Modernism, Constructivist geometric - Category: Bold & Expressive - Moods: Bold, Playful, Serious, Nostalgic - Industries: Education, Creative & Portfolio, Kids & Family, Media & Entertainment, Corporate & B2B - Style page: https://uilingo.dev/styles/bauhaus/ Bauhaus UI borrows the Weimar/Dessau poster toolkit: a warm paper ground, solid black rules, and only the three primaries plus black. Every component is built from the three basic shapes — square cards and buttons, circular avatars, step numbers and toggles, triangular accents — and they are colour-coded red / yellow / blue in rotation. Layouts are asymmetric and constructivist: big geometric sans headings, colour bands, and shapes that overlap the grid. ## Best for - Schools, courses and learning platforms - Museums, galleries and design events - Architecture and design studios - Kids and family products that need structure ## Avoid for - Luxury and premium brands that need softness - Healthcare or finance needing calm neutrality - Photo-heavy lifestyle sites (the shapes fight the images) ## Do - Limit colour to #D42A20 red, #F2C21B yellow, #1F4E9C blue plus black on paper; status green/amber only for state badges and text, never as shape fills - Rotate the three primaries in order across cards, steps and charts - Use 0px corners for rectangles and true 50% circles — never in-between radii - Let one big geometric shape overlap the hero grid ## Don't - No gradients, blur or soft shadows - Don’t use pastel or secondary colours like purple or green as brand colours - Don’t round rectangle corners - Don’t use humanist or serif headline fonts ## Audit Passed after 2 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 "Bauhaus" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Primary red, yellow and blue with black on paper — circles, squares and triangles composed like a 1920s school poster. Design keywords: primary red yellow blue, circle square triangle, black bars and rules, paper background, geometric sans, asymmetric composition, colour-coded shapes, square corners. ## Visual language A 1920s Bauhaus school poster turned into an interface: warm uncoated-paper background (#F3EEE3), solid black bars and 2px rules, and only three colours — primary red, yellow and blue — used as flat, fully saturated shapes. Everything is built from circle, square and triangle: rectangles have perfectly square corners, round things are perfect circles, and accents are equilateral triangles. Compositions are asymmetric and constructivist, with one big geometric shape overlapping the grid behind the content. Light is flat; there are no shadows, gradients or blur. ## Signature details (must be visible) - Palette locked to #D42A20 red, #F2C21B yellow, #1F4E9C blue, #141414 black on #F3EEE3 paper (plus paper-dark #E8E0CF) — no tints, no purple/green brand colours - Off-palette tokens are scoped: success #2E7D32, warning #B87F00, danger #B3261E and chart grey #8A8478 are only for status text and badge outlines. They are never fills for brand shapes, cards, buttons, sparklines or chart bars. Sparklines use red, blue or black; a 5th chart series is paper-dark #E8E0CF with a 2px #141414 outline (or a 45-degree black hatch) - Shape rotation: repeated items cycle red circle -> yellow square -> blue triangle (feature icons, step numbers, list icons, stat markers, chart bars) - Radius: rectangles use border-radius 0; round things (avatars, logo, icon buttons, active tab, step circles) use border-radius 50%. Nothing in between — the pill 999px token is unused in this style - Thick black bars as structure: 6px border under the nav and above the footer, a 120px x 12px black bar + red bar above the hero headline - Headline signature: Latin display text is lowercase with the first letter in #D42A20 via ::first-letter. Thai headlines have no case: never use ::first-letter on Thai (it splits vowels and tone marks off their consonant); colour the first Thai phrase red with a span (or the first nowrap phrase span) and use line-height 1.3. Never add an English lead-in line just to show the signature - Eyebrows are in the page language, prefixed with a tiny red circle / yellow square / blue triangle glyph row that carries the style. Latin eyebrows are uppercase with 0.14em tracking; a Thai eyebrow is Thai text at 0.95rem / 600 with no uppercase and no tracking - Cards: 2px black border with a 10–12px coloured top band (red, yellow, blue in turn) - Text on accent: text on yellow #F2C21B is always #141414, never white (step badges, yellow badge, yellow active sidebar item, yellow chip) ## Design tokens — use these exact values Colours (light mode): - background #F3EEE3 - surface #FBF8F1 - surface-2 #E8E0CF - text #141414 - text-muted #4A4741 - primary #D42A20 (text on it #FFFFFF) - secondary #1F4E9C (text on it #FFFFFF) - accent #F2C21B - border #141414 - success #2E7D32 · warning #B87F00 · danger #B3261E - chart series #D42A20, #1F4E9C, #F2C21B, #141414, #E8E0CF Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 999px Border width: 2px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 180ms cubic-bezier(.5,0,.2,1) ## Typography (Latin + Thai) - Headings: Jost 500/700 with Thai fallback Prompt 500/700 - Body: DM Sans 400/500/700 with Thai fallback Anuphan 400/500/600 - Mono: DM Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Jost:wght@500;700&family=DM+Sans:wght@400;500;700&family=DM+Mono:wght@400;500&family=Prompt:wght@500;700&family=Anuphan:wght@400;500;600&display=swap - CSS stacks: heading `"Jost", "Prompt", system-ui, sans-serif`; body `"DM Sans", "Anuphan", system-ui, sans-serif`; mono `"DM Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Anuphan — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 7vw, 6rem), heading weight 700, heading tracking -0.02em (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: Prompt is a loopless, compass-drawn Thai with round bowls that echo Jost’s Futura-like circles; Anuphan matches DM Sans’ open geometric body. ## Components - Buttons: square rectangles, 2px black border, uppercase 700 label (Latin); primary = red fill with white text, hover flips to black; secondary = transparent outline, hover fills yellow with #141414 text; icon buttons are circles. Colour flips on hover and press are instant (transition 0ms) - Motion: the 180ms cubic-bezier(.5,0,.2,1) token is only for disclosure and position changes (FAQ open, tab underline slide) — never for colour flips - Cards: paper-white surface, 2px black border, 12px top band in the rotating primary; no shadow; hover only changes the fill to the page paper colour - Highlighted card: solid blue with white text and a big yellow circle cropped in the top-right corner - Step badges: circle and square are 56px; the triangle is 64x56px, clip-path polygon(50% 0, 100% 100%, 0 100%), blue #1F4E9C, numeral 1.1rem / 700 white with padding-top 20px so the digit sits in the lower third - Inputs: square, 2px black border; focus adds an 8px red inset bar on the left instead of a glow - Switch: square track with a square knob; checked = blue track with a yellow knob. Checkbox square, radio circle, both fill red when checked - Badges: square 2px outline in the status colour, uppercase micro label (0.68rem, 0.06em tracking, 6px inline padding); solid badge is blue. In tables keep cell padding-inline 10px so the badge column fits without scrolling - Navigation: paper bar with a 6px black bottom rule; the active link gets a 3px red underline; the logo is a red circle with a yellow circle peeking behind - Charts: flat primaries with butt caps; line-chart area is a flat fill (red at 12%) or none — never a fading gradient; the donut sits inside a thin black outline ring ## 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: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → features → steps → stats → testimonials → pricing → faq → cta. Feature section as grid. Landing page (needs nav, hero, feature cards, steps, stats, testimonials, pricing, FAQ and the red CTA block): split hero with a big headline on the left under a black-and-red bar pair. Hero media composition: a yellow circle at 80% of the media width anchored top-right; a blue triangle at about 45% width bottom-left, overlapping the circle's lower edge; the product card in front (z-index above both shapes) covering about 60% of the circle; a 48px red square at the card's bottom-right corner. Sections alternate paper and paper-dark (#E8E0CF) separated by 2px black rules; every section head (eyebrow, title, lead) is left-aligned — never centred. Feature cards in a regular grid with colour-coded top bands and shape icons; steps use circle / square / triangle number badges. The final CTA is a full red block with an oversized yellow circle and a blue square on the right. App pages only (not the landing page): dashboards use a black sidebar with a yellow active item (#141414 text), square KPI cards with a red / yellow / blue / black top band, black or red sparklines, and flat primary charts. ## Content Use realistic product copy (fictional brand) suited to: Schools, courses and learning platforms. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Limit colour to #D42A20 red, #F2C21B yellow, #1F4E9C blue plus black on paper; status green/amber only for state badges and text, never as shape fills - Rotate the three primaries in order across cards, steps and charts - Use 0px corners for rectangles and true 50% circles — never in-between radii - Let one big geometric shape overlap the hero grid ## Don't - No gradients, blur or soft shadows - Don’t use pastel or secondary colours like purple or green as brand colours - Don’t round rectangle corners - Don’t use humanist or serif headline fonts - Rounded rectangles, pill buttons or soft drop shadows (that becomes neubrutalism or flat design) - Gradients, glass, glows or textures beyond flat paper - Extra hues (purple, teal, pastels) or tinted primaries — only red, yellow, blue, black, paper - Squiggles, confetti or scattered decorative doodles (that is Memphis) - Serif or humanist script headlines; use a geometric sans - Centring everything symmetrically — keep the composition asymmetric and grid-based ## Stack notes One self-contained HTML file with a