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

# Svelte · Design System

> Editorial clarity with a vivid developer-tool edge

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

Svelte pairs a quiet, editorial canvas with expressive serif headlines and a vivid orange-red identity. A cinematic 3D hero and generous whitespace make the developer framework feel approachable without losing its technical focus.

## North star

Let editorial serif typography and generous white space frame technical content, using Svelte orange-red only as a precise navigational signal.

## Overview

The page is built on a near-white canvas, with charcoal copy and a restrained orange-red accent reserved for the Svelte mark, links, calls to action, and the persistent announcement strip. The hero headline uses a large display serif, giving the framework a confident editorial voice; Georgia carries the longer explanatory text, while Fira Sans keeps navigation and controls compact and functional. The opening composition balances text on the left with a wide, cinematic 3D conveyor illustration on the right and across the hero. Below, content sections remain centered and sparse: a definition and product image, a muted company-logo row, a video, and a community collage. Broad vertical pauses separate these blocks. Borders are pale and thin, controls have restrained rounding, and the overall page stays mostly flat; depth comes primarily from layered media rather than interface shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Svelte Vermilion | `#d43008` | `--color-svelte-vermilion` | brand | Brand mark, inline links, small calls to action, and the bright announcement banner. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the clean background behind most content sections. |
| Charcoal Ink | `#262626` | `--color-charcoal-ink` | neutral | Primary body copy, navigation labels, and default interface text. |
| Burnt Ember | `#ac2706` | `--color-burnt-ember` | accent | Deeper red-orange button border detail; use for control emphasis, not large areas. |
| Coral Flare | `#f8603a` | `--color-coral-flare` | accent | Lighter orange-red button border accent; also appears in vivid Svelte artwork. |
| Soft Rule | `#ebebeb` | `--color-soft-rule` | semantic | Fine separators and understated borders around controls. |
| Mist Surface | `#f2f2f2` | `--color-mist-surface` | surface | Subtle input and navigation control backgrounds and quiet button details. |
| Near Black | `#141414` | `--color-near-black` | neutral | Dark heading text, especially where strong contrast is needed. |
| Muted Graphite | `#666666` | `--color-muted-graphite` | neutral | Secondary navigation and low-emphasis supporting text or links. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#262626` (Charcoal Ink) · `--color-text-muted` → `#141414` (Near Black) · `--color-border` → `#ebebeb` (Soft Rule) · `--color-accent` → `#d43008` (Svelte Vermilion)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#262626` | `#ffffff` | 15.13:1 | AAA |
| `#141414` | `#ffffff` | 18.42:1 | AAA |
| `#d43008` | `#ffffff` | 4.97:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Georgia | `--font-body` | system | 400 | Long-form body copy, small captions, and small inline links. | Lora |
| Fira Sans | `--font-fira-sans` | webfont | 400 | Navigation and compact interface controls. | Roboto |
| DM Serif Display | `--font-display` | webfont | 500 | Large hero headline and prominent editorial headings. | Bodoni Moda |

- **Georgia:** Regular serif with readable, book-like texture; keep tracking neutral and preserve sentence case.
- **Fira Sans:** Use a clean, regular sans-serif for functional labels; keep casing natural and tracking neutral.
- **DM Serif Display:** Display serif at a measured medium weight; use natural sentence case and untracked lettering.

### Type scale — Custom (ratio ≈ 3, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 500 | 1.2 | 0 | — | DM Serif Display | Large two-line hero headline introducing Svelte. |
| body | 18px | 400 | 1.5 | 0 | — | Georgia | Explanatory framework copy and editorial section text. |
| caption | 10px | 400 | 1.5 | 0 | — | Georgia | Compact image credits and supporting labels. |
| nav | 16px | 400 | 1 | 0 | — | Fira Sans | Top navigation items and interface navigation. |
| link | 10px | 400 | 1.5 | 0 | — | Georgia | Small inline links, credits, and secondary calls to action. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 3, 5, 7, 8, 10, 14, 40, 48, 100 px.
- Section rhythm 100px · element gap 10px · card padding — · max content width 1104px.

A spacious, centered desktop composition uses a measured page maximum width of 1104px. The header forms a single compact horizontal row; the hero aligns its large headline and CTA to the left while full-bleed media expands across the page. Lower sections alternate centered text, media, logo strips, and collage imagery rather than a dense card grid. The measured section gap is 100px, with a spacious density and 10px element gap. Keep heading alignment predominantly start-aligned in the hero, with later community and proof sections centered.

## Shape & elevation

