W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Svelte
Svelte is a UI framework that compiles components to small, imperative JavaScript at build time — no runtime virtual DOM, no diffing, just direct DOM updates. The brand voice is sharp, technical, and unapologetic about being a compiler-first framework. The visual identity is a single flame mark in Svelte Orange (#FF3E00), high-energy against either light or dark canvases, with no two-tone or gradient treatment.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/svelte/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/svelte/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Svelte
Svelte is a UI framework that compiles components to small, imperative JavaScript at build time — no runtime virtual DOM, no diffing, just direct DOM updates. The brand voice is sharp, technical, and unapologetic about being a compiler-first framework. The visual identity is a single flame mark in Svelte Orange (#FF3E00), high-energy against either light or dark canvases, with no two-tone or gradient treatment.
Tags: svelte, framework, javascript, compiler, orange, open-source
Atoms
Palette
Svelte · [email protected] · MIT
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.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
Source Code Pro ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
svelte-orange |
Svelte Orange | #FF3E00 |
svelte-orange-dark |
Svelte Orange Dark | #D63300 |
svelte-orange-bright |
Svelte Orange Bright | #FF6E40 |
svelte-black |
Svelte Black | #13151A |
svelte-charcoal |
Svelte Charcoal | #222226 |
svelte-gray |
Svelte Gray | #676778 |
svelte-light-gray |
Svelte Light Gray | #D5D5D5 |
svelte-off-white |
Svelte Off-White | #F4F4F4 |
svelte-white |
Svelte White | #FFFFFF |
svelte-success |
Svelte Success | #40B22E |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
svelte-white |
#FFFFFF |
surface |
svelte-off-white |
#F4F4F4 |
surface-elevated |
svelte-white |
#FFFFFF |
text-primary |
svelte-black |
#13151A |
text-secondary |
svelte-gray |
#676778 |
text-tertiary |
svelte-light-gray |
#D5D5D5 |
primary |
svelte-orange |
#FF3E00 |
primary-hover |
svelte-orange-dark |
#D63300 |
accent |
svelte-orange-dark |
#D63300 |
accent-hover |
svelte-orange |
#FF3E00 |
warning |
svelte-orange |
#FF3E00 |
warning-hover |
svelte-orange-dark |
#D63300 |
error |
svelte-orange-dark |
#D63300 |
success |
svelte-success |
#40B22E |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
svelte-black |
#13151A |
surface |
svelte-charcoal |
#222226 |
surface-elevated |
svelte-charcoal |
#222226 |
text-primary |
svelte-white |
#FFFFFF |
text-secondary |
svelte-light-gray |
#D5D5D5 |
text-tertiary |
svelte-gray |
#676778 |
primary |
svelte-orange-bright |
#FF6E40 |
primary-hover |
svelte-orange |
#FF3E00 |
accent |
svelte-orange |
#FF3E00 |
accent-hover |
svelte-orange-bright |
#FF6E40 |
warning |
svelte-orange-bright |
#FF6E40 |
warning-hover |
svelte-orange |
#FF3E00 |
error |
svelte-orange |
#FF3E00 |
success |
svelte-success |
#40B22E |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
svelte-orange |
#FF3E00 |
on-identity |
svelte-white |
#FFFFFF |
primary |
svelte-orange |
#FF3E00 |
primary-hover |
svelte-orange-dark |
#D63300 |
accent |
svelte-orange-dark |
#D63300 |
accent-hover |
svelte-orange |
#FF3E00 |
background |
svelte-white |
#FFFFFF |
surface |
svelte-off-white |
#F4F4F4 |
text-primary |
svelte-black |
#13151A |
text-secondary |
svelte-gray |
#676778 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
forbiddenTreatment → logo
- treatments: flame-shape-modified, recolored, rotated, skewed, stretched, gradient-fill, drop-shadow, on-busy-photo
The sveltejs/branding repository's conditions of use forbid alterations that imply false endorsement and require accurate reproduction. Modifying the flame silhouette, applying gradients or drop shadows, or recoloring it changes the documented mark.
colorChoice → roles.colors.identity
- allowed: svelte-orange
- forbidden: svelte-orange-dark, svelte-orange-bright
Svelte Orange (#FF3E00) is the single canonical mark color. The darker and brighter variants in this palette are for hover states and dark-surface legibility only — they are not approved mark fills.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Svelte Black (#13151A) on Svelte White exceeds 18:1 — well above the WCAG AA threshold for body text.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. svelte.dev's documentation surfaces are designed AA-compliant; consumers must not derive intermediate stops that defeat that property.
contextRestriction → trademark.use
- forbiddenContexts: implied-endorsement, product-name-prefix
The sveltejs/branding repository's conditions of use require that any logo usage not imply that the Svelte project is sponsoring or endorsing the consumer's product.
⚠️ warning (1)
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Svelte Orange (#FF3E00) on White sits around 4.1:1 — clears AA-large for headlines and clears AA for body text on most renderings. Consumers should verify against the actual font weight.
💡 recommendation (2)
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
svelte.dev uses a single sans for heading and body. Maintain at least a 1.5× heading-to-body ratio to preserve hierarchy.
compositionConstraint → roles.colors.identity
- pairsWith: svelte-white, svelte-black
- doesNotPairWith: svelte-orange-bright
The flame canonically sits on white or near-black. Pairing the canonical orange directly with the brighter variant creates a visually unstable orange- on-orange composition.
Provenance
- Source: https://github.com/sveltejs/branding
- License:
MIT - Attribution: Svelte is MIT-licensed; the official brand assets repository (github.com/sveltejs/branding) publishes the flame logo under the project's MIT terms with conditions of use that prohibit false endorsement and require accuracy. The flame orange (#FF3E00) is the SVG fill value in the canonical logo files and is verified against the simple-icons project. This atom encodes the published rules; no logos are bundled.
- Imported:
2026-05-18 - Notes: The sveltejs/branding repository publishes the flame mark in multiple aspect ratios (horizontal, vertical, square, logotype, cutout). The shape of the flame is the brand; any treatment that alters its silhouette is forbidden.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Svelte
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Svelte
A clear hierarchy in Svelte's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ svelte-orange-dark #D63300 accent-hover
→ svelte-orange #FF3E00 background
→ svelte-white #FFFFFF identity
→ svelte-orange #FF3E00 on-identity
→ svelte-white #FFFFFF primary
→ svelte-orange #FF3E00 primary-hover
→ svelte-orange-dark #D63300 surface
→ svelte-off-white #F4F4F4 text-primary
→ svelte-black #13151A text-secondary
→ svelte-gray #676778 Typography
code
→ mono Source Code Pro display
→ heading Inter prose
→ body Inter Palette mode mappings (from svelte)
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 Rules (8 typed constraints)
error · 5 rules
forbiddenTreatment logo treatments flame-shape-modified, recolored, rotated, skewed, stretched, gradient-fill, drop-shadow, on-busy-photo The sveltejs/branding repository's conditions of use forbid alterations that imply false endorsement and require accurate reproduction. Modifying the flame silhouette, applying gradients or drop shadows, or recoloring it changes the documented mark.
colorChoice roles.colors.identity allowed svelte-orange forbidden svelte-orange-dark, svelte-orange-bright Svelte Orange (#FF3E00) is the single canonical mark color. The darker and brighter variants in this palette are for hover states and dark-surface legibility only — they are not approved mark fills.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Svelte Black (#13151A) on Svelte White exceeds 18:1 — well above the WCAG AA threshold for body text.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. svelte.dev's documentation surfaces are designed AA-compliant; consumers must not derive intermediate stops that defeat that property.
contextRestriction trademark.use forbiddenContexts implied-endorsement, product-name-prefix The sveltejs/branding repository's conditions of use require that any logo usage not imply that the Svelte project is sponsoring or endorsing the consumer's product.
warning · 1 rule
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Svelte Orange (#FF3E00) on White sits around 4.1:1 — clears AA-large for headlines and clears AA for body text on most renderings. Consumers should verify against the actual font weight.
recommendation · 2 rules
fontPairing typography.heading requires body minSizeRatio 1.5 svelte.dev uses a single sans for heading and body. Maintain at least a 1.5× heading-to-body ratio to preserve hierarchy.
compositionConstraint roles.colors.identity pairsWith svelte-white, svelte-black doesNotPairWith svelte-orange-bright The flame canonically sits on white or near-black. Pairing the canonical orange directly with the brighter variant creates a visually unstable orange- on-orange composition.
Provenance
- Source
- https://github.com/sveltejs/branding
- License
MIT- Attribution
- Svelte is MIT-licensed; the official brand assets repository (github.com/sveltejs/branding) publishes the flame logo under the project's MIT terms with conditions of use that prohibit false endorsement and require accuracy. The flame orange (#FF3E00) is the SVG fill value in the canonical logo files and is verified against the simple-icons project. This atom encodes the published rules; no logos are bundled.
- Imported
2026-05-18- Notes
- The sveltejs/branding repository publishes the flame mark in multiple aspect ratios (horizontal, vertical, square, logotype, cutout). The shape of the flame is the brand; any treatment that alters its silhouette is forbidden.