Braun Functional Minimalism

# Braun Functional Minimalism

## Philosophy

A restrained interface language derived from Dieter Rams and Braun industrial design: neutral surfaces, precise alignment, and controls that communicate function before personality. The interface should feel engineered, durable, and quietly confident rather than expressive or decorative.

### Values

- usefulness before novelty
- clarity through reduction
- detail discipline and consistency
- honest hierarchy with no false emphasis

### Anti-Values

- decorative flourish without purpose
- trendy gradients or glass effects
- ambiguous controls that hide function

### Visual Character

- Large fields of warm off-white and graphite are interrupted by thin keyline dividers, so sections are separated with hairline rules instead of heavy cards or colorful panels.
- Controls sit inside precise rounded-rectangle tracks with measured 1px borders, restrained shadows, and monochrome iconography that makes each element feel like a physical Braun appliance interface.
- Typography uses disciplined sans-serif stacks with uppercase micro-labels, tabular numerals, and generous line spacing, creating a neutral instruction-manual tone instead of editorial drama.
- Accent color is used sparingly as a functional signal on toggles, level meters, focus rings, and status dots, never as background fill for large surfaces or decorative illustration.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#2E3133` |
| secondary | `#6E7377` |
| accent | `#D96A32` |
| background | `#ECE7DE` |
| surface | `#F7F3EC` |
| text | `#17191A` |
| muted | `#8C877F` |
| border | `#B8B0A4` |
| error | `#B7442A` |
| success | `#4E6B50` |
| warning | `#B9832F` |
| info | `#5C7688` |

### Typography

- **Heading Font**: Archivo
- **Body Font**: Archivo
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.2
- **Line Height**: 1.5
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Radii

- **None**: 0
- **Sm**: 8px
- **Md**: 14px
- **Lg**: 22px
- **Full**: 9999px

### Shadows

- **Sm**: 0 1px 0 rgba(23,25,26,0.06)
- **Md**: 0 10px 24px rgba(23,25,26,0.08)
- **Lg**: 0 22px 44px rgba(23,25,26,0.10)

### Surfaces

- **Treatment**: paper
- **Card Style**: Matte warm surfaces with subtle inset highlight and no glossy effects; panels feel like powder-coated product casings or printed manuals.
- **Bg Pattern**: none

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Borders are quiet engineering lines: thin, crisp, evenly applied, and more important than shadow in defining component edges.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0, 0.2, 1)
- **Philosophy**: deliberate

## Rules

### Composition

Compose screens as functional instrument panels: a calm summary zone, clearly segmented modules, and aligned controls with strong shared baselines.

### Hierarchy

Use scale sparingly; hierarchy comes from spacing, alignment, keyline separators, and label/value pairing rather than oversized display treatments.

### Density

Medium density with disciplined breathing room; panels contain many controls, but every control has a defined slot and measured padding.

### Signature Patterns

- Every major section begins with an uppercase mono overline and a thin divider rule, creating manual-like segmentation instead of decorative headers.
- Interactive controls use inset tracks, dial-like circular indicators, or segmented buttons with 1px borders so the UI echoes physical appliance hardware.
- Numeric readouts and metadata use tabular monospace figures aligned in narrow columns, reinforcing product-instrument precision across the whole layout.
- Selected states are indicated by a restrained burnt-orange signal line, dot, or fill inside a control, never by flooding the entire panel with accent color.

## Layout

### Grid

A 12-column desktop grid collapses to 8 columns on tablet and a single measured column on mobile, with modules spanning whole columns rather than arbitrary card widths.

### Breakpoints

desktop 1440, tablet 768, mobile 375 with stacked panels and full-width controls on small screens.

### Whitespace

Whitespace is deliberate and even, favoring consistent gutters and module padding over dramatic empty voids; every gap should feel engineered.

## Guidance

### Do

- Use keylines, measured spacing, and neutral surfaces to separate content before reaching for color.
- Make controls self-explanatory with labels, values, and visible mechanical states.
- Reserve accent color for active state, warning, or live signal feedback.

### Don't

- Do not introduce ornamental illustrations, soft blobs, or expressive gradients.
- Do not rely on oversized hero text when alignment and labeling can do the work.
- Do not hide important actions inside visually ambiguous minimalist treatments.