# Vue.js

> `vuejs@1.0.0`

Vue.js is a progressive JavaScript framework for building user interfaces — incrementally adoptable, template-driven, and designed to "scale between a library and a framework." The brand voice is approachable, pragmatic, and community-driven: created by Evan You, stewarded today by a small core team and a broad contributor base. Visually, the two-tone Vue chevron pairs Vue Green (#4FC08D) over Vue Navy (#35495E) as the core identity.


**Tags:** `vuejs`, `vue`, `framework`, `javascript`, `green`, `open-source`

## Atoms

### Palette

**Vue.js** · `vuejs@1.0.0` · MIT

> Vue.js brand palette anchored on the two-tone pairing visible in the Vue chevron mark: Vue Green (#4FC08D) on top of a deeper navy (#35495E). The combination is the project's identity across vuejs.org, the Vue logo SVG, and the marketing surfaces. A supporting neutral set provides the page-level light and dark 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 |
|----|------|-------|
| `vue-green` | Vue Green | `#4FC08D` |
| `vue-green-dark` | Vue Green Dark | `#42B883` |
| `vue-navy` | Vue Navy | `#35495E` |
| `vue-navy-light` | Vue Navy Light | `#476582` |
| `vue-black` | Vue Black | `#1A1A1A` |
| `vue-charcoal` | Vue Charcoal | `#242424` |
| `vue-gray` | Vue Gray | `#7E7E7E` |
| `vue-light-gray` | Vue Light Gray | `#D5D5D5` |
| `vue-off-white` | Vue Off-White | `#F6F6F7` |
| `vue-white` | Vue White | `#FFFFFF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `vue-white` | `#FFFFFF` |
| `surface` | `vue-off-white` | `#F6F6F7` |
| `surface-elevated` | `vue-white` | `#FFFFFF` |
| `text-primary` | `vue-navy` | `#35495E` |
| `text-secondary` | `vue-navy-light` | `#476582` |
| `text-tertiary` | `vue-gray` | `#7E7E7E` |
| `primary` | `vue-green` | `#4FC08D` |
| `primary-hover` | `vue-green-dark` | `#42B883` |
| `accent` | `vue-navy` | `#35495E` |
| `accent-hover` | `vue-navy-light` | `#476582` |
| `warning` | `vue-green-dark` | `#42B883` |
| `warning-hover` | `vue-green` | `#4FC08D` |
| `error` | `vue-green-dark` | `#42B883` |
| `success` | `vue-green` | `#4FC08D` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `vue-black` | `#1A1A1A` |
| `surface` | `vue-charcoal` | `#242424` |
| `surface-elevated` | `vue-navy` | `#35495E` |
| `text-primary` | `vue-white` | `#FFFFFF` |
| `text-secondary` | `vue-light-gray` | `#D5D5D5` |
| `text-tertiary` | `vue-gray` | `#7E7E7E` |
| `primary` | `vue-green` | `#4FC08D` |
| `primary-hover` | `vue-green-dark` | `#42B883` |
| `accent` | `vue-navy-light` | `#476582` |
| `accent-hover` | `vue-light-gray` | `#D5D5D5` |
| `warning` | `vue-green-dark` | `#42B883` |
| `warning-hover` | `vue-green` | `#4FC08D` |
| `error` | `vue-green-dark` | `#42B883` |
| `success` | `vue-green` | `#4FC08D` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `vue-green` | `#4FC08D` |
| `on-identity` | `vue-white` | `#FFFFFF` |
| `primary` | `vue-green` | `#4FC08D` |
| `primary-hover` | `vue-green-dark` | `#42B883` |
| `accent` | `vue-navy` | `#35495E` |
| `accent-hover` | `vue-navy-light` | `#476582` |
| `background` | `vue-white` | `#FFFFFF` |
| `surface` | `vue-off-white` | `#F6F6F7` |
| `text-primary` | `vue-navy` | `#35495E` |
| `text-secondary` | `vue-navy-light` | `#476582` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `forbiddenTreatment` → `logo`

- **treatments:** flipped, rotated, stretched, recolored, single-tone-when-two-tone-required, drop-shadow, on-busy-photo

> The Vue chevron mark is defined by its two-tone composition (Vue Green over Vue Navy). Recoloring either chevron, flattening to a single tone, or otherwise altering the geometry breaks the documented brand identity. 

#### `compositionConstraint` → `logo`

- **pairsWith:** vue-green, vue-navy
- **doesNotPairWith:** vue-green-dark, vue-light-gray

> The canonical chevron pairing is Vue Green over Vue Navy. Substituting the deeper green or a neutral gray for either chevron is not part of the documented brand identity. 

#### `colorChoice` → `roles.colors.identity`

- **allowed:** vue-green, vue-navy

> Vue Green and Vue Navy are the two identity colors; everything else in the palette is supporting tone. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Vue Navy (#35495E) on Vue White exceeds 9:1 — well above the WCAG AA threshold for body text. vuejs.org's typography sits on this pair. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Vue Green is the brand accent; Vue Navy is the AA-compliant foreground for body text. Consumers must not pair Vue Green with white for fine text. 

### ⚠️ warning (2)

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `3`
- **standard:** `WCAG-AA-large`

> Vue Green (#4FC08D) on Vue White sits around 2.4:1 — does NOT clear AA-large for headlines. Reserve Vue Green for large display contexts, dark backgrounds, or pair with Vue Navy as a foreground for AA compliance. 

#### `contextRestriction` → `roles.colors.primary`

- **forbiddenContexts:** body-text-on-light

> Vue Green on a white background does not clear AA for body text; use it as headlines, accents, or on dark surfaces, not as a fine-text foreground on white. 

### 💡 recommendation (1)

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.5`

> vuejs.org uses a single sans for heading and body. Maintain at least a 1.5× heading-to-body ratio to preserve hierarchy. 

## Provenance

- **Source:** <https://vuejs.org/>
- **License:** `MIT`
- **Attribution:** Vue.js is MIT-licensed; the Vue chevron logo and the "Vue.js" word mark are copyright Yuxi (Evan) You and the Vue.js contributors. Brand colors documented here are the canonical Vue Green (#4FC08D) and Navy (#35495E) — the fill values of the two-tone chevron mark, verified against the simple-icons project. This atom encodes the published brand voice; no logos are bundled. 
- **Imported:** `2026-05-18`
- **Notes:** Vue does not publish a dedicated brand-guidelines document on vuejs.org; the canonical color pairing is the SVG fill in the official logo files distributed via the Vue.js repositories and the simple-icons project. The brand intent draws from the project's About page and the historical "Design Principles" documentation. 

---

*Generated by the brand-atoms converter. Source: `vuejs@1.0.0` from the encyclopedia.*