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

# Convex · Design System

> Warm paper, dark systems, and a bright signal.

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

Convex pairs warm parchment sections with dark, technical panels to present its reactive backend as both approachable and powerful. Bold sans-serif messaging, editorial serif testimonials, and product UI demonstrations create a distinct developer-first identity.

## North star

Build a deliberate alternation of warm paper and dark technical surfaces, letting product UI and concise typography carry the story.

## Overview

The page alternates warm parchment and deep charcoal-brown fields rather than relying on one continuous background. The opening hero is a dark, two-column band: compact, forceful white sans-serif copy sits opposite a framed developer setup interface, with saturated ribbon graphics tracing the lower edge. A pale trust band and the following solved-problems section restore contrast and breathing room. Later dark product sections, muted olive testimonials, and rust-toned enterprise content create a deliberate sequence of color-blocked chapters. GT America carries navigation, body copy, and most headings; the oversized hero message is condensed by line breaks and bold weight, while Publico gives the testimonial quote an editorial voice. VCR and IBM Plex Mono are reserved for technical labels and code-like details. Layouts combine broad section fields with aligned content columns, compact cards, logo rows, and framed interface mockups. Borders and restrained shadows define layers without making the page feel glossy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Parchment | `#f6eedb` | `--color-warm-parchment` | brand | Main light canvas for the trusted-by band and solved-problems section; also used for text on dark surfaces. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | High-contrast text and button fill, especially in the hero and footer; also appears in fine grid lines. |
| Charcoal Roast | `#221f1d` | `--color-charcoal-roast` | surface | Deep footer and dark content surface, supporting links, cards, and navigation. |
| Oxide Red | `#73312b` | `--color-oxide-red` | accent | Rust-red section and badge accent; also anchors the hero's warm red gradient edge. |
| Smoked Umber | `#473e36` | `--color-smoked-umber` | surface | Supporting dark neutral in the hero gradient and technical surfaces. |
| Near Black | `#191919` | `--color-near-black` | surface | Dark product showcase background and near-black control surfaces. |
| Slate Gray | `#6d6d70` | `--color-slate-gray` | semantic | Muted navigation and secondary text on lighter surfaces. |
| Cocoa Brown | `#573932` | `--color-cocoa-brown` | surface | Warm brown enterprise section band, separating product content from the footer. |
| Olive Smoke | `#444435` | `--color-olive-smoke` | surface | Muted olive testimonial background, giving quote cards a softer dark contrast. |
| Black Cherry | `#2a1b1b` | `--color-black-cherry` | surface | Deep reddish-brown founders section behind centered team content. |
| Carbon Ink | `#141414` | `--color-carbon-ink` | neutral | Dark text and icon color on bright buttons, badges, and light content. |
| Soft Alloy | `#c2c2c2` | `--color-soft-alloy` | neutral | Secondary text within dark product and interface content. |
| Graphite Panel | `#292929` | `--color-graphite-panel` | surface | Card backgrounds in dark component and integration showcases. |
| Ember Orange | `#de5d33` | `--color-ember-orange` | accent | Primary build CTA fill and small interface accents. |
| Marigold Signal | `#f3b01c` | `--color-marigold-signal` | accent | Announcement-strip AI Gateway badge; a bright signal accent in the page chrome. |
| Quiet Border | `#272424` | `--color-quiet-border` | semantic | Fine dark hairlines and card boundaries on dark surfaces. |

### Semantic aliases

