Svelte

Svelte brand palette anchored on the project's signature flame orange (#FF3E00) — the fill of the flame mark used across svelte.dev, the npm package badges, and the brand assets repo (github.com/sveltejs/branding). Supporting neutrals provide light and dark page canvases.

10 swatches 14 light roles 14 dark roles svelteframeworkjavascriptorangeflameopen-source

Swatches

svelte-orange
#FF3E00
Primary brand color — the fill of the Svelte flame mark.
svelte-orange-dark
#D63300
Darker orange used for hover states and shadowed accents.
svelte-orange-bright
#FF6E40
Brighter orange used on dark surfaces for legibility.
svelte-black
#13151A
Dark-mode page canvas.
svelte-charcoal
#222226
Elevated dark surface.
svelte-gray
#676778
Mid neutral.
svelte-light-gray
#D5D5D5
Hairline borders.
svelte-off-white
#F4F4F4
Subtle layered surface.
svelte-white
#FFFFFF
Page canvas in light mode.
svelte-success
#40B22E
Status success color.

Mode role mappings

Light mode (14 roles)

accent → svelte-orange-dark
accent-hover → svelte-orange
background → svelte-white
error → svelte-orange-dark
primary → svelte-orange
primary-hover → svelte-orange-dark
success → svelte-success
surface → svelte-off-white
surface-elevated → svelte-white
text-primary → svelte-black
text-secondary → svelte-gray
text-tertiary → svelte-light-gray
warning → svelte-orange
warning-hover → svelte-orange-dark

Dark mode (14 roles)

accent → svelte-orange
accent-hover → svelte-orange-bright
background → svelte-black
error → svelte-orange
primary → svelte-orange-bright
primary-hover → svelte-orange
success → svelte-success
surface → svelte-charcoal
surface-elevated → svelte-charcoal
text-primary → svelte-white
text-secondary → svelte-light-gray
text-tertiary → svelte-gray
warning → svelte-orange-bright
warning-hover → svelte-orange

Provenance

Source
https://github.com/sveltejs/branding
License
MIT
Attribution
Svelte is MIT-licensed; the Svelte brand assets repository (github.com/sveltejs/branding) publishes the official flame logo under the project's MIT terms with conditions of use (no false endorsement, accuracy required). The flame orange hex (#FF3E00) is the SVG fill value in the canonical logo files and the value published by the simple-icons project.
Imported
2026-05-18
Notes
The Svelte flame is rendered as a single solid color. The dark-mode role mapping below is brand-atoms' sensible inversion of the canonical orange-on-white treatment.