---
version: alpha
name: Svelte
description: "Warm editorial confidence — DM Serif Display headlines, Fira Sans UI, and a single searing orange accent (`#ff3e00`) against a clean white canvas that makes the framework feel crafted, not corporate."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f2f2f2"           # raised button fill, hover tint, input background
  surface-elevated: "#ebebeb"  # hover/active state for raised interactive elements

  # Ink / text
  ink: "#262626"               # primary text — dark charcoal, count 161 in extraction
  ink-secondary: "#666666"     # secondary/muted text, subdued links
  ink-muted: "#808080"         # placeholders, faint metadata

  # Brand accent — the signature Svelte orange
  primary: "#ff3e00"           # brand orange (manifest theme_color)
  primary-dark: "#d43008"      # --sk-bg-accent, CSS var; richer/darker orange for inline links and UI accents
  on-primary: "#ffffff"        # white text on orange

  # Semantic
  error: "#d43008"             # darker orange doubles as error/destructive tone

  # Interactive
  focus-ring: "#d43008"        # --sk-fg-accent (orange focus ring from extraction)
  surface-hover: "#f2f2f2"     # nav link hover background
  surface-active: "#dbdbdb"    # pressed/active state

  # Selection highlight
  bg-selection: "#c4e4ff"      # was #42b4ff4d (30% alpha blue) — flattened over white

  # Borders
  border: "#ebebeb"            # hairline card/input borders; --sk-raised-color edges
  border-medium: "#dbdbdb"     # --sk-raised-active-color; visible dividers

  # Shadow tints
  shadow-soft: "#d9d9d9"       # subtle drop under raised elements

typography:
  display-hero:
    fontFamily: "'DM Serif Display', Georgia, 'Times New Roman', serif"
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.5px
  display:
    fontFamily: "'DM Serif Display', Georgia, 'Times New Roman', serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.3px
  heading-section:
    fontFamily: "'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0px
  heading-sub:
    fontFamily: "'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  body-large:
    fontFamily: "'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
    textTransform: uppercase
  button-ui:
    fontFamily: "'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-caps:
    fontFamily: "'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.5px
    textTransform: uppercase
  caption:
    fontFamily: "'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 18px
  xl: 27px
  2xl: 40px
  3xl: 60px
  4xl: 100px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
  button-raised:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    border: "1px solid {colors.border}"
  button-raised-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    border: "1px solid {colors.border-medium}"
  button-raised-active:
    backgroundColor: "{colors.border}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    border: "1px solid {colors.border-medium}"
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 27px
    border: "1px solid {colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 7px 28px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 7px 28px
    outline: "2px solid {colors.focus-ring}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 2px 6px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 18px
    border: "1px solid {colors.border}"
---

# Svelte Design System

## Overview

Svelte's website carries the quiet confidence of a project that knows exactly what it is. A clean white canvas (`{colors.background}`) meets charcoal text (`{colors.ink}`) in a composition that could almost be mistaken for a well-designed print publication — until the single searing orange of `{colors.primary}` lands on a button or link, and everything snaps into focus. The signature orange isn't decoration; it's a declaration. One color, one job: tell you where to go next.

The typographic foundation is the real character statement. DM Serif Display carries display headlines with a warmth and slight informality that separates Svelte from the cold-sans orthodoxy of most developer tooling. Paired with Fira Sans at body and UI sizes, the system develops a friendly two-voice conversation — serif for announcement, humanist sans for explanation. Navigation labels run in uppercase Fira Sans, giving the site a dash of editorial discipline beneath the warmth. The combination reads less like a dev-tool homepage and more like a magazine for curious engineers.

Elevation and depth are handled with characteristic restraint: raised interactive elements use the `--sk-raised-color` system (a subtle border variation of `{colors.border}` and `{colors.surface-elevated}`) rather than drop shadows, and motion is deliberately brief at 0.2s ease. Nothing fights for attention. The search bar's pill shape (`56px` radius) is the single pronounced rounding gesture — everything else stays tight at `4px`. This asymmetry between the rest interface (rectangular, editorial) and the search (rounded, approachable) reflects the dual nature of the product: a compiler with a friendly face.

**Key Characteristics:**
- White (`{colors.background}`) canvas with a single orange brand accent (`{colors.primary}`) — zero competing hues in the brand palette
- `{colors.primary-dark}` (`#d43008`) as the inline link and CSS-variable orange — slightly richer than the pure `#ff3e00` for better readability on white
- DM Serif Display for all display headlines, creating warmth unusual for developer tooling
- Fira Sans as the universal UI and body face — humanist, clear, self-effacing
- Uppercase Fira Sans navigation links — editorial discipline
- Raised button system using border color shifts rather than shadows or fills
- Minimal radius: `4px` for most UI, `56px` for search pill, `50%` for circular icon buttons
- 0.2s ease transitions across all interactive states — perceptible but never showy
- Focus rings in `{colors.focus-ring}` orange — matching the brand accent for high-legibility accessibility
- 8-unit spacing with generous section padding at `{spacing.4xl}` (100px)

