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

# Superthread · Design System

> A bright workspace, grounded in warm yellow and crisp product UI.

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

Superthread pairs a clean white canvas and confident dark typography with a warm yellow accent. Product interface previews, compact navigation, and generous whitespace make the homepage feel practical, approachable, and product-led.

## North star

Keep the page bright and spacious, using dark precise typography and warm yellow only to guide attention toward actions and product moments.

## Overview

The page is built on a predominantly white canvas, with pale warm sections and fine gray outlines giving long stretches of content gentle separation. Dark navy-charcoal typography anchors the layout; large centered headlines establish hierarchy, while smaller body copy stays readable and restrained. Warm yellow is reserved for high-intent actions, small emphasis marks, and subtle gradients rather than broad blocks of saturated color. The first screen leads with centered messaging and a prominent workspace preview, followed by logos, use-case cards, testimonials, pricing, integrations, FAQ, and a compact footer. Product screenshots and interface illustrations do most of the visual storytelling, with a single dark side-quest panel providing contrast. Repeated rounded cards and pill-like controls soften the otherwise precise grid. Generous whitespace creates a calm, comfortable rhythm, while thin borders and low-key shadows keep interface elements distinct without making the page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas for navigation, hero, most content bands, and footer. |
| Slate Ink | `#1d2939` | `--color-slate-ink` | neutral | Frequent navigation, card, and supporting text; also used for small links. |
| Midnight Ink | `#101828` | `--color-midnight-ink` | brand | Primary headings and high-contrast text, including CTA labels and selected controls. |
| Icy Cyan | `#82ebfa` | `--color-icy-cyan` | accent | Small cyan text and badge detail on the dark side-quest card; not a main page accent. |
| Cloud Gray | `#f9fafb` | `--color-cloud-gray` | surface | Pale cards, interface panels, and softly differentiated content areas. |
| Soft Divider | `#d0d5dd` | `--color-soft-divider` | neutral | Fine card and control outlines, separator rules, and subtle grid lines. |
| Marigold | `#facd4b` | `--color-marigold` | accent | Primary start-free CTAs, small highlight strokes, and yellow details in product moments. |
| Butter Glow | `#ffe495` | `--color-butter-glow` | accent | Light end of warm section gradients and soft yellow washes around product imagery. |
| Vanilla Haze | `#fff5d6` | `--color-vanilla-haze` | surface | Pale warm gradient stop behind hero media and other softly highlighted areas. |
| Near Black | `#0c0d12` | `--color-near-black` | surface | Dark product card and side-quest panel background, rather than the main page canvas. |
| Muted Slate | `#667085` | `--color-muted-slate` | neutral | Secondary copy, captions, badge text, and subdued footer links. |
| Graphite Edge | `#35394a` | `--color-graphite-edge` | neutral | Outline and badge detail within dark cards and other interface mockups. |
| Amber Signal | `#ffaa00` | `--color-amber-signal` | accent | Small yellow-orange details detected in controls and UI; secondary to the main warm yellow accent. |
| Dusty Lavender | `#9ea5b6` | `--color-dusty-lavender` | neutral | Occasional subdued text detail, not a defining large-area page color. |
| Deep Charcoal | `#13141d` | `--color-deep-charcoal` | surface | Dark badges and cards in the side-quest feature and interface presentation. |
| Cream Paper | `#fdf6e3` | `--color-cream-paper` | surface | Warm pale gradient and interface detail; use as a supporting tint, not a primary canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9fafb` (Cloud Gray) · `--color-surface-2` → `#0c0d12` (Near Black) · `--color-surface-3` → `#13141d` (Deep Charcoal) · `--color-text` → `#101828` (Midnight Ink) · `--color-text-muted` → `#1d2939` (Slate Ink) · `--color-text-subtle` → `#667085` (Muted Slate) · `--color-border` → `#d0d5dd` (Soft Divider) · `--color-accent` → `#facd4b` (Marigold) · `--color-accent-2` → `#ffe495` (Butter Glow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#101828` | `#ffffff` | 17.75:1 | AAA |
| `#101828` | `#f9fafb` | 16.98:1 | AAA |
| `#101828` | `#0c0d12` | 1.09:1 | fail |
| `#101828` | `#13141d` | 1.03:1 | fail |
| `#1d2939` | `#ffffff` | 14.7:1 | AAA |
| `#1d2939` | `#f9fafb` | 14.07:1 | AAA |
| `#1d2939` | `#0c0d12` | 1.32:1 | fail |
| `#1d2939` | `#13141d` | 1.25:1 | fail |
| `#667085` | `#ffffff` | 4.97:1 | AA |
| `#667085` | `#f9fafb` | 4.76:1 | AA |

