---
version: alpha
name: Drams
description: Rams-inspired functional minimalism — Aspekta geometric sans at restrained sizes, near-black ink on near-white canvas, a single decisive orange accent, square-cornered surfaces, and gallery whitespace where every element earns its place.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#f7f7f7"
  surface-soft: "#f4f4f4"
  surface-warm: "#f7f6f5"
  ink: "#262626"
  ink-pure: "#0a0a0a"
  ink-deep: "#121212"

  # Accent — the single decisive color
  primary: "#ff611a"
  primary-hover: "#e85c18"

  # Secondary / link
  link-blue: "#0099ff"

  # Neutral scale
  gray-700: "#4f4f4f"
  gray-600: "#6e6e6e"
  gray-500: "#808080"
  gray-400: "#969696"
  gray-300: "#cfcfcf"
  gray-200: "#e5e5e5"
  gray-100: "#f4f4f4"

  # Borders
  border: "#e5e5e5"
  border-soft: "#f4f4f4"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Aspekta, Inter, sans-serif"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.8px
  section-heading:
    fontFamily: "Aspekta, Inter, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Aspekta, Inter, sans-serif"
    fontSize: 32px
    fontWeight: 450
    lineHeight: 1.20
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Aspekta, Inter, sans-serif"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Aspekta, Inter, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Aspekta, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-medium:
    fontFamily: "Aspekta, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Aspekta, Inter, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
  caption:
    fontFamily: "Aspekta, Inter, sans-serif"
    fontSize: 12px
    fontWeight: 450
    lineHeight: 1.40
    letterSpacing: 0px
  micro-label:
    fontFamily: "Aspekta, Inter, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0.4px

spacing:
  micro: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  pill: 9999px

components:
  # Primary CTA — orange accent
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 22px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 22px

  # Dark / ink button
  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 22px

  # Secondary — bordered white
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 22px
    borderColor: "{colors.border}"

  # Card — square, bordered, near-white
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  # Soft surface panel
  card-soft:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-soft}"

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.primary}"

  # Pill tag / badge
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.gray-600}"
    typography: "{typography.micro-label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Top nav
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# Drams Design System

## Overview

Drams is a design system built as a love letter to Dieter Rams — "less, but better" rendered in pixels. The site is a study in functional minimalism: a near-white canvas (`{colors.background}` and `{colors.surface}`) carrying near-black ink (`{colors.ink}`), with whitespace doing the heavy lifting. Nothing decorates; everything functions. The page reads like a well-organized product catalog from Braun's golden era, where structure and clarity are the only ornamentation allowed.

The typographic voice is Aspekta — a humanist-geometric sans with a low, even rhythm. It runs across the whole system at restrained weights (400 for reading, 450 as a soft-medium, 500 for emphasis), never shouting. Headlines use modest negative tracking that tightens display sizes without compressing them into a logo. The result feels engineered and quiet, the typographic equivalent of a matte-finished aluminium panel.

What gives Drams its single point of tension is the orange accent (`{colors.primary}`). In an otherwise achromatic, grayscale composition, this one warm color marks every primary action and active state. It is used sparingly and decisively — the Rams principle that color should signal function, not entertain. Surfaces are square or barely-rounded (`{rounded.sm}` to `{rounded.lg}`), borders are thin and light (`{colors.border}`), and depth comes from spacing and hairline outlines rather than shadows.

**Key Characteristics:**
- Aspekta geometric sans across the whole system, three restrained weights (400 / 450 / 500)
- Near-white canvas (`{colors.background}`, `{colors.surface}`) with near-black ink (`{colors.ink}`) — never pure black on pure white
- One decisive accent: Drams Orange (`{colors.primary}`) for primary actions and active states only
- Square-to-slightly-rounded corners (`{rounded.sm}`–`{rounded.lg}`); no pill buttons
- Hairline borders (`{colors.border}`) instead of shadows for separation
- Gallery whitespace — generous vertical rhythm between sections
- Grayscale neutral scale for all secondary and tertiary text

## Colors

### Canvas & Ink
- **White** (`{colors.background}`): Page background, cards, button text on dark/accent.
- **Soft Surface** (`{colors.surface}`): Section panels, alternating bands, soft cards.
- **Warm Surface** (`{colors.surface-warm}`): Subtle warm-tinted panels.
- **Drams Ink** (`{colors.ink}`): Primary text and headings — warm near-black, never pure.
- **Deep Ink** (`{colors.ink-pure}` / `{colors.ink-deep}`): Highest-contrast text contexts.

### Accent
- **Drams Orange** (`{colors.primary}`): Primary CTAs, active states, focus. The system's only color.
- **Orange Hover** (`{colors.primary-hover}`): Pressed/hover state of the accent.

