# Svelte · Design system migration spec

> Source: https://svelte.dev  ·  Curated by OpenDesign  ·  en

> This site is a prime example of how to elevate developer tooling with editorial typography and playful, high-quality 3D illustrations.

## 1. Identity DNA

The Svelte design system operates as a refined, open-source developer tool with an editorial soul. It merges the precision of developer documentation with the deliberate clarity of a high-contrast publication, creating a space that is both accessible and elegant.

**One-liner:** A clean, editorial developer documentation site featuring high-contrast typography and playful 3D hero illustrations.
**Keywords:** developer-friendly · accessible · elegant · modern · open-source
**Analogy:** A refined, open-source developer tool with an editorial soul.

## 2. Color

The palette is a high-contrast editorial foundation, built on a clean white canvas with deep charcoal for authority. A single, vibrant orange accent is reserved for primary actions, ensuring focus and clarity without visual competition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F2F2` | card background |
| `--bg-quiet` | `#E5E5E5` | quiet area |
| `--ink` | `#262626` | body text |
| `--ink-soft` | `#808080` | secondary text |
| `--muted` | `#666666` | placeholder |
| `--muted-soft` | `#A0A0A0` | weak hint |
| `--accent` | `#FF3E00` | single accent |
| `--line` | `rgba(235, 235, 235, 1)` | divider |

**Color principle:** High-contrast editorial palette with a single vibrant orange accent against a clean white and gray foundation.

The governing principle is restraint: the accent color punctuates, but never overwhelms the content.

## 3. Typography

Typography establishes a distinct voice, pairing a playful, lowercase serif for display headlines with a humanist sans-serif for body text. This hierarchy creates a warm, confident tone, avoiding the coldness of purely technical interfaces.

- **Display:** didone-serif
- **Body:** humanist-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 54px | 1.2 | 400 | 0px | Main hero headings |
| headline | 22px | 1.5 | 400 | 0px | Section subheadings |
| body | 16px | 1.5 | 400 | 0px | Primary body text |
| mono | 12px | 1.25 | 400 | 0px | Interface labels and code |

## 4. Spacing

A standard 4px grid underpins a rhythmic, spacious layout, with generous vertical padding between sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid with 100px vertical section padding.

## 5. Surfaces

Surfaces are defined by a minimal depth system, relying on flat containers and thin, 1px borders for subtle separation. The approach favors clarity over skeuomorphism, keeping the interface light and focused.

- **Radius:** sm 2px · md 4px · lg 56px · pill 999px
- **Borders:** 1px solid #EBEBEB

## 6. Layout

The layout is a centered, single-column documentation skeleton, optimized for reading flow. Content is contained within a 1280px max-width, creating a spacious and focused column of information.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard centered single-column documentation layout.

## 7. Motion & Interaction

Motion philosophy is one of refinement and subtlety. Transitions are limited to smooth 0.2s adjustments of filters and opacity, providing responsive feedback without distracting from the content.

- **Durations:** micro 200ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Filter and opacity transitions for subtle interactive states.

- **Hover:** Subtle opacity and scale adjustments.
- **Click:** Standard pointer state.
- **Transition:** Smooth 0.2s transitions on filters and opacity.
- **Keyboard:** Native focus states with a prominent ⌘K search shortcut.

## 8. Voice & Don'ts

The editorial voice is welcoming, confident, and educational, using playful serif statements for headlines and direct, uppercase commands for calls-to-action. The system deliberately avoids jargon-heavy or aggressive language.

- **Tone:** Welcoming, confident, and educational.
- **Headline style:** Playful, lowercase serif statements.
- **CTA style:** Direct, uppercase sans-serif commands.
- **Avoid:** Jargon-heavy or aggressive language

### Don'ts
- ❌ Don't use a sans-serif for primary headings — screenshot shows didone-serif for headlines.
- ❌ Don't use rounded corners on cards — screenshot shows sharp 2px or 4px borders.
- ❌ Don't use multiple competing accent colors — screenshot shows only orange.
- ❌ Don't use a dark mode as the default — screenshot shows a white (#FFFFFF) background.
- ❌ Don't use small, tight typography — screenshot shows generous 1.5 line height.
- ❌ Don't use complex box shadows — screenshot shows flat or minimally shadowed surfaces.

This system deliberately does not employ a default dark mode, complex box shadows, or multiple competing accent colors.

## System Prompt (paste into AI tool)

```
This is the Svelte developer documentation site, combining a clean, editorial aesthetic with playful, bold typography. The design relies on a didone-serif display font and a humanist-sans body font over a high-contrast palette of white (#FFFFFF) and dark gray (#262626), with a single vibrant orange accent (#FF3E00). Layout is centered and spacious with 1280px containers. Critical don'ts: Never use a sans-serif for main headlines, always use the orange accent sparingly for primary actions, and maintain generous vertical spacing to preserve the editorial feel.
```
