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

# Savor · Design System

> Warm editorial restraint meets appetite-led imagery

**Theme:** light · **Industry:** food-beverage · **Source:** https://www.savor.it/ · **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._

Savor pairs immersive food photography with oversized editorial headlines and a restrained cream-and-brown palette. The page alternates a dark, image-led opening with a spacious cream content area.

## North star

Pair restrained cream-and-brown typography with generous space and tactile, full-bleed food imagery.

## Overview

The visual identity balances a warm, restrained palette with richly textured food photography. The measured canvas is warm cream (#fff9eb), used across navigation and the long content area; deep brown (#370808) provides the primary text and link colour. Black (#000000) is measured on an inverse section, while the opening viewport itself is dominated by full-bleed bakery photography with a dark overlay that keeps cream navigation and headline lettering legible. Suisse Intl is the measured sans-serif for navigation and body copy, but the hero uses a much more expressive, high-contrast serif display face visible in the screenshot; preserve that editorial contrast rather than forcing all text into one style. The composition is spacious and image-led: a large headline anchors the lower left, with supporting copy and a pale button offset to the right. Below, the cream field and broad open areas let small blocks of copy and food imagery breathe. Keep surfaces mostly flat and let photography supply texture, warmth and depth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Butter Cream | `#fff9eb` | `--color-butter-cream` | brand | Warm page canvas and navigation text over the dark photographic hero. |
| Cocoa Ink | `#370808` | `--color-cocoa-ink` | brand | Primary text and links on the cream content canvas. |
| Deep Black | `#000000` | `--color-deep-black` | surface | Measured inverse section surface; screenshot also shows darkened photographic hero areas. |

### Semantic aliases

`--color-canvas` → `#fff9eb` (Butter Cream) · `--color-surface` → `#000000` (Deep Black) · `--color-text` → `#370808` (Cocoa Ink) · `--color-text-muted` → `#fff9eb` (Butter Cream)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#370808` | `#fff9eb` | 16.66:1 | AAA |
| `#370808` | `#000000` | 1.2:1 | fail |
| `#fff9eb` | `#000000` | 20:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisse Intl | `--font-body` | webfont | 400, 700 | Measured navigation, body copy, and interface text | DM Sans |

- **Suisse Intl:** Measured weights 400 and 700; nav is regular with slightly tight tracking. Screenshot hero uses a contrasting display serif.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1.25 | 0 | — | Suisse Intl | Oversized editorial hero headline, visually serif in the screenshot. |
| h2 | 22px | 400 | 1.35 | -0.01em | — | Suisse Intl | Section-level editorial headings on the cream canvas. |
| h3 | 21px | 700 | 1.24 | -0.009em | — | Suisse Intl | Bold subheadings within supporting content. |
| body | 16px | 400 | 1.45 | 0 | — | Suisse Intl | Supporting copy alongside photography and in content sections. |
| nav | 18px | 400 | 1.45 | -0.01em | — | Suisse Intl | Header navigation over the hero and site links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 6, 11, 15, 16, 18, 20, 22, 35, 36, 39, 40, 42, 52, 64, 143, 200 px.
- Section rhythm 36px · element gap 20px · card padding — · max content width 1360px.

The measured maximum page width is 1360px, with a comfortable density and a 12-column grid indicated by the sampled CSS. The hero spans the viewport and overlays navigation, headline, supporting copy, and CTA on photography. Headline and supporting copy sit in separate left and right zones near the bottom of the frame. The following cream section is broad and notably open, with content aligned toward the left rather than arranged as dense cards. Maintain generous section breathing room and a clear shift from immersive imagery to quiet canvas.

## Shape & elevation

- Radius: button `5px` · xs `5px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s linear` on interactive elements.

The page is largely flat, with no measured shadows or border system. The hero gains depth from the full-bleed photograph and its dark treatment, not from cards or floating panels. The CTA is a simple pale button with a measured 5px radius; keep other surfaces open and avoid adding decorative borders.

## Imagery

Use tactile, cinematic food photography rather than illustration or 3D. The opening image shows trays of croissants in a bakery oven, framed full-bleed and darkened enough for cream text to read. Later imagery includes close botanical detail and vertically presented food-preparation clips. Keep crops immersive and sensory; measured screenshot colours from the photographs are not additional brand palette colours.

## Components

### Overlay navigation

Place the Savor wordmark at upper left and compact Suisse Intl navigation links at upper right, using cream text over the hero image.

### Editorial hero

Use full-bleed bakery photography, a large serif headline aligned lower left, and a short supporting message offset to the right.

### Watch Episode button

Pale #f0e7d7 button with Cocoa Ink (#370808) text, 5px radius, and measured padding of 20px 42px.

### Cream content section

Transition from the dark photographic opening to a spacious #fff9eb canvas with Cocoa Ink text and restrained content density.

### Food imagery strip

Use narrow, vertically stacked close-up video or image crops of ingredients and cooking to add tactile detail within generous surrounding space.

### Measured component styles

- **Primary button** (“WatchEpisode”): background #f0e7d7 · text #370808 · radius 5px · padding 20px 42px · 400 16px Suisse Intl
- **Link** (“Savor”): transparent background · text #370808 · radius 0px · padding 0px · 400 18px Suisse Intl
- **Navigation item** (“Savor Process Foods Care Mission Journal”): transparent background · text #fff9eb · radius 0px · padding 0px · 400 18px Suisse Intl

## Do

- Use #fff9eb as the warm content canvas.
- Set primary text and links in #370808.
- Let food photography dominate the hero.
- Keep navigation legible over imagery.
- Pair restrained sans-serif UI with expressive display headlines.
- Preserve broad areas of open space.

## Don't

- Do not introduce unmeasured brand colours.
- Do not crowd the cream content sections.
- Do not use cards and shadows as the main visual structure.
- Do not flatten the hero into a plain colour block.
- Do not set every text element in the same display style.
- Do not treat photograph-derived colours as brand tokens.

## Agent prompt

Build a new Savor-style page with a restrained, warm editorial identity. Use Butter Cream (#fff9eb) for the main canvas and navigation text over imagery, and Cocoa Ink (#370808) for body copy and links. A dark inverse section is measured as Deep Black (#000000), but let authentic food photography carry most of the hero atmosphere. Create an immersive full-bleed opening image with a dark legibility treatment, compact overlay navigation, a large expressive serif headline, and offset supporting copy with a pale, simply rounded CTA. Use Suisse Intl or a close sans-serif substitute for navigation and body text. Keep the rest of the page spacious and flat, with selective food close-ups and generous open areas. Avoid invented palette tokens, heavy card systems, decorative borders, or unnecessary shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark photographic hero with overlay navigation and headline at lower left. | overlay navigation, primary episode CTA | cream text over image, oversized serif headline, offset supporting copy |
| 2 | other | Open cream canvas with sparse left-aligned content and selective food imagery. | scroll-led content, editorial pacing | warm cream background, deep brown text, generous whitespace |

## Source CSS custom properties (selected)

```css
--grid-column-gap: 2rem;
--grid-gaps-total: 2rem * (12 - 1);
--menu-gap: clamp(3rem, 4svh, 10rem);
```

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