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

# Subframe · Design System

> A quiet canvas for design and code

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

Subframe presents a design-and-development product through a restrained, near-white interface and large floating product previews. Oversized typography and concise copy give way to long, carefully spaced demonstrations of the canvas, browser, and coding agent.

## North star

Keep the page almost entirely quiet and near-white, letting oversized type and floating product interfaces provide the structure.

## Overview

The page is built on a near-white #f9f9f9 canvas, with a mostly monochrome palette that keeps attention on the product previews rather than decorative branding. Headlines are black and oversized, using tightly tracked display typography; supporting copy is smaller, gray, and easy to scan. The opening composition centers three tilted interface previews above a two-line headline, with restrained navigation at the top and a soft gray pill-shaped primary download action below. After the hero, the page relies on generous vertical pauses and alternating text-and-product demonstrations instead of strong colored section bands. Product imagery shows interface screens inside thin, rounded device or application frames, often floating against the open background. Light gray surfaces distinguish controls and mock interface areas, while fine outlines and subtle shadows create depth without making the page feel card-heavy. A small blue accent appears in measured data but does not define the visible brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#f9f9f9` | `--color-gallery-white` | brand | Primary page canvas across the hero and feature sections; preserves generous visual breathing room. |
| Soft Ink | `#232323` | `--color-soft-ink` | neutral | Core dark text and occasional interface outlines against the pale canvas. |
| Graphite Type | `#2b2b2f` | `--color-graphite-type` | neutral | Dark text detected largely in interface and mockup content; secondary to the page's black headline treatment. |
| Quiet Gray | `#707070` | `--color-quiet-gray` | neutral | Muted explanatory copy, such as the hero description and small supporting labels. |
| Mist Surface | `#f0f0f0` | `--color-mist-surface` | surface | Pale panel and card surface within the otherwise continuous light page. |
| Pure Surface | `#ffffff` | `--color-pure-surface` | surface | Bright interface panels and small badges, including white areas within product mockups. |
| Warm Stone | `#d9d8d3` | `--color-warm-stone` | surface | Warm neutral surface and the beginning of a measured beige gradient, mainly inside product visuals. |
| Signal Blue | `#0096ff` | `--color-signal-blue` | accent | Sparse measured interface border or indicator; not a dominant page-level brand color. |
| Near Black | `#0a0a0a` | `--color-near-black` | neutral | Deep navigation and heading text, including high-contrast labels. |
| Linen Gray | `#cbc6bc` | `--color-linen-gray` | surface | Warm gradient tone seen in decorative or product-visual areas, not a defining page background. |
| Parchment | `#e7e2d8` | `--color-parchment` | surface | Light warm gradient stop appearing in measured visuals rather than primary interface chrome. |
| Sandstone | `#e2dbce` | `--color-sandstone` | surface | Muted warm gradient stop used within visual or mockup imagery. |
| Mid Gray | `#6b6b6b` | `--color-mid-gray` | neutral | Occasional subdued text, usually secondary interface or mockup copy. |
| Silver Gray | `#9e9e9c` | `--color-silver-gray` | neutral | Low-emphasis text and fine details within the page or its interface previews. |
| Pale Divider | `#e6e6e6` | `--color-pale-divider` | surface | Subtle light interface detail, link or card surface; use sparingly for separation. |
| Muted Silver | `#a6a6a6` | `--color-muted-silver` | neutral | Low-contrast navigation and supporting text details, particularly in interface-like content. |

### Semantic aliases

`--color-canvas` → `#f9f9f9` (Gallery White) · `--color-surface` → `#f0f0f0` (Mist Surface) · `--color-surface-2` → `#ffffff` (Pure Surface) · `--color-surface-3` → `#d9d8d3` (Warm Stone) · `--color-text` → `#232323` (Soft Ink) · `--color-text-muted` → `#707070` (Quiet Gray) · `--color-text-subtle` → `#0a0a0a` (Near Black) · `--color-border` → `#0096ff` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#232323` | `#f9f9f9` | 14.93:1 | AAA |
| `#232323` | `#f0f0f0` | 13.79:1 | AAA |
| `#232323` | `#ffffff` | 15.72:1 | AAA |
| `#232323` | `#d9d8d3` | 11.01:1 | AAA |
| `#707070` | `#f9f9f9` | 4.7:1 | AA |
| `#707070` | `#f0f0f0` | 4.35:1 | AA-large |
| `#707070` | `#ffffff` | 4.95:1 | AA |
| `#707070` | `#d9d8d3` | 3.47:1 | AA-large |
| `#0a0a0a` | `#f9f9f9` | 18.8:1 | AAA |
| `#0a0a0a` | `#f0f0f0` | 17.37:1 | AAA |

### Gradients

