CURATED · OPEN · FREE

Svelte

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

devtoolsframework

↓ Download design system (19 MB)Open in OpenDesign

Visit: https://svelte.dev

📦 Browse pack contents →

Identity DNA

developer-friendlyaccessibleelegantmodernopen-source

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

Color

#FF3E00Accent

#262626Ink

#808080Ink soft

#FFFFFFBG

#F2F2F2BG soft

#E5E5E5BG quiet

#666666Muted

rgba(235, 235, 235, 1)Line

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

Typography

didone-serif · humanist-sans · monospaced

display54px · 400
headline22px · 400
body16px · 400
mono12px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px grid with 100px vertical section padding.

Surfaces

sm · 2px

md · 4px

lg · 56px

pill · 999px

1px solid #EBEBEB

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard centered single-column documentation layout.

Motion & Interaction

200msmicro

200mssmall

400msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Filter and opacity transitions for subtle interactive states.

Subtle opacity and scale adjustments. · Standard pointer state.

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.

Voice & Don'ts

Tone Welcoming, confident, and educational.
Headlines Playful, lowercase serif statements.
CTAs Direct, uppercase sans-serif commands.

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.
Avoid: Jargon-heavy or aggressive language

Inside the pack — real screenshots

Svelte — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko