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

# Sublime · Design System

> Quiet white space, bold ideas, and a touch of nature.

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

Sublime presents a personal knowledge tool through an exceptionally spacious, white canvas, oversized black headlines, and restrained controls. Nature-led imagery and understated product previews make the experience feel reflective rather than technical.

## North star

Let whitespace and oversized, confident typography carry the page; keep controls quiet and imagery tactile.

## Overview

The visual system is built around a pure white canvas and generous uninterrupted space. Strong, oversized black headlines create the primary contrast, while warm gray navigation, captions, and supporting copy stay quiet. A compact pale-gray login button and light-green “try now” CTA provide the clearest interface accents; blue appears as a small related-content badge rather than a dominant brand field. Control Upright handles display, navigation, and controls in a clean, even-weight voice, contrasted by Times New Roman body copy. The hero pairs its monumental headline with a tactile, moss-covered rock formation and a small butterfly, bringing organic color and texture without changing the page’s restrained palette. Product examples and video previews sit within the long feature sequence, surrounded by expansive gaps. The overall effect is editorial and contemplative: interface elements remain simple, while scale, imagery, and whitespace create the drama.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas across the hero and all measured sections. |
| Warm Ash | `#a29e9c` | `--color-warm-ash` | neutral | Muted navigation and footer text, including the subdued wordmark treatment. |
| Soft Pumice | `#efefef` | `--color-soft-pumice` | surface | Login control, badges, links, and subtle footer or interface surfaces. |
| Clear Sky | `#00aaff` | `--color-clear-sky` | accent | Small related-content badge text; keep it limited to compact highlights. |
| Quiet Stone | `#908f8e` | `--color-quiet-stone` | neutral | Secondary text, navigation, badges, and login-button lettering. |
| Forest Ink | `#38744d` | `--color-forest-ink` | brand | Text on the pale-green primary CTA; a restrained brand-green signal. |
| Young Leaf | `#cbffa6` | `--color-young-leaf` | accent | Primary “try now” button fill, used sparingly against white. |
| Soft Charcoal | `#181816` | `--color-soft-charcoal` | semantic | Dark section-level text where the measured palette distinguishes it from pure black. |
| Pale Graphite | `#aeaeae` | `--color-pale-graphite` | neutral | Faint supporting text and low-emphasis labels. |
| Headline Black | `#000000` | `--color-headline-black` | semantic | High-impact headings and selected prominent link or navigation text. |
| Reading Gray | `#6a6967` | `--color-reading-gray` | neutral | Secondary link text, including quieter archive-style links. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#efefef` (Soft Pumice) · `--color-text` → `#908f8e` (Quiet Stone) · `--color-text-muted` → `#181816` (Soft Charcoal) · `--color-text-subtle` → `#aeaeae` (Pale Graphite) · `--color-border` → `#efefef` (Soft Pumice) · `--color-accent` → `#00aaff` (Clear Sky) · `--color-accent-2` → `#38744d` (Forest Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#908f8e` | `#ffffff` | 3.23:1 | AA-large |
| `#908f8e` | `#efefef` | 2.81:1 | fail |
| `#181816` | `#ffffff` | 17.78:1 | AAA |
| `#181816` | `#efefef` | 15.46:1 | AAA |
| `#aeaeae` | `#ffffff` | 2.22:1 | fail |
| `#aeaeae` | `#efefef` | 1.93:1 | fail |
| `#00aaff` | `#ffffff` | 2.56:1 | fail |
| `#00aaff` | `#efefef` | 2.23:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Control Upright | `--font-display` | webfont | 400 | Display headings, navigation, labels, buttons, and links. | Inter |
| Times New Roman | `--font-body` | system | 400 | Body copy and explanatory text. | Libre Baskerville |

