Inside the svelte.dev design system

This is a design teardown of svelte.dev: a describe-and-tokenize read of its public homepage, pulled apart into the color, type, and spacing tokens it actually ships, the section-by-section structure it uses to tell its story, and a reference-grounded prompt your AI can build from. We render and describe the page; we never copy or re-host its assets.

Under the surface, svelte.dev runs on a 7-color palette ranked by surface area, a 6-step type scale, and Georgia carrying the headline voice. The token inspector below breaks each one out with copyable values, so you can read the system the way the team that built it would.

Structurally, the page resolves into 6 distinct sections and a stack that fingerprints as SvelteKit and Svelte. Skim the section map and the build prompt to lift the parts that fit your own product, then point your AI at the prompt instead of the generic defaults everyone else ships.