---
version: alpha
name: Augen
description: Science-driven luxury for invisible computing — a near-black editorial canvas with off-white ink, numbered-section navigation, monospaced technical labels, and a single restrained near-white accent. Futuristic minimalism where whitespace and typographic hierarchy carry the brand, not color.

colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#0f0f0f"
  surface-raised: "#161616"
  ink: "#f5f5f3"
  ink-secondary: "#a8a8a4"
  ink-tertiary: "#6b6b68"

  # Accent — restrained near-white / pale signal
  primary: "#f5f5f3"
  on-primary: "#0a0a0a"
  signal: "#d6d6d0"

  # Hero overlay (dark wash over imagery, flattened)
  overlay-dark: "#070707"

  # Borders + dividers (hairline on dark)
  border: "#262624"
  border-strong: "#3a3a37"

  # On-color
  on-surface: "#f5f5f3"
  on-ink: "#0a0a0a"

  # Neutral scale (dark-first)
  neutral-950: "#0a0a0a"
  neutral-900: "#161616"
  neutral-800: "#262624"
  neutral-600: "#6b6b68"
  neutral-400: "#a8a8a4"
  neutral-100: "#f5f5f3"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -2.56px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1.6px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.66px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: -0.19px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-label:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0.6px
  mono-index:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0.4px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.2px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
    borderColor: "{colors.border-strong}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.none}"
    padding: 8px 0px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 20px 32px
    borderColor: "{colors.border}"

  nav-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-index}"
    rounded: "{rounded.none}"
    padding: 4px 8px

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

  card-product:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"

  divider:
    backgroundColor: "{colors.border}"
    height: 1px
    width: 100%
---

# Augen Design System

## Overview

Augen presents invisible computing as science-driven luxury, and its design system answers with restraint. The page is a near-black canvas (`{colors.background}`) carrying off-white ink (`{colors.ink}`) — not pure white, a paper-warm neutral that reads as premium rather than harsh. The brand's vocabulary ("Beyond Humanware", "Invisible Computing Technologies", "where the future is wearable") asks for an interface that disappears, so the system strips color almost entirely and lets typography, whitespace, and product imagery carry the weight.

The defining structural move is numbered, indexed navigation. Sections and nav items are prefixed with monospaced indices (01 Wearable, 02 Neural) and product codes (A¹ Sense, B¹ Eye), treating the site like a technical specification or a research catalog. This pairing — a humanist sans for reading, a monospace for indices and labels (`{typography.mono-label}`, `{typography.mono-index}`) — is the system's signature. The mono voice signals engineering precision; the sans voice carries the editorial, aspirational copy.

Hierarchy is built on compression and scale. Display headings run large (64px) with aggressive negative tracking (`-2.56px`), giving the hero an engineered, condensed feel, while body copy relaxes to comfortable line-heights for long-form reading. Color stays out of the way: there is effectively no chromatic accent. The "primary" action is a near-white pill on the dark canvas, inverting the page rather than introducing a hue. Depth comes from barely-there surface steps (`{colors.surface}` → `{colors.surface-raised}`) and hairline borders (`{colors.border}`), never from shadow drama.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with paper-warm off-white ink (`{colors.ink}`) — dark, editorial, premium
- Numbered/indexed navigation and product codes set in monospace — the catalog/spec aesthetic
- Dual-voice type: humanist sans for reading, monospace for indices, labels, and technical metadata
- Aggressive negative letter-spacing at display sizes (-2.56px at 64px)
- Effectively achromatic — the only "accent" is a near-white inversion pill, never a hue
- Depth from layered near-black surfaces and hairline borders, not shadows
- Generous vertical whitespace (`{spacing.3xl}`–`{spacing.4xl}`) between sections

## Colors