- `linear-gradient(rgb(217, 216, 211), rgb(231, 226, 216) 38%, rgb(226, 219, 206) 68%, rgb(203, 198, 188))`
- `linear-gradient(to top, oklab(0 0 0 / 0.6) 0px, oklab(0 0 0 / 0.25) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgb(231, 226, 216), rgb(226, 219, 206))`
- `linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.07))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 300, 600 | Main interface typography for navigation, body copy, captions, and measured heading styles. | Inter |
| PP Neue Montreal 3 | `--font-display` | webfont | 500, 400 | Display headlines and prominent promotional or action text. | DM Sans |
| Fragment Mono | `--font-mono` | webfont | 500 | Small monospaced interface labels and technical tags inside product visuals. | IBM Plex Mono |

- **Inter:** Use clean sans-serif forms with restrained weights; large heading styles can be light and tightly tracked.
- **PP Neue Montreal 3:** Use medium-weight display text with close tracking; reserve the strongest scale for the hero.
- **Fragment Mono:** Use sparingly for compact technical labels; retain a quiet, functional appearance.

### Type scale — Augmented Fourth (ratio ≈ 1.425, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 500 | 1 | -0.035em | — | PP Neue Montreal 3 | Oversized hero headline and major promotional statements. |
| h1 | 64px | 300 | 1.34 | -0.065em | — | Inter | Large section headline introducing a product capability. |
| h2 | 28px | 500 | 1.29 | -0.002em | — | PP Neue Montreal 3 | Feature headings and prominent explanatory titles. |
| h3 | 24px | 400 | 1.33 | -0.002em | — | PP Neue Montreal 3 | Secondary capability titles within feature content. |
| h4 | 22px | 400 | 1.45 | -0.035em | — | Inter | Supporting product or section headlines. |
| body | 15px | 400 | 1.33 | 0 | — | Inter | Descriptions, explanatory paragraphs, and interface copy. |
| caption | 12px | 500 | 1.33 | -0.005em | — | Inter | Small navigation labels, annotations, and compact interface details. |

## Spacing & layout

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

Use a centered, compact content frame, with measured page max width of 1024px. The first viewport is a centered hero with understated top navigation, product previews above the headline, and a paired action row below. Later sections remain on the same pale canvas and alternate left-aligned section introductions with broad product demonstrations. The underlying content uses two- to four-column arrangements where appropriate, but the overall impression is sparse: large vertical pauses separate blocks, and short copy sits close to its associated visual.

## Shape & elevation

- Radius: card `12px` · badge `4px` · nav `9999px` · link `9999px` · xs `1px` · sm `2px` · md `4px` · lg `6px` · xl `8px` · 2xl `10px` · pill `9999px`
- Shadow `inset` (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.04) 0px 0px 0px 1px inset`
- Shadow `md` (badge, 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.04) 0px 2px 8px -2px, rgba(0, 0, 0, 0.04) 0px 1p`
- Shadow `inset-2` (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.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.06) 0`
- 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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 4px 0px`
- Shadow `inset-3` (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(255, 255, 255, 0.4) 0px -2px 5px 0px inset, rgb(216, 0, 0) `
- Shadow `inset-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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.4) 0px -2px 5px 0px inset, rgba(171, 0, 0,`
- Motion: standard transition `0.15s cubic-bezier(0.165, 0.84, 0.44, 1)` on interactive elements.

The page itself is largely flat, with separation created by whitespace rather than shadows or borders. Product frames use fine outlines and light inset or low shadows to suggest application windows. Pale control surfaces and rounded actions provide modest depth; keep card elevation subtle and avoid heavy, dark drop shadows.

## Imagery

Prioritize interface mockups over lifestyle photography. Show crisp screenshots or product canvases inside lightly outlined, rounded browser or device frames, sometimes with a slight floating or tilted presentation in the hero. Keep the surrounding background near-white and preserve legible interface detail. Warm gray-beige areas belong to the screens or visual mockups; avoid treating them as full-page color bands.

## Components

### Top navigation

Place the Subframe wordmark at the upper left and compact text links such as Log in and Download at the upper right, with no strong filled navigation bar.

### Hero preview cluster

Float three small, slightly angled product interface previews above the centered headline; use thin frames and quiet neutral screen content.

### Hero headline and copy

Set the main promise in very large, tightly tracked dark type over two lines, followed by centered gray explanatory copy.

### Download action

Use a soft light-gray, fully rounded Download for macOS pill with dark text; pair it with a quieter text link to open the web app.

### Feature introduction

Use a left-aligned capability label and concise heading or paragraph, with the product demo following after a noticeable vertical pause.

### Product showcase frame

Present canvas, browser, or agent screenshots in rounded application-like frames; keep surrounding layout open and avoid decorative page chrome.

### Technical badge

Use small white, lightly rounded labels or compact monospaced tags within product previews, not as prominent page-level decoration.

### Measured component styles

- **Primary button** (“localhost:3000”): transparent background · text #000000 · radius 0px · padding 0px 28px 0px 12px · 500 11px Inter
- **Link** (“Download for macOS”): background #eaeaea · text #000000 · radius 9999px · padding 0px 32px · 500 20px PP Neue Montreal 3
- **Card** (“Layers Home Launch Header Brand Menu Her”): background #f8f8f8 · text #000000 · radius 12px · padding 4px 8px · 500 12px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“Vertical”): background #ffffff · text #000000 · radius 4px · padding 0px 8px · 500 12px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Log in Download”): transparent background · text #000000 · radius 0px · padding 0px · 500 12px Inter

