# Svelte

> `svelte@1.0.0`

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** · `svelte@1.0.0` · 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** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **Source Code Pro** `(source-code-pro@1.0.0)` | 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: `svelte@1.0.0` from the encyclopedia.*