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

# Savee · Design System

> A quiet canvas for visual discovery

**Theme:** dark · **Industry:** design · **Source:** https://savee.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._

Savee presents a curated visual inspiration platform through a restrained dark interface and a strong focus on imagery. Oversized typography, quiet navigation, and generous open space let the references take center stage.

## North star

Keep the interface nearly invisible so curated visual content and clear editorial type lead every section.

## Overview

Savee’s visual strategy is built around a near-black canvas that recedes behind its visual references. The main background is #0a0a0a, with subtly lighter #151515 surfaces for navigation, cards, and selected content; restrained #1e1e1e outlines separate controls without adding visual weight. Bright near-white headings and primary actions create crisp contrast, while two levels of gray keep supporting copy and footer details quiet. A single clean sans-serif family carries the whole interface. Large, tightly tracked headlines establish editorial emphasis, while smaller body and caption styles stay understated. Layout alternates centered statements with broader image-led sections and split product showcases. Carefully curated photography, interface previews, and video provide color and texture inside the otherwise monochrome system. Rounded pill controls and gently rounded cards soften the geometry, while open spacing and mostly flat surfaces preserve a calm, gallery-like quality.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Black | `#0a0a0a` | `--color-gallery-black` | brand | Primary page canvas throughout, giving image-led sections a quiet, gallery-like backdrop. |
| Soft Charcoal | `#151515` | `--color-soft-charcoal` | surface | Navigation capsule, feature cards, and platform surfaces; subtly lifted from the canvas. |
| Paper Light | `#fafafa` | `--color-paper-light` | neutral | Main headings, high-priority links, and light primary button text or surfaces. |
| Quiet Silver | `#a3a3a3` | `--color-quiet-silver` | semantic | Supporting hero copy, secondary links, and subdued labels such as app controls. |
| Graphite Hairline | `#1e1e1e` | `--color-graphite-hairline` | semantic | Fine outlines on dark controls and subtle section boundaries. |
| Muted Ash | `#737373` | `--color-muted-ash` | semantic | Lower-emphasis text, including footer details and secondary headings. |
| Soft Parchment | `#d4d4d4` | `--color-soft-parchment` | neutral | Pale text measured within dark cards and footer content; keep it secondary to headings. |
| Footer Slate | `#2f2f2f` | `--color-footer-slate` | surface | Subtle footer hairlines and low-contrast separators, not a prominent brand color. |

### Semantic aliases

