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

# Sequence · Design System

> Quietly confident finance automation, framed in light

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

Sequence presents complex billing and finance automation through a bright, restrained interface with fine typography and abundant whitespace. Product mockups, customer proof, and understated calls to action carry the story, with occasional pale gradients and a single dark enterprise panel adding contrast.

## North star

Let whitespace and precise product UI explain the finance platform, using contrast sparingly to guide attention.

## Overview

The page is built on a white canvas, with #f9f9f9 bands separating selected proof and content areas. Near-black headings and CTA buttons provide the strongest contrast; secondary copy sits in several measured grays, while hairline borders keep cards and divisions subtle. The first viewport centers a large, refined headline over a pale particle-like gradient, then transitions into a compact customer logo row. TWK Lausanne is used across the interface, giving navigation, body copy, and product labels a consistent sans-serif voice; headings are light-weight and carefully tracked, while the hero uses an elegant serif-like display treatment in the screenshot. The layout favors spacious, centered introductions followed by narrow text columns, side navigation, and broad product panels. Product UI is shown in soft, low-contrast cards rather than glossy device mockups. A dark enterprise panel and occasional lavender-blue gradients provide contrast without changing the restrained overall palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, navigation, and most feature sections. |
| Cloud Veil | `#f9f9f9` | `--color-cloud-veil` | surface | Alternating pale bands behind customer stories, migration content, and other broad sections. |
| Status Green | `#3e7f00` | `--color-status-green` | semantic | Success-state text on the small Sent status badge inside product UI. |
| Quiet Gray | `#757575` | `--color-quiet-gray` | neutral | Muted navigation, category labels, and secondary links. |
| Alert Orange | `#d75a00` | `--color-alert-orange` | semantic | Sparse status text inside embedded product-interface examples, not a site-wide brand accent. |
| Slate Copy | `#505050` | `--color-slate-copy` | neutral | Default supporting text, secondary button labels, and customer-story links. |
| Soft Ink | `#202120` | `--color-soft-ink` | brand | Main headings, dark primary CTA backgrounds, and high-emphasis interface text. |
| Mist Line | `#efefef` | `--color-mist-line` | neutral | Card and section borders, with occasional light neutral surface use. |
| Pale Divider | `#eaeaea` | `--color-pale-divider` | neutral | Subtle card and section separators. |
| Graphite Tint | `#42424a` | `--color-graphite-tint` | neutral | Low-frequency supporting text in embedded interface content. |
| Electric Violet | `#5e5cff` | `--color-electric-violet` | accent | Tiny decorative or badge detail; not a dominant page-level color. |
| Blue Slate | `#485972` | `--color-blue-slate` | neutral | Occasional subdued text within product or illustration content. |
| Charcoal Gray | `#3d3d3d` | `--color-charcoal-gray` | neutral | Low-frequency text and small labels in embedded interface details. |
| Silver Gray | `#9c9c9c` | `--color-silver-gray` | neutral | Tertiary text and subdued product-interface labels. |
| Lavender Haze | `#f6f3ff` | `--color-lavender-haze` | accent | Pale lavender tint within decorative gradients and selected soft visual treatments. |
| Night Panel | `#171717` | `--color-night-panel` | surface | Deep background and light text contrast in the enterprise-ready feature panel. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f9f9` (Cloud Veil) · `--color-surface-2` → `#efefef` (Mist Line) · `--color-text` → `#202120` (Soft Ink) · `--color-text-muted` → `#757575` (Quiet Gray) · `--color-text-subtle` → `#505050` (Slate Copy) · `--color-border` → `#efefef` (Mist Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#202120` | `#ffffff` | 16.16:1 | AAA |
| `#202120` | `#f9f9f9` | 15.35:1 | AAA |
| `#202120` | `#efefef` | 14.05:1 | AAA |
| `#757575` | `#ffffff` | 4.61:1 | AA |
| `#757575` | `#f9f9f9` | 4.38:1 | AA-large |
| `#757575` | `#efefef` | 4.01:1 | AA-large |
| `#505050` | `#ffffff` | 8.06:1 | AAA |
| `#505050` | `#f9f9f9` | 7.66:1 | AAA |
| `#505050` | `#efefef` | 7.01:1 | AAA |

### Gradients

