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

# Paragraph · Design System

> A quiet editorial frame for an AI publishing engine

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

Paragraph pairs a near-black hero and footer with broad white editorial sections to present an AI-powered publishing workspace. Large, restrained typography and polished product UI carry the story, while green appears sparingly as a status and integration accent.

## North star

Let spacious, high-contrast typography and real product UI explain the product; reserve green for meaningful status signals.

## Overview

The page alternates a near-black canvas with expansive white content sections, creating a clear shift from brand-led introduction to product explanation and back to a dark closing CTA. White and near-black do most of the work; warm off-white cards soften dense UI examples, while muted grays establish supporting copy and fine structure. Emerald is a rare signal for integrations, progress, and status rather than a broad decorative field. Inter Variable provides a contemporary, neutral voice: the hero is large, centered, light in weight, and tightly led, while body copy stays readable and calm. A spacious centered hero gives way to left-aligned feature narratives, modular cards, stats, and an updates carousel. Product screenshots, interface mockups, maps, and small integration marks supply visual evidence. Thin borders and restrained shadows define layers without making the page feel heavily boxed.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, white content sections, light CTA buttons, and the bright product workspace mockup. |
| Engine Ink | `#0f1115` | `--color-engine-ink` | brand | Primary text and links, dark hero and CTA bands, footer, and dark primary buttons. |
| Soft Graphite | `#71717b` | `--color-soft-graphite` | semantic | Muted body copy, supporting links, and secondary information that should stay readable but recede. |
| Warm Porcelain | `#faf8f5` | `--color-warm-porcelain` | surface | Soft warm feature cards and product mockup panels that distinguish content without strong contrast. |
| Signal Emerald | `#059669` | `--color-signal-emerald` | accent | Sparse integration, publishing, and status details; not a large page background. |
| Quiet Hairline | `#ededed` | `--color-quiet-hairline` | semantic | Subtle card, button, and badge outlines on light surfaces. |
| Pale Divider | `#e4e4e7` | `--color-pale-divider` | semantic | Badge and control borders, plus fine separators within product UI. |
| Mist Gray | `#9f9fa9` | `--color-mist-gray` | semantic | Low-emphasis navigation and footer text, especially inactive or secondary labels. |
| Amber Marker | `#e17100` | `--color-amber-marker` | accent | Occasional small illustration or badge detail; not a defining interface color. |
| Silver Note | `#d4d4d8` | `--color-silver-note` | semantic | Small secondary text and understated details within interface-like content. |
| Slate Label | `#52525c` | `--color-slate-label` | semantic | Compact badge labels and supporting metadata. |
| Carbon Control | `#27292d` | `--color-carbon-control` | surface | Dark pill controls and secondary dark interface elements against the hero canvas. |
| Charcoal Detail | `#242424` | `--color-charcoal-detail` | neutral | Occasional dark text or button detail; secondary to the primary near-black. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#faf8f5` (Warm Porcelain) · `--color-surface-2` → `#0f1115` (Engine Ink) · `--color-text` → `#0f1115` (Engine Ink) · `--color-text-muted` → `#71717b` (Soft Graphite) · `--color-text-subtle` → `#9f9fa9` (Mist Gray) · `--color-border` → `#ededed` (Quiet Hairline) · `--color-accent` → `#059669` (Signal Emerald)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0f1115` | `#ffffff` | 18.9:1 | AAA |
| `#0f1115` | `#faf8f5` | 17.83:1 | AAA |
| `#71717b` | `#ffffff` | 4.83:1 | AA |
| `#71717b` | `#faf8f5` | 4.55:1 | AA |
| `#71717b` | `#0f1115` | 3.91:1 | AA-large |
| `#9f9fa9` | `#ffffff` | 2.62:1 | fail |
| `#9f9fa9` | `#faf8f5` | 2.47:1 | fail |
| `#9f9fa9` | `#0f1115` | 7.2:1 | AAA |
| `#059669` | `#ffffff` | 3.77:1 | AA-large |
| `#059669` | `#faf8f5` | 3.55:1 | AA-large |

### Gradients

