---
version: alpha
name: Bauhaus Clock
description: Bauhaus-faithful minimalism for a macOS clock app — primary-color dial accents (red/blue/yellow) over a calm near-white canvas, system-font typography, geometric circular forms, and day/night theme switching. Restraint as craft.
colors:
  # Canvas + ink
  background: "#fbfaf7"
  surface: "#ffffff"
  surface-soft: "#f3f1ec"
  ink: "#1a1a1a"
  ink-secondary: "#5c5c5c"
  ink-muted: "#8a8a8a"

  # Bauhaus primaries — the dial accent system
  primary: "#1b3a8f"      # Signal Blue
  bauhaus-red: "#d2342a"
  bauhaus-yellow: "#f2c200"

  # Secondary dial palette (product swatches)
  turquoise: "#2bb1a8"
  salmon: "#e8836f"
  pistachio: "#a8c07a"
  lavender: "#9b8fc4"
  sky-blue: "#6fa8d6"
  cream: "#efe7d2"
  slate: "#4a5560"
  noir: "#15161a"

  # Night / lume
  lume-green: "#3ddc84"
  lume-amber: "#f0a830"

  # Interactive
  link: "#1b3a8f"
  focus-ring: "#6fa8d6"
  cta-hover: "#152e72"
  surface-hover: "#ece9e2"

  # Borders + dividers
  border: "#e4e0d8"
  border-strong: "#cfc9bd"
  divider: "#eceae3"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#fbfaf7"
  on-yellow: "#1a1a1a"

typography:
  display-hero:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.4px
  card-title:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.2px
  body-large:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.2px
  label-mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.6px

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

rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  pill: 9999px
  circle: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.cta-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 40px
    borderColor: "{colors.border}"

  swatch:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.circle}"
    size: 32px
    borderColor: "{colors.border-strong}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.focus-ring}"

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

  accent-dot:
    backgroundColor: "{colors.bauhaus-red}"
    rounded: "{rounded.circle}"
    size: 12px
---

# Bauhaus Clock Design System

## Overview

Bauhaus Clock is a macOS clock app whose marketing site practices what the Bauhaus preached — form following function, ornament stripped to essentials, and geometry doing the emotional work that decoration usually does. The canvas is a calm, paper-warm near-white (`{colors.background}`) that reads as analog rather than digital, with near-black ink (`{colors.ink}`) carrying nearly all the text. Against this restraint, the product's identity is delivered entirely through the dial color system — primary red, blue, and yellow at full saturation, the historical Bauhaus triad, deployed as circular swatches.

Typography is deliberately un-precious. The site declares "System Font Enabled" and leans on the OS native typeface (San Francisco on macOS), so the type feels native to the platform the app lives on. Weights are kept to three (400 for reading, 500 for UI, 600 for headings); size jumps are generous so hierarchy comes from scale and whitespace, not font tricks. A monospace label voice appears for technical metadata — times, version numbers, the small-print craft details.

The distinctive move is circularity. A clock app is, at heart, a circle, and the design echoes that everywhere: dial swatches are perfect circles, the night/day theme switch is a circular toggle, and feature imagery centers the round watch face. Where Vercel builds its identity on shadow-as-border, Bauhaus Clock builds its on the primary-color circle — a swatch that is simultaneously a color picker, a product preview, and a Bauhaus citation.

**Key Characteristics:**
- Bauhaus primary triad (red `{colors.bauhaus-red}`, blue `{colors.primary}`, yellow `{colors.bauhaus-yellow}`) as the accent system
- Paper-warm near-white canvas (`{colors.background}`) — analog, not clinical white
- System-font typography (San Francisco) — native to the macOS app it markets
- Circular forms everywhere: dial swatches, theme toggle, watch-face imagery
- Three-weight type system, hierarchy from scale and whitespace
- Day/Night automatic theme switching reflected in a light/dark palette pairing
- Monospace label voice for technical metadata
- Generous whitespace; restraint treated as craft

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, dark CTA fill.
- **Background** (`{colors.background}`): Paper-warm canvas — the calm field everything sits on.
- **Surface** (`{colors.surface}`): Pure white for cards and inputs lifted off the warm canvas.

