---
name: Bauhaus Modern
colors:
  surface: '#fcf9f3'
  surface-dim: '#dcdad4'
  surface-bright: '#fcf9f3'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f6f3ed'
  surface-container: '#f0eee8'
  surface-container-high: '#ebe8e2'
  surface-container-highest: '#e5e2dc'
  on-surface: '#1c1c18'
  on-surface-variant: '#58413e'
  inverse-surface: '#31312d'
  inverse-on-surface: '#f3f0ea'
  outline: '#8c716d'
  outline-variant: '#e0bfbb'
  surface-tint: '#ac332b'
  primary: '#a83029'
  on-primary: '#ffffff'
  primary-container: '#ca483e'
  on-primary-container: '#fffbff'
  inverse-primary: '#ffb4ab'
  secondary: '#416181'
  on-secondary: '#ffffff'
  secondary-container: '#badaff'
  on-secondary-container: '#40607f'
  tertiary: '#765700'
  on-tertiary: '#ffffff'
  tertiary-container: '#956e00'
  on-tertiary-container: '#fffbff'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#ffdad5'
  primary-fixed-dim: '#ffb4ab'
  on-primary-fixed: '#410002'
  on-primary-fixed-variant: '#8a1a16'
  secondary-fixed: '#cfe5ff'
  secondary-fixed-dim: '#a9caee'
  on-secondary-fixed: '#001d33'
  on-secondary-fixed-variant: '#284968'
  tertiary-fixed: '#ffdea0'
  tertiary-fixed-dim: '#f0bf55'
  on-tertiary-fixed: '#261a00'
  on-tertiary-fixed-variant: '#5c4300'
  background: '#fcf9f3'
  on-background: '#1c1c18'
  surface-variant: '#e5e2dc'
typography:
  display-lg:
    fontFamily: Epilogue
    fontSize: 72px
    fontWeight: '700'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Epilogue
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
    letterSpacing: '0'
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: '1.5'
    letterSpacing: 0.01em
  label-caps:
    fontFamily: Epilogue
    fontSize: 12px
    fontWeight: '700'
    lineHeight: '1'
    letterSpacing: 0.1em
spacing:
  unit: 4px
  base: 8px
  md: 24px
  lg: 48px
  xl: 80px
  gutter: 1px
  margin: 32px
---

## Brand & Style

This design system is rooted in the "form follows function" philosophy, reimagining the Bauhaus movement for a contemporary digital landscape. The personality is defined by a rigorous commitment to order and mathematical precision, tempered by a playful use of primary geometry. 

The aesthetic style is a refined **Minimalism** characterized by flat surfaces, thin hairlines, and the total absence of shadows or skeuomorphic effects. It targets a sophisticated audience that appreciates furniture and lifestyle products as architectural objects. The UI should evoke a sense of timelessness—feeling both like a mid-century archival piece and a cutting-edge modern interface.

Key visual pillars:
- **Mathematical Order:** Every element must align to a strict underlying grid.
- **Geometric Ornamentation:** Circles, squares, and triangles are used not just as containers, but as structural anchors.
- **Structural Hairlines:** 1px borders define the boundaries of space rather than depth-based shadows.

## Colors

The palette transforms the aggressive primary colors of the early 20th century into a sophisticated matte spectrum. The base of the design system is a warm, paper-like beige that reduces digital eye strain and provides a premium "gallery" feel.

- **Primary (Madder Red):** A desaturated, earthy red used for key calls to action and focal points.
- **Secondary (Steel Blue):** A muted indigo used for secondary interactions and structural accents.
- **Tertiary (Ochre):** A warm, mustard yellow used sparingly for highlights and decorative shapes.
- **Neutral (Parchment):** The foundation of the layout, used for backgrounds to create a tactile, non-white canvas.
- **Ink (Charcoal):** A near-black used for typography and the signature 1px hairlines.

## Typography

Typography in this design system is treated as a geometric construction. **Epilogue** is utilized for headlines and labels to provide a distinctive, architectural feel with its precise geometric counters. **Inter** is used for body copy to ensure maximum legibility and a functional, utilitarian aesthetic.

Alignment is the most critical factor; text blocks should often be justified or strictly aligned to grid lines to mirror the "International Typographic Style." Large display type should feel heavy and grounded, while labels should use increased letter-spacing and uppercase styling to act as navigational markers.

## Layout & Spacing

The layout philosophy is a **Fixed Grid** system inspired by modernist print design. Content is organized into a modular 12-column grid where the "gutters" are often replaced by visible 1px hairlines. 

Spacing follows a strict 8px rhythmic scale. However, negative space is used aggressively to separate functional groups. Elements should never "float" ambiguously; they should either be pinned to a grid line or encased in a bordered module. Modules should have uniform padding (24px or 32px) to maintain a consistent internal rhythm regardless of the content size.

## Elevation & Depth

This design system explicitly rejects shadows and Z-axis depth. Hierarchy is established through **Tonal Layers** and **Bold Borders**.

- **Flatness:** All elements exist on the same visual plane. 
- **Layering:** Instead of shadows, use color blocking (e.g., a Red square partially overlapping a Blue square) to indicate hierarchy or focus.
- **Hairline Dividers:** 1px charcoal lines are the primary tool for separation. Use them to box content, create "cells" in a list, or separate the navigation from the viewport.
- **High-Contrast Selection:** Active states are indicated by solid color fills rather than elevation or glows.

## Shapes

The shape language is strictly **Sharp (0px)**. Rectangles and squares form the primary containers for all UI elements, echoing the industrial nature of modern furniture.

Geometric primitives are used as decorative and functional motifs:
- **Circles:** Used exclusively for "Pill" badges, radio buttons, or decorative background elements to break the rigidity of the grid.
- **Triangles:** Used as directional indicators (arrows) or subtle corner accents.
- **Squares:** The universal container for icons, images, and buttons.

## Components

### Buttons
Buttons are strictly rectangular with 1px charcoal borders. The "Default" state uses the warm beige background; the "Primary" state uses a solid matte red fill with white or black text. On hover, buttons should fill with a contrasting primary color (e.g., beige to blue).

### Cards
Cards are defined by 1px hairlines with no rounded corners. The header of a card is often separated by a horizontal hairline. Content within cards should follow the mathematical grid, with images taking up exactly 50% or 100% of the card width.

### Inputs & Fields
Input fields are not fully boxed. Use a single bottom hairline (1px) for a "minimalist" look, or a full rectangular box for high-density forms. Labels sit strictly above the input in the `label-caps` style.

### Navigation
The navigation bar should be treated as a series of connected boxes. Each menu item is separated by a vertical 1px hairline. The active state is indicated by a solid matte yellow background fill.

### Geometric Chips
Chips and tags should be perfectly rectangular or perfectly circular (pill-shaped). Use the secondary color palette (Steel Blue or Ochre) for chip backgrounds to differentiate them from primary actions.

### Progress & Indicators
Use solid blocks of color. A progress bar is a simple 1px bordered rectangle where the "fill" is a solid matte color. Avoid any gradients or rounded caps.