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

# SST · Design System

> A quiet canvas for cloud infrastructure.

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

SST pairs a restrained, bright canvas with a prominent code preview to introduce its cloud development platform. A compact header and centered two-column hero keep the focus on the product and its developer audience.

## North star

Keep the interface almost white and spacious, using indigo typography and a single softly elevated code example to anchor the page.

## Overview

The visual strategy is deliberately quiet: a white canvas dominates, with pale gray-violet borders and soft near-white code-card tones adding just enough structure. Deep indigo provides the main contrast for navigation, headings, and links, while the hero’s code syntax introduces muted purple, blue, and red accents. These syntax colors belong to the code presentation rather than functioning as broad interface fills. IBM Plex Mono gives the headline and technical content a distinctly developer-oriented voice; Rubik Variable keeps navigation and supporting interface text approachable. The page uses a compact horizontal header above a spacious, centered two-column hero: a softly elevated code sample sits beside a left-aligned message and practical links. A subtle dotted backdrop and faint gradient give the demo dimension without competing with its content. Small customer marks and understated footer links complete the first viewport without adding visual weight.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and primary background behind the navigation and hero. |
| Lavender Hairline | `#e8e8f2` | `--color-lavender-hairline` | neutral | Fine outlines on header controls and subtle dotted or dividing details. |
| Quiet Teal | `#5196b3` | `--color-quiet-teal` | accent | Outlined NEW badge and small navigation detail; use sparingly. |
| Midnight Indigo | `#303055` | `--color-midnight-indigo` | brand | Hero heading, primary navigation, body text, and prominent links. |
| Soft Graphite | `#767682` | `--color-soft-graphite` | neutral | Supporting copy, secondary links, and lower-emphasis interface text. |
| Syntax Violet | `#8844ae` | `--color-syntax-violet` | accent | Code-sample syntax highlighting, not a broad interface fill. |
| Footer Gray | `#a8a8af` | `--color-footer-gray` | neutral | Low-emphasis footer, navigation, and muted supporting text. |
| Syntax Clay | `#984e4d` | `--color-syntax-clay` | accent | Warm code-syntax highlight inside the code preview only. |
| Slate Ink | `#403f53` | `--color-slate-ink` | neutral | Secondary dark syntax and supporting text within the code presentation. |
| Browser Link Blue | `#0000ee` | `--color-browser-link-blue` | semantic | Skip-to-content link; an isolated accessibility or browser-style link color. |
| Syntax Cobalt | `#3b61b0` | `--color-syntax-cobalt` | accent | Blue code-syntax highlighting within the developer example. |
| Code Charcoal | `#111111` | `--color-code-charcoal` | neutral | Dark code tokens and technical text, rather than a page-wide color. |
| Cloud Mist | `#f8f8fb` | `--color-cloud-mist` | surface | Pale lower tone in the subtle code-card gradient. |
| Lilac Haze | `#efeff6` | `--color-lilac-haze` | surface | Light gradient and dotted-detail tone around the code-card presentation. |
| Deep Lagoon | `#096e72` | `--color-deep-lagoon` | accent | A small syntax-color occurrence in technical text, not a prominent brand surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#303055` (Midnight Indigo) · `--color-text-muted` → `#767682` (Soft Graphite) · `--color-text-subtle` → `#a8a8af` (Footer Gray) · `--color-border` → `#e8e8f2` (Lavender Hairline) · `--color-accent` → `#303055` (Midnight Indigo) · `--color-accent-2` → `#8844ae` (Syntax Violet) · `--color-accent-3` → `#984e4d` (Syntax Clay)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#303055` | `#ffffff` | 12.5:1 | AAA |
| `#767682` | `#ffffff` | 4.48:1 | AA-large |
| `#a8a8af` | `#ffffff` | 2.36:1 | fail |
| `#303055` | `#ffffff` | 12.5:1 | AAA |

### Gradients

- `radial-gradient(rgb(232, 232, 242) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(rgb(252, 252, 253) 0%, rgb(252, 252, 253) 40%, rgb(248, 248, 251) 70%, rgb(248, 248, 251) 100%), linear-gradient(rgb(239, 239, 246) 0%, rgb(239, 239, 246) 35%, rgb(229, 229, 240) 65%, rgb(229, 229, 240) 1`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| IBM Plex Mono | `--font-mono` | webfont | 400, 600 | Hero headline and code-oriented content, including body and code roles. | Space Mono |
| Rubik Variable | `--font-display` | webfont | 400, 500, 600 | Navigation, supporting interface text, links, labels, and buttons. | Rubik |

