Svelte Design System

Svelte's marketing site announces its contrarian stance through typography before you read a single word. The hero headline — "web development for the rest of us" — renders in DM Serif Display at 54px weight 500. The body paragraph below it is set in EB Garamond at 22px. Nav links run in Fira Sans. Three families, none of them the neutral grotesque that React, Vue, Remix, and every other framework site defaults to. The serif headline reads like an editorial manifesto; the serif body copy reads like a book. For a developer tool, the choice is pointed: Svelte is not trying to look like a FAANG-adjacent product.

The single chromatic move is an orange-red voltage — present in the CSS as `--sk-bg-accent` and `--sk-fg-accent` — that runs through the page at high frequency. Unlike Cloudflare, which deploys its orange as a full-bleed hero canvas, or Spline, which reserves cobalt blue for a single CTA, Svelte's orange bleeds everywhere: it colors nav links, code syntax function tokens, button borders, and the prominent "GET STARTED" label above the fold. With 236 total uses across text (118) and border (118) roles, this is not a restrained accent — it is the brand's voice at full volume. The white canvas never competes; it just holds the stage.

For React developers reaching for Svelte's aesthetic, the operative discipline is the type hierarchy: DM Serif Display as the loudest voice, Garamond as the reading voice, Fira Sans as the functional voice. Mixing all three at the right tier creates the indie-editorial tension that distinguishes Svelte from every sleeker framework site. The radius scale is tight (4px default, 2px inner) — do not round corners up toward the 12-16px tier that SaaS products favor. The orange works at high frequency precisely because the canvas is white and the typography is so conservative in weight.