- Radius: button `4px` · input `9999px` · media `4px` · nav `2px` · link `50%` · xs `2px` · sm `4px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat, with no measured shadow system. Thin pale borders distinguish controls from the canvas, while small-radius buttons and media frames keep edges restrained. Let the hero artwork, video, and layered product imagery create depth; avoid adding floating cards or heavy drop shadows.

## Imagery

The hero is defined by a wide 3D Svelte-branded conveyor scene, with cool pale surroundings and vivid orange-red hardware; these image colors are illustration content, not additional interface palette. Further down, a documentary video, product-screen imagery, company marks, and a community photo collage supply proof and personality. Keep media broad, carefully framed, and embedded in open white space.

## Components

### Header navigation

Compact white horizontal bar with the Svelte identity, Fira Sans navigation, search field, and small utility icons; labels use charcoal text.

### Hero

Large DM Serif Display headline and orange-red GET STARTED link sit to the left of a wide Svelte 3D conveyor illustration.

### Announcement strip

Bright orange-red banner spans the viewport near the lower edge, with centered event text, an arrow, and a close control.

### Definition and product media

Georgia explanatory copy pairs with a Svelte wordmark-like phonetic heading and overlapping product-screen imagery.

### Company proof

Centered serif heading is supported by a subdued horizontal row of recognizable company logos.

### Community and video

Wide documentary video and a broad community photo collage provide human proof, separated by generous white space.

### Measured component styles

- **Primary button**: transparent background · text #262626 · border 1px solid #f2f2f2 · radius 4px · padding 0px · 400 10px Fira Sans
- **Link** (“Rich-Harris”): transparent background · text #d43008 · radius 50% · padding 0px · 400 10px Georgia
- **Input**: background #f2f2f2 · text #000000 · radius 56px · padding 7px 7px 5.6px 28px · 400 14px Fira Sans
- **Navigation item** (“Svelte”): transparent background · text #262626 · radius 2px · padding 10px · 400 16px Fira Sans

## Do

- Use white as the dominant page canvas.
- Reserve Svelte Vermilion for links, identity, and key announcements.
- Set prominent headings in a confident display serif.
- Keep navigation and controls compact and sans-serif.
- Give major content blocks generous vertical breathing room.
- Use wide media to create visual impact instead of decorative cards.

## Don't

- Do not turn the page into a dense dashboard layout.
- Do not use the accent red as a broad page background outside announcement-style emphasis.
- Do not add heavy shadows or excessive card borders.
- Do not replace the editorial serif voice with generic bold sans-serif headings.
- Do not treat colors inside the 3D illustration as core interface colors.
- Do not crowd the hero with extra labels or decorative UI.

## Agent prompt

Build a new Svelte-style developer page with a quiet white canvas (#ffffff), charcoal interface text (#262626), and carefully rationed Svelte Vermilion (#d43008) for links, calls to action, and brand moments. Lead with a large DM Serif Display-style headline, supported by Georgia-like readable prose; use Fira Sans-like typography for navigation and controls. Keep the header compact and horizontal. Give the hero an editorial text column beside a broad, distinctive technical illustration or product image, then separate subsequent content with generous whitespace. Use pale borders (#ebebeb), subtle control surfaces (#f2f2f2), and restrained corner rounding. Keep the page mostly flat and let imagery provide depth. Avoid dense cards, loud gradients, and decorative use of accent color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact top navigation above a wide hero; left-aligned headline and CTA balance expansive full-bleed 3D media. | primary navigation, search shortcut, hero CTA, dismissible announcement | serif headline, 3D hero illustration, orange-red banner, white canvas |

## Source CSS custom properties (selected)

```css
--color: #ff000045;
--sk-fg-1: #141414;
--sk-fg-2: #262626;
--sk-fg-3: #666;
--sk-fg-4: gray;
--sk-fg-accent: #d43008;
--sk-bg-1: #fff;
--sk-bg-2: #fdfdfd;
--sk-bg-3: #fafafa;
--sk-bg-4: #f2f2f2;
--sk-bg-accent: #d43008;
--sk-bg-selection: #42b4ff4d;
--sk-bg-unfocused-selection: #71aad033;
--sk-bg-highlight: #ff9;
--sk-border: #ebebeb;
--shiki-color-text: #262626;
--twp-text: #262626;
--sk-shadow: drop-shadow(0px 0px 14px #0000001a);
--sk-bg-hue: 220;
--sk-bg-0: hsl(var(--sk-bg-hue), 8%, 10%);
--sk-secondary-nav-height: 6rem;
--sk-thick-border-width: .3rem;
--sk-border-radius: .4rem;
--sk-border-radius-inner: .2rem;
--sk-font-family-ui: "Fira Sans", -apple-system, sans-serif;
--sk-font-family-body: Georgia, serif;
--sk-font-family-heading: "DM Serif Display", Georgia, serif;
--sk-font-family-mono: "Fira Mono", monospace;
--sk-font-size-h1: 5.4rem;
--sk-font-size-h2: 3rem;
--sk-font-size-h3: 2.4rem;
--sk-font-size-body: 1.8rem;
--sk-font-size-body-small: 1.6rem;
--sk-font-size-ui-small: 1.3rem;
--sk-font-size-ui-medium: 1.6rem;
--sk-font-size-ui-large: 3rem;
--sk-font-size-mono: 1.4rem;
--sk-font-h1: 500 5.4rem / 1.2 "DM Serif Display", Georgia, serif;
--sk-font-h2: 500 3rem / 1.2 "DM Serif Display", Georgia, serif;
--sk-font-h3: 500 2.4rem / 1.2 "DM Serif Display", Georgia, serif;
```

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