Dieter Rams Functionalist

---
name: dieter-rams-functionalist
description: Apply the Dieter Rams Functionalist visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Dieter Rams Functionalist, mentions braun design, less but better, rams style, or describes warm off-white and pale gray surfaces, single small functional accent, precise modular grid and aligned baselines — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Dieter Rams Functionalist Design System

Braun-school 'less but better' translated to the screen: warm neutral surfaces, black text, a precise modular grid, generous quiet space, and one small functional accent — a dot of orange or green that exists only because it marks the control that matters. Nothing decorative, nothing arbitrary, nothing loud.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Dieter Rams Functionalist.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (braun design, less but better, rams style, functionalist minimal, ten principles design, weniger aber besser), or describes its traits: warm off-white and pale gray surfaces; single small functional accent; precise modular grid and aligned baselines; unobtrusive hairline dividers; restrained neo-grotesque type; controls as honest circles and rectangles.

## Design tokens

### Color palette

- Warm off-white — Braun plastic white, not clinical white: `#f5f3ef` (--color-bg)
- Product panels and cards: `#ffffff` (--color-surface)
- Secondary panels and control housings: `#e6e3dd` (--color-surface-gray)
- Primary text, warm near-black: `#1c1b19` (--color-text)
- Secondary text, captions, and spec labels: `#6e6a63` (--color-text-muted)
- Functional orange — the one marked control, links, active states: `#b84a10` (--color-accent)
- Power-switch green for on/confirm states, used sparingly: `#3e7a3e` (--color-accent-green)
- Occasional marker yellow (ET66-style key), decorative small areas only: `#f2c14e` (--color-accent-yellow)
- Hairline dividers and panel seams: `#dcd7cd` (--color-border)

### Typography

- Display / headings: Inter (fallback: Helvetica Neue, Arial, sans-serif) (ideal: Akzidenz-Grotesk, premium — use Inter as the free substitute)
- Body: Inter (fallback: Helvetica Neue, Arial, sans-serif) (ideal: Akzidenz-Grotesk, premium — use Inter as the free substitute)
- Mono / data: IBM Plex Mono (fallback: Menlo, monospace)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.2, letter-spacing -0.01em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 72, 104 — Calm and even: consistent module spacing, wide margins, and deliberate empty panel area. Nothing crowds; nothing floats arbitrarily — every gap is a multiple of the module.
- Border radius: sm 2px, md 8px, control 999px — Rectangles ease at 2px, product-like panels at 8px, and controls that are circles are perfect circles — the same three radii Braun hardware uses.
- Border treatment: 1px solid #dcd7cd — Hairlines only, and only where a seam is functionally meaningful; alignment does most separation work.

### Shadows

- rest: `0 1px 2px rgba(28, 27, 25, 0.08)` — Default panel elevation — barely there
- lifted: `0 6px 18px rgba(28, 27, 25, 0.1)` — Modals and the rare hovered product card

### Layout

- Max content width: 1080px
- A strict 12-column modular grid; every element aligns to it, including captions
- One idea per section; sections separated by whitespace rather than dividers
- Product-photography-style presentation: object centered on quiet ground
- Spec tables set small, aligned, and mono where numbers matter

### Effects

- None by default — restraint is the effect
- Optional faint circular dial motifs as section markers, hairline-drawn

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 120ms / 200ms / 320ms
- Motion only communicates state change; nothing moves for delight
- Opacity and small translate only — no scale bounces or parallax
- Hover states shift one step of gray, instantly readable

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f5f3ef;
  --color-surface: #ffffff;
  --color-surface-gray: #e6e3dd;
  --color-text: #1c1b19;
  --color-text-muted: #6e6a63;
  --color-accent: #b84a10;
  --color-accent-green: #3e7a3e;
  --color-accent-yellow: #f2c14e;
  --color-border: #dcd7cd;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-control: 999px;
  --shadow-rest: 0 1px 2px rgba(28, 27, 25, 0.08);
  --shadow-lifted: 0 6px 18px rgba(28, 27, 25, 0.1);
  --border-default: 1px solid #dcd7cd;
  --font-display: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Menlo, monospace;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** A quiet bar on the warm white ground: small wordmark left, plain text links right in 15px with generous spacing, active page marked by a small orange dot rather than an underline; a single hairline below.
- **Hero:** A large calm panel: product or subject centered like a catalog photograph, one modest 32-44px heading, one sentence of support text, and a single primary control marked with the functional accent. Empty space carries the composition.
- **Card:** A white panel with 2px radius, hairline border, generous internal margin, and strictly aligned caption/label pairs; hover lifts it one shadow step at most.
- **Button (primary):** A modest rectangle or circle in accent orange #b84a10 with white 500-weight label, 2px radius, no shadow; it stands out because it is the only colored object, not because it is big.
- **Button (secondary):** Same geometry in surface-gray with black label and hairline border — the unmarked control next to the marked one.
- **Form fields:** White field, hairline border, 2px radius, 16px input text; label above in muted gray; focus adds a 2px inner line in text color, and the accent appears only on the submit control.

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The functional dot: a single small circle of orange (or power-switch green) marking the primary control on an otherwise achromatic panel — the interface equivalent of the one colored button on a Braun radio. Spend boldness here; keep everything else quiet.

## Do

- Ration the accent to one marked control per view — its scarcity is its function
- Align everything to the modular grid, including small print and captions
- Let whitespace and typography do the hierarchy work borders would otherwise do
- Prefer removing an element to styling it

## Don't

- Don't add decoration, texture, or gradients — ornament breaks the contract
- Don't use multiple accent colors in one view; green is for on/confirm only
- Don't crowd the grid; if a section needs three ideas, make three sections
- Don't confuse this with generic minimalism — every value here must be justifiable as function

## Accessibility notes

- Accent orange #b84a10 passes 4.5:1 on the warm background at text sizes, but accent-yellow #f2c14e is decorative-only and must never carry text or meaning alone.
- The single-dot active-state convention (nav, controls) needs a redundant cue — weight or underline — for low-vision users.
- High whitespace and hairline-only separation can make grouping ambiguous for cognitive accessibility; keep headings explicit.

## Reference sites

- Vitsœ — Dieter Rams' ten principles of good design: https://www.vitsoe.com/us/about/good-design
- Dieter Rams: https://en.wikipedia.org/wiki/Dieter_Rams
- Braun — design heritage: https://www.braun.com/

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip dieter-rams-functionalist.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/dieter-rams-functionalist.json

Settings → Capabilities → Skills → Upload skill → dieter-rams-functionalist.zip