### Secondary
- **Link Blue** (`{colors.link-blue}`): Occasional interactive/link accent.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 600** (`{colors.gray-600}`): Body secondary, descriptions.
- **Gray 500** (`{colors.gray-500}`): Muted labels.
- **Gray 400** (`{colors.gray-400}`): Tertiary, placeholders.
- **Gray 300** (`{colors.gray-300}`): Disabled, faint dividers.
- **Gray 200** (`{colors.gray-200}`): Borders, outlines.
- **Gray 100** (`{colors.gray-100}`): Faintest surface tint.

### Borders
- **Border** (`{colors.border}`): Card outlines, dividers, input borders.
- **Border Soft** (`{colors.border-soft}`): Lightest separation lines.

## Typography

### Font Family
- **Primary**: `Aspekta`, with fallbacks `Inter, sans-serif`
- Aspekta is a humanist-geometric sans; the system uses its 400, 450, and 500 weights almost exclusively.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 60px hero headline, tight tracking |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, lighter weight |
| `card-title` | Card and feature headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-medium` | Emphasized body, nav |
| `button-ui` | Buttons, links |
| `caption` | Metadata, secondary labels |
| `micro-label` | Tiny labels, tags |

### Principles
- **Restraint over impact**: even at 60px the hero stays a sentence, not a billboard — modest negative tracking, mid weight.
- **Three weights, strict roles**: 400 reads, 450 softly emphasizes, 500 announces. No bold display.
- **Grayscale text hierarchy**: secondary and tertiary text descend the neutral scale; color is never used to rank text.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with generous jumps (`{spacing.2xl}`–`{spacing.4xl}`) between sections.

### Grid & Container
- Centered single-column hero with deep top padding
- Feature sections in 2–3 column grids
- Max content width around 1100–1200px

### Whitespace Philosophy
- **Gallery emptiness**: large vertical gaps between sections — whitespace is the layout.
- **Hairline separation**: sections divide with thin `{colors.border}` lines, not heavy bands.
- **No shadows**: depth is implied by spacing and outline, never elevation.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed surfaces |
| `xs` | 2px | Inline chips |
| `sm` | 4px | Buttons, inputs |
| `md` | 6px | Small containers |
| `lg` | 8px | Cards, panels |
| `pill` | 9999px | Tags, badges, avatars |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Drams Orange fill, white text, `{rounded.sm}`. The default CTA.
- **`button-dark`** — Ink fill, white text. Alternate strong action.
- **`button-secondary`** — White, `{colors.border}` outline, ink text.

### Cards
- **`card`** — White, thin `{colors.border}` outline, `{rounded.lg}`, no shadow.
- **`card-soft`** — `{colors.surface}` panel for grouped content.

### Inputs
- **`input`** — White, `{colors.border}` outline. Focus switches border to `{colors.primary}`.

### Badges
- **`badge`** — Soft surface pill, gray label, micro type. The only pill in the system.

### Navigation
- **`nav-bar`** — White header, ink links, hairline bottom border.

## Do's and Don'ts

### Do
- Keep the palette grayscale and let `{colors.primary}` be the single accent
- Use `{colors.ink}` (warm near-black), never pure black on pure white
- Separate with hairline `{colors.border}` lines, not shadows
- Stay in the three Aspekta weights (400 / 450 / 500)
- Let whitespace carry the composition

### Don't
- Don't introduce a second accent color — orange is the only one
- Don't use heavy shadows or elevation — depth is spacing + outline
- Don't use pill radius on buttons; pills are for tags/badges only
- Don't use bold display weights — 500 is the ceiling
- Don't color text to rank it — use the neutral scale

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced section padding |
| Tablet | 600–1024px | 2-column grids emerge |
| Desktop | 1024–1200px | Full multi-column layout |
| Large | >1200px | Centered, generous margins |

### Collapsing Strategy
- Hero 60px scales down, keeps tracking proportional
- Feature grids 3 → 2 → 1 column
- Navigation collapses to a menu toggle
- Section spacing compresses (`{spacing.4xl}` → `{spacing.2xl}`) on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Drams Orange `{colors.primary}`
- Background: White `{colors.background}` / Soft `{colors.surface}`
- Heading text: Drams Ink `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Border: `{colors.border}` (1px hairline, no shadow)

### Example Component Prompts
- "Create a hero on white. Headline 60px Aspekta weight 500, line-height 1.05, letter-spacing -1.8px, color `{colors.ink}`. Subtitle 22px weight 400, color `{colors.gray-600}`. Orange CTA (`{colors.primary}`, 4px radius, 12px 22px padding) plus a bordered secondary button (white, 1px `{colors.border}`)."
- "Design a card: white, 1px `{colors.border}`, 8px radius, no shadow, 24px padding. Title 26px Aspekta weight 500. Body 16px weight 400 in `{colors.gray-600}`."
- "Build a tag: `{colors.surface}` pill, `{colors.gray-600}` text, 9999px radius, 12px micro label."

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Drams. Brand names and trademarks belong to their respective owners.