themx
← Back to themes

Bauhaus Geometric

bold Visual style

Primary colors and simple geometry with deliberate alignment

Reference year: 2026

Compare this theme

Best for

Brand & events, Portfolio, Editorial, Education

Less suitable for

  • Dense operational screens where large decorative forms take space from data.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Bauhaus Geometric preview

Color Palette

Primary #C92B23
Secondary #174A91
Accent #F4C542
Background #F5F0E6
Text #202020

Typography

Heading: Outfit
Body: Inter

Key Characteristics

  • Circles, triangles, and rectangles aligned to a clear grid
  • Red, blue, yellow, and neutral paper surfaces
  • Large geometric sans-serif headings
  • Asymmetric composition with limited decoration

Tags

bauhaus geometric primary-colors grid modernist

Bauhaus Geometric combines basic shapes, primary colors, and deliberate alignment. This catalog theme uses those visual elements for brand pages, portfolios, and editorial layouts. Shapes should support the hierarchy rather than fill every empty area.

Key Visual Elements

Use a small number of circles, triangles, and rectangles. Align shapes with section boundaries and text columns. Keep the palette limited to red, blue, yellow, and neutral surfaces. Avoid scattered patterns that obscure the main content.

Layout and Interaction

Use asymmetric sections with a clear reading order. Keep controls rectangular and easy to identify. Decorative geometry should not receive keyboard focus. On mobile, place large compositions below the main heading and action.

Typography

Outfit gives headings a geometric form. Inter supports descriptions and controls. Use large headings selectively and keep body text at a comfortable reading width.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #F5F0E6;
  --tx-font-heading: "Outfit", sans-serif;
  --tx-font-body: "Inter", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFCF5;
  --tx-card-border: #202020;
  --tx-card-border-width: 2px;
  --tx-card-radius: 0;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #174A91;
  --tx-card-shadow-hover: 4px 4px 0 #174A91;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #52504A;
  --tx-text-subtle: #666158;
  --tx-link-color: #174A91;
  --tx-button-radius: 0;
  --tx-input-bg: #FFFCF5;
  --tx-input-border: #202020;
  --tx-text: #202020;
  --tx-primary: #C92B23;
  --tx-secondary: #174A91;
  --tx-accent: #F4C542;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Bauhaus Geometric

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Brand & events
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Bauhaus Geometric (visual-style)
- Circles, triangles, and rectangles aligned to a clear grid
- Red, blue, yellow, and neutral paper surfaces
- Large geometric sans-serif headings
- Asymmetric composition with limited decoration

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #C92B23, secondary #174A91, accent #F4C542, background #F5F0E6, text #202020
Typography: Outfit for headings, Inter for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #F5F0E6;
  --tx-font-heading: "Outfit", sans-serif;
  --tx-font-body: "Inter", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFCF5;
  --tx-card-border: #202020;
  --tx-card-border-width: 2px;
  --tx-card-radius: 0;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #174A91;
  --tx-card-shadow-hover: 4px 4px 0 #174A91;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #52504A;
  --tx-text-subtle: #666158;
  --tx-link-color: #174A91;
  --tx-button-radius: 0;
  --tx-input-bg: #FFFCF5;
  --tx-input-border: #202020;
  --tx-text: #202020;
  --tx-primary: #C92B23;
  --tx-secondary: #174A91;
  --tx-accent: #F4C542;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Use circles, rectangles, and triangles in a limited composition aligned with the content grid.
- Use strong hierarchy and asymmetric sections. Reserve red, blue, and yellow for a few distinct roles.

## Interaction
- Keep decorative shapes non-interactive. Use solid selected states and visible focus without rotating text or controls.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Bauhaus Geometric: Dense operational screens where large decorative forms take space from data.

## Components
Generate the following components in this style:
- Hero
- Navbar
- Cards
- Footer

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.