## Colors

### Primary & Canvas
- **White** (`{colors.background}`): Page background and card fill. The canvas is plain and unapologetic.
- **Charcoal** (`{colors.ink}`): Primary text. Not true black — enough warmth to feel at home next to the serif typography.
- **Medium Gray** (`{colors.ink-secondary}`): Secondary text, muted links, annotation copy.
- **Muted Gray** (`{colors.ink-muted}`): Placeholder text, faint metadata labels.

### Brand Accent
- **Svelte Orange** (`{colors.primary}`): The unmistakable brand orange. Applied to CTAs, focus rings, and hover state color-shifts on key navigation links. Reserved — never used for decorative fills.
- **Accent Dark** (`{colors.primary-dark}`): The `--sk-bg-accent` CSS variable. Slightly darker orange for inline links in body copy and smaller UI contexts where `{colors.primary}` would be overwhelming.

### Surfaces & Interaction
- **Raised Surface** (`{colors.surface}`): The fill for raised buttons and search input background. A very light gray that reads as "interactive but subdued."
- **Elevated Surface** (`{colors.surface-elevated}`): Hover/active tint for raised elements — still quiet, just distinctly different.
- **Active Surface** (`{colors.surface-active}`): The pressed state for the raised button system.

### Borders & Shadows
- **Border** (`{colors.border}`): Hairline dividers, card outlines, default raised-button edge.
- **Border Medium** (`{colors.border-medium}`): Hover/active edge in the raised button system — slightly more visible.
- **Shadow Soft** (`{colors.shadow-soft}`): Barely-there drop for raised surfaces.
- **Selection** (`{colors.bg-selection}`): Text selection highlight, a soft blue lifted from a 30% alpha value.

## Typography

### Font Families
- **Primary Serif**: `DM Serif Display`, with fallbacks: `Georgia, 'Times New Roman', serif`. A contemporary serif with organic curves — warm and intellectual without being archaic.
- **Primary Sans**: `Fira Sans`, with fallbacks: `-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`. A humanist sans designed for readability at screen sizes. Used for body, UI, navigation, and captions.
- **Alternate Serif** (docs/editorial contexts): `EB Garamond` — present as a self-hosted font for long-form reading contexts in documentation.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly via `{typography.display-hero}`, `{typography.body}`, etc.

| Token | Use |
|---|---|
| `display-hero` | DM Serif Display 54px — page-level headline, the loudest voice |
| `display` | DM Serif Display 40px — section openers, feature titles |
| `heading-section` | Fira Sans 28px weight 600 — major section headers in prose/docs |
| `heading-sub` | Fira Sans 22px weight 600 — subsection headers |
| `body-large` | Fira Sans 20px — lead paragraphs, marketing description copy |
| `body` | Fira Sans 16px — standard reading text, navigation at normal case |
| `nav-link` | Fira Sans 20px uppercase — navigation links, the editorial register |
| `button-ui` | Fira Sans 16px — button labels, UI controls |
| `label-caps` | Fira Sans 13px uppercase, 0.5px tracking — small metadata labels |
| `caption` | Fira Sans 10px — version badges, footnotes, micro labels |

### Principles
- **Serif for announcement, sans for explanation**: DM Serif Display sets the emotional register; Fira Sans delivers the information. The boundary between them is clear.
- **Uppercase navigation creates structure**: Fira Sans in uppercase for nav links marks the navigational register from prose. The tracking addition at `label-caps` size keeps small uppercase legible.
- **No weight theater in sans**: Fira Sans leans on 400 (body) and 600 (headings) — no 700. Weight variation is modest, letting the serif/sans contrast do the hierarchical work.
- **Tight-but-not-compressed tracking**: DM Serif Display receives a small negative tracking (-0.5px at 54px) to feel anchored. Fira Sans runs at 0px except for explicit uppercase labels.

## Layout

### Spacing System
The spacing scale is built on an irregular progression rooted in 10px increments at small sizes, growing to `{spacing.4xl}` (100px) for major section breaks. Base unit is approximately 10px for interactive gutters and 40–100px for section cadence.

Section-level vertical rhythm is generous: 100px between major page blocks gives the editorial-style layout breathing room, keeping DM Serif Display headlines from crowding each other.

### Grid & Container
- Max content width: approximately 1140px (visible breakpoint at `1140px`)
- Hero: full-width heading with centered single-column content stack
- Documentation layout: sidebar navigation + main content, typically 3-column grid
- Marketing sections: alternating full-width and contained text+visual layouts
- Footer: multi-column link grid

