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

# Linearity · Design System

> A quiet dark canvas for bright, editable campaigns.

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

Linearity’s homepage pairs a near-black canvas with compact white typography and vivid campaign examples. A centered AI prompt and restrained orange calls to action lead into a spacious gallery and product comparison.

## North star

Keep the page dark and spacious, using precise white type and orange actions to direct attention toward editable campaign visuals.

## Overview

The page is built on a nearly uninterrupted black canvas, letting white headlines and the campaign artwork carry the visual weight. Orange is reserved for primary actions and small interface highlights; muted gray supports navigation, helper copy, and secondary information. AcidGrotesk gives the large centered headlines a distinctive display voice, while Inter handles navigation and compact supporting text. The hero is deliberately sparse: a slim navigation row sits above a centered headline, prompt field, short explanatory copy, and paired pill actions. Below, colorful campaign assets float against black with generous separation, so their varied imagery reads as a gallery rather than a dense grid. Later, a centered comparison heading introduces two contrasting outputs: a dark, flat image and a brighter editable campaign composition. Thin dark borders and restrained inset highlights define controls without adding heavy card elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Primary page canvas and the uninterrupted backdrop behind hero, gallery, and lower sections. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Headlines, navigation, prominent interface text, and high-contrast details. |
| Quiet Gray | `#8c8c8c` | `--color-quiet-gray` | neutral | Muted supporting text and secondary copy against the dark canvas. |
| Action Orange | `#ff4800` | `--color-action-orange` | accent | Primary Contact sales button and small prompt-interface action accents. |
| Near Black | `#050505` | `--color-near-black` | surface | Subtle dark section and interface surface variation close to the main canvas. |
| Hairline Charcoal | `#141414` | `--color-hairline-charcoal` | semantic | Card and interface borders that separate dark surfaces without strong contrast. |
| Soft Gray | `#999999` | `--color-soft-gray` | neutral | Secondary muted text, used for less prominent supporting information. |
| Slate Gray | `#666666` | `--color-slate-gray` | neutral | Low-emphasis text and interface details; supporting tone rather than a defining brand color. |
| Mid Gray | `#808080` | `--color-mid-gray` | neutral | Subdued text and occasional gradient detail, not a major page surface. |
| Olive Badge | `#4b3e06` | `--color-olive-badge` | accent | Dark olive background on the Ecommerce hero pill, distinct from the main orange CTA. |
| Graphite Edge | `#313131` | `--color-graphite-edge` | surface | Subtle interface edge and gradient detail in dark controls. |
| Ember Orange | `#e5541f` | `--color-ember-orange` | accent | Minor warm accent in interface and campaign-related details, secondary to the primary CTA orange. |
| Panel Charcoal | `#1b1b1b` | `--color-panel-charcoal` | surface | Dark navigation and button surface details that sit just above the canvas. |
| Gradient Gray | `#4d4d4d` | `--color-gradient-gray` | neutral | Muted gradient and text detail; not a defining page background. |
| Raised Black | `#0d0d0d` | `--color-raised-black` | surface | Secondary dark surface, including the Get started link-style button and navigation details. |
| Dim Gray | `#6e6e6e` | `--color-dim-gray` | neutral | Low-visibility text and gradient detail, used sparingly. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#050505` (Near Black) · `--color-surface-2` → `#0d0d0d` (Raised Black) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#8c8c8c` (Quiet Gray) · `--color-text-subtle` → `#999999` (Soft Gray) · `--color-border` → `#141414` (Hairline Charcoal) · `--color-accent` → `#ff4800` (Action Orange) · `--color-accent-2` → `#4b3e06` (Olive Badge) · `--color-accent-3` → `#e5541f` (Ember Orange) · `--color-on-accent` → `#ffffff` (Signal White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#050505` | 20.38:1 | AAA |
| `#ffffff` | `#0d0d0d` | 19.44:1 | AAA |
| `#8c8c8c` | `#000000` | 6.25:1 | AA |
| `#8c8c8c` | `#050505` | 6.06:1 | AA |
| `#8c8c8c` | `#0d0d0d` | 5.78:1 | AA |
| `#999999` | `#000000` | 7.37:1 | AAA |
| `#999999` | `#050505` | 7.15:1 | AAA |
| `#999999` | `#0d0d0d` | 6.82:1 | AA |
| `#ff4800` | `#000000` | 6.18:1 | AA |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02))`
- `linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.4))`
- `linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgb(255, 255, 255) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3))`
- `linear-gradient(to right, rgb(8, 195, 128) 0%, rgb(253, 124, 15) 31.73%, rgb(255, 43, 43) 62.5%, rgb(149, 0, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 400, 600 | Navigation, body copy, captions, and compact interface labels. | Inter |
| AcidGrotesk | `--font-display` | webfont | 400, 500, 700 | Large display headlines and prominent hero pill text. | Space Grotesk |

- **Inter:** Mostly regular or medium weights; compact, readable supporting text with uppercase tracked eyebrow labels.
- **AcidGrotesk:** Bold display headlines; tight, centered line construction with restrained negative tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.499, base 13.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 45.5px | 700 | 1.1 | -0.008em | — | AcidGrotesk | Bold hero headline and primary display statement. |
| h2 | 44.5px | 400 | 1 | 0 | — | AcidGrotesk | Large section headline introducing product comparison. |
| h3 | 34.5px | 500 | 1 | -0.01em | — | AcidGrotesk | Secondary feature or showcase headings. |
| body | 13.5px | 400 | 1.5 | 0 | — | Inter | Short explanatory copy beneath headlines and around controls. |
| caption | 12px | 400 | 1.5 | 0 | — | Inter | Compact gallery labels and secondary notes. |
| nav | 13.5px | 500 | 1.4 | 0 | — | Inter | Top navigation links and account actions. |
| eyebrow | 10.5px | 500 | 1.4 | 0.22em | uppercase | Inter | Small uppercase section marker above a display headline. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 5, 7, 8, 10, 12, 14, 17, 18, 21, 27, 34 px.
- Section rhythm 86px · element gap 3px · card padding 17px · max content width 677px.

The homepage uses a broad, dark canvas with a compact horizontal navigation row and a centered hero. The hero content is constrained into a narrow column, while the campaign artwork expands into a loose, staggered gallery that reaches toward the viewport edges. Lower comparison content returns to a centered heading above paired visual examples. Section transitions rely on generous black negative space rather than colored bands. Measured content width is constrained, with comfortable density and clear separation between elements.

## Shape & elevation

- Radius: button `9999px` · card `10px` · media `7px` · nav `9999px` · link `9999px` · xs `3px` · sm `9px` · md `10px` · lg `12px` · xl `17px` · 2xl `18px` · pill `9999px`
- Shadow `inset` (link, nav, other): `rgba(0, 0, 0, 0.15) 0px 1.71429px 1.71429px 0px, rgba(255, 255, 255, 0.16) 0px 0px 9.42857px 0px inset`
- Shadow `inset-2` (other): `rgba(255, 255, 255, 0.05) 0px 0px 3.42857px 1.71429px inset, rgba(255, 255, 255, 0.05) 0px 0px 0px 4.28571px`
- Shadow `inset-3` (button): `rgba(0, 0, 0, 0.15) 0px 1.71429px 1.71429px 0px, rgb(255, 217, 0) 0px -4.28571px 14.5714px 0px inset`
- Shadow `inset-4` (button): `rgba(255, 255, 255, 0.16) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.18) 0px 1.71429px 6.85714px 0px`
- Shadow `inset-5` (other): `rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset`
- Shadow `inset-6` (button): `rgba(250, 204, 21, 0.8) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.18) 0px 1.71429px 6.85714px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The visual system is mostly flat, with black space doing more work than shadows. Dark controls and prompt fields use fine charcoal borders and restrained inset highlights to define their edges. Rounded pill actions have subtle layered sheen, while the hero input has a larger soft-edged frame. Avoid broad, heavy drop shadows.

## Imagery

Campaign artwork is the main source of color: a dispersed collection of varied promotional creatives floats on black, including product, editorial, and lifestyle compositions. The hero centers a dark prompt interface rather than photography. The comparison pairs a subdued, flat-looking campaign image with a brighter, editable design mockup. Keep artwork crisp and distinct; its internal colors belong to examples, not the core interface palette.

## Components

### Top navigation

A compact horizontal row of white Inter links on black, with account access and a raised, pill-shaped Get started action.

### Hero headline

Centered AcidGrotesk display text sits beneath a line of pill-like contextual labels, balancing bold white copy with subdued surrounding words.

### Prompt field

A wide, rounded dark prompt box with a fine charcoal border, muted example text, and a small orange circular submit control.

### Primary actions

Pair a dark Get started pill with an orange Contact sales pill; both use white compact labels and rounded ends.

### Campaign gallery

A loose field of varied campaign artwork on black, with ample negative space and no prominent enclosing cards.

### Editable-output comparison

A centered section title sits above two design examples: a dark flat image and a brighter campaign mockup with visible editor controls.

### Measured component styles

- **Primary button** (“Contact sales Contact sales”): background #ff4800 · text #ffffff · radius 9999px · padding 12px 20.6px · 500 12px Inter · shadow rgba(0, 0, 0, 0.15) 0px 1.71429px 1.71429px 0px, rgb(255, 217, 0) 0px -4.28571px
- **Secondary button** (“Ecommerce”): background #4b3e06 · text #ffffff · radius 8562.86px · padding 5.5px 17.8px 6.9px 17.8px · 500 34.2857px AcidGrotesk · shadow rgba(250, 204, 21, 0.8) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.18) 0px 1.71429px
- **Link** (“Get started Get started”): background #0d0d0d · text #ffffff · radius 9999px · padding 12px 20.6px · 500 12px Inter · shadow rgba(0, 0, 0, 0.15) 0px 1.71429px 1.71429px 0px, rgba(255, 255, 255, 0.16) 0px 0
- **Input**: transparent background · text #ffffff · radius 0px · padding 0px · 400 12px Inter
- **Card** (“Describe it Type what you need in plain ”): transparent background · text #ffffff · border 1px solid #141414 · radius 18px · padding 17.1px · 400 13.7143px Inter
- **Navigation item** (“Use cases Products Business Enterprise B”): transparent background · text #ffffff · radius 0px · padding 0px · 400 13.7143px Inter

## Do

- Use a black canvas as the dominant page background.
- Reserve bright orange for the primary CTA and small action details.
- Center the hero headline, prompt, and paired actions.
- Use AcidGrotesk-style display type for major headlines.
- Keep navigation and supporting copy compact in Inter.
- Give campaign artwork generous black space to breathe.

## Don't

- Do not introduce large colored section backgrounds.
- Do not use orange as a broad background or body-text color.
- Do not pack campaign examples into a dense, uniform grid.
- Do not add heavy shadows or bright card outlines.
- Do not enlarge muted explanatory text to compete with headlines.
- Do not treat colors inside campaign artwork as interface brand colors.

## Agent prompt

Build a new Linearity-style page on a near-black Canvas Black (#000000) background. Use Signal White (#ffffff) for headings and navigation, Quiet Gray (#8c8c8c) for secondary copy, and Action Orange (#ff4800) sparingly for primary actions. Set large centered headlines in a bold AcidGrotesk-like display face, with compact Inter-style navigation, body copy, and labels. Keep the first view open and focused: compact top navigation, centered headline, dark prompt panel with a fine Hairline Charcoal (#141414) border, and paired pill actions. Use broad negative space between sections. Present campaign visuals as a loose, staggered gallery rather than a dense grid, then use a centered heading and paired examples for any product comparison. Keep controls subtly layered, not heavily shadowed.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Top navigation above a centered hero stack with a prompt field and paired actions. | top navigation, prompt entry, primary and secondary CTA | black canvas, white display type, orange pill CTA, dark rounded prompt field |
| 2 | gallery | Loose, staggered campaign artwork distributed across a wide black field. | visual browsing, campaign discovery | floating artwork, large negative space, mixed creative formats |
| 3 | comparison | Centered heading and copy above two side-by-side campaign examples. | product comparison, paired calls to action | uppercase eyebrow, two visual panels, editor controls |
| 4 | other | Short, full-width black continuation with no prominent visible content. | section transition | black canvas, minimal decoration |

## Source CSS custom properties (selected)

```css
--kp-grid-col-gap: 1.25rem;
--kp-radius-sm: .75rem;
--kp-radius-md: 1rem;
--kp-radius-lg: 1.5rem;
--kp-radius-full: 624.375rem;
--kp-ease: cubic-bezier(.4,0,.2,1);
--kp-duration: .4s;
--kp-duration-fast: .2s;
--swiper-theme-color: #007aff;
```

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