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

# Burnt · Design System

> Editorial calm for the machinery of food distribution

**Theme:** light · **Industry:** ai · **Source:** https://www.getburnt.ai/ · **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._

Burnt pairs an understated editorial identity with practical AI automation messaging for food distributors. A white canvas, refined serif headlines, fine grid lines, and vivid supply-chain photography keep the experience human and operational.

## North star

Keep the interface quiet and editorial; let food-distribution photography provide the color and operational proof.

## Overview

The page builds its identity from a restrained monochrome system rather than a bright technology palette. White (#ffffff) dominates the canvas, while near-black (#1a1a17) carries navigation, headlines, and pill-shaped calls to action; muted grays handle supporting copy and hairline dividers. Large Nyght Serif headlines give the SaaS proposition an editorial, almost print-like character, balanced by compact Switzer sans-serif navigation and body text. The first screen uses a clear split hero: a quiet text column sits beside a substantial photograph of strawberries in distribution crates, making the industry tangible before the product is explained. Below, generous white space, thin panel boundaries, and alternating image placements create a measured scroll rhythm. Product-interface imagery appears as supporting evidence rather than a decorative motif. Preserve the restrained palette and let real food operations photography supply warmth and color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, hero text panel, and open section backgrounds. |
| Soft Graphite | `#5e5e5c` | `--color-soft-graphite` | neutral | Muted explanatory copy beneath prominent serif headlines. |
| Warm Ink | `#1a1a17` | `--color-warm-ink` | brand | Primary typography, navigation, dark sections, and filled demo buttons. |
| Quiet Rule | `#e8e8e7` | `--color-quiet-rule` | semantic | Fine structural dividers between the navigation, hero, metrics, and content panels. |
| Pale Graphite | `#bbbbba` | `--color-pale-graphite` | neutral | Low-emphasis supporting text and subdued metric icons. |
| Button Edge | `#363633` | `--color-button-edge` | semantic | Subtle border detail on the secondary dark CTA; not a broad palette color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#1a1a17` (Warm Ink) · `--color-text` → `#1a1a17` (Warm Ink) · `--color-text-muted` → `#5e5e5c` (Soft Graphite) · `--color-text-subtle` → `#bbbbba` (Pale Graphite) · `--color-border` → `#e8e8e7` (Quiet Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1a17` | `#ffffff` | 17.44:1 | AAA |
| `#5e5e5c` | `#ffffff` | 6.5:1 | AA |
| `#5e5e5c` | `#1a1a17` | 2.68:1 | fail |
| `#bbbbba` | `#ffffff` | 1.92:1 | fail |
| `#bbbbba` | `#1a1a17` | 9.08:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Switzer | `--font-body` | webfont | 400, 500 | Navigation, body copy, buttons, captions, and small labels. | Inter |
| Nyght Serif | `--font-display` | webfont | 300 | Display headlines and section headings. | Cormorant Garamond |

- **Switzer:** Mostly regular weight; captions and eyebrow labels use medium weight, uppercase styling, and lightly expanded tracking.
- **Nyght Serif:** Light weight creates fine, elegant headline forms; retain natural casing and open line spacing.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 300 | 1 | 0 | — | Nyght Serif | Oversized editorial display headlines, when used. |
| h1 | 62px | 300 | 1.1 | 0 | — | Nyght Serif | Primary hero headline. |
| h2 | 48px | 300 | 1.2 | 0.01em | — | Nyght Serif | Major section headings, such as workflow introduction. |
| h3 | 26px | 300 | 1.2 | 0.03em | — | Nyght Serif | Smaller feature or content-block headings. |
| h4 | 20px | 400 | 1.5 | 0 | — | Switzer | Compact supporting headings. |
| body | 16px | 400 | 1.5 | 0 | — | Switzer | Introductory, explanatory, and feature copy. |
| caption | 14px | 500 | 1.5 | 0.03em | uppercase | Switzer | Uppercase compact labels and captions. |
| nav | 15px | 400 | 1.5 | 0 | — | Switzer | Header navigation labels. |
| eyebrow | 14px | 500 | 1.5 | 0.03em | uppercase | Switzer | Short uppercase section prefaces. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 7, 8, 12, 16, 24, 28, 32, 40, 48, 64, 96 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width 1342px.

Use a spacious, wide-page grid with a measured maximum width of 1342px. The first viewport pairs a left-aligned text panel with a large, edge-aligned food photograph; a narrow metric strip follows, separated into columns by fine rules. Keep text aligned to the grid and avoid dense card stacks. Sections use generous vertical breathing room, with open white panels and occasional alternating image placement. The measured page has a 96px section rhythm and an 8px base spacing unit; apply these as the underlying cadence rather than decorative gaps.

## Shape & elevation

- Radius: button `9999px` · xs `6px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.165, 0.84, 0.44, 1)` on interactive elements.

The visual language is predominantly flat: no measured shadows, with #e8e8e7 hairlines defining panel edges and section divisions. Dark pill CTAs sit directly on the white canvas, using a fine border rather than a lifted card treatment. Keep product UI imagery contained within its own image area; avoid extra floating layers or decorative depth.

## Imagery

Prioritize documentary-style photography of real food distribution: crates of strawberries, warehouse aisles, and people connected to the business. Use large rectangular crops that show recognizable operational context, with natural light and authentic textures. Product UI screenshots and founder video imagery support the story in later sections; keep them subordinate to the photography and avoid adding illustrative color schemes.

## Components

### Top navigation

White horizontal header with the Burnt wordmark, compact Switzer links, restrained separators, and a dark rounded “Get a demo” CTA.

### Split hero

Editorial serif headline and muted supporting copy occupy the left panel; a large supply-chain photograph fills the right panel.

### Primary demo button

Near-black pill button with white Switzer text and a small arrow treatment; use the measured dark fill and white foreground.

### Metrics strip

Three concise proof points sit in a horizontal row, divided by thin gray rules with small muted icons.

### Workflow feature panels

Open, lightly bordered sections combine short serif headings and explanatory copy with alternating operational photography or product imagery.

### Product interface visual

Show the agent interface as a contained screenshot, preserving the product's own colors as image content rather than extending them into site chrome.

### Measured component styles

- **Primary button** (“Get a demo”): background #1a1a17 · text #ffffff · border 1px solid #1a1a17 · radius 1440px · padding 8px 8px 8px 28px · 400 16px Switzer
- **Secondary button** (“Explore custom solutions”): background #282825 · text #ffffff · border 1px solid #363633 · radius 1440px · padding 8px 28px · 400 16px Switzer
- **Link** (“Sales + operations”): transparent background · text #1a1a17 · radius 0px · padding 0px · 400 16px Switzer
- **Navigation item** (“Product Company Blogs Blogs Get a demo”): transparent background · text #1a1a17 · radius 0px · padding 0px · 400 16px Switzer

## Do

- Use #ffffff as the dominant page canvas.
- Set prominent headlines in a light editorial serif.
- Use #1a1a17 for primary text and filled CTAs.
- Separate panels with restrained #e8e8e7 hairlines.
- Choose authentic food distribution photography.
- Leave generous whitespace between major content blocks.

## Don't

- Do not introduce a bright technology accent as a core brand color.
- Do not replace the editorial serif headlines with heavy geometric display type.
- Do not crowd the layout with dense card grids.
- Do not use shadows to create a floating-card interface.
- Do not let product mockup colors redefine the page palette.
- Do not crop operational photography so tightly that its context disappears.

## Agent prompt

Build a new page in Burnt’s restrained editorial SaaS style. Use Gallery White (#ffffff) as the dominant canvas, Warm Ink (#1a1a17) for headlines, navigation, and primary pill CTAs, and Soft Graphite (#5e5e5c) for supporting copy. Set major headings in a light, elegant serif similar to Nyght Serif; use a clean Switzer-like sans serif for body text and controls. Follow a spacious wide grid with thin Quiet Rule (#e8e8e7) dividers, clear alignment, and generous section pauses. Prefer a split composition pairing concise copy with large documentary photography of real food distribution. Keep interface screenshots contained as media, not as a source for site-wide colors. Avoid shadows, decorative gradients, dense cards, and unnecessary accent hues.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | A long, white, wide-grid page with split hero, metrics row, open feature panels, imagery, and a dark section. | Top-level product navigation, Demo conversion CTA, Operational proof metrics | Editorial serif headings, Fine panel dividers, Large documentary imagery, Rounded dark buttons |

## Source CSS custom properties (selected)

```css
--_text-style---font-family: Switzer,Arial,sans-serif;
--_theme---text: #1a1a17;
--_text-style---font-size: clamp(0.8125rem, 0.29vw + 0.74rem, 1rem);
--_text-style---line-height: 1.5;
--_text-style---font-weight: 400;
--_text-style---letter-spacing: 0em;
--_size---space--medium: clamp(0.75rem, 0.38vw + 0.66rem, 1rem);
--_size---space--large: clamp(1.375rem, 0.95vw + 1.14rem, 2rem);
--_size---space--extra-small: clamp(0.375rem, 0.19vw + 0.33rem, 0.5rem);
--_typography---font--primary-medium: 500;
--_theme---background: white;
--_theme---accent<deleted|variable-64331ffa-5c25-4099-d2fc-36694c8777d8>: #0069f1;
--_theme---selection--text: white;
--_typography---letter-spacing--large: .03em;
--_text-style---margin-bottom: clamp(0.75rem, 0.38vw + 0.66rem, 1rem);
--_size---font-size--text-main: clamp(0.8125rem, 0.29vw + 0.74rem, 1rem);
--_size---space--small: clamp(0.5rem, 0.38vw + 0.41rem, 0.75rem);
--_size---space--main: clamp(1rem, 0.76vw + 0.81rem, 1.5rem);
--_theme---border: #1a1a171a;
--_theme---text-link--text: #1a1a17;
--_theme---text-link--border: #1a1a171a;
--_theme---text-link--text-hover: color-mix(in srgb,#1a1a17/**/70%,#fff0);
--_typography---font--primary-regular: 400;
--_typography---font--primary-bold: 600;
--_size---radius--small: .375rem;
--_size---radius--main<deleted|variable-d9d34ab0-dd23-d9a8-f1e3-99d4d2d4f263>: 1rem;
--_size---radius--large<deleted|variable-c206e7fa-ad3f-75b1-cfe4-9787ac1359dc>: 2rem;
--_size---radius--round: 100vw;
--_size---space--extra-large: clamp(1.75rem, 1.90vw + 1.29rem, 3rem);
--_size---space--huge: clamp(2.5rem, 2.29vw + 1.94rem, 4rem);
--_button-style---border: #1a1a17;
--_button-style---background: #1a1a17;
--_button-style---text: white;
--_button-style---border-hover: #1a1a17;
--_button-style---background-hover: #fff0;
--_button-style---text-hover: #1a1a17;
--_theme---button-primary--accent: #ffffff0f;
--_theme---button-secondary--border: #1a1a171a;
--_theme---button-secondary--background: #1a1a170a;
--_size---font-size--text-small: clamp(0.6875rem, 0.29vw + 0.62rem, 0.875rem);
```

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