---
version: alpha
name: Umbrel
description: Dark-mode-first home-server aesthetic — near-black charcoal canvas, soft off-white ink, a warm coral accent, deeply rounded cards and pill controls, and a clean geometric sans that feels like premium consumer hardware made into software.
colors:
  # Canvas + ink
  background: "#0c0c0e"
  surface: "#161618"
  surface-soft: "#1f1f22"
  surface-raised: "#242427"
  ink: "#f5f5f7"
  ink-secondary: "#a1a1aa"
  ink-muted: "#6e6e76"

  # Accent — Umbrel coral
  primary: "#ff6d3f"
  primary-hover: "#ff855f"
  on-primary: "#0c0c0e"

  # Support accents
  accent-amber: "#ffb347"
  accent-violet: "#8b7cff"
  success: "#3ecf8e"
  danger: "#ff5c5c"

  # Borders + dividers
  border: "#2a2a2e"
  border-soft: "#222226"

  # Tints
  surface-coral: "#2a1812"
  badge-bg: "#1f1f22"
  badge-text: "#a1a1aa"

  # On-color
  on-ink: "#0c0c0e"

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -2.5px
  section-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.5px
  card-title:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.6px
  sub-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  mono-caption:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

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

  card-raised:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 32px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.primary}"

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

# Umbrel Design System

## Overview

Umbrel sells a home server you actually want on your shelf — aluminum and walnut hardware running a beautiful self-hosted OS — and the website carries that same premium-consumer-electronics feeling into the dark. The canvas is a deep, slightly cool charcoal (`{colors.background}`) rather than pure black, which lets product photography of metal-and-wood hardware glow without the harsh edges of an OLED-black void. Type sits on top in a soft, near-white (`{colors.ink}`) that reads warm and quiet rather than clinical.

The system is built on layered dark surfaces. Cards lift off the canvas through progressively lighter neutral fills (`{colors.surface}` → `{colors.surface-soft}` → `{colors.surface-raised}`) paired with hairline borders (`{colors.border}`) instead of heavy shadows — depth comes from value steps, not drop-shadows. Everything is generously rounded: cards use 24–32px radii (`{rounded.xl}`–`{rounded.2xl}`) and every interactive control is a full pill (`{rounded.pill}`), echoing the soft-cornered industrial design of the Umbrel Home device itself.

The single brand accent is Umbrel coral (`{colors.primary}`), a warm orange-red that pops hard against the cool charcoal and is reserved for primary CTAs, key highlights, and the logo. It is paired with dark ink (`{colors.on-primary}`) on its fill so the button reads as a confident, high-contrast object rather than a neon glow. Support accents (amber, violet, mint) appear sparingly in app-icon and feature illustration contexts.

Typography is a clean geometric sans (Inter) running tight negative tracking at display sizes for a modern, engineered headline, relaxing to comfortable, readable body copy. The voice is premium and calm — lots of whitespace, large hero type, and restrained color.

**Key Characteristics:**
- Dark-mode-first: cool charcoal canvas (`{colors.background}`), not pure black
- Layered neutral surfaces for depth instead of shadows
- A single warm coral accent (`{colors.primary}`) against cool darks
- Deeply rounded everything — 24–32px cards, full-pill buttons
- Inter geometric sans with tight display tracking (-2.5px at hero)
- Hairline borders (`{colors.border}`) define structure
- Premium consumer-hardware feel translated into software

## Colors

### Canvas & Ink
- **Charcoal** (`{colors.background}`): Page background — cool near-black.
- **Surface** (`{colors.surface}`): Standard card fill, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Inputs, secondary buttons, raised tiles.
- **Surface Raised** (`{colors.surface-raised}`): Hovered/elevated surfaces.
- **Ink** (`{colors.ink}`): Primary text and headings — soft off-white.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled, metadata.

### Accent
- **Umbrel Coral** (`{colors.primary}`): Primary CTAs, highlights, logo.
- **Coral Hover** (`{colors.primary-hover}`): Hover state for the coral CTA.
- **Amber** (`{colors.accent-amber}`): Secondary illustration accent.
- **Violet** (`{colors.accent-violet}`): App/feature accent.
- **Mint** (`{colors.success}`): Success / status positive.
- **Red** (`{colors.danger}`): Errors, destructive states.

### Structure
- **Border** (`{colors.border}`): Card and control outlines.
- **Border Soft** (`{colors.border-soft}`): Subtle dividers, nav underline.
- **Badge Bg** (`{colors.badge-bg}`): Pill badge surface.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif`
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`