`--color-canvas` → `#0a0a0a` (Gallery Black) · `--color-surface` → `#151515` (Soft Charcoal) · `--color-text` → `#fafafa` (Paper Light) · `--color-text-muted` → `#a3a3a3` (Quiet Silver) · `--color-text-subtle` → `#737373` (Muted Ash) · `--color-border` → `#1e1e1e` (Graphite Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fafafa` | `#0a0a0a` | 18.97:1 | AAA |
| `#fafafa` | `#151515` | 17.5:1 | AAA |
| `#a3a3a3` | `#0a0a0a` | 7.85:1 | AAA |
| `#a3a3a3` | `#151515` | 7.24:1 | AAA |
| `#737373` | `#0a0a0a` | 4.18:1 | AA-large |
| `#737373` | `#151515` | 3.85:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| saveeFont | `--font-body` | webfont | 400, 500, 550 | The single site-wide family for display headings, body copy, navigation, links, and captions. | Inter |

- **saveeFont:** Use medium weights for display and headings, regular body copy, and a slightly stronger link weight. Keep tracking tight on large headings; avoid uppercase styling.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 500 | 1.05 | -0.035em | — | saveeFont | Large editorial statement or hero headline. |
| h1 | 60px | 500 | 1 | -0.055em | — | saveeFont | Primary page or section headline. |
| h2 | 48px | 500 | 1 | -0.035em | — | saveeFont | Major section heading, including feature and CTA titles. |
| h3 | 36px | 500 | 1.11 | -0.02em | — | saveeFont | Feature-card and supporting content headings. |
| h4 | 24px | 400 | 1.38 | -0.007em | — | saveeFont | Introductory or secondary statement copy. |
| body | 16px | 400 | 1.38 | -0.015em | — | saveeFont | Descriptions, paragraphs, and general interface text. |
| caption | 13px | 500 | 1.46 | 0.01em | — | saveeFont | Trust note, image labels, and fine-print metadata. |
| link | 16px | 550 | 1.38 | -0.01em | — | saveeFont | Navigation items and prominent actionable text. |

OpenType features in use: `"calt", "cv01", "liga", "ss07"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 6, 8, 12, 14, 16, 20, 24, 32, 40, 64, 80 px.
- Section rhythm 32px · element gap 16px · card padding 32px · max content width 1374px.

Use a centered page frame with a measured maximum width of 1374px, while allowing media to feel broad and gallery-like. The hero is centered beneath a compact pill navigation; later sections alternate centered introductions, a two-column platform showcase, and a multi-column feature area. Keep the overall density comfortable, with a measured 32px section gap and 16px element gap as recurring rhythm. Preserve generous open space between content groups, and use left alignment for editorial copy and footer columns.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `50%` · link `9999px` · xs `12px` · sm `16px` · pill `9999px`
- Shadow `xl` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.35) 0px 18px 70px 0px`
- Shadow `hairline` (button): `rgb(255, 255, 255) 0px 0px 0px 0px, rgb(64, 64, 64) 0px 0px 0px 1.25px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.5) 0px 30px 90px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with contrast between the canvas and subtly raised charcoal surfaces doing most of the separation. Thin dark borders define selected controls and footer rules. Cards rely on rounded corners and image framing rather than visible shadows; reserve any deep shadow for isolated floating layers, not routine panels.

## Imagery

Imagery is the page’s main source of color: curated reference images, overlapping visual samples, product-interface previews, and a workshop portrait sit against the dark canvas. The hero collage and broad image/video areas feel like selected inspiration rather than decorative wallpaper. Use crisp, varied image crops, keep artwork inside its own frame, and avoid adding gradients or effects that compete with the references.

## Components

### Pill navigation

A compact #151515 capsule centered near the top, with a wordmark and restrained navigation links in light and muted tones.

### Primary CTA

A fully rounded light button with dark text; pair it with a dark, fine-outlined secondary action when needed.

### App availability links

A vertical group of compact rounded dark controls with subdued labels and platform marks.

### Reference collage

Layer curated imagery in a focused composition with surrounding negative space; let image colors provide the visual variation.

### Feature cards

Dark rounded panels with image or interface previews above concise titles and muted explanatory text.

### Footer columns

Organize many small links into clear columns, using brighter labels sparingly and quiet gray text for secondary details.

### Measured component styles

- **Primary button** (“iPhone App”): background #151515 · text #a3a3a3 · border 1px solid #1e1e1e · radius 9999px · padding 14px 24px · 400 16px saveeFont
- **Secondary button** (“Join for free”): background #fdfdfd · text #0a0a0a · radius 9999px · padding 0px 20px · 550 16px saveeFont
- **Link** (“Features”): transparent background · text #fdfdfd · radius 9999px · padding 12px · 550 16px saveeFont
- **Card**: background #151515 · text #d4d4d4 · radius 16px · padding 32px · 400 16px saveeFont

## Do

- Use #0a0a0a as the dominant page canvas.
- Keep navigation and cards subtly distinct with #151515 surfaces.
- Reserve bright near-white for headlines and primary actions.
- Let curated imagery supply most of the page’s color.
- Use generous negative space around hero and editorial blocks.
- Favor rounded pill controls and softly rounded media cards.

## Don't

- Do not introduce vivid interface accents absent from the palette.
- Do not crowd the hero with extra labels or decorative graphics.
- Do not use heavy shadows on ordinary cards.
- Do not make secondary copy as bright as primary headings.
- Do not add large colored section bands behind the content.
- Do not treat illustration-only colors as core brand colors.

## Agent prompt

Build a new Savee-style page as a quiet, image-led design gallery. Use Gallery Black (#0a0a0a) for the canvas, Soft Charcoal (#151515) for restrained panels, and Graphite Hairline (#1e1e1e) for subtle outlines. Set primary headings in Paper Light (#fafafa); use Quiet Silver (#a3a3a3) and Muted Ash (#737373) for secondary text. Use one clean sans-serif throughout, with tightly tracked medium-weight headlines and calm regular body copy. Center a compact capsule navigation, then balance an editorial hero with generous open space and a prominent curated image composition. Alternate centered statements with split showcases and image-led feature cards. Use rounded pills, restrained borders, and almost no shadow. Keep image colors inside their frames, avoid gradients, and ensure the interface remains quieter than the visual references.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero beneath a compact capsule navigation; copy and paired actions above a trust note and visual collage. | Join or download choices, Social proof | Dark canvas, Large centered heading, Pill navigation, Image collage |
| 2 | video | Broad, image-led media area beneath the hero, arranged in two measured columns. | Visual browsing, Media-led discovery | Dark framing, Curated image sequence, Quiet surrounding canvas |
| 3 | logo-cloud | Short centered trust statement followed by a horizontal row of studio and team marks. | Social proof | Muted logo row, Compact section |
| 4 | feature-grid | Editorial and platform content followed by a multi-column feature showcase. | Feature discovery, Platform selection | Split product panel, Image-led cards, Dark surfaces |
| 5 | cta | Centered heading and supporting line in a contained dark call-to-action panel. | Start browsing, Join invitation | Rounded dark panel, Centered copy, Light pill action |
| 6 | footer | Brand block and multiple link columns above a thin divider and compact legal row. | Explore site links, Access downloads, Social navigation | Column layout, Muted links, Fine footer hairline |

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