### Canvas & Ink
- **Canvas** (`{colors.background}`): Near-black page background. The default surface for everything.
- **Surface** (`{colors.surface}`): Subtly raised panel for cards and inputs.
- **Surface Raised** (`{colors.surface-raised}`): Product cards and badges, one step lighter again.
- **Ink** (`{colors.ink}`): Primary off-white text. Paper-warm, not pure white.
- **Ink Secondary** (`{colors.ink-secondary}`): Description copy, muted nav items.
- **Ink Tertiary** (`{colors.ink-tertiary}`): Captions, disabled, faint metadata.

### Accent
- **Primary** (`{colors.primary}`): Near-white inversion fill for the main CTA. Color via contrast, not hue.
- **Signal** (`{colors.signal}`): Pale neutral for subtle emphasis or hover ink.
- **On Primary** (`{colors.on-primary}`): Near-black text on the inversion pill.

### Borders & Overlay
- **Border** (`{colors.border}`): Hairline dividers and card outlines on dark.
- **Border Strong** (`{colors.border-strong}`): Outlined buttons and input borders.
- **Overlay Dark** (`{colors.overlay-dark}`): Dark wash layered over hero imagery for legibility.

### Neutral Scale
- **Neutral 950 → 100** (`{colors.neutral-950}` … `{colors.neutral-100}`): Dark-first ramp from canvas to off-white ink.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a clean humanist grotesque for reading and headings.
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — for indices, product codes, and 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` | 64px hero — condensed, engineered headline |
| `section-heading` | Major section titles |
| `sub-heading` | Lighter sub-sections, intros |
| `card-title` | Product / feature card headings |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text |
| `body-small` | Dense UI text, secondary copy |
| `nav-label` | Nav links and button labels |
| `mono-label` | Technical labels, metadata |
| `mono-index` | Numbered nav indices and product codes |
| `caption` | Fine print, image captions |

### Principles
- **Compression at display, comfort at body**: Headlines use heavy negative tracking (-2.56px at 64px); body copy returns to near-normal tracking with open line-height for readability.
- **Two voices, strict roles**: Inter announces and reads; JetBrains Mono indexes and labels. Never mix the roles.
- **Weight restraint**: 400 for reading, 500 for headings and interactive labels. No heavy weights — the dark canvas already supplies emphasis.
- **Indices are identity**: Monospaced section numbers and product codes are the brand's most recognizable typographic move.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large editorial jumps (`{spacing.3xl}` 96px, `{spacing.4xl}` 160px) for the breathing room between full-bleed sections.

### Grid & Container
- Wide content max-width with full-bleed product imagery
- Hero: large condensed headline over dark-washed imagery
- Sections: numbered, alternating image/text pairs
- Hairline `{colors.border}` dividers mark section boundaries

### Whitespace Philosophy
- **Editorial emptiness**: Massive vertical padding between sections — the dark void is the design.
- **Imagery as color**: With an achromatic palette, full-bleed product photography supplies all the warmth and contrast.
- **Indexed rhythm**: Monospaced numbers anchor the eye as it moves down the catalog of sections.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, canvas only | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, dividers, nav bottom |
| Raised (Level 2) | `{colors.surface-raised}` + hairline border | Product cards, badges |
| Inversion (Accent) | `{colors.primary}` fill, `{colors.on-primary}` text | Primary CTA pill |

**Shadow Philosophy**: Augen avoids shadows almost entirely. On a near-black canvas, elevation reads through subtle surface lightening (`{colors.surface}` → `{colors.surface-raised}`) and hairline borders, not drop shadows. The interface stays flat and architectural, matching the "invisible computing" thesis.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Ghost buttons, hard editorial edges |
| `xs` | 2px | Tiny inline elements |
| `sm` | 4px | Inputs, small controls |
| `md` | 8px | Cards, list items |
| `lg` | 12px | Product cards, image containers |
| `pill` | 9999px | CTA pills, badges |

## Components

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

### Buttons
- **`button-primary`** — Near-white inversion pill, near-black text. The single high-emphasis action.
- **`button-secondary`** — Transparent on canvas with a `{colors.border-strong}` outline pill.
- **`button-ghost`** — Borderless, muted ink, for inline tertiary links.

### Navigation
- **`nav-bar`** — Dark sticky header, off-white labels, hairline bottom border.
- **`nav-item`** — Monospaced index prefix (01, 02…) plus a muted sans label.

### Cards
- **`card`** — Raised near-black surface with hairline border, no shadow.
- **`card-product`** — Full-bleed imagery card (`{rounded.lg}`), zero inner padding so the photo runs edge to edge.

### Pills & Badges
- **`badge`** — Outlined pill on a raised surface, monospaced label for technical tags.

### Inputs
- **`input`** — Near-black surface, off-white text, `{colors.border-strong}` outline.

### Distinctive Components
- **Indexed Section Nav**: Each section/nav item carries a monospaced index (01, 02) or product code (A¹, B¹), turning the page into a research catalog.
- **Full-bleed Product Cards**: Edge-to-edge photography with a dark overlay (`{colors.overlay-dark}`) and off-white captions.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) with paper-warm off-white ink (`{colors.ink}`)
- Use monospace (`{typography.mono-index}`) for section indices and product codes — it's the brand signature
- Apply heavy negative tracking on display headings, relax it for body copy
- Express elevation through surface lightening and hairline borders, not shadows
- Let full-bleed imagery supply contrast and warmth in place of accent color
- Use the near-white inversion pill for the single primary action only

### Don't
- Don't introduce saturated accent hues — the system is achromatic by design
- Don't use pure white text (`#ffffff`) — keep the paper-warm off-white
- Don't add drop shadows for depth on the dark canvas
- Don't set monospace on long reading copy — it's for indices and labels only
- Don't use heavy font weights; 500 is the ceiling
- Don't crowd sections — the generous vertical whitespace is essential

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked sections, reduced display size |
| Tablet | 600–1024px | 2-column product grids, expanded padding |
| Desktop | 1024–1440px | Full layout, wide imagery |
| Large Desktop | >1440px | Centered, generous editorial margins |