- **Control Upright:** Measured at regular weight; large headlines are tightly composed, while controls and navigation use a clean, unembellished case.
- **Times New Roman:** Regular serif body text adds an editorial counterpoint to the sans-serif interface and headings.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 400 | 0.9 | 0 | — | Control Upright | Oversized hero display headline. |
| h1 | 64px | 400 | 0.9 | 0 | — | Control Upright | Major feature and section headlines. |
| h2 | 28px | 400 | 1 | 0 | — | Control Upright | Secondary feature titles. |
| h3 | 24px | 400 | 1 | -0.014em | — | Control Upright | Subheads and supporting feature labels. |
| body | 16px | 400 | 1.2 | 0 | — | Times New Roman | Editorial-style explanatory paragraphs. |
| caption | 14px | 400 | 1 | 0 | — | Control Upright | Small media captions and metadata. |
| button | 14px | 400 | 1 | 0 | — | Control Upright | Compact CTA and login button labels. |
| nav | 16px | 400 | 1.13 | 0 | — | Control Upright | Header navigation and footer navigation. |
| link | 16px | 400 | 1.13 | 0 | — | Control Upright | Inline and standalone text links. |

OpenType features in use: `"ss12"`, `"ss09"`.

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 3, 8, 10, 13, 15, 18, 20, 25, 30, 35, 60, 70, 90, 100, 160 px.
- Section rhythm 160px · element gap 15px · card padding — · max content width —.

The page is a vertically sequenced, mostly single-column story with a centered hero and long gaps between feature chapters. Feature areas alternate between centered content, multi-column capture examples, and two-column product explanations. Keep the content visually narrow relative to the viewport, but allow the hero artwork to stretch wide. Sections use generous separation rather than colored bands; headings commonly center, while the footer shifts to aligned columns. The measured data provides no fixed maximum width.

## Shape & elevation