### Bauhaus Triad (Dial Accents)
- **Signal Blue** (`{colors.primary}`): The flagship dial accent and link color.
- **Bauhaus Red** (`{colors.bauhaus-red}`): Primary-color accent, alert/lume dots.
- **Bauhaus Yellow** (`{colors.bauhaus-yellow}`): Primary-color accent; needs dark text (`{colors.on-yellow}`) on top.

### Secondary Dial Palette
- **Turquoise** (`{colors.turquoise}`), **Salmon** (`{colors.salmon}`), **Pistachio** (`{colors.pistachio}`), **Lavender** (`{colors.lavender}`), **Sky Blue** (`{colors.sky-blue}`), **Cream** (`{colors.cream}`), **Slate** (`{colors.slate}`), **Noir** (`{colors.noir}`): The expanded dial swatch options shown as circular pickers.

### Night / Lume
- **Lume Green** (`{colors.lume-green}`): Tritium-style night glow accent.
- **Lume Amber** (`{colors.lume-amber}`): Warm night lume option.

### Text Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Descriptions, supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.

### Borders & Surfaces
- **Border** (`{colors.border}`): Card outlines, hairline dividers.
- **Border Strong** (`{colors.border-strong}`): Input outlines, swatch rings.
- **Surface Soft** (`{colors.surface-soft}`): Feature-card tint, subtle zone separation.

## Typography

### Font Family
- **Primary**: system font stack — `-apple-system, BlinkMacSystemFont` (San Francisco on macOS), falling back to `Inter, Helvetica Neue, Arial, sans-serif`.
- **Monospace**: `ui-monospace, SFMono-Regular, Menlo` for technical labels.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, large supporting lines |
| `card-title` | Feature card headings |
| `body-large` | Hero subtitle, intros |
| `body` | Standard reading text |
| `body-medium` | UI text, emphasized labels |
| `button-ui` | Buttons, nav links |
| `caption` | Metadata, swatch names |
| `label-mono` | Technical metadata, times, version |

### Principles
- **System-native first**: the app is macOS, so the site uses the macOS system font — no web-font download, no brand typeface fighting the platform.
- **Three weights, strict roles**: 400 (read), 500 (interact), 600 (announce). No heavy black weights.
- **Scale over decoration**: hierarchy is carried by size jumps and whitespace, the Bauhaus way.
- **Mono for the technical voice**: times, version numbers, and craft metadata use the monospace label.

## Layout

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

### Grid & Container
- Max content width: approximately 1100px, centered
- Hero: centered single column, the round watch face as focal image
- Feature sections: 2–3 column grids of cards
- Dial swatch picker: a wrapping row/grid of circular swatches

### Whitespace Philosophy
- **Calm field**: the paper-warm canvas and large vertical rhythm let the primary-color swatches pop without shouting.
- **Circle as anchor**: round forms (watch face, swatches, toggle) sit in open space so their geometry reads cleanly.
- **Restraint as craft**: empty space is intentional, echoing the product's "simple, calm, full of personality" pitch.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Canvas, text blocks |
| Hairline | `1px solid {colors.border}` | Cards, dividers |
| Soft Card | `1px solid {colors.border}` + `0 1px 3px rgba(0,0,0,0.05)` | Lifted surface cards |
| Focus | `2px solid {colors.focus-ring}` | Keyboard focus on interactive elements |

Depth is whisper-level. The system prefers hairline borders and the warm-white/pure-white surface contrast over heavy shadows, keeping the analog, printed-paper feel.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 6px | Small inline elements |
| `md` | 10px | Inputs, list items |
| `lg` | 16px | Cards |
| `xl` | 24px | Feature cards |
| `pill` | 9999px | Buttons, badges |
| `circle` | 9999px | Dial swatches, theme toggle, accent dots — the signature form |

