---
name: Svelte
description: "This site is a prime example of how to elevate developer tooling with editorial typography and playful, high-quality 3D illustrations."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#262626"
  secondary: "#808080"
  tertiary: "#FF3E00"
  neutral: "#666666"
  bg-soft: "#F2F2F2"
  bg-quiet: "#E5E5E5"
  muted-soft: "#A0A0A0"
  line: "rgba(235, 235, 235, 1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 54px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  headline:
    fontFamily: humanist-sans
    fontSize: 22px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  mono:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 2px
  md: 4px
  lg: 56px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, editorial developer documentation site featuring high-contrast typography and playful 3D hero illustrations.

*A refined, open-source developer tool with an editorial soul.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#262626`)** — uses `ink` token
- **Secondary text (`#808080`)** — uses `ink-soft` token
- **Accent (`#FF3E00`)** — uses `accent` token
- **Muted (`#666666`)** — uses `muted` token
- **Borders (`rgba(235, 235, 235, 1)`)** — uses `line` token

## Typography

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

## Layout

Standard centered single-column documentation layout.

*Rhythm:* Standard 4px grid with 100px vertical section padding.

## Elevation & Depth

- Borders: 1px solid #EBEBEB

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 56px
- `pill`: 999px

## Components

- **button:** Text-based action links with uppercase letters and an arrow.
- **card:** Flat background containers with a 2px solid border.
- **chip:** Small uppercase text badges with a dark background.
- **input:** Search bar with rounded corners and a keyboard shortcut indicator.
- **hero:** Large 3D illustration paired with an oversized serif headline.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```