- **IBM Plex Mono:** Use regular and semibold weights; the headline is large, tightly tracked, and sentence case.
- **Rubik Variable:** Use regular to medium weights; uppercase is reserved for small eyebrow and caption labels.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | 1.1 | -0.021em | — | IBM Plex Mono | Large two-line hero headline. |
| h2 | 20px | 400 | 1.5 | 0 | — | Rubik Variable | Supporting hero statement and section-level copy. |
| h3 | 18px | 400 | 1.8 | 0 | — | IBM Plex Mono | Compact technical or code-preview headings. |
| body | 14px | 400 | 1.8 | 0 | — | IBM Plex Mono | Code-oriented explanatory and supporting text. |
| caption | 13px | 400 | 1.8 | 0.038em | uppercase | Rubik Variable | Small uppercase customer and category labels. |
| button | 13px | 400 | normal | 0 | — | Rubik Variable | Compact utility controls in the header. |
| nav | 14px | 500 | normal | 0 | — | Rubik Variable | Header links and compact navigation labels. |
| link | 16px | 400 | normal | 0 | — | Rubik Variable | Hero actions and prominent text links. |
| eyebrow | 13px | 400 | 1.8 | 0.038em | uppercase | Rubik Variable | Small uppercase labels above supporting content. |
| code | 14px | 400 | 1.8 | 0 | — | IBM Plex Mono | Syntax-highlighted infrastructure configuration. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 3, 5, 6, 7, 8, 10, 12, 13, 14, 15, 16, 24, 31, 32, 40 px.
- Section rhythm 72px · element gap 24px · card padding — · max content width 858px.

A slim horizontal navigation spans the top, with the logo left and links plus utility controls aligned right. The hero sits in a centered two-column composition within the measured 858px page width: a code card on the left and a left-aligned message and actions on the right. Generous whitespace separates the header, hero, and viewport edges; content density remains comfortable. Customer marks sit below the hero links, while footer details hug the lower corners. Keep the first screen open rather than filling the canvas with extra sections.

## Shape & elevation

- Radius: button `4px` · card `8px` · badge `4px` · nav `4px` · xs `4px` · sm `8px`
- Shadow `xl` (card): `rgba(199, 199, 199, 0.04) 0px 1px 1.5px 0px, rgba(199, 199, 199, 0.04) 0.1px 5.1px 7.7px 0px, rgba(199, 199, 199, 0.04) 0.1px 8.6px 12.9px 0px, rgba(199, 199, 199, 0.08) 0.1px 12px 18px 0px, rgba(199,`
- Motion: standard transition `0.25s ease` on interactive elements.

The page is mostly flat, with pale hairline borders defining header controls and the code-card edge. The code preview is the main raised layer, using a very soft, diffuse shadow rather than strong contrast. Keep the dotted backdrop and gradient subtle; avoid stacking cards or adding heavy outlines.

## Imagery

There is no photography or video. The principal visual is a framed, syntax-highlighted configuration sample, treated as a product preview rather than decorative illustration. A faint dotted field and restrained gradient sit behind it, with the code card softly separated from the white page. Small, muted customer logos provide a quiet proof point beneath the text.

## Components

### Header navigation

A compact top bar with the SST mark at left and links, community count, AI control, search, and Console control at right.

### Code preview

A softly elevated, rounded configuration card with a small file label and syntax-colored infrastructure code.

### Hero message

A large indigo monospace headline with muted supporting copy, a compact install command, and stacked text links.

### Announcement badge

A small outlined teal NEW badge paired with a brief release note.

### Customer proof

A low-contrast uppercase label followed by a row of small customer logos.

### Footer

Muted copyright text at the lower left and compact utility links with social icons at the lower right.

### Measured component styles

- **Primary button** (“AI”): transparent background · text #1b1b2f · border 1px solid #e8e8f2 · radius 4px · padding 1px 10px · 400 13px Rubik Variable
- **Link** (“What is SST”): transparent background · text #303055 · radius 0px · padding 0px · 400 16px Rubik Variable
- **Card** (“sst.config.ts const db = new planetscale”): transparent background · text #303055 · border 1px solid · radius 8px · padding 0px · 400 14.4px Rubik Variable · shadow rgba(199, 199, 199, 0.04) 0px 1px 1.5px 0px, rgba(199, 199, 199, 0.04) 0.1px 5.1
- **Badge** (“NEW”): transparent background · text #5196b3 · border 1px solid #5196b3 · radius 4px · padding 0px 5px · 500 9px Rubik Variable · uppercase
- **Navigation item** (“SST Blog Docs Examples 25K AI Search Ctr”): transparent background · text #303055 · radius 0px · padding 0px · 400 16px Rubik Variable