## Components

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

### Buttons
- **`button-primary`** — Ink fill, paper-white text, full pill. The "Download" CTA.
- **`button-secondary`** — White surface, `{colors.border-strong}` outline, full pill.

### Swatches
- **`swatch`** — The signature element: a perfect circle (`{rounded.circle}`), 32px, ringed with `{colors.border-strong}`, filled with any dial color. Doubles as color picker and product preview.
- **`accent-dot`** — Small 12px primary-color circle for lume/status indicators.

### Cards
- **`card`** — White surface, hairline border, `{rounded.lg}`.
- **`card-feature`** — Larger feature card on `{colors.surface-soft}` tint, `{rounded.xl}`.

### Inputs
- **`input`** — White surface, `{colors.border-strong}` outline. Focus uses `{colors.focus-ring}`.

### Navigation
- **`nav-bar`** — Sticky header on the warm canvas, system-font links, dark pill CTA right.

## Do's and Don'ts

### Do
- Use the Bauhaus primary triad (red/blue/yellow) for dial accents and circular swatches
- Keep the canvas paper-warm (`{colors.background}`), not clinical pure white
- Use the system font stack — the app is macOS, so be native to it
- Make swatches, toggles, and accents perfect circles
- Put dark text (`{colors.on-yellow}`) on yellow fills for contrast
- Rely on whitespace and scale for hierarchy

### Don't
- Don't add gratuitous ornament — Bauhaus restraint is the brand
- Don't use heavy drop shadows; prefer hairline borders and surface contrast
- Don't put white text on the yellow accent
- Don't introduce a loud custom display typeface that fights the system font
- Don't square off the dial swatches — circularity is the identity

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, swatch grid wraps tight |
| Tablet | 600–1024px | 2-column feature grids |
| Desktop | >1024px | Full layout, centered ~1100px container |

### Touch Targets
- Buttons use 12px vertical padding for comfortable tapping
- Swatches at 32px with adequate gaps for selection
- Nav links at 15px with generous spacing

### Collapsing Strategy
- Hero: watch-face image scales, headline 56px → smaller, tracking held proportional
- Feature cards: 3-column → 2-column → single column
- Swatch picker: wide row → wrapping grid
- Section spacing: 64px+ → ~40px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: paper-warm `{colors.background}`
- Heading text: `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Accents: Bauhaus triad — `{colors.bauhaus-red}`, `{colors.primary}`, `{colors.bauhaus-yellow}`
- CTA: `{colors.ink}` fill, pill radius
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on `{colors.background}`. Headline 56px system font weight 600, letter-spacing -1.5px, `{colors.ink}`. Subtitle 19px weight 400, `{colors.ink-secondary}`. Dark pill CTA (`{colors.ink}`, pill radius, 12px 24px) plus a centered round watch-face image."
- "Build a dial swatch picker: a wrapping row of 32px perfect circles (`{rounded.circle}` radius), each filled with a dial color (`{colors.primary}`, `{colors.bauhaus-red}`, `{colors.turquoise}`, ...), ringed with `{colors.border-strong}`. Selected swatch gets a `{colors.focus-ring}` ring."
- "Design a feature card: `{colors.surface-soft}` background, `{rounded.xl}` radius, hairline `{colors.border}`. Title 20px weight 600, body 16px weight 400 in `{colors.ink-secondary}`."

### Iteration Guide
1. Lead with restraint — empty space and scale before any decoration
2. Accents come from the Bauhaus triad only; secondary dial colors are for swatches
3. Keep all selectors and indicators circular
4. Stay on the system font — don't introduce a competing brand face
5. Dark text on yellow, white text on blue/red/ink

---

## 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 Bauhaus Clock. Brand names and trademarks belong to their respective owners.