---
title: "Umbrel design system"
variant: extended
source: https://umbrel.com/
captured_at: 2026-10-12
theme: dark
industry: consumer-electronics
generator: Design DNA (https://four.wiralomi.com/style/umbrel-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Umbrel · Design System

> A calm dark canvas for a personal cloud.

**Theme:** dark · **Industry:** consumer-electronics · **Source:** https://umbrel.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Umbrel pairs a near-black interface with immersive home-server imagery to make self-hosting feel approachable. Spacious centered headings, rounded media panels, and restrained violet CTAs guide visitors through devices, software, and community proof.

## North star

Keep the interface quiet and near-black so authentic product imagery, clear typography, and a single violet action color do the storytelling.

## Overview

The page is built on a near-black canvas, with most sections staying black so warm product photography and bright interface screenshots carry the visual emphasis. White headlines provide crisp contrast; softer grays handle supporting copy, while a vivid violet is reserved for primary purchase and exploration actions. A pale, full-bleed app-store section interrupts the dark sequence as a clear change of pace. Google Sans shapes the prominent display and heading hierarchy with medium-weight, unforced forms; Inter carries navigation, body copy, captions, and buttons. The layout alternates centered introductions with broad media panels, product-card grids, and feature compositions. Rounded cards and capsule controls soften the technical subject matter. Large section intervals preserve a spacious rhythm, while dark hairlines and subtle shadows define edges and layer imagery without adding ornamental clutter.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cloud White | `#ffffff` | `--color-cloud-white` | neutral | Primary headings, body text, navigation, and text on violet actions. |
| Night Canvas | `#000000` | `--color-night-canvas` | surface | Dominant page canvas and dark section backgrounds; frames the photography and product media. |
| Soft Charcoal | `#09090b` | `--color-soft-charcoal` | surface | Near-black card and button surfaces that subtly lift content from the main canvas. |
| Silver Copy | `#cccccc` | `--color-silver-copy` | neutral | Muted supporting paragraphs and explanatory copy on dark backgrounds. |
| Umbrel Violet | `#5351f3` | `--color-umbrel-violet` | accent | Primary purchase and exploration buttons; a rare action accent rather than a broad decorative fill. |
| Violet Night | `#0b0a12` | `--color-violet-night` | surface | Dark card and section surface, including the Umbrel app feature area. |
| Ash Copy | `#aaa9ac` | `--color-ash-copy` | neutral | Secondary muted text and subdued supporting labels. |
| Graphite Edge | `#1a1a1a` | `--color-graphite-edge` | semantic | Fine borders and restrained outlines around dark cards and media. |
| Cool Gray | `#9f9fa9` | `--color-cool-gray` | neutral | Low-emphasis interface and supporting text, not a defining brand accent. |
| Pale Slate | `#d4d4d8` | `--color-pale-slate` | neutral | Light neutral text and subtle dot detail; small UI-level use against dark surfaces. |
| Charcoal Line | `#262626` | `--color-charcoal-line` | semantic | Borders on dark product cards and compact interface elements. |
| Deep Black | `#050507` | `--color-deep-black` | surface | Subtle near-black variation in dark gradients and media framing. |
| Button Outline | `#303032` | `--color-button-outline` | semantic | Thin borders on inset dark content cards and buttons. |
| Slate Border | `#3d3d41` | `--color-slate-border` | semantic | Occasional secondary card and control outline; not a prominent page color. |
| Shadow Black | `#030305` | `--color-shadow-black` | surface | Near-black gradient or media-edge tone, used to deepen imagery rather than define a section. |
| Neutral Gray | `#808080` | `--color-neutral-gray` | neutral | Sparse subdued text and navigation detail. |

### Semantic aliases

`--color-canvas` → `#000000` (Night Canvas) · `--color-surface` → `#ffffff` (Cloud White) · `--color-surface-2` → `#0b0a12` (Violet Night) · `--color-surface-3` → `#09090b` (Soft Charcoal) · `--color-surface-4` → `#1a1a1a` (Graphite Edge) · `--color-text` → `#ffffff` (Cloud White) · `--color-text-muted` → `#cccccc` (Silver Copy) · `--color-text-subtle` → `#aaa9ac` (Ash Copy) · `--color-border` → `#1a1a1a` (Graphite Edge) · `--color-accent` → `#5351f3` (Umbrel Violet) · `--color-on-accent` → `#ffffff` (Cloud White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#0b0a12` | 19.69:1 | AAA |
| `#ffffff` | `#09090b` | 19.9:1 | AAA |
| `#cccccc` | `#000000` | 13.08:1 | AAA |
| `#cccccc` | `#ffffff` | 1.61:1 | fail |
| `#cccccc` | `#0b0a12` | 12.26:1 | AAA |
| `#cccccc` | `#09090b` | 12.39:1 | AAA |
| `#aaa9ac` | `#000000` | 8.98:1 | AAA |
| `#aaa9ac` | `#ffffff` | 2.34:1 | fail |
| `#aaa9ac` | `#0b0a12` | 8.42:1 | AAA |

### Gradients

- `radial-gradient(140% 140% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.3) 100%)`
- `linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 35%, rgba(0, 0, 0, 0) 70%)`
- `linear-gradient(lab(98.26 0 0) 0%, lab(98.26 0 0) 50%, lab(96.1634 0.0993311 -0.364041) 100%)`
- `radial-gradient(circle, rgba(212, 212, 216, 0.2) 1px, rgba(0, 0, 0, 0) 1.25px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, captions, buttons, and compact interface text. | Inter |
| googleSans | `--font-display` | webfont | 500, 700 | Display headlines and primary section headings. | Google Sans |

- **inter:** Regular body text; medium navigation; semibold CTAs. Slightly tight tracking; sentence case.
- **googleSans:** Medium-weight, sentence-case headings with relaxed leading; no all-caps display treatment.

### Type scale — Perfect Fourth (ratio ≈ 1.307, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 61px | 500 | 1.25 | 0 | — | googleSans | Large centered hero and major campaign headlines. |
| h1 | 39px | 500 | 1.25 | 0 | — | googleSans | Primary page and feature-section headings. |
| h2 | 31px | 500 | 1.25 | 0 | — | googleSans | Major section headings and product category introductions. |
| h3 | 25px | 500 | 1.38 | 0 | — | googleSans | Product and feature-card headings. |
| h4 | 20px | 400 | 1.4 | -0.024em | — | inter | Smaller supporting headings within feature panels. |
| body | 16px | 400 | 1.63 | -0.03em | — | inter | Explanatory product, feature, and introductory copy. |
| caption | 13.5px | 400 | 1.8 | -0.036em | — | inter | Compact notes, labels, and media captions. |
| button | 13.5px | 600 | 1.45 | -0.036em | — | inter | Action labels for purchase, exploration, and downloads. |
| nav | 13.5px | 500 | 1.45 | -0.036em | — | inter | Header navigation links. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32 px.
- Section rhythm 112px · element gap 8px · card padding — · max content width 1264px.

The measured content max width is 1264px, with a spacious density and 112px section gap. A slim horizontal navigation sits above a centered hero; below it, the page alternates full-bleed media, centered product introductions, multi-column product cards, and feature panels. Several areas use a single-column presentation, while product and feature sections expand into two, four, or wider card arrangements. Headings are frequently centered, with left-aligned copy inside feature cards. The white app-store section is a deliberate full-width break in an otherwise black sequence.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `22px` · nav `9999px` · link `24px` · xs `8px` · sm `10px` · md `13px` · lg `14px` · xl `16px` · 2xl `17px` · pill `9999px`
- Shadow `lg` (media): `rgba(24, 24, 27, 0.18) 0px 18px 36px 0px`
- Shadow `xl` (button): `rgba(0, 0, 0, 0.18) 0px 18px 50px 0px`
- Shadow `lg-2` (media): `rgba(0, 0, 0, 0.22) 0px 12px 32px 0px`
- Shadow `md` (other): `rgba(255, 255, 255, 0.38) 0px 0px 14px 0px`
- Shadow `inset` (media): `rgba(255, 255, 255, 0.06) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.9) 0px 10px 24px -12px`
- Shadow `inset-2` (link): `rgba(0, 0, 0, 0.55) 0px 30px 90px 0px, rgba(255, 255, 255, 0.12) 0px 1px 0px 0px inset`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface favors flat dark sections, with thin charcoal borders defining cards and controls. Rounded media panels and product cards sit clearly against the black canvas; selected media and floating testimonial elements use soft, deep shadows. Use layering for imagery and product previews, not ornamental interface chrome. Keep separators quiet and avoid heavy outlines.

## Imagery

Photography and video show home-server hardware in lived-in spaces, alongside product-interface screenshots and app-store views. Large landscape media panels use rounded corners and cinematic dark overlays; product cards combine device renders with interface imagery. The warm amber tones in the hero belong to its room photography, not the core interface palette. Screenshots and app icons supply localized color and detail within otherwise restrained compositions.

## Components

### Header navigation

Compact horizontal header on black, with white logo, subdued Inter links, and small utility icons.

### Hero media panel

Centered display headline above a wide, rounded lifestyle video or image with darkened lower copy overlay.

### Primary CTA

Capsule-shaped Umbrel Violet #5351f3 action with white Inter label; keep it reserved for key conversion actions.

### Product cards

Dark cards with 24px or 32px measured radius, thin charcoal outlines, centered hardware or app imagery, and concise copy.

### Feature carousel

Rounded image-led panels with feature heading and body copy, paired with small pagination or directional controls.

### Light app-store band

Full-bleed pale section contrasting with the dark page, centered black heading, and a prominent app-store interface image.

### Testimonial tiles

Dark social-proof cards with compact text, community identity details, and embedded screenshots or product media.

### Measured component styles

- **Primary button** (“Buy”): background #5351f3 · text #ffffff · radius 3.35544e+07px · padding 12px 24px · 500 13.328px inter
- **Secondary button** (“Every file, one click away. Files”): background #0b0b0d · text #ffffff · border 1px solid #303032 · radius 16px · padding 16px · 400 16px inter · shadow rgba(0, 0, 0, 0.18) 0px 18px 50px 0px
- **Link** (“Oliur @UltraLinx · Feb 20, 2026 Seriousl”): transparent background · text #ffffff · border 1px solid #1f1f1f · radius 24px · padding 0px · 400 16px inter · shadow rgba(0, 0, 0, 0.55) 0px 30px 90px 0px, rgba(255, 255, 255, 0.12) 0px 1px 0px 0px
- **Card** (“NEW Your photos, finally home. Automatic”): background #0b0a12 · text #ffffff · border 1px solid #1a1a1a · radius 24px · padding 0px · 400 16px inter
- **Navigation item** (“Umbrel Home”): transparent background · text #e4e4e7 · radius 3.35544e+07px · padding 8px 16px · 500 13.328px inter

## Do

- Keep the main canvas near-black and let imagery provide warmth.
- Use Umbrel Violet only for primary actions.
- Set display headings in Google Sans and supporting UI in Inter.
- Give major sections generous measured breathing room.
- Use rounded media panels and restrained dark borders.
- Break up the dark sequence with the measured pale app-store band.

## Don't

- Do not turn warm photographic colors into interface accents.
- Do not add bright colors beyond the restrained CTA treatment.
- Do not fill dark space with decorative gradients or heavy chrome.
- Do not make every panel a distinct elevated card.
- Do not use all-caps headings or dense text blocks.
- Do not invent spacing, sizes, or radii beyond the measured system.

## Agent prompt

Build a new Umbrel-style page with a quiet #000000 Night Canvas and a restrained palette. Use #ffffff Cloud White for clear headings and #cccccc Silver Copy for secondary text; reserve #5351f3 Umbrel Violet for the primary CTA. Use Google Sans for display and section headings, and Inter for body, navigation, captions, and controls. Create broad, rounded media panels that pair authentic home-server photography or interface screenshots with concise copy. Alternate centered introductions, product cards, and left-aligned feature panels, leaving generous whitespace between sections. Use #09090b Soft Charcoal and #0b0a12 Violet Night for subtle surface variation, with thin #1a1a1a Graphite Edge borders. Keep shadows quiet, prioritize readable contrast, and let product imagery—not decorative effects—supply visual richness.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Slim navigation above a centered headline and wide full-bleed lifestyle media panel. | Brand navigation, Hero introduction, Video or image storytelling | Black canvas, Centered display type, Rounded media, Dark text overlay |
| 2 | product-grid | Centered product introduction followed by four product columns and image-led cards. | Compare product paths, Explore or buy actions, Feature summary | Dark product cards, Device and app imagery, Capsule CTAs |
| 3 | product-showcase | Large single-column product presentation with centered heading and wide interface media. | Explore operating system, Watch product overview | Centered heading, Interface showcase, Expansive black space |
| 4 | feature-grid | Wide, multi-card feature presentation with image-led panels and left-aligned copy. | Browse feature highlights, Carousel pagination | Rounded image cards, Dark overlays, Compact feature copy |
| 5 | product-showcase | Full-width visual interlude centered on a large product and interface composition. | Product discovery, Visual product walkthrough | Layered media, Dark cinematic framing, Minimal surrounding controls |
| 6 | product-showcase | Full-bleed light section with a centered introduction above a large app-store interface image. | Browse app store, Discover available apps | Pale canvas, Dark heading, Large interface preview |
| 7 | feature-split | Full-bleed dark-violet section combining left-aligned copy with layered phone and desktop views. | Understand app benefits, Download for device | Dark violet surface, Device mockups, Rounded media |
| 8 | comparison | Centered section title above a broad hardware comparison panel and specification content. | Compare hardware paths, Review specifications, Choose a configuration | Dark comparison panel, Device imagery, Structured feature rows |
| 9 | testimonials | Dark single-column community section with a centered introduction and multi-column testimonial tiles. | Read community reviews, Scan real-world experiences | Dark testimonial cards, Embedded screenshots, Soft card shadows |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/umbrel-com