### Whitespace Philosophy
- **Editorial generosity**: 100px section gaps give the serif display headlines air to breathe — the spacing is calibrated for the typeface, not just the content density.
- **Compact UI components**: While sections are generous, individual components (buttons, nav) stay tight, creating a contrast between macro-rhythm and micro-density.
- **No decorative dividers**: Section breaks are communiciated through spacing alone. Horizontal rules appear only in documentation prose, never in marketing layout.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page background, running body text |
| Raised (Level 1) | `border: 1px solid {colors.border}`, fill `{colors.surface}` | Default raised button, search input |
| Raised Hover | `border: 1px solid {colors.border-medium}`, fill `{colors.surface-elevated}` | Hover state for raised elements |
| Raised Active | `border: 1px solid {colors.border-medium}`, fill `{colors.border}` | Pressed state |
| Card (Level 2) | `border: 1px solid {colors.border}` with white fill | Documentation cards, feature tiles |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | All keyboard-focused interactive elements |

**Shadow Philosophy**: Svelte avoids drop shadows almost entirely. Depth is communicated through the raised-button system's three-state border and fill progression, a technique that matches the editorial cleanliness of the surface design. The absence of blur means components read as flat and precise — consistent with a framework marketing itself on doing less. The single exception is the very light `{colors.shadow-soft}` tint present under raised surfaces, barely distinguishable at normal viewing.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default for cards, page sections, most containers |
| `xs` | 2px | Inline code snippets, `<kbd>` elements |
| `sm` | 4px | Navigation items, raised buttons, icon frames |
| `pill` | 9999px | Search input (rendered at 56px effective radius), circular icon buttons at 50% |

The radius philosophy is binary with a single prominent exception. Almost everything is either square (0px) or gently rounded (4px). The search bar's pill shape is the single deliberate rounding gesture — it signals "find something" in a way that rectangular inputs don't. Circular icon buttons (50%) appear for dark-mode toggle and font-size toggle. These are functional signals, not decorative motifs.

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`, etc.).

### Button Variants

- **`button-primary`** — Svelte orange fill (`{colors.primary}`), white text. Used for the main CTA ("Get started", "Learn Svelte"). Small 4px radius keeps it rectangular and assertive.
- **`button-primary-hover`** — Darkens to `{colors.primary-dark}` on hover, maintaining the orange family without jarring shift.
- **`button-raised`** — The default interactive button: light gray fill, 1px border in `{colors.border}`. Used throughout navigation and documentation UI.
- **`button-raised-hover`** and **`button-raised-active`** — Three-state progression through `{colors.surface}` → `{colors.surface-elevated}` → `{colors.border}` creates a pressable physical feel without shadows.

### Cards
- **`card`** — White fill, 1px `{colors.border}` outline, 4px radius. Used for feature tiles and doc sidebar sections. No shadow — elevation communicated by border alone.

### Inputs
- **`input`** — Light gray fill (`{colors.surface}`), pill radius (56px effective). Focus via 2px orange outline (`{colors.focus-ring}`). The pill shape is distinctive and contrasts with the otherwise rectangular component system.
- **`input-focus`** — Adds `2px solid {colors.focus-ring}` outline, maintaining fill and padding.

### Navigation
- Sticky header with white background, 1px bottom border in `{colors.border}`.
- Links in uppercase Fira Sans 20px — hover shifts background to `{colors.surface-hover}` with 4px radius, creating a pill-like hover chip.
- Orange accent appears in logo wordmark and primary CTA button only.

### Badges
- **`badge`** — Light gray fill, small radius, caption-size Fira Sans. Used for version numbers ("v5.0") and doc-type labels.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for primary CTAs and key interactive moments — it earns its impact through restraint, not frequency.
- Apply DM Serif Display at 40px+ for all display headings. Don't substitute a sans-serif face for marketing headlines.
- Run navigation labels in uppercase Fira Sans — this is the visual marker that distinguishes navigation from body content.
- Use the three-state raised button system (default → hover → active via border/fill shifts) rather than shadow or scale transforms.
- Keep border-radius at `{rounded.sm}` (4px) for UI components and `{rounded.pill}` for search-type inputs only.
- Use `{colors.focus-ring}` (orange) for keyboard focus outlines — 2px solid, matching the brand accent.
- Let section gaps breathe at `{spacing.4xl}` — the spacing scale is calibrated for the serif typography's visual weight.
- Reference `{colors.primary-dark}` for inline links in body prose where pure `{colors.primary}` would be too heavy.

### Don't
- Don't add more brand colors. The palette is intentionally monochromatic plus one orange — introducing a blue, green, or secondary accent breaks the design voice.
- Don't use drop shadows for component elevation. The raised system uses border shifts; shadows compete with the editorial flatness.
- Don't use DM Serif Display below 32px — it loses its distinctive quality and competes with Fira Sans at small sizes.
- Don't mix the uppercase nav register with normal-case body copy at the same size. `label-caps` is distinct for a reason.
- Don't add decorative horizontal rules between marketing sections. Whitespace is the divider.
- Don't apply the pill radius to buttons — pills are reserved for search and circular icon controls.
- Don't deviate from the 0.2s ease transition timing. Faster feels fidgety; slower feels sluggish against the otherwise snappy design.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <480px | Single column, nav collapses to hamburger, hero stack |
| Mobile Large | 480–600px | Standard mobile layout, slightly wider gutters |
| Small Tablet | 600–768px | Two-column cards begin, sidebar hints appear |
| Tablet | 768–832px | Documentation layout engages, two-column grids |
| Desktop Small | 832–1140px | Full marketing layout, three-column card grids |
| Desktop | 1140–1400px | Content capped at 1140px; comfortable margins |
| Large Desktop | 1400–1600px | Max-width centered, balanced negative space |

### Touch Targets
- Raised buttons: minimum 40px height including padding
- Navigation links: uppercase labels with at minimum 10px vertical padding
- Search pill: comfortable full-width treatment on mobile with pill shape preserved
- Circular icon toggles (dark mode, font size): 36px+ touch target

### Collapsing Strategy
- DM Serif Display: 54px → 40px → 32px at tablet → 26px on mobile
- Navigation: horizontal uppercase links → hamburger icon on small tablet/mobile
- Feature cards: 3-column → 2-column → single column
- Section gaps: `{spacing.4xl}` (100px) → `{spacing.3xl}` (60px) on mobile
- Documentation sidebar: persistent on desktop → collapsible drawer on tablet, hidden on mobile

### Image Behavior
- Hero illustrations and framework logos scale within their containers
- Code blocks maintain horizontal scroll rather than wrapping
- Screenshots and demo embeds maintain aspect ratio with responsive max-width

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand accent (CTAs): `{colors.primary}`
- Inline links/accents: `{colors.primary-dark}`
- Border: `{colors.border}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