- `linear-gradient(to right, rgb(255, 255, 255) 0px, rgba(255, 255, 255, 0) 48px, rgba(255, 255, 255, 0) max(100% - 192px, min(100% - 96px, 1296px)), rgba(255, 255, 255, 0.88) min(100%, 1616px), rgb(255, 255, 255) 100%)`
- `radial-gradient(rgb(15, 17, 21) 1px, rgba(0, 0, 0, 0) 1px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Variable | `--font-body` | webfont | 400, 500, 600, 350, 700 | Primary system for hero and section headings, body copy, navigation, links, and buttons. | Inter |
| Inter | `--font-inter` | system | 400, 500 | Small UI labels and a few compact badges. | Inter |
| ui-monospace | `--font-mono` | system | 400, 600 | Code-like labels and technical snippets in product imagery. | IBM Plex Mono |

- **Inter Variable:** Use restrained sentence case; display text is light and tightly led, with medium-weight controls and semibold links.
- **Inter:** Keep small labels compact and neutral, with medium weights rather than decorative styling.
- **ui-monospace:** Use only for short technical UI details; keep it subordinate to the sans-serif system.

### Type scale — Golden Ratio (ratio ≈ 1.651, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 350 | 1.02 | -0.011em | — | Inter Variable | Centered hero headline and prominent closing CTA headline. |
| h1 | 40px | 600 | 1.1 | 0 | — | Inter Variable | Major section headings and primary page-level product statements. |
| h2 | 20px | 400 | 1.55 | 0 | — | Inter Variable | Supporting introductory and explanatory section copy. |
| body | 16px | 400 | 1.5 | 0 | — | Inter Variable | Feature descriptions, hero explanation, and standard paragraph text. |
| caption | 14px | 400 | 1.71 | 0 | — | Inter Variable | Small card descriptions, supporting metadata, and fine print. |
| button | 14px | 500 | 1.43 | 0 | — | Inter Variable | Primary and secondary CTA labels and compact control text. |
| nav | 14px | 400 | 1.71 | 0 | — | Inter Variable | Header navigation and footer navigation labels. |
| link | 18px | 600 | 1.33 | 0 | — | Inter Variable | Prominent update titles and key inline links. |
| eyebrow | 12px | 500 | 1.33 | 0.08em | uppercase | Inter Variable | Uppercase section labels and small contextual overlines. |
| code | 10px | 400 | 1.5 | 0 | — | ui-monospace | Short code-like snippets inside product interface visuals. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48 px.
- Section rhythm 192px · element gap 8px · card padding 32px · max content width 1024px.

Use a centered content frame capped at the measured 1024px maximum, with generous open margins and a spacious section rhythm. The hero centers its heading, copy, actions, and customer logos on the dark canvas; later white sections switch to left-aligned feature introductions and modular two- or multi-column content. Product cards sit in orderly rows, while editorial updates form a horizontal feed. Keep the interface airy rather than dashboard-dense, and use clear alignment changes to distinguish narrative sections.

## Shape & elevation

- Radius: button `6px` · card `12px` · media `5px` · badge `9999px` · nav `6px` · link `12px` · xs `4px` · sm `5px` · md `6px` · lg `8px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `hairline` (card, other, text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `sm` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1p`
- Shadow `hairline-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) 0px 0px 0px 0px, oklab(0.177273 -0.000870474 -0.00882566 / 0.065) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `sm-2` (other, badge): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `sm-3` (other, text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(229, 231, 235) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px`
- Shadow `sm-4` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, with contrast between dark and light section bands doing the main layering work. Light cards use fine borders or very restrained hairline shadows rather than heavy depth. Rounded card corners and pill badges separate interface elements; keep edges clean and avoid pronounced drop shadows.

## Imagery

Treat product UI as the primary imagery: crisp workspace mockups, cards, charts, and integration marks demonstrate the publishing workflow. The hero places a large bright app interface against a dark background with subtle curved linework. Supporting visuals include small maps and charts rather than lifestyle photography. Preserve their clean, product-led framing and avoid adding unrelated photography or decorative 3D.

## Components

### Header navigation

Compact dark-canvas navigation with white brand mark, muted links, a restrained outlined free-start action, and a light demo CTA.

### Hero

Centered white headline and muted supporting copy on near-black, followed by paired CTAs, customer logos, and a product workspace preview.

### Product feature cards

Warm off-white or white rounded panels show draft, launch, analytics, and workflow UI with concise explanatory copy.

### Primary CTA

Near-black button with white medium-weight label; pair with a light inverse action where the surrounding surface is dark.

### Status and integration marks

Small emerald status details and colorful integration symbols appear inside product examples, not as broad decoration.

### Updates feed

Horizontal editorial cards combine dark, graphic-led thumbnails with compact metadata, prominent titles, and short descriptions.

### Footer

Near-black multi-column link directory with low-contrast labels, subtle separators, and a compact legal row.

### Measured component styles

- **Primary button** (“Signals”): background #27292d · text #ffffff · radius 3.35544e+07px · padding 0px 16px · 500 14px Inter Variable
- **Secondary button** (“New website”): transparent background · text #4a4a4a · border 1px solid #e4e4e4 · radius 3.35544e+07px · padding 6px 12px · 500 12px Inter
- **Link** (“Introducing the Changelog Playbook”): transparent background · text #0f1115 · radius 0px · padding 0px · 600 18px Inter Variable
- **Card** (“Draft In your voice”): background #faf8f5 · text #0f1115 · radius 16px · padding 32px · 400 16px Inter Variable · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“Launch announcement”): transparent background · text #52525c · border 1px solid #e4e4e7 · radius 3.35544e+07px · padding 6px 12px 6px 10px · 500 13px Inter Variable
- **Navigation item** (“Draft”): transparent background · text #9f9fa9 · radius 0px · padding 0px · 400 14px Inter Variable

## Do

- Alternate dark brand bands with broad white content sections.
- Use Inter Variable for the main typographic system.
- Keep the hero centered and the product workspace prominent.
- Use warm off-white for selected product cards.
- Reserve emerald for meaningful status or integration signals.
- Separate cards with fine borders and restrained elevation.

## Don't

- Do not turn the page into a saturated gradient-led design.
- Do not use green as a large background or primary CTA fill.
- Do not crowd the hero with dense interface detail.
- Do not rely on lifestyle photography to explain the product.
- Do not use heavy shadows or thick borders on every card.
- Do not make secondary navigation compete with the hero.

## Agent prompt

Build a new Paragraph-style SaaS page with an editorial, product-led visual system. Use Engine Ink (#0f1115) for the hero, closing CTA, footer, and primary text; contrast those bands with Gallery White (#ffffff) content sections. Use Warm Porcelain (#faf8f5) for selected UI cards, Soft Graphite (#71717b) for supporting copy, and Signal Emerald (#059669) only for meaningful status or integration accents. Set the primary typography in Inter Variable, with a large centered, light-weight hero and calm readable body copy. Use a centered content frame, generous section spacing, left-aligned feature stories, and modular product mockups. Favor clean interface screenshots, fine borders, subtle elevation, and rounded cards. Keep CTAs direct and high contrast; avoid decorative gradients, heavy shadows, and unnecessary imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark, centered hero with navigation, headline, supporting copy, paired CTAs, customer logos, and a large workspace preview. | Primary demo CTA, Secondary free-start CTA, Customer trust logos | Near-black canvas, Centered display type, Product UI preview, Subtle linework |
| 2 | feature-grid | Long white editorial section with left-aligned feature introductions, modular product cards, metrics, integrations, and an updates carousel. | Workflow explanation, Product proof, Browse latest updates | White section band, Warm card surfaces, Interface mockups, Fine dividers |
| 3 | cta | Centered headline, brief supporting copy, and paired actions on a full-width near-black band. | Demo conversion, Free-start alternative | Near-black canvas, White display type, High-contrast buttons |
| 4 | footer | Near-black footer with four link columns and a low-profile bottom row for legal links and social icons. | Grouped site navigation, Legal information, Social links | Muted gray labels, Multi-column link groups, Subtle separators |

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