## Do

- Use white as the dominant canvas.
- Set the hero headline in IBM Plex Mono.
- Reserve Rubik for navigation and interface controls.
- Make code the primary visual demonstration.
- Keep syntax accents inside technical content.
- Use pale borders and soft elevation.
- Preserve generous whitespace around the hero.

## Don't

- Do not introduce large saturated background bands.
- Do not turn syntax colors into broad UI accents.
- Do not crowd the header with oversized controls.
- Do not use photography as a substitute for the code preview.
- Do not add heavy shadows or thick borders.
- Do not center-align the hero message.

## Agent prompt

Build a new page in SST’s restrained developer-tool style. Use Gallery White (#ffffff) as the dominant canvas, Midnight Indigo (#303055) for the main heading and links, and Lavender Hairline (#e8e8f2) for delicate control borders. Pair IBM Plex Mono for technical emphasis with Rubik for navigation and interface text. Use a slim horizontal header, then a spacious, centered two-column hero with a code-preview card beside left-aligned copy and practical actions. Give the code card subtle elevation and a faint dotted or pale gradient backdrop; keep Syntax Violet (#8844ae), Syntax Cobalt (#3b61b0), and Syntax Clay (#984e4d) confined to code tokens. Maintain generous whitespace, muted supporting copy, a small customer-proof row, and a quiet footer. Avoid large color panels, dense decoration, and heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact top navigation above a centered two-column hero; code preview left, aligned copy and actions right. | Product introduction, Install command, Primary text links, Customer proof | Syntax-highlighted code card, Outlined release badge, Subtle dotted backdrop, Quiet footer |

## Source CSS custom properties (selected)

```css
--sl-color-white: hsl(240, 28%, 14%);
--sl-color-gray-1: hsl(240, 28%, 19%);
--sl-color-gray-2: hsl(240, 28%, 26%);
--sl-color-gray-3: hsl(240, 28%, 39%);
--sl-color-gray-4: hsl(240, 28%, 59%);
--sl-color-gray-5: hsl(240, 28%, 81%);
--sl-color-gray-6: hsl(240, 28%, 93%);
--sl-color-gray-7: hsl(240, 28%, 98%);
--sl-color-black: hsl(255, 100%, 100%);
--sl-color-orange-high: hsl(41, 80%, 25%);
--sl-color-orange: hsl(41, 90%, 60%);
--sl-color-orange-low: hsl(41, 90%, 88%);
--sl-color-green-high: hsl(101, 80%, 22%);
--sl-color-green: hsl(101, 90%, 46%);
--sl-color-green-low: hsl(101, 85%, 90%);
--sl-color-blue-high: hsl(234, 80%, 30%);
--sl-color-blue: hsl(234, 90%, 60%);
--sl-color-blue-low: hsl(234, 88%, 90%);
--sl-color-purple-high: hsl(281, 90%, 30%);
--sl-color-purple: hsl(281, 90%, 60%);
--sl-color-purple-low: hsl(281, 80%, 90%);
--sl-color-red-high: hsl(339, 80%, 30%);
--sl-color-red: hsl(339, 90%, 60%);
--sl-color-red-low: hsl(339, 80%, 90%);
--sl-color-accent-high: hsl(198, 39%, 27%);
--sl-color-accent: hsl(198, 39%, 51%);
--sl-color-accent-low: hsl(198, 39%, 84%);
--sl-color-text-accent: hsl(198, 39%, 51%);
--sl-color-text-invert: hsl(255, 100%, 100%);
--sl-color-bg-nav: hsl(255, 100%, 100%, 80%);
--sl-color-bg-sidebar: hsl(255, 100%, 100%);
--sl-color-bg-inline-code: hsl(240, 28%, 93%);
--sl-color-bg-accent: hsl(198, 39%, 51%);
--sl-color-hairline-light: hsl(240, 28%, 93%);
--sl-color-hairline-shade: hsl(240, 28%, 93%);
--sl-color-backdrop-overlay: hsla(240, 28%, 14%, 3%);
--sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, .06), 0px 2px 1px hsla(0, 0%, 0%, .06);
--sl-font: "Rubik Variable";
--sl-font-mono: "IBM Plex Mono";
--sl-text-code: .9375rem;
```

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