- Radius: button `5px` · media `5px` · badge `9999px` · nav `5px` · link `20px` · xs `5px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page reads as largely flat: measured shadows are absent and section backgrounds remain white. Use fine pale-gray boundaries or fills only for quiet controls, badges, and product-preview surfaces. Layer imagery and product examples through composition and whitespace rather than elevated cards; reserve rounded treatments for small controls, pills, and selected links.

## Imagery

Lead with the distinctive, photoreal nature image: a low, wide mossy rock formation with tiny flowers, paired with a small butterfly. Use product screenshots, saved-content fragments, and embedded video previews as supporting evidence in later feature sections. Keep imagery cleanly framed against white or pale-gray surfaces, without decorative illustration systems or heavy overlays; natural texture should contrast with the sparse interface.

## Components

### Header

Small wordmark at left; restrained navigation at right with a pale-gray login control and pale-green primary CTA.

### Primary CTA

“try now” label in Control Upright, regular weight, Forest Ink text on Young Leaf fill, with a subtle measured corner radius.

### Login control

Compact Soft Pumice button with Quiet Stone label and restrained rounded corners.

### Related badge

Small pill-shaped blue label for related items, using Clear Sky text on a pale-blue surface.

### Feature chapter

Centered headline and concise supporting copy, followed by product imagery or capture examples with spacious separation.

### Product preview

Screenshot, media, or saved-content sample placed directly in the white narrative flow; avoid heavy card framing.

### Footer

Pale-gray rounded panel with wordmark, login and CTA controls, and several compact link columns.

### Measured component styles

- **Primary button** (“try now”): background #cbffa6 · text #38744d · radius 5px · padding 0px 17.5px · 400 14px Control Upright
- **Secondary button** (“login”): background #efefef · text #908f8e · radius 5px · padding 0px 17.5px · 400 14px Control Upright
- **Link** (“try sublime”): background #efefef · text #000000 · radius 20px · padding 30px 70px 35px 70px · 400 18px Control Upright
- **Badge** (“related”): background #e5f6ff · text #00aaff · radius 999px · padding 0px · 400 12px Control Upright
- **Navigation item** (“iOS app”): transparent background · text #a29e9c · radius 0px · padding 0px · 400 16px Control Upright

## Do

- Use white as the uninterrupted default canvas.
- Set major headlines large, black, and visually dominant.
- Preserve generous blank space between story chapters.
- Use Young Leaf for the primary CTA and Forest Ink for its label.
- Keep navigation and secondary copy warm and low contrast.
- Use natural, tactile imagery as a deliberate contrast to the clean interface.

## Don't

- Do not introduce colored section bands without evidence.
- Do not turn every feature into a bordered card.
- Do not make blue a dominant page color.
- Do not crowd the hero artwork or its headline.
- Do not add heavy shadows or glossy effects.
- Do not replace the quiet product story with dense feature lists.

## Agent prompt

Build a new Sublime-style productivity page as a spacious editorial narrative on Gallery White (#ffffff). Use Control Upright or a close sans-serif for navigation, controls, and large regular-weight headlines; use a restrained serif for body copy. Make black (#000000) headline typography the main contrast, with Warm Ash (#a29e9c) or Quiet Stone (#908f8e) for low-emphasis interface text. Keep the header compact and place a Young Leaf (#cbffa6) CTA with Forest Ink (#38744d) lettering beside a Soft Pumice (#efefef) login control. Favor centered chapter headings, wide tactile nature imagery, and clean product previews separated by substantial whitespace. Use Clear Sky (#00aaff) only for small badges. Avoid heavy cards, colored bands, shadows, and dense layouts; let scale, natural texture, and empty space establish the identity.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered oversized headline above wide nature image; compact navigation at the top. | Primary try-now CTA, Prominent brand introduction | Black display headline, Wide tactile nature image, Pale-green CTA |
| 2 | other | Single-column white section with sparse centered messaging. | Audience framing | Minimal text, Extensive whitespace |
| 3 | feature-grid | Centered heading with a multi-column set of capture examples and media. | Capture from multiple sources, Examples of saved formats | Image-led examples, Small format labels |
| 4 | recommendations | Centered feature introduction with related-item previews in a spacious flow. | Discover related ideas, Try-now link | Blue related badges, Product previews |
| 5 | feature-split | Centered heading above a two-column feature and search demonstration. | Search by remembered context, Try-now link | Search-field preview, Sparse two-column arrangement |
| 6 | feature-split | Centered heading with two-column product examples and supporting copy. | Connect to creative tools, Use an infinite canvas | Product screenshots, Quiet explanatory text |
| 7 | product-showcase | Centered product story with library previews and supporting examples. | Keep collections private or share them, Browse public libraries | Library previews, Compact category labels |
| 8 | testimonials | Centered testimonial-led section with video and a CTA. | Social proof, Watch a user story | Embedded video preview, Centered headline, Primary CTA |
| 9 | cta | Single centered call-to-action with generous surrounding space. | Try Sublime | Large quiet link treatment |
| 10 | other | Short centered closing statement before the footer. | Set pricing expectation | Small supporting text, White background |
| 11 | footer | Three aligned link columns within a broad pale-gray rounded panel. | Browse product and company links, Access login and CTA | Compact navigation columns, Wordmark, Pale-gray panel |

## Source CSS custom properties (selected)

```css
--color-light: #fafbfc;
--color-white: #fff;
--color-black: #000;
--color-silver-load: #e6ebf2;
--color-silver-field: #eef1f5;
--color-silver-active: #e3e6eb;
--color-silver-icon: #afb4bc;
--color-silver-font: #858c97;
--color-green-1: #38744d;
--color-green-2: #cbffa6;
--color-green-wash: #e5fbd4;
--color-green-wash-strong: #d9f7c3;
--color-ribbon-selected: #b3e98b;
--shadow-ribbon-parent: 3px 0 5px -2px #00000080;
--color-green-2-hover: #c5f8a0;
--color-green-2-hover-strong: #bbee96;
--color-blue-light: #00aaff1a;
--color-pink-light: #ffecff;
--color-red-light: #ff193f1a;
--color-brown-warning: #8b5000;
--color-yellow-warning-bg: #fff4e6;
--color-charcoal: #5a5a5a;
--color-silver: #c6c6c6;
--color-silver-warm: #c4c2c1;
--color-stone-warm: #8a817d;
--color-silver-light: #e1e1e1;
--color-silver-cloud: #f8f8f8;
--color-silver-ore: #959595;
--color-silver-light-cloud: #a7a7a7;
--color-silver-lighter: #eaeaea;
--color-silver-dark-cloud: #adacab;
--color-silver-lighter-cloud: #e5e5e5;
--color-silver-lighter-mist: #c9c9c8;
--color-silver-mist-hover: #e8e8e8;
--color-silver-mid-cloud: #dbdbdb;
--color-silver-frost: #f5f5f5;
--color-stone-1: #181816;
--color-stone-2: #41403e;
--color-stone-3: #6a6967;
--color-stone-4: #908f8e;
```

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