W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Vue.js
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.
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/vuejs/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/vuejs/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.
Vue.js
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 · [email protected] · 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 ([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 |
|---|---|---|
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: [email protected] from the encyclopedia.
Components — same template, themed by Vue.js
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.
Vue.js
A clear hierarchy in Vue.js'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
→ vue-navy #35495E accent-hover
→ vue-navy-light #476582 background
→ vue-white #FFFFFF identity
→ vue-green #4FC08D on-identity
→ vue-white #FFFFFF primary
→ vue-green #4FC08D primary-hover
→ vue-green-dark #42B883 surface
→ vue-off-white #F6F6F7 text-primary
→ vue-navy #35495E text-secondary
→ vue-navy-light #476582 Typography
code
→ mono Source Code Pro display
→ heading Inter prose
→ body Inter Palette mode mappings (from vuejs)
Light mode (14 roles)
accent
→ vue-navy accent-hover
→ vue-navy-light background
→ vue-white error
→ vue-green-dark primary
→ vue-green primary-hover
→ vue-green-dark success
→ vue-green surface
→ vue-off-white surface-elevated
→ vue-white text-primary
→ vue-navy text-secondary
→ vue-navy-light text-tertiary
→ vue-gray warning
→ vue-green-dark warning-hover
→ vue-green Dark mode (14 roles)
accent
→ vue-navy-light accent-hover
→ vue-light-gray background
→ vue-black error
→ vue-green-dark primary
→ vue-green primary-hover
→ vue-green-dark success
→ vue-green surface
→ vue-charcoal surface-elevated
→ vue-navy text-primary
→ vue-white text-secondary
→ vue-light-gray text-tertiary
→ vue-gray warning
→ vue-green-dark warning-hover
→ vue-green Rules (8 typed constraints)
error · 5 rules
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 rules
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 rule
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.