## Do

- Keep the overall page canvas near-white.
- Give the hero headline the strongest typographic emphasis.
- Use generous vertical pauses between product demonstrations.
- Frame product previews with fine, quiet outlines.
- Use gray copy for supporting explanations.
- Keep primary actions rounded and softly surfaced.

## Don't

- Do not introduce saturated page-wide color bands.
- Do not turn warm mockup gradients into the brand background.
- Do not crowd the hero with extra copy or controls.
- Do not use heavy shadows to separate every panel.
- Do not make feature sections feel like a dense dashboard.
- Do not use the measured blue as a dominant CTA color.

## Agent prompt

Build a new Subframe-style page on a continuous #f9f9f9 Gallery White canvas. Use near-black #0a0a0a or Soft Ink #232323 for headlines and navigation, and Quiet Gray #707070 for supporting copy. Set the main display message in a large, tightly tracked sans serif, then pair concise copy with floating product-interface previews. Favor open space, centered hero alignment, and alternating feature introductions with wide framed demonstrations. Use #f0f0f0 Mist Surface or #ffffff Pure Surface for restrained controls and mockup panels; reserve #d9d8d3 Warm Stone and related beige tones for screen imagery, not page bands. Make the macOS action a soft gray rounded pill with dark text. Keep outlines and shadows delicate, and use Fragment Mono-like labels only inside technical UI details.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero beneath minimal top navigation; floating interface previews, large headline, brief copy, and two actions. | download CTA, open web app, product preview | oversized centered headline, tilted interface mockups, soft pill action |
| 2 | cta | Centered single-column statement and download link on the uninterrupted pale canvas. | macOS download | centered copy, rounded primary link |
| 3 | feature-split | Compact left-aligned capability heading introduces the following product demonstration. | feature introduction | small section label, left-aligned heading |
| 4 | product-showcase | Large product interface beside a narrow companion screen in a two-column demonstration. | inspect product canvas | framed application preview, paired screen mockups |
| 5 | feature-grid | Multi-column feature content combining a broad canvas demonstration, supporting copy, and compact interface details. | drag and drop, inspect layers | multi-column layout, interface mockups, compact labels |
| 6 | feature-split | Left-aligned section introduction with product imagery following in the next block. | preview live app | section label, short capability headline |
| 7 | product-showcase | Several interface previews arranged across a broad, light product demonstration. | inspect browser tabs, edit live | browser-frame mockups, multi-panel composition |
| 8 | feature-split | Two-column content combines a product preview with explanatory copy and supporting workflow details. | open websites, iterate visually | paired text and interface, spacious feature layout |
| 9 | feature-split | Left-aligned capability introduction before the agent demonstration. | coding agent introduction | plain heading, compact section label |
| 10 | product-showcase | Three-column product demonstration with agent and browser interface previews. | inspect agent workflow, view product context | multiple framed previews, light interface panels |
| 11 | feature-grid | Dense multi-column feature content with workflow examples and compact product interface visuals. | work with Claude Code, work with Codex, implement changes | multi-column layout, task-oriented interface examples |

## Source CSS custom properties (selected)

```css
--tw-shadow: 0 0 #0000;
--text-web-display-1: 96px;
--text-web-display-1--line-height: 96px;
--text-web-display-1-emphasis: 96px;
--text-web-display-1-emphasis--line-height: 96px;
--text-web-display-2: 88px;
--text-web-display-2--line-height: 88px;
--text-web-display-3: 80px;
--text-web-display-3--line-height: 80px;
--text-web-heading-1: 64px;
--text-web-heading-1--line-height: 64px;
--text-web-heading-2: 48px;
--text-web-heading-2--line-height: 52px;
--text-web-heading-3: 40px;
--text-web-heading-3--line-height: 44px;
--text-web-heading-3-emphasis: 40px;
--text-web-heading-3-emphasis--line-height: 44px;
--text-web-heading-4: 28px;
--text-web-heading-4--line-height: 32px;
--text-web-heading-5: 24px;
--text-web-heading-5--line-height: 28px;
--text-web-heading-5-emphasis: 24px;
--text-web-heading-5-emphasis--line-height: 28px;
--text-web-body-1: 28px;
--text-web-body-1--line-height: 36px;
--text-web-body-1-emphasis: 28px;
--text-web-body-1-emphasis--line-height: 36px;
--text-web-body-2: 24px;
--text-web-body-2--line-height: 32px;
--text-web-body-2-emphasis: 24px;
--text-web-body-2-emphasis--line-height: 32px;
--text-web-body-3: 20px;
--text-web-body-3--line-height: 28px;
--text-web-body-3-emphasis: 20px;
--text-web-body-3-emphasis--line-height: 28px;
--text-web-body-3-paragraph: 20px;
--text-web-body-3-paragraph--line-height: 30px;
--text-web-body-4: 18px;
--text-web-body-4--line-height: 24px;
--text-web-body-4-emphasis: 18px;
```

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