Svelte. Serif voice, single ember accent.
- Developer tools
- Light theme
- 8 colors
- 3 typefaces
Svelte's site reads like a literary broadsheet translated into a framework landing page. Serif typography — EB Garamond for running text, DM Serif Display for hero headlines — carries the voice while a tight sans-serif (Fira Sans) handles the chrome: nav, buttons, tags, search. The canvas is pure white, surfaces are rare, and elevation is almost nonexistent; hierarchy comes from type size and weight rather than cards or shadows. A single vivid orange (#d43008) punctuates the monochrome page: it owns the logo, the GET STARTED arrow, the /svelte/ wordmark, and the documentary link. CTAs are arrow-suffixed text links, never boxed buttons. The site breathes — generous vertical rhythm, centered serif headlines, grayscale sponsor logos, and very little ornamentation between sections.

Svelte design system
Brand1
Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Neutrals7
Input field borders, form focus states, text input text
Headlines and display copy — slightly heavier than Ink to give the serif wordmarks visual weight against the white canvas
Primary text, nav items, body copy, button labels — soft black that avoids the harshness of #000 while preserving 15:1 contrast on white
Muted secondary text, helper labels, breadcrumb text
Deemphasized text, disabled labels, tertiary metadata
Subtle surface elevation, button hover wash, search/input field background
Page canvas, card surfaces, nav background — the dominant background everywhere
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Paper on Svelte Ember
4.97 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7