### Collapsing Strategy
- Hero: 64px display scales down, maintains proportional negative tracking
- Navigation: indexed horizontal links collapse to a menu on mobile
- Product cards: multi-column → single column full-bleed
- Section spacing: 160px → ~64px on mobile

### Image Behavior
- Full-bleed product imagery maintains dark overlay at all sizes
- Hero imagery simplifies on mobile but keeps the dark wash for legibility

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Near-black `{colors.background}`
- Primary text: Off-white `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Border: `1px solid {colors.border}`
- Primary CTA: Inversion pill `{colors.primary}` with `{colors.on-primary}` text

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline at 64px Inter weight 500, line-height 1.02, letter-spacing -2.56px, color `{colors.ink}`. Above it, a monospaced index '01 — WEARABLE' at 12px JetBrains Mono in `{colors.ink-secondary}`. Near-white pill CTA (`{colors.primary}` fill, `{colors.on-primary}` text, 9999px radius, 12px 28px padding)."
- "Build a product card: `{colors.surface-raised}` surface, 12px radius, 1px solid `{colors.border}`, full-bleed image with a `{colors.overlay-dark}` wash, caption in off-white `{colors.ink}` 22px Inter weight 500."
- "Design an indexed nav item: monospaced '02' in `{colors.ink-secondary}` followed by 'Neural' in 14px Inter weight 500, off-white on the dark bar."

### Iteration Guide
1. Stay achromatic — depth and emphasis come from value, never hue
2. Monospace indices and product codes are the brand signature — use them
3. Negative tracking scales with size: -2.56px at 64px, -1.6px at 40px, normal at body
4. Elevation = surface lightening + hairline border, never shadow
5. Off-white ink, never pure white; near-black canvas, never pure black

---

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