Bauhaus

Also called: Bauhaus Modernism, Constructivist geometric

Primary red, yellow and blue with black on paper — circles, squares and triangles composed like a 1920s school poster.

“Circle, square, triangle”Bold & ExpressiveEra: 1919–1933 → todayBoldPlayfulSeriousNostalgic

bauhaus / landingEN

bauhaus / 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.05Display 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.

primary red yellow bluecircle square triangleblack bars and rulespaper backgroundgeometric sansasymmetric compositioncolour-coded shapessquare corners

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

Not to be confused with

Memphis Design →Memphis scatters squiggles and confetti in clashing pastels; Bauhaus uses only solid primaries and pure circle/square/triangle on a calm, gridded composition.Neubrutalism →Neubrutalism relies on hard offset drop shadows and rounded sticker tiles; Bauhaus has no shadows, square corners and colour-coded geometric primitives.Minimalism & Swiss Style →Swiss style is near-monochrome with one red accent and hairlines; Bauhaus fills whole shapes with all three primaries and thick black bars.

On mobile

Keep square cards and 2px black rules; the active tab sits in a red circle and list icons rotate circle / square / triangle. One geometric composition per screen (onboarding art, featured card) is enough.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinJost · 500/700

The quick brown fox

Heading · ThaiPrompt · 500/700

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

Body · LatinDM Sans · 400/500/700

Clear words make shared decisions.

Body · ThaiAnuphan · 400/500/600

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

Prompt is a loopless, compass-drawn Thai with round bowls that echo Jost’s Futura-like circles; Anuphan matches DM Sans’ open geometric body.

Colour palette

Light