### Gradients

- `radial-gradient(rgba(255, 204, 52, 0.52), rgba(255, 204, 52, 0.2) 40%, rgba(0, 0, 0, 0) 74%)`
- `linear-gradient(to right, rgb(208, 213, 221) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgb(208, 213, 221) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(rgba(130, 235, 250, 0.035) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(130, 235, 250, 0.035) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(rgb(251, 230, 176), rgb(253, 246, 227))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Vela Sans Regular | `--font-body` | webfont | 400, 600 | Main body copy, descriptive text, and inline links. | Inter |
| Vela Sans SemiBold | `--font-display` | webfont | 400, 600, 500 | Display headlines and prominent section headings. | Inter |
| Vela Sans | `--font-vela-sans` | webfont | 400, 500, 600, 700 | Navigation, controls, buttons, labels, and general UI text. | Inter |
| Fragment Mono | `--font-mono` | webfont | 400, 700 | Small uppercase technical badges, especially in the dark side-quest feature. | IBM Plex Mono |

- **Vela Sans Regular:** Regular weight, airy line height, and slight positive tracking keep paragraphs calm and legible.
- **Vela Sans SemiBold:** Use a strong semibold headline with tight display tracking; keep capitalization natural.
- **Vela Sans:** Use regular to semibold weights; UI labels remain sentence case, with occasional uppercase badges.
- **Fragment Mono:** Monospaced, compact, and letter-spaced; reserve for small metadata rather than paragraphs.

### Type scale — Perfect Fifth (ratio ≈ 1.495, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 600 | 1.1 | -0.01em | — | Vela Sans SemiBold | Large centered hero headline; emphasize a key word with a yellow underline. |
| h1 | 32px | 400 | 1.2 | 0 | — | Vela Sans SemiBold | Primary section headings and key headline-level messages. |
| h2 | 24px | 400 | 1.5 | 0 | — | Vela Sans SemiBold | Supporting section headings and prominent feature titles. |
| h3 | 20px | 500 | 1.4 | 0 | — | Vela Sans | Card titles and smaller feature headings. |
| body | 16px | 400 | 1.7 | 0.02em | — | Vela Sans Regular | Explanatory paragraphs and supporting product copy. |
| caption | 14px | 400 | 1.71 | 0.02em | — | Vela Sans | Small supporting details, credits, and compact notes. |
| button | 16px | 400 | 1.5 | 0 | — | Vela Sans | CTA labels and interface action controls. |
| nav | 20px | 500 | 1.4 | 0 | — | Vela Sans | Primary desktop navigation links. |
| link | 16px | 400 | 1.7 | 0.02em | — | Vela Sans Regular | Inline calls to action and supporting content links. |
| code | 9px | 400 | 1.5 | 0.08em | — | Fragment Mono | Compact monospaced labels in the dark side-quest area. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

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

Use a centered, responsive content frame with a measured maximum width of 1088px. The desktop hero is center-aligned, with a large headline, concise supporting line, paired actions, a pill-shaped feature selector, and a wide product preview. Below, alternate spacious full-width content bands with centered headings and contained grids. Cards and pricing panels use comfortable internal spacing; the overall rhythm is open rather than dense. Keep navigation horizontal on desktop and preserve clear separation between feature, social-proof, pricing, integrations, FAQ, and footer areas.

## Shape & elevation

- Radius: button `10px` · card `14px` · media `50%` · badge `9999px` · nav `10px` · link `9999px` · xs `5px` · sm `6px` · md `10px` · lg `12px` · xl `14px` · 2xl `20px` · pill `9999px`
- Shadow `hairline` (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(16, 24, 40, 0.04) 0px 1px 2px 0px`
- 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, rgb(208, 213, 221) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `sm` (button): `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 `md` (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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px `
- Shadow `md-2` (button): `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(16, 24, 40, 0.08) 0px 1px 2px 0px, rgba(16, 24, 40, 0.14) 0`
- Shadow `xl` (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(16, 24, 40, 0.18) 0px 24px 80px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Favor flat surfaces, thin gray outlines, and restrained shadows. Cards are distinguished mainly by rounded corners and a subtle border; product previews sit above the page on pale panels. Reserve stronger visual separation for the dark side-quest card, without adding heavy shadows across ordinary sections.

## Imagery

Product UI screenshots and interface mockups are the primary imagery, shown in broad framed panels that let the workspace itself read clearly. Use the pale yellow wash behind hero media sparingly, and keep logo strips small and orderly. The dark side-quest module is a deliberate contrast, pairing a compact promotional message with a game-like interface preview. Avoid decorative photography that competes with the product.

## Components

### Primary CTA

Warm yellow rounded button with dark label and a small arrow; used for Start for free in navigation, hero, and closing CTA.

### Secondary CTA

Light or transparent button with a fine gray outline and dark text, used for Request a demo beside primary actions.

### Feature selector

Horizontal pale pill containing compact product-area labels; the active Agents item is dark with white text.

### Product preview

Wide workspace screenshot inside a subtly outlined rounded frame, often sitting over a soft warm background wash.

### Use-case cards

Three-column cards with thin outlines, rounded corners, small uppercase context labels, prompt examples, and pale warm footer details.

### Dark side-quest panel

Near-black rounded feature card with a mono badge, cyan detail, concise copy, yellow action button, and embedded game UI.

### FAQ list

Stacked pale rows with short questions and small disclosure chevrons; restrained borders maintain a light touch.

### Measured component styles

- **Primary button** (“Agents”): background #101828 · text #ffffff · radius 3.35544e+07px · padding 8px 16px · 400 16px Vela Sans
- **Secondary button** (“$3”): transparent background · text #1d2939 · border 1px solid #d0d5dd · radius 6px · padding 8px 12px · 400 14px Vela Sans
- **Link** (“Flemming Madsen, Tenderlake”): transparent background · text #1d2939 · radius 0px · padding 0px · 600 12px Vela Sans
- **Card** (“EXAMPLE PROMPT “Turn this approved brief”): background #f9fafb · text #1d2939 · radius 14px · padding 16px · 400 16px Vela Sans
- **Badge** (“A SUPERTHREAD SIDE QUEST”): background #13141d · text #82ebfa · border 1px solid #35394a · radius 3.35544e+07px · padding 6px 12px · 400 11px Fragment Mono · uppercase
- **Navigation item** (“Pricing”): transparent background · text #1d2939 · radius 0px · padding 0px · 500 20px Vela Sans

## Do

- Keep the main canvas white and the overall contrast crisp.
- Use warm yellow for primary actions and selective emphasis.
- Center the hero headline and give it generous breathing room.
- Show product UI prominently in clean, rounded frames.
- Separate content with subtle borders and pale surfaces.
- Use dark panels sparingly for intentional contrast.

## Don't

- Do not use bright yellow as a full-page background.
- Do not crowd the hero with dense copy or extra controls.
- Do not replace product previews with generic lifestyle photography.
- Do not add heavy shadows to ordinary cards.
- Do not overuse cyan or orange outside small UI details.
- Do not make the footer or FAQ visually compete with the hero.

## Agent prompt

Build a new Superthread-style productivity SaaS page with a white Gallery White (#ffffff) canvas, dark Midnight Ink (#101828) headlines, and Slate Ink (#1d2939) supporting text. Use Marigold (#facd4b) sparingly for primary actions and highlights; pale warm surfaces such as Vanilla Haze (#fff5d6) and Butter Glow (#ffe495) can softly frame product imagery. Set a centered, spacious layout with clear section rhythm, rounded cards, fine Soft Divider (#d0d5dd) outlines, and restrained shadows. Lead with a confident centered headline, concise copy, paired CTAs, and a convincing workspace preview. Use product UI rather than decorative photography. Add social proof, feature cards, and a dark side module only where useful. Keep controls simple, typography clean, and secondary copy subdued in Muted Slate (#667085).

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long opening section with a centered hero, product preview, customer logos, agent-use cards, testimonial, pricing, and import logos. | paired primary and secondary CTAs, product-area tab selector, use-case examples, social proof | large centered headline, warm gradient media backdrop, rounded outlined cards, yellow CTA buttons |
| 2 | product-showcase | Feature-category grid arranged around a central product demo, followed by desktop and mobile app links, FAQ, integrations, and a dark feature card. | explore product areas, view app downloads, expand FAQ answers, connect integrations | grid with central video, simple download columns, pale FAQ rows, dark promotional panel |
| 3 | cta | Short, centered closing call-to-action band with a headline, concise reassurance, and two adjacent buttons. | start for free, request a demo | pale background panel, centered copy, primary yellow button, quiet outlined secondary button |
| 4 | footer | Multi-column footer navigation grouped by product, downloads, resources, company, and comparisons, ending with centered brand details. | browse grouped resources, access downloads, visit company links | compact link columns, small brand mark, social icons, muted copyright line |

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