W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Rivian
Rivian Automotive, Inc. is a U.S.-anchored electric-vehicle company founded in 2009, anchored on the R1T pickup and R1S SUV adventure platform. The brand identity is cinematic, outdoor-leaning, and dark-first: a deep Rivian Blue (#004B87) wordmark and corporate chrome, with a saturated Rivian Lemon yellow used as the adventure-line accent on launch livery and high-priority moments. The marketing site leads with dark hero modules and landscape photography; the brand's identity canvas is the near-black surface. The voice is confident, exploratory, and engineered.
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/rivian/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/rivian/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.
Rivian
Rivian Automotive, Inc. is a U.S.-anchored electric-vehicle company founded in 2009, anchored on the R1T pickup and R1S SUV adventure platform. The brand identity is cinematic, outdoor-leaning, and dark-first: a deep Rivian Blue (#004B87) wordmark and corporate chrome, with a saturated Rivian Lemon yellow used as the adventure-line accent on launch livery and high-priority moments. The marketing site leads with dark hero modules and landscape photography; the brand's identity canvas is the near-black surface. The voice is confident, exploratory, and engineered.
Tags: rivian, automotive, ev, adventure, brand, navy, lemon, dark-first
Atoms
Palette
Rivian · [email protected] · Proprietary — All Rights Reserved
Rivian's brand palette is built on a dark-first canvas with the signature Rivian Blue (#004B87) — a deep navy-teal carried on the wordmark and corporate chrome — supported by a warm yellow-lime adventure accent (Rivian Lemon) on the launch R1T/R1S product surfaces, and a small dark-mode neutral ramp. Rivian's marketing site leads with cinematic dark hero modules and outdoor photography; the brand atom declares dark as identity explicitly.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
rivian-blue |
Rivian Blue | #004B87 |
rivian-blue-deep |
Rivian Blue Deep | #003560 |
rivian-lemon |
Rivian Lemon | #FCE300 |
rivian-black |
Rivian Black | #000000 |
rivian-near-black |
Rivian Near-Black | #0B0B0C |
rivian-charcoal |
Rivian Charcoal | #1A1A1C |
rivian-graphite |
Rivian Graphite | #33333A |
rivian-stone |
Rivian Stone | #7A7A82 |
rivian-fog |
Rivian Fog | #D9D9DC |
rivian-white |
Rivian White | #FFFFFF |
rivian-success |
Rivian Success | #1F8A4C |
rivian-error |
Rivian Error | #C0392B |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
rivian-white |
#FFFFFF |
surface |
rivian-fog |
#D9D9DC |
surface-elevated |
rivian-white |
#FFFFFF |
text-primary |
rivian-black |
#000000 |
text-secondary |
rivian-charcoal |
#1A1A1C |
text-tertiary |
rivian-stone |
#7A7A82 |
primary |
rivian-blue |
#004B87 |
primary-hover |
rivian-blue-deep |
#003560 |
accent |
rivian-lemon |
#FCE300 |
accent-hover |
rivian-lemon |
#FCE300 |
success |
rivian-success |
#1F8A4C |
warning |
rivian-lemon |
#FCE300 |
error |
rivian-error |
#C0392B |
border |
rivian-fog |
#D9D9DC |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
rivian-black |
#000000 |
surface |
rivian-near-black |
#0B0B0C |
surface-elevated |
rivian-charcoal |
#1A1A1C |
text-primary |
rivian-white |
#FFFFFF |
text-secondary |
rivian-fog |
#D9D9DC |
text-tertiary |
rivian-stone |
#7A7A82 |
primary |
rivian-lemon |
#FCE300 |
primary-hover |
rivian-lemon |
#FCE300 |
accent |
rivian-lemon |
#FCE300 |
accent-hover |
rivian-lemon |
#FCE300 |
success |
rivian-success |
#1F8A4C |
warning |
rivian-lemon |
#FCE300 |
error |
rivian-error |
#C0392B |
border |
rivian-graphite |
#33333A |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
rivian-black |
#000000 |
on-identity |
rivian-white |
#FFFFFF |
background |
rivian-black |
#000000 |
surface |
rivian-near-black |
#0B0B0C |
surface-elevated |
rivian-charcoal |
#1A1A1C |
text-primary |
rivian-white |
#FFFFFF |
text-secondary |
rivian-fog |
#D9D9DC |
text-tertiary |
rivian-stone |
#7A7A82 |
primary |
rivian-blue |
#004B87 |
primary-hover |
rivian-blue-deep |
#003560 |
accent |
rivian-lemon |
#FCE300 |
accent-hover |
rivian-lemon |
#FCE300 |
mark |
rivian-blue |
#004B87 |
success |
rivian-success |
#1F8A4C |
warning |
rivian-lemon |
#FCE300 |
error |
rivian-error |
#C0392B |
background-light |
rivian-white |
#FFFFFF |
background-dark |
rivian-black |
#000000 |
surface-light |
rivian-fog |
#D9D9DC |
surface-dark |
rivian-near-black |
#0B0B0C |
text-primary-light |
rivian-black |
#000000 |
text-primary-dark |
rivian-white |
#FFFFFF |
text-secondary-light |
rivian-charcoal |
#1A1A1C |
text-tertiary-light |
rivian-stone |
#7A7A82 |
border-light |
rivian-fog |
#D9D9DC |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.wordmark.fill
- allowed: rivian-blue, rivian-white, rivian-black
- forbidden: rivian-lemon, rivian-blue-deep, rivian-stone, rivian-graphite
The Rivian wordmark renders in Rivian Blue, white, or black depending on the surface. The Rivian Lemon adventure accent is a livery and CTA hue — not a wordmark fill. The pressed-blue variant is an interactive-state value, and the neutral grays are surface / text colors.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, placed-without-clearspace, inverted-without-variant
The Rivian wordmark and "R" mark are rendered flat with generous clearspace. Gradients, shadows, recolorings, and busy-background placements compromise the cinematic, engineered identity Rivian's brand depends on against landscape photography.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Rivian White (#FFFFFF) on Rivian Black (#000000) gives 21:1 — the maximum contrast achievable. The dark-first canvas makes contrast checks the default verification on any new role pairing; AA is the floor.
contrastRatio → roles.colors.accent
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Rivian Lemon (#FCE300) on Rivian Black (#000000) gives ~17:1 — well above the 3:1 large-text / UI-component AA floor. Because Lemon carries high-priority highlights on the dark canvas, the rule encodes the expectation explicitly.
contextRestriction → roles.colors.accent
- forbiddenContexts: body-text, subtle-divider, error-state
- allowedContexts: call-to-action, high-priority-promotion, adventure-livery
Rivian Lemon is reserved for high-priority CTAs, adventure livery moments, and the R1T/R1S launch line. Using it in body copy, as a subtle divider, or as an error-state hue conflicts with its established adventure / promotional meaning and weakens the saturated yellow's optical impact.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas and the safety-critical contexts Rivian surfaces appear in (in-vehicle UI, charge-status monitoring) make contrast checks the non-negotiable floor.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 700
Rivian's marketing and product headlines on rivian.com sit most commonly in the Regular (400) through Bold (700) band. Lighter and heavier extremes are not part of the standard brand chrome.
💡 recommendation (1)
compositionConstraint → roles.colors.accent
- pairsWith: rivian-black, rivian-near-black, rivian-charcoal
- doesNotPairWith: rivian-blue, rivian-error
Rivian Lemon reads cleanest against the near-black dark canvas. Pairing it adjacent to the deep navy brand blue or the functional error red creates a chromatic conflict — the adventure accent fights for attention with the corporate chrome or signals a status meaning it does not carry.
Provenance
- Source: https://raw.githubusercontent.com/simple-icons/simple-icons/13.0.0/_data/simple-icons.json
- License:
Proprietary — All Rights Reserved - Attribution: Rivian Automotive, Inc. — Rivian, the Rivian wordmark, and the Rivian "R" mark are trademarks of Rivian Automotive, Inc. The signature blue (#004B87) is verified via the simple-icons brand database (v13.0.0). Rivian does not maintain a publicly visible brand-guidelines or design-system page; rivian.com is the primary reference for product chrome.
- Imported:
2026-05-19 - Notes: Rivian uses a proprietary corporate sans on its marketing site that is not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles. The supporting neutral ramp and the Rivian Lemon adventure accent in the referenced palette are authored complements faithful to rivian.com's chrome rather than lifted from a single Rivian-published token table; see the palette atom notes. Dark is declared as identity per the brand's actual deployment surface.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Rivian
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.
Rivian
A clear hierarchy in Rivian'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
→ rivian-lemon #FCE300 accent-hover
→ rivian-lemon #FCE300 background
→ rivian-black #000000 background-dark
→ rivian-black #000000 background-light
→ rivian-white #FFFFFF border-light
→ rivian-fog #D9D9DC error
→ rivian-error #C0392B identity
→ rivian-black #000000 mark
→ rivian-blue #004B87 on-identity
→ rivian-white #FFFFFF primary
→ rivian-blue #004B87 primary-hover
→ rivian-blue-deep #003560 success
→ rivian-success #1F8A4C surface
→ rivian-near-black #0B0B0C surface-dark
→ rivian-near-black #0B0B0C surface-elevated
→ rivian-charcoal #1A1A1C surface-light
→ rivian-fog #D9D9DC text-primary
→ rivian-white #FFFFFF text-primary-dark
→ rivian-white #FFFFFF text-primary-light
→ rivian-black #000000 text-secondary
→ rivian-fog #D9D9DC text-secondary-light
→ rivian-charcoal #1A1A1C text-tertiary
→ rivian-stone #7A7A82 text-tertiary-light
→ rivian-stone #7A7A82 warning
→ rivian-lemon #FCE300 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from rivian)
Light mode (14 roles)
accent
→ rivian-lemon accent-hover
→ rivian-lemon background
→ rivian-white border
→ rivian-fog error
→ rivian-error primary
→ rivian-blue primary-hover
→ rivian-blue-deep success
→ rivian-success surface
→ rivian-fog surface-elevated
→ rivian-white text-primary
→ rivian-black text-secondary
→ rivian-charcoal text-tertiary
→ rivian-stone warning
→ rivian-lemon Dark mode (14 roles)
accent
→ rivian-lemon accent-hover
→ rivian-lemon background
→ rivian-black border
→ rivian-graphite error
→ rivian-error primary
→ rivian-lemon primary-hover
→ rivian-lemon success
→ rivian-success surface
→ rivian-near-black surface-elevated
→ rivian-charcoal text-primary
→ rivian-white text-secondary
→ rivian-fog text-tertiary
→ rivian-stone warning
→ rivian-lemon Rules (8 typed constraints)
error · 6 rules
colorChoice logo.wordmark.fill allowed rivian-blue, rivian-white, rivian-black forbidden rivian-lemon, rivian-blue-deep, rivian-stone, rivian-graphite The Rivian wordmark renders in Rivian Blue, white, or black depending on the surface. The Rivian Lemon adventure accent is a livery and CTA hue — not a wordmark fill. The pressed-blue variant is an interactive-state value, and the neutral grays are surface / text colors.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, placed-without-clearspace, inverted-without-variant The Rivian wordmark and "R" mark are rendered flat with generous clearspace. Gradients, shadows, recolorings, and busy-background placements compromise the cinematic, engineered identity Rivian's brand depends on against landscape photography.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Rivian White (#FFFFFF) on Rivian Black (#000000) gives 21:1 — the maximum contrast achievable. The dark-first canvas makes contrast checks the default verification on any new role pairing; AA is the floor.
contrastRatio roles.colors.accent against background minRatio 3 standard WCAG-AA-large Rivian Lemon (#FCE300) on Rivian Black (#000000) gives ~17:1 — well above the 3:1 large-text / UI-component AA floor. Because Lemon carries high-priority highlights on the dark canvas, the rule encodes the expectation explicitly.
contextRestriction roles.colors.accent forbiddenContexts body-text, subtle-divider, error-state allowedContexts call-to-action, high-priority-promotion, adventure-livery Rivian Lemon is reserved for high-priority CTAs, adventure livery moments, and the R1T/R1S launch line. Using it in body copy, as a subtle divider, or as an error-state hue conflicts with its established adventure / promotional meaning and weakens the saturated yellow's optical impact.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas and the safety-critical contexts Rivian surfaces appear in (in-vehicle UI, charge-status monitoring) make contrast checks the non-negotiable floor.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 400, 500, 700 Rivian's marketing and product headlines on rivian.com sit most commonly in the Regular (400) through Bold (700) band. Lighter and heavier extremes are not part of the standard brand chrome.
recommendation · 1 rule
compositionConstraint roles.colors.accent pairsWith rivian-black, rivian-near-black, rivian-charcoal doesNotPairWith rivian-blue, rivian-error Rivian Lemon reads cleanest against the near-black dark canvas. Pairing it adjacent to the deep navy brand blue or the functional error red creates a chromatic conflict — the adventure accent fights for attention with the corporate chrome or signals a status meaning it does not carry.
Provenance
- Source
- https://raw.githubusercontent.com/simple-icons/simple-icons/13.0.0/_data/simple-icons.json
- License
Proprietary — All Rights Reserved- Attribution
- Rivian Automotive, Inc. — Rivian, the Rivian wordmark, and the Rivian "R" mark are trademarks of Rivian Automotive, Inc. The signature blue (#004B87) is verified via the simple-icons brand database (v13.0.0). Rivian does not maintain a publicly visible brand-guidelines or design-system page; rivian.com is the primary reference for product chrome.
- Imported
2026-05-19- Notes
- Rivian uses a proprietary corporate sans on its marketing site that is not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles. The supporting neutral ramp and the Rivian Lemon adventure accent in the referenced palette are authored complements faithful to rivian.com's chrome rather than lifted from a single Rivian-published token table; see the palette atom notes. Dark is declared as identity per the brand's actual deployment surface.