- "Create a hero section on white (`{colors.background}`) with a DM Serif Display headline at 54px, fontWeight 500, lineHeight 1.2, letter-spacing -0.5px, color `{colors.ink}`. Subhead in Fira Sans 20px weight 400, color `{colors.ink-secondary}`, lineHeight 1.5. Primary CTA button in Svelte orange (`{colors.primary}`) with white text, 4px radius, padding 10px 18px. Secondary link in uppercase Fira Sans 20px, color `{colors.primary-dark}`."
- "Design a documentation card: white background, 1px solid border (`{colors.border}`), 4px radius, 27px padding. Title in Fira Sans 22px weight 600, color `{colors.ink}`. Body in Fira Sans 16px weight 400, lineHeight 1.5, color `{colors.ink-secondary}`. No shadow."
- "Build a raised button: fill `{colors.surface}` (#f2f2f2), 1px solid border `{colors.border}`, 4px radius, padding 8px 16px. Text in Fira Sans 16px weight 400, color `{colors.ink}`. On hover: fill `{colors.surface-elevated}`, border `{colors.border-medium}`. On active: fill `{colors.border}`. Transition all 0.2s ease."
- "Create a navigation bar: white background, 1px solid bottom border `{colors.border}`. Links in uppercase Fira Sans 20px weight 400, color `{colors.ink}`. On hover: background pill chip `{colors.surface-hover}`, 4px radius. Orange CTA button right-aligned."
- "Design a search input: fill `{colors.surface}`, pill shape (border-radius 56px), padding 7px 28px (extra left for icon). Text in Fira Sans 16px, color `{colors.ink}`. On focus: outline 2px solid `{colors.focus-ring}` (orange). No border in default state."
- "Build a version badge: background `{colors.surface}`, 2px radius, padding 2px 6px. Text in Fira Sans 10px weight 400, color `{colors.ink-secondary}`. Display 'v5.0' in this component for documentation callouts."

### Iteration Guide

1. Start with white canvas (`{colors.background}`) — Svelte's design never uses a tinted or dark background for its marketing surface.
2. Apply `{colors.primary}` to exactly one CTA per view. The orange signal earns its power through scarcity.
3. All display headings in DM Serif Display — no exceptions below 32px, no sans substitutions in marketing contexts.
4. Use the raised button system for secondary actions: three border/fill states, no shadows, no scale transforms.
5. Navigation links run uppercase — distinguish navigational elements from body prose with `nav-link` token.
6. Border-radius is `{rounded.sm}` (4px) for buttons and UI; `{rounded.pill}` for search only.
7. Transitions: 0.2s ease across all interactive states.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Svelte. Brand names and trademarks belong to their respective owners.