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

# Backlight · Design System

> Bold orange, warm editorial calm, built for media teams.

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

Backlight pairs a vivid orange entry point with warm neutral editorial sections and a dark, structured footer. Oversized sans-serif headlines, restrained borders, product imagery, and generous section transitions make a complex media software portfolio feel clear and approachable.

## North star

Use saturated orange as a focused entry point, then let warm neutral space and clear typographic hierarchy carry the information.

## Overview

The page is anchored by a saturated Ember Orange (#dd3508) header and hero, set against warm Canvas Sand (#e4ddd5) content bands and near-black sections. White type carries the hero headline and navigation; muted peach text softens supporting copy on orange. Instrument Sans is the primary voice: medium-weight, sentence-case headings with open line spacing and readable body copy. Fragment Mono appears sparingly for compact labels and form prompts, adding a technical editorial note. Layout alternates between broad, uncluttered fields and tightly organized content: split feature panels, a horizontal proof-point list, resource cards, and FAQ rows. Product and editorial photography sits in rounded frames, while thin rules organize menus and accordions. The visual system favors flat color fields and hairlines over decorative effects, with orange reserved for high-impact entry points, small controls, and links.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Sand | `#e4ddd5` | `--color-canvas-sand` | surface | Main background for product, statistics, resource, and FAQ sections; gives the page its warm editorial ground. |
| Soft Charcoal | `#151515` | `--color-soft-charcoal` | neutral | Dark feature band and footer background, as well as primary text on the light canvas. |
| Ember Orange | `#dd3508` | `--color-ember-orange` | brand | Dominant navigation and hero field; also marks key buttons, links, and small interactive accents. |
| Graphite Grey | `#4f4f4f` | `--color-graphite-grey` | semantic | Supporting paragraph text on light backgrounds, softer than the main charcoal headings. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Hero and footer text, navigation details, and white CTA surfaces with orange labels. |
| Ash Grey | `#adadad` | `--color-ash-grey` | semantic | Low-emphasis supporting text, including subdued footer or secondary copy. |
| Stone Rule | `#635d58` | `--color-stone-rule` | semantic | Fine borders and dividing rules, most visible in footer structure and content separators. |
| Peach Tint | `#f3b9a9` | `--color-peach-tint` | accent | Softened supporting text and subtle highlights against the orange hero field. |
| Linen Taupe | `#d7cabb` | `--color-linen-taupe` | surface | Minor tertiary light-background tone; appears as a secondary surface detail rather than a defining section color. |
| Input Mist | `#d9d9d9` | `--color-input-mist` | semantic | Thin email-field outline; limited to the form control. |
| Deep Ink | `#1c1c1c` | `--color-deep-ink` | neutral | Minor dark text variation; use only where secondary near-black copy is needed. |

### Semantic aliases

`--color-canvas` → `#e4ddd5` (Canvas Sand) · `--color-surface` → `#151515` (Soft Charcoal) · `--color-text` → `#151515` (Soft Charcoal) · `--color-text-muted` → `#4f4f4f` (Graphite Grey) · `--color-text-subtle` → `#ffffff` (Paper White) · `--color-border` → `#635d58` (Stone Rule) · `--color-accent` → `#dd3508` (Ember Orange) · `--color-accent-2` → `#f3b9a9` (Peach Tint)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151515` | `#e4ddd5` | 13.57:1 | AAA |
| `#4f4f4f` | `#e4ddd5` | 6.09:1 | AA |
| `#4f4f4f` | `#151515` | 2.23:1 | fail |
| `#ffffff` | `#e4ddd5` | 1.35:1 | fail |
| `#ffffff` | `#151515` | 18.26:1 | AAA |
| `#dd3508` | `#e4ddd5` | 3.4:1 | AA-large |
| `#dd3508` | `#151515` | 3.99:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Instrument Sans | `--font-body` | webfont | 400, 500, 600 | Primary family for display headings, body copy, navigation, buttons, and most interface text. | Inter |
| Fragment Mono | `--font-mono` | webfont | 400, 700 | Compact technical labels and occasional form or eyebrow copy. | Space Mono |

- **Instrument Sans:** Use regular to semibold weights, sentence case, and unforced tracking; keep headings open and legible.
- **Fragment Mono:** Use sparingly at small sizes with slightly tight tracking; retain a plain, utilitarian label feel.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1.2 | 0 | — | Instrument Sans | Large feature or statement headline. |
| h1 | 48px | 500 | 1.15 | 0 | — | Instrument Sans | Primary hero headline. |
| h2 | 39px | 500 | 1.2 | 0 | — | Instrument Sans | Major section titles. |
| h3 | 32px | 500 | 1.3 | 0 | — | Instrument Sans | Resource titles and prominent content headings. |
| h4 | 28px | 400 | 1.3 | 0 | — | Instrument Sans | Smaller subsection and card headings. |
| body | 16px | 400 | 1.25 | 0 | — | Instrument Sans | Paragraphs, descriptions, and standard interface copy. |
| caption | 12px | 400 | 1.3 | 0 | — | Instrument Sans | Compact metadata and secondary labels. |
| button | 16px | 600 | 1.25 | 0 | — | Instrument Sans | Primary CTA labels. |
| nav | 18px | 400 | 1 | 0 | — | Instrument Sans | Top-level navigation items. |
| code | 14px | 400 | 1.15 | -0.02em | — | Fragment Mono | Monospaced eyebrow and technical label text. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 10, 12, 15, 16, 20, 24, 32, 64, 80, 120 px.
- Section rhythm 32px · element gap 8px · card padding — · max content width 1376px.

Use a wide desktop canvas with content capped at the measured 1376px maximum and consistent left alignment. The header and hero share one full-width orange field; subsequent sections alternate warm neutral and charcoal bands. Content shifts between compact multi-column groupings and broad, airy single-column statements, with split layouts for product features. The measured spacing scale runs from 4px to 120px; use its larger values for section breathing room and smaller values for controls and card content. Overall density is compact within groups but generous between sections.

## Shape & elevation

- Radius: button `8px` · input `4px` · media `8px` · nav `8px` · xs `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat, with no measured shadow system. Use thin rules to separate navigation, FAQ rows, and footer columns. Buttons, media, navigation, and inputs use restrained rounded corners; image cards provide the main visual layering. Avoid floating panels or pronounced depth effects.

## Imagery

Use real media-workflow and product imagery, including interface or device context, in a limited set of rounded frames. Resource cards use editorial thumbnails with varied source imagery and concise text beneath. Keep photography natural and credible rather than heavily stylized; any illustration or colored mockup should remain supporting material, not a replacement for the brand’s orange, warm-neutral, and charcoal fields.

## Components

### Orange hero and navigation

Join the top navigation and headline area on the Ember Orange field. Set white navigation and headline text, with a compact white Get started button.

### Email CTA form

Pair a transparent email input with a fine light border and a white button. Place a small monospaced prompt above the controls.

### Feature accordion

Present feature labels as simple rows on the warm canvas, divided by hairlines with small orange plus or minus indicators.

### Proof-point list

Set large dark metrics in a vertical editorial list, with a small label aligned separately from the main figures.

### Resource cards

Use image-led editorial cards with compact category labels, readable titles, brief supporting copy, and restrained text links.

### FAQ rows

Stack question links in a single column on the warm canvas, using thin separators and a small orange expand indicator.

### Dark footer

Organize the logo, CTA, and grouped link columns on charcoal; divide the legal and utility area with a fine horizontal rule.

### Measured component styles

- **Primary button** (“Get started”): background #ffffff · text #dd3508 · border 1px solid #ffffff · radius 8px · padding 12px 16px · 600 16px Instrument Sans
- **Secondary button** (“Get started”): transparent background · text #ffffff · border 1px solid #ffffff · radius 8px · padding 16px 24px · 600 16px Instrument Sans
- **Link**: transparent background · text #dd3508 · radius 0px · padding 0px · 400 16px Instrument Sans
- **Input**: transparent background · text #ffffff · border 1px solid #d9d9d9 · radius 4px · padding 8px 12px · 400 16px Instrument Sans
- **Navigation item** (“Get started About Products Solutions Res”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Instrument Sans

## Do

- Anchor the opening viewport in Ember Orange (#dd3508).
- Use Canvas Sand (#e4ddd5) as the primary content background.
- Keep headlines in Instrument Sans with sentence-case wording.
- Reserve white-on-orange contrast for the hero and navigation.
- Use thin rules to structure lists, accordions, and footer groups.
- Give major section transitions more breathing room than card content.

## Don't

- Do not spread the orange accent across every content section.
- Do not add gradients, heavy shadows, or glossy effects.
- Do not replace the warm canvas with stark white throughout.
- Do not overuse monospaced text for headlines or paragraphs.
- Do not crowd resource cards with excessive decoration.
- Do not use rounded cards as the default for every content group.

## Agent prompt

Build a new Backlight-style page using Ember Orange (#dd3508) as a bold, focused opening field, Canvas Sand (#e4ddd5) for the main content, and Soft Charcoal (#151515) for a closing band or footer. Use Instrument Sans for nearly all text and reserve Fragment Mono for small technical labels. Set large, medium-weight sentence-case headlines above restrained supporting copy. Structure the content with clear full-width section bands, split feature layouts, compact card groups, and thin dividing rules rather than shadows. Use white text and a white CTA on orange; use charcoal text and orange link accents on the light canvas. Frame authentic product or media imagery simply, with measured rounded corners. Maintain generous transitions between sections while keeping controls and repeated content compact.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Full-width orange header with brand mark, top CTA, and a horizontal link row. | top-level navigation, persistent CTA | orange background, white logo, white CTA, thin navigation rule |
| 2 | hero | Two-column hero area on orange; headline and lead content occupy the left. | lead capture, primary conversion | large white headline, peach supporting copy, email field, white CTA |
| 3 | other | Full-width single-column blue visual interlude with a centered statement. | brand storytelling | full-bleed color field, centered headline, message bubble graphic |
| 4 | logo-cloud | Dark horizontal band containing a centered row of customer marks. | social proof | charcoal background, white logos, evenly distributed marks |
| 5 | feature-split | Warm neutral split section with copy and feature rows opposite a rounded product image. | feature exploration, expandable rows | left-aligned heading, accordion rows, image frame, fine dividers |
| 6 | stats | Light-background metric list arranged across a broad, five-column content area. | proof through metrics | large dark figures, small section label, editorial alignment |
| 7 | content-feed | Wide resource heading followed by a horizontal row of editorial cards. | browse resources, open article links | thumbnail cards, category labels, compact descriptions, carousel controls |
| 8 | faq | Single-column FAQ heading and stacked rows on the warm neutral background. | expandable questions, self-serve information | horizontal separators, orange expand icons, left-aligned copy |
| 9 | footer | Charcoal footer with a brand-and-CTA column and grouped navigation columns. | secondary navigation, contact path | white logo, link columns, outlined CTA |
| 10 | footer | Narrow utility row beneath a fine divider within the dark footer. | legal information, utility links | small muted copy, legal links, horizontal rule |

## Source CSS custom properties (selected)

```css
--_01-semantic-spacing---navigation--height: 138px;
--background--dark--primary: #151515;
--text--text--light: #ffffffa6;
--_01-typography---font-family--primary: "Instrument Sans",sans-serif;
--text--heading--light: #fff;
--_01-typography---font-weight--heading: 500;
--text--heading--dark: #151515;
--background--atlernative--ember: #dd3508;
--_01-typography---font-family--mono: "Fragment Mono",sans-serif;
--background--light--primary: #fff;
--background--light--tertiary: #d7cabb;
--background--light--secondary: #e4ddd5;
--_02-base-spacing---xl: 16px;
--_02-base-spacing---3xl: 24px;
--_02-base-spacing---l: 12px;
--_01-semantic-spacing---section--horizontal--m: 32px;
--_02-base-spacing---0: 0px;
--_01-semantic-spacing---section--gap--m: 64px;
--_02-base-spacing---m: 8px;
--_01-semantic-spacing---section--vertical--l: 80px;
--_01-semantic-spacing---section--vertical--xl: 120px;
--_02-base-spacing---2xl: 20px;
--_02-base-colors---brand--neutral--85: #d9d9d9;
--_02-base-spacing---6xl: 64px;
--_01-semantic-spacing---section--vertical--m: 48px;
--_01-semantic-spacing---section--horizontal--l: 64px;
--background--atlernative--blue: #2957c7;
--text--text--dark: #4f4f4f;
--_01-semantic-spacing---section--gap--l: 120px;
--_01-semantic-spacing---max-width--content--l: 960px;
--_01-semantic-spacing---section--gap--s: 32px;
--_01-semantic-spacing---navigation--height-sticky: 172px;
--_02-base-colors---brand--ember--49: #f03909;
--_02-base-spacing---xs: 4px;
--_01-semantic-spacing---max-width--content--s: 480px;
--_02-base-spacing---s: 6px;
--_02-base-colors---brand--neutral--11: #1c1c1c;
--_02-base-spacing---8xl: 120px;
--_02-base-colors---brand--neutral--8: #151515;
--_01-semantic-spacing---min-width--content--s: 280px;
```

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