Dark

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 999px`
Border	`2px`
Shadow	`none`
Display	`clamp(3rem, 7vw, 6rem)`
Motion	`180ms cubic-bezier(.5,0,.2,1)`
Density	`×1.05`

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 · Bauhaus (bauhaus) — 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=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
 */
:root {
  --radius: 0px;
  --background: #F3EEE3;
  --foreground: #141414;
  --card: #FBF8F1;
  --card-foreground: #141414;
  --popover: #FBF8F1;
  --popover-foreground: #141414;
  --primary: #D42A20;
  --primary-foreground: #FFFFFF;
  --secondary: #1F4E9C;
  --secondary-foreground: #FFFFFF;
  --muted: #E8E0CF;
  --muted-foreground: #4A4741;
  --accent: #E8E0CF;
  --accent-foreground: #141414;
  --destructive: #B3261E;
  --border: #141414;
  --input: #141414;
  --ring: #D42A20;
  --chart-1: #D42A20;
  --chart-2: #1F4E9C;
  --chart-3: #F2C21B;
  --chart-4: #141414;
  --chart-5: #E8E0CF;
  --sidebar: #FBF8F1;
  --sidebar-foreground: #141414;
  --sidebar-primary: #D42A20;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #E8E0CF;
  --sidebar-accent-foreground: #141414;
  --sidebar-border: #141414;
  --sidebar-ring: #D42A20;
}

.dark {
  --background: #141414;
  --foreground: #F3EEE3;
  --card: #1D1C1A;
  --card-foreground: #F3EEE3;
  --popover: #1D1C1A;
  --popover-foreground: #F3EEE3;
  --primary: #D42A20;
  --primary-foreground: #FFFFFF;
  --secondary: #3D6FD1;
  --secondary-foreground: #FFFFFF;
  --muted: #2A2825;
  --muted-foreground: #B9B2A4;
  --accent: #2A2825;
  --accent-foreground: #F3EEE3;
  --destructive: #FF5A4E;
  --border: #F3EEE3;
  --input: #F3EEE3;
  --ring: #D42A20;
  --chart-1: #E8432F;
  --chart-2: #4F7FE0;
  --chart-3: #F2C21B;
  --chart-4: #F3EEE3;
  --chart-5: #2A2825;
  --sidebar: #1D1C1A;
  --sidebar-foreground: #F3EEE3;
  --sidebar-primary: #D42A20;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #2A2825;
  --sidebar-accent-foreground: #F3EEE3;
  --sidebar-border: #F3EEE3;
  --sidebar-ring: #D42A20;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Bauhaus (bauhaus) — 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=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
 */
@theme {
  --color-bg: #F3EEE3;
  --color-surface: #FBF8F1;
  --color-surface-2: #E8E0CF;
  --color-text: #141414;
  --color-text-muted: #4A4741;
  --color-primary: #D42A20;
  --color-on-primary: #FFFFFF;
  --color-secondary: #1F4E9C;
  --color-on-secondary: #FFFFFF;
  --color-accent: #F2C21B;
  --color-border: #141414;
  --color-success: #2E7D32;
  --color-warning: #B87F00;
  --color-danger: #B3261E;
  --color-chart-1: #D42A20;
  --color-chart-2: #1F4E9C;
  --color-chart-3: #F2C21B;
  --color-chart-4: #141414;
  --color-chart-5: #E8E0CF;
  --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: "Jost", "Prompt", system-ui, sans-serif;
  --font-body: "DM Sans", "Anuphan", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #141414;
  --color-surface: #1D1C1A;
  --color-surface-2: #2A2825;
  --color-text: #F3EEE3;
  --color-text-muted: #B9B2A4;
  --color-primary: #D42A20;
  --color-on-primary: #FFFFFF;
  --color-secondary: #3D6FD1;
  --color-on-secondary: #FFFFFF;
  --color-accent: #F2C21B;
  --color-border: #F3EEE3;
  --color-success: #5CB860;
  --color-warning: #F2C21B;
  --color-danger: #FF5A4E;
  --color-chart-1: #E8432F;
  --color-chart-2: #4F7FE0;
  --color-chart-3: #F2C21B;
  --color-chart-4: #F3EEE3;
  --color-chart-5: #2A2825;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Bauhaus (bauhaus). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9333,
            0.8902
          ],
          "hex": "#f3eee3"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9725,
            0.9451
          ],
          "hex": "#fbf8f1"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.8784,
            0.8118
          ],
          "hex": "#e8e0cf"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0784,
            0.0784
          ],
          "hex": "#141414"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.2784,
            0.2549
          ],
          "hex": "#4a4741"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8314,
            0.1647,
            0.1255
          ],
          "hex": "#d42a20"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.3059,
            0.6118
          ],
          "hex": "#1f4e9c"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7608,
            0.1059
          ],
          "hex": "#f2c21b"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0784,
            0.0784
          ],
          "hex": "#141414"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.4902,
            0.1961
          ],
          "hex": "#2e7d32"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.498,
            0
          ],
          "hex": "#b87f00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.702,
            0.149,
            0.1176
          ],
          "hex": "#b3261e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8314,
            0.1647,
            0.1255
          ],
          "hex": "#d42a20"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.3059,
            0.6118
          ],
          "hex": "#1f4e9c"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7608,
            0.1059
          ],
          "hex": "#f2c21b"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0784,
            0.0784
          ],
          "hex": "#141414"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.8784,
            0.8118
          ],
          "hex": "#e8e0cf"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0784,
            0.0784
          ],
          "hex": "#141414"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1137,
            0.1098,
            0.102
          ],
          "hex": "#1d1c1a"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1569,
            0.1451
          ],
          "hex": "#2a2825"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9333,
            0.8902
          ],
          "hex": "#f3eee3"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7255,
            0.698,
            0.6431
          ],
          "hex": "#b9b2a4"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8314,
            0.1647,
            0.1255
          ],
          "hex": "#d42a20"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.4353,
            0.8196
          ],
          "hex": "#3d6fd1"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7608,
            0.1059
          ],
          "hex": "#f2c21b"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9333,
            0.8902
          ],
          "hex": "#f3eee3"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3608,
            0.7216,
            0.3765
          ],
          "hex": "#5cb860"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7608,
            0.1059
          ],
          "hex": "#f2c21b"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3529,
            0.3059
          ],
          "hex": "#ff5a4e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.2627,
            0.1843
          ],
          "hex": "#e8432f"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.498,
            0.8784
          ],
          "hex": "#4f7fe0"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7608,
            0.1059
          ],
          "hex": "#f2c21b"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9333,
            0.8902
          ],
          "hex": "#f3eee3"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1569,
            0.1451
          ],
          "hex": "#2a2825"
        }
      }
    }
  },
  "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": 2,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Jost",
        "Prompt",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "DM Sans",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "DM Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 180,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.5,
      0,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

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

PageTech stackContent languageMode

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