### 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 headline, tight -2.5px tracking |
| `section-heading` | Major section titles |
| `card-title` | Feature/card headings |
| `sub-heading` | Sub-section and lead-in text |
| `body-large` | Hero subtitles, intros |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons and pill controls |
| `caption` | Badges, metadata |
| `mono-caption` | Technical labels, code refs |

### Principles
- **Tight display, relaxed body**: Negative tracking compresses headlines (-2.5px at 64px); body relaxes to 0.
- **Three weights**: 400 (read), 500–600 (UI/emphasis), 700 (hero only).
- **Quiet on dark**: Ink is soft off-white, never pure `#ffffff`, to match the warm charcoal.

## Layout

### Spacing System
Base unit is 8px (`spacing:` token block above). Generous jumps at section scale (`{spacing.3xl}`–`{spacing.4xl}`) create the calm, premium rhythm.

### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single column, large top padding, product photography below
- Feature sections: 2–3 column card grids

### Whitespace Philosophy
- **Calm and premium**: Large vertical padding between sections; hero type breathes.
- **Depth by value, not shadow**: Surfaces step lighter to lift; borders are hairline.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | `{colors.background}` | Page canvas |
| Surface | `{colors.surface}` + `{colors.border}` | Standard cards |
| Raised | `{colors.surface-soft}` / `{colors.surface-raised}` | Inputs, hover, featured tiles |

Depth is communicated through stacked neutral fills and 1px hairline borders rather than drop-shadows — fitting a dark UI where shadows read poorly.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small inline elements |
| `md` | 12px | Inputs, small tiles |
| `lg` | 16px | Medium containers |
| `xl` | 24px | Standard cards |
| `2xl` | 32px | Featured cards |
| `pill` | 9999px | All buttons, badges, controls |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Umbrel coral fill, dark ink, full pill. The default CTA.
- **`button-secondary`** — Dark soft surface with hairline border, full pill.

### Badges
- **`badge`** — Dark surface, muted text, full pill.

### Cards
- **`card`** — Surface fill, 24px radius, hairline border.
- **`card-raised`** — Lighter surface, 32px radius, generous padding for featured content.

### Inputs
- **`input`** — Soft dark surface, 12px radius. Focus swaps border to coral (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Charcoal sticky header, soft-white links, coral CTA right.

## Do's and Don'ts

### Do
- Use the cool charcoal canvas (`{colors.background}`), not pure black
- Reserve coral (`{colors.primary}`) for primary actions and key highlights
- Build depth with layered neutral surfaces + hairline borders
- Round everything generously — pills for controls, 24–32px for cards
- Keep ink soft off-white, never pure `#ffffff`

### Don't
- Don't put coral on large surfaces — it's an accent, not a background
- Don't use heavy drop-shadows on the dark canvas
- Don't use sharp corners — the system is soft-cornered throughout
- Don't use positive letter-spacing on display headlines
- Don't drop body text contrast below readable on `{colors.surface}`

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down |
| Tablet | 600–1024px | 2-column grids begin |
| Desktop | 1024–1200px | Full multi-column layout |
| Large | >1200px | Centered, generous margins |

### Collapsing Strategy
- Hero: 64px → scales down, retains negative tracking
- Navigation: links + CTA → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Section spacing: 96px → ~48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Charcoal `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Primary CTA: Coral `{colors.primary}` with dark ink `{colors.on-primary}`
- Card: `{colors.surface}` + border `{colors.border}`, 24px radius

### Example Component Prompts
- "Hero on charcoal `{colors.background}`. Headline 64px Inter weight 700, letter-spacing -2.5px, color `{colors.ink}`. Subtitle 19px weight 400 in `{colors.ink-secondary}`. Coral pill CTA (`{colors.primary}` fill, dark ink, 9999px radius, 14px 28px padding)."
- "Card: `{colors.surface}` fill, 1px `{colors.border}`, 24px radius, 28px padding. Title 24px Inter weight 600, tracking -0.6px. Body 16px in `{colors.ink-secondary}`."
- "Badge: `{colors.badge-bg}` surface, `{colors.badge-text}` text, full pill, 4px 12px padding, 13px weight 500."

### Iteration Guide
1. Coral is the only loud color — everything else is charcoal and off-white
2. Lift surfaces by stepping fills lighter, not by adding shadows
3. Pills for all controls; 24–32px for cards
4. Keep tracking tight on display, neutral on body

---

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