`--color-canvas` → `#f6eedb` (Warm Parchment) · `--color-surface` → `#221f1d` (Charcoal Roast) · `--color-surface-2` → `#191919` (Near Black) · `--color-surface-3` → `#573932` (Cocoa Brown) · `--color-surface-4` → `#444435` (Olive Smoke) · `--color-text` → `#6d6d70` (Slate Gray) · `--color-text-muted` → `#ffffff` (Signal White) · `--color-text-subtle` → `#f6eedb` (Warm Parchment) · `--color-border` → `#272424` (Quiet Border) · `--color-accent` → `#73312b` (Oxide Red) · `--color-accent-2` → `#de5d33` (Ember Orange) · `--color-accent-3` → `#f3b01c` (Marigold Signal) · `--color-on-accent` → `#141414` (Carbon Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#6d6d70` | `#f6eedb` | 4.46:1 | AA-large |
| `#6d6d70` | `#221f1d` | 3.18:1 | AA-large |
| `#6d6d70` | `#191919` | 3.41:1 | AA-large |
| `#6d6d70` | `#573932` | 2:1 | fail |
| `#ffffff` | `#f6eedb` | 1.16:1 | fail |
| `#ffffff` | `#221f1d` | 16.38:1 | AAA |
| `#ffffff` | `#191919` | 17.58:1 | AAA |
| `#ffffff` | `#573932` | 10.31:1 | AAA |
| `#f6eedb` | `#221f1d` | 14.18:1 | AAA |
| `#f6eedb` | `#191919` | 15.21:1 | AAA |

### Gradients

- `linear-gradient(238deg, rgb(115, 49, 43) 2%, rgb(71, 62, 54) 69%)`
- `linear-gradient(to right, rgb(255, 255, 255) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgb(255, 255, 255) 1px, rgba(0, 0, 0, 0) 1px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| gtAmerica | `--font-body` | webfont | 400, 500, 300, 700 | Primary sans-serif for navigation, headings, body copy, and buttons. | Inter |
| IBM Plex Mono | `--font-mono` | webfont | 400, 500 | Code snippets and compact technical labels. | IBM Plex Mono |
| vcr | `--font-vcr` | webfont | 400 | Eyebrows, product badges, and technical section labels. | Space Mono |
| publico | `--font-display` | webfont | 400, 500 | Large testimonial quote display. | Lora |

- **gtAmerica:** Use a clean, contemporary sans; bold compact headlines, regular body copy, and medium-weight CTAs.
- **IBM Plex Mono:** Monospaced technical details stay small and precise; use uppercase sparingly for labels.
- **vcr:** Monospaced uppercase labels with visibly expanded tracking and a utilitarian display feel.
- **publico:** Use an expressive serif for quote-led moments; keep surrounding attribution small and restrained.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1 | -0.025em | — | publico | Large editorial testimonial quotation. |
| h1 | 40px | 700 | 1 | -0.02em | — | gtAmerica | Primary hero headline and major page statements. |
| h2 | 28px | 700 | 1.1 | 0 | — | gtAmerica | Section titles such as solved and enterprise messaging. |
| h3 | 20px | 300 | 1.25 | 0 | — | gtAmerica | Supporting card and subsection headings. |
| body | 16px | 400 | 1.5 | 0 | — | gtAmerica | Hero explanation, feature details, and longer descriptions. |
| caption | 14px | 400 | 1.25 | 0 | — | gtAmerica | Compact supporting copy and card details. |
| button | 16px | 500 | 1.5 | 0 | — | gtAmerica | Primary and secondary CTA labels. |
| nav | 14px | 400 | 1.25 | 0 | — | gtAmerica | Main navigation labels and footer navigation. |
| link | 12px | 400 | 1.38 | 0.018em | — | gtAmerica | Small secondary links and supporting references. |
| eyebrow | 12px | 400 | 1.5 | 0.08em | uppercase | vcr | Uppercase technical labels and section markers. |
| code | 12px | 400 | 1.63 | 0 | — | IBM Plex Mono | Command snippets and developer-facing interface text. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 32, 48, 60 px.
- Section rhythm 48px · element gap 8px · card padding 14px · max content width 946px.

The page uses a sequence of broad, full-width color bands with content organized into two-column hero and feature layouts, a seven-mark logo row, multi-column cards, and a four-column footer. The measured content max width is 946px, with comfortable density and clear separation between sections. Most headings align to the start of their content; the founders section centers its statement. Keep cards and interface demonstrations grouped into compact, readable clusters, using generous open areas in the pale sections to balance denser dark showcases.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `22px` · badge `4px` · nav `8px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `16px` · 2xl `22px` · pill `9999px`
- Shadow `md` (button, 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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 2px 11px 0px`
- Shadow `xl` (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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 16px 17px 0px, rgba(0, 0, 0, 0.13) 0px 9`
- Shadow `md-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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.3) 0px 15px 22px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design relies more on flat color fields and thin borders than on pronounced elevation. Dark product cards and command panels use layered charcoal surfaces, subtle outlines, and restrained shadows to separate interface layers from the background. Rounded card and media corners soften the technical framing; avoid floating everything on large glossy shadows.

## Imagery

Product UI is the defining visual: framed command panels and developer setup flows appear in the hero and enterprise area. Logo marks form a compact trust row, while founder portraits are small supporting photos rather than a dominant photographic system. The solved-problems area includes a light grid-style technical visualization. Saturated ribbon shapes in the hero and small geometric accents near the enterprise showcase act as decorative graphics, not the core brand palette.

## Components

### Announcement strip

A narrow near-black top band with concise white launch copy and a Marigold Signal #f3b01c AI Gateway pill.

### Primary CTA

A rounded Ember Orange #de5d33 button with white medium-weight text; pair it with a light outlined secondary action.

### Developer setup panel

A dark framed interface mockup with monospaced uppercase labels, nested charcoal fields, copy affordances, and compact command rows.

### Trust logo row

Centered small trust eyebrow above a horizontal seven-brand logo row on Warm Parchment #f6eedb.

### Feature card

Graphite Panel #292929 cards with concise descriptions, technical labels, and command-like details, arranged as a compact grid.

### Testimonial block

Large Publico-style white quote on muted Olive Smoke #444435, with smaller attribution and supporting quote cards.

### Footer link columns

A deep Charcoal Roast #221f1d footer with the wordmark, several compact navigation columns, and small muted links.

### Measured component styles

- **Primary button** (“AI Gateway”): background #f3b01c · text #141414 · radius 3.35544e+07px · padding 6px 10px · 500 14px gtAmerica
- **Secondary button** (“Start building”): background #de5d33 · text #ffffff · border 1px solid · radius 3.35544e+07px · padding 8px 24px · 500 14px gtAmerica
- **Link** (“Works great with any model, any agent, a”): transparent background · text #f1d4c5 · radius 0px · padding 0px · 400 12px gtAmerica
- **Card** (“WORKPOOL Fan out work, on a managed pool”): background #292929 · text #141414 · radius 16px · padding 16px 12px · 400 16px gtAmerica · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“WORKPOOL”): transparent background · text #f4dcb4 · border 1px solid #f4dcb4 · radius 4px · padding 4px · 400 10px vcr · uppercase
- **Navigation item** (“Product Realtime Keep your app up to dat”): transparent background · text #141414 · radius 0px · padding 0px · 400 16px gtAmerica

## Do

- Alternate warm parchment and dark section fields with clear purpose.
- Keep the hero headline bold, white, and broken into short lines.
- Use product interfaces as framed, legible demonstrations.
- Reserve monospaced uppercase styling for technical labels.
- Let testimonial quotes provide the main serif moment.
- Use accent colors as signals, not broad decoration.

## Don't

- Do not turn every section into the same dark panel.
- Do not use gradients as a general page background.
- Do not let product mockups become unreadable decoration.
- Do not use serif typography for ordinary body copy.
- Do not add heavy shadows to every card.
- Do not introduce extra colors outside the measured palette.

## Agent prompt

Build a new Convex-style developer SaaS page using a strong rhythm of Warm Parchment #f6eedb and dark surfaces such as Charcoal Roast #221f1d, Near Black #191919, and Black Cherry #2a1b1b. Use Ember Orange #de5d33 for the primary action and Marigold Signal #f3b01c only for a small announcement accent. Set navigation and body in a GT America-like sans, technical labels and code in monospace, and reserve a serif display face for a featured quote. Organize content in broad full-width bands with aligned columns, compact dark cards, and framed product UI. Favor clean hairlines, restrained shadows, and readable interface mockups. Keep spacing comfortable and section transitions purposeful; do not invent extra palette colors or decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark two-column hero with headline and copy at left, developer setup panel at right, and ribbon accents along the lower edge. | Read-the-docs secondary action, Start-building primary action, Copy setup prompt | Bold white headline, Framed dark command panel, Color ribbon accent |
| 2 | logo-cloud | Pale full-width band with a centered eyebrow and one horizontal row of seven customer logos. | Brand recognition, Trust signaling | Warm parchment canvas, Compact monochrome logos, Outlined eyebrow badge |
| 3 | feature-split | Pale two-column section with explanatory copy and checklist at left, technical grid visualization at right. | Scannable benefit checklist, Proof-point link | Dark section heading, Fine-lined checklist rows, Light technical visualization |
| 4 | integrations | Near-black section with intro above a three-card component row and a separate horizontal integration strip. | Browse component library, Inspect install commands | Uppercase technical eyebrow, Graphite cards, Partner logo tiles |
| 5 | testimonials | Muted olive field with centered oversized quote, attribution, and two smaller quote cards below. | Social proof, Quote attribution | Editorial serif display, Small uppercase eyebrow, Muted quote cards |
| 6 | team | Centered statement above two side-by-side founder profiles on a deep reddish-brown field. | Founder credibility, Experience proof | Centered headline, Small founder portraits, Compact biography columns |
| 7 | cta | Warm brown enterprise band with compliance strip followed by a large dark product showcase and centered actions. | Enterprise qualification, Copy setup prompt, Start-building action | Compliance badge strip, Dark framed interface, Small geometric accents |
| 8 | footer | Deep charcoal footer with wordmark at left and four compact link columns, followed by legal and compliance details. | Grouped navigation, Social links, Legal and compliance references | Charcoal background, Small muted link text, Multi-column hierarchy |

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