- `linear-gradient(135deg, rgb(252, 252, 252), rgb(245, 245, 245) 65%, rgb(248, 248, 248))`
- `radial-gradient(100% 120% at 50% 0px, rgb(255, 255, 255), rgb(250, 252, 255) 35%, rgb(249, 249, 249))`
- `linear-gradient(135deg, rgb(23, 23, 23), rgb(12, 13, 12) 20%, rgb(19, 18, 18))`
- `linear-gradient(90deg, rgb(235, 229, 251), rgb(246, 243, 255), rgb(245, 249, 255), rgb(227, 235, 248))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| twkLausanne | `--font-body` | webfont | 400, 500, 300, 600, 700 | Site-wide interface, navigation, body copy, buttons, labels, and most headings. | Inter |

- **twkLausanne:** Use predominantly regular and light weights; headings are restrained and slightly negatively tracked, with no uppercase default.

### Type scale — Minor Third (ratio ≈ 1.189, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 300 | 1.3 | -0.015em | — | twkLausanne | Hero headline and primary page-level statement. |
| h2 | 30px | 300 | 1.2 | -0.01em | — | twkLausanne | Major section headings introducing product capabilities and stories. |
| h3 | 22px | 400 | 1.45 | 0 | — | twkLausanne | Feature titles and subsection headings. |
| h4 | 21px | 400 | 1.25 | -0.01em | — | twkLausanne | Compact card and supporting feature headings. |
| body | 16px | 400 | 1.55 | 0 | — | twkLausanne | Explanatory copy, customer stories, and FAQ answers. |
| caption | 11px | 400 | 1.35 | 0 | — | twkLausanne | Small product UI labels, footnotes, and metadata. |
| button | 13px | 400 | 1.5 | 0 | — | twkLausanne | Primary and secondary CTA labels. |
| nav | 14px | 400 | 1 | 0 | — | twkLausanne | Header navigation and menu items. |
| link | 14px | 400 | 1.43 | 0 | — | twkLausanne | Inline links, customer-story actions, and connector exploration. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 32, 40 px.
- Section rhythm 96px · element gap 8px · card padding 16px · max content width 848px.

The header spans the top of the page, while the hero and several introductory blocks align centrally. The measured content max width is 848px, with spacious section gaps and modest internal card padding. Feature areas alternate between one-column product showcases and two-column text-and-interface compositions; a slim category rail anchors some product sections. Broad pale bands separate proof sections from the white canvas. Keep the density low, preserve generous vertical breathing room, and allow product panels to read as large calm surfaces rather than tightly packed dashboards.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `16px` · badge `6px` · nav `14px` · link `12px` · xs `4px` · sm `5px` · md `6px` · lg `8px` · xl `12px` · 2xl `14px` · pill `9999px`
- Shadow `md` (other, 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, lab(12.603 -0.669099 0.507629 / 0.15) 0px 0px 0px 0.5px, rgba(20, 17, 14, 0.18) 0px 8px 24px -12px`
- Shadow `hairline` (card, 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, lab(49.239 0 0 / 0.25) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-2` (card, link): `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, lab(49.239 0 0 / 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset` (other, card): `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 0.5px inset, lab(49.239 0 0 / 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-3` (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, lab(49.239 0 0 / 0.2) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-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) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most surfaces are flat, with thin gray hairlines defining cards and boundaries. Product cards may use a very restrained edge shadow and slight lift, but broad sections remain unraised. Layering is used selectively for the floating video preview, stacked workflow mockups, and the dark enterprise panel; avoid pronounced drop shadows or heavy outlines.

## Imagery

Imagery is led by product-interface mockups: invoices, workflow steps, and finance dashboards presented in pale, soft-edged panels. The hero uses a faint particle or grain-like field over a near-white lavender-blue wash. Customer proof includes real-world photography in compact story cards, while an embedded video preview appears as a small floating feature. Avoid glossy device frames; keep interface detail subdued and let screenshots support the explanatory copy.

## Components

### Header navigation

Light, single-row header with the Sequence mark, muted text links, and a compact dark Book demo pill aligned at the far right.

### Primary CTA

Near-black button with white 14px Lausanne text and a rounded pill-like silhouette; used for Book demo actions.

### Product feature panel

Large pale product mockup paired with concise explanatory copy, sometimes arranged as a broad panel beside a narrow feature rail.

### Customer proof card

Compact photographic story card with customer mark, outcome metric, and subdued supporting caption.

### Status badge

Small rounded status label in product UI; success state uses a pale green fill with green text.

### FAQ accordion

Centered FAQ heading followed by restrained question rows, subtle dividers, and a small disclosure indicator.

### Enterprise feature panel

Dark #171717 section with a light heading and a row of fine-bordered capability cards.

### Measured component styles

- **Primary button** (“Notion”): background #feffff · text #505050 · radius 8px · padding 4px 8px · 400 13px twkLausanne · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Book demo”): background #202120 · text #ffffff · radius 16px · padding 10px 12px · 400 14px twkLausanne · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Read story →”): transparent background · text #505050 · radius 0px · padding 0px · 400 16px twkLausanne
- **Card** (“Midday: Run April invoicing Finalising… ”): transparent background · text #505050 · radius 12px · padding 16px · 400 16px twkLausanne · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“Send email”): background #202120 · text #ffffff · radius 6px · padding 6px 8px · 500 11px twkLausanne
- **Navigation item** (“Product Customers Docs (opens in new tab”): transparent background · text #505050 · radius 0px · padding 0px · 400 14px twkLausanne

## Do

- Keep the primary canvas white and section bands very pale.
- Use near-black text and CTAs for clear focal contrast.
- Give hero and section introductions generous whitespace.
- Pair concise feature copy with quiet product-interface panels.
- Use thin gray borders instead of strong card outlines.
- Reserve gradients for subtle atmospheric or illustrative treatments.

## Don't

- Do not make decorative colors the dominant brand palette.
- Do not use dense, dashboard-like layouts for marketing sections.
- Do not add heavy shadows or thick borders to cards.
- Do not use saturated CTA colors in place of the dark button.
- Do not crowd headings, copy, and product imagery together.
- Do not treat illustration-only status colors as global accents.

## Agent prompt

Build a new Sequence-style SaaS page with a Gallery White (#ffffff) canvas, Cloud Veil (#f9f9f9) section bands, and Soft Ink (#202120) headings and primary CTAs. Use TWK Lausanne or Inter, with restrained weights, compact navigation, and generous whitespace. Center key introductions, then explain capabilities through concise copy beside quiet, pale product-interface panels. Keep the content rhythm spacious and use fine Mist Line (#efefef) borders rather than prominent shadows. Let real customer photography appear in small proof cards; use gradients sparingly, with Lavender Haze (#f6f3ff) only as a soft decorative wash. If a dark feature block is needed, use Night Panel (#171717) and fine dividers. Keep secondary copy muted and the overall UI calm, precise, and product-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero beneath a slim navigation row, with pale atmospheric artwork filling the backdrop. | Primary demo CTA, Secondary explore link, Floating video preview | Centered headline, Soft gradient field, Dark pill button |
| 2 | stats | Pale full-width band with an introductory line above three evenly divided metric cards. | Outcome metrics, Quick credibility scan | Three-column stat row, Fine dividers, Pale neutral surface |
| 3 | product-showcase | Section title followed by a narrow category rail and broad stacked product panels. | Category navigation, Sequential workflow explanation | Soft UI mockups, Text over product panels, Low-contrast surfaces |
| 4 | feature-split | Two-column feature area with a left category rail and modular billing interface panels. | Billing capability overview, Workflow details | Paired product cards, Light interface panels, Subtle boundaries |
| 5 | feature-split | Two-column product section with category labels beside a wide workflow mockup. | Automated collections, Human review emphasis | Workflow screenshot, Compact feature copy, Minimal card treatment |
| 6 | product-showcase | Single-column feature introduction with a broad, pale ledger interface below. | Compliance reassurance, Ledger capability overview | Wide product mockup, Low-contrast UI, Short explanatory copy |
| 7 | testimonials | Full-width testimonial panel with centered quotation, customer identity, and decorative framing. | Customer proof, Quoted outcome | Centered text, Blue edge accents, Soft rounded panel |
| 8 | other | Pale full-width band with centered heading and a wide automation workflow visual. | Agent capability overview, Workflow explanation | Centered introduction, Embedded product UI, Light neutral background |
| 9 | feature-grid | Centered introduction above a gallery-like grid of agent tasks and interface examples. | Agent task discovery, Workflow selection | Centered heading, Soft gradient artwork, Repeated task cards |
| 10 | integrations | Centered heading and copy above connector artwork and a compact exploration link. | Connector discovery, Explore connectors | Centered content, Brand mark illustration, Sparse presentation |
| 11 | other | Broad pale content band containing customer stories, migration guidance, and a contrasting dark capability panel. | Customer story browsing, Migration guidance, Enterprise capability scan | Photo story cards, Pale content surfaces, Dark enterprise block |
| 12 | faq | Centered FAQ title above a narrow, vertically stacked accordion list. | Expandable questions, Answer disclosure | Minimal rows, Small indicators, Centered heading |

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