W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
React
React is a JavaScript library for building user interfaces — a componentized, declarative model that has become the de facto default for modern web UIs and the foundation of the React Native cross-platform stack. The brand voice is pragmatic, technical, and reference-quality: the docs surface (react.dev) is the brand. Visually the identity is dark-first — the atom-orbit logo's React Cyan (#61DAFB) reads against a near-black canvas (#23272F), and the docs supplement the cyan with a documentation blue ramp (#149ECA / #58C4DC) for AA-compliant links.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/react/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/react/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.
React
React is a JavaScript library for building user interfaces — a componentized, declarative model that has become the de facto default for modern web UIs and the foundation of the React Native cross-platform stack. The brand voice is pragmatic, technical, and reference-quality: the docs surface (react.dev) is the brand. Visually the identity is dark-first — the atom-orbit logo's React Cyan (#61DAFB) reads against a near-black canvas (#23272F), and the docs supplement the cyan with a documentation blue ramp (#149ECA / #58C4DC) for AA-compliant links.
Tags: react, library, javascript, meta, cyan, dark-first, open-source
Atoms
Palette
React · [email protected] · MIT
React brand palette captured from the open-source react.dev color module. The brand is dark-first: a near-black canvas (#23272F) is the default surface and React Cyan (#61DAFB) is the historical atom-orbit logo color, which the modern site supplements with a documentation blue ramp (link #149ECA, dark-mode link #58C4DC). Includes the full Gray, Blue, Yellow, Purple, Green, and Red ramps used in the docs.
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 |
|---|---|---|
react-cyan |
React Cyan | #61DAFB |
react-blue-50 |
React Blue 50 | #087EA4 |
react-blue-40 |
React Blue 40 | #149ECA |
react-blue-30 |
React Blue 30 | #58C4DC |
react-blue-80 |
React Blue 80 | #043849 |
react-blue-10 |
React Blue 10 | #E6F7FF |
gray-95 |
Gray 95 | #16181D |
gray-90 |
Gray 90 | #23272F |
gray-80 |
Gray 80 | #343A46 |
gray-70 |
Gray 70 | #404756 |
gray-60 |
Gray 60 | #4E5769 |
gray-50 |
Gray 50 | #5E687E |
gray-30 |
Gray 30 | #99A1B3 |
gray-10 |
Gray 10 | #EBECF0 |
gray-5 |
Gray 5 | #F6F7F9 |
react-white |
React White | #FFFFFF |
yellow-50 |
Yellow 50 | #C76A15 |
red-50 |
Red 50 | #A6423A |
green-50 |
Green 50 | #388F7F |
purple-50 |
Purple 50 | #575FB7 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
react-white |
#FFFFFF |
surface |
gray-5 |
#F6F7F9 |
surface-elevated |
react-white |
#FFFFFF |
text-primary |
gray-90 |
#23272F |
text-secondary |
gray-70 |
#404756 |
text-tertiary |
gray-50 |
#5E687E |
primary |
react-blue-50 |
#087EA4 |
primary-hover |
react-blue-80 |
#043849 |
accent |
react-cyan |
#61DAFB |
accent-hover |
react-blue-40 |
#149ECA |
warning |
yellow-50 |
#C76A15 |
warning-hover |
yellow-50 |
#C76A15 |
error |
red-50 |
#A6423A |
success |
green-50 |
#388F7F |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
gray-90 |
#23272F |
surface |
gray-80 |
#343A46 |
surface-elevated |
gray-70 |
#404756 |
text-primary |
react-white |
#FFFFFF |
text-secondary |
gray-30 |
#99A1B3 |
text-tertiary |
gray-50 |
#5E687E |
primary |
react-blue-30 |
#58C4DC |
primary-hover |
react-blue-40 |
#149ECA |
accent |
react-cyan |
#61DAFB |
accent-hover |
react-blue-30 |
#58C4DC |
warning |
yellow-50 |
#C76A15 |
warning-hover |
yellow-50 |
#C76A15 |
error |
red-50 |
#A6423A |
success |
green-50 |
#388F7F |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
react-cyan |
#61DAFB |
on-identity |
gray-90 |
#23272F |
primary |
react-blue-50 |
#087EA4 |
primary-hover |
react-blue-80 |
#043849 |
accent |
react-cyan |
#61DAFB |
accent-hover |
react-blue-40 |
#149ECA |
background |
gray-90 |
#23272F |
surface |
gray-80 |
#343A46 |
text-primary |
react-white |
#FFFFFF |
text-secondary |
gray-30 |
#99A1B3 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (3)
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, composite-with-product-logo
The React atom mark is a Meta trademark; recoloring, rotating, or compositing it with a product's own logo implies endorsement and is not permitted. Use the mark monochrome or in canonical React Cyan only.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
White on Gray-90 (#23272F) exceeds 12:1 — well above the WCAG AA threshold for body text. The react.dev dark theme uses this pair as its primary text contrast.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. react.dev's color token system is designed to satisfy AA on both light and dark canvases; consumers must not derive intermediate stops that defeat the AA property.
⚠️ warning (5)
colorChoice → roles.colors.identity
- allowed: react-cyan
- forbidden: react-blue-50, react-blue-40, react-blue-30
React Cyan (#61DAFB) is the canonical logo color across the project's history and packaging. The docs-site blue ramp (#087EA4 / #149ECA / #58C4DC) carries link / interactive semantics on react.dev and should not be used as the mark fill.
contrastRatio → roles.colors.accent
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
React Cyan (#61DAFB) on Gray-90 sits around 8.5:1 — clears AA for body text on dark surfaces. On light surfaces it does NOT clear AA; use the docs blue ramp (Blue 50 #087EA4) for interactive links on light backgrounds instead.
variantSelection → roles.colors.primary
- use:
react-blue-50 - when:
mode="light"
The react.dev docs document Blue 50 (#087EA4) as the AA-compliant link color on light surfaces. Use this token for primary interactive elements in light mode rather than React Cyan.
variantSelection → roles.colors.primary
- use:
react-blue-30 - when:
mode="dark"
The react.dev docs document Blue 30 (#58C4DC) as the AA-compliant link color on dark surfaces. Use this token for primary interactive elements in dark mode.
contextRestriction → roles.colors.identity
- forbiddenContexts: background-fill, large-marketing-block
React Cyan is the mark color — a thin accent against dark canvas. Using it as a large background fill compromises the dark-first brand voice; reserve it for the logo and small-glyph accents.
💡 recommendation (1)
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.25
react.dev uses a single sans for heading and body with modest size differential. Maintain at least a 1.25× heading-to-body ratio to preserve hierarchy.
Provenance
- Source: https://react.dev/
- License:
MIT - Attribution: React is MIT-licensed; the react.dev codebase (github.com/reactjs/react.dev) is MIT-licensed. The React logo (atom orbiting an electron) is a trademark of Meta Platforms, Inc. — historically released by Facebook under BSD/Patents and now widely used across the ecosystem. Brand palette values are captured verbatim from the react.dev
colors.jsmodule on main; the React Cyan identity (#61DAFB) is verified against the simple-icons project. - Imported:
2026-05-18 - Notes: react.dev does not publish a standalone brand-guidelines document; the colors.js module on the docs repository is the canonical source. Meta's broader brand uses Optimistic Display for marketing — that family is not in the catalog, so this atom substitutes Inter (catalog) for both heading and body roles, in keeping with the open-source spirit of the React project.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by React
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.
React
A clear hierarchy in React'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
→ react-cyan #61DAFB accent-hover
→ react-blue-40 #149ECA background
→ gray-90 #23272F identity
→ react-cyan #61DAFB on-identity
→ gray-90 #23272F primary
→ react-blue-50 #087EA4 primary-hover
→ react-blue-80 #043849 surface
→ gray-80 #343A46 text-primary
→ react-white #FFFFFF text-secondary
→ gray-30 #99A1B3 Typography
code
→ mono Source Code Pro display
→ heading Inter prose
→ body Inter Palette mode mappings (from react)
Light mode (14 roles)
accent
→ react-cyan accent-hover
→ react-blue-40 background
→ react-white error
→ red-50 primary
→ react-blue-50 primary-hover
→ react-blue-80 success
→ green-50 surface
→ gray-5 surface-elevated
→ react-white text-primary
→ gray-90 text-secondary
→ gray-70 text-tertiary
→ gray-50 warning
→ yellow-50 warning-hover
→ yellow-50 Dark mode (14 roles)
accent
→ react-cyan accent-hover
→ react-blue-30 background
→ gray-90 error
→ red-50 primary
→ react-blue-30 primary-hover
→ react-blue-40 success
→ green-50 surface
→ gray-80 surface-elevated
→ gray-70 text-primary
→ react-white text-secondary
→ gray-30 text-tertiary
→ gray-50 warning
→ yellow-50 warning-hover
→ yellow-50 Rules (9 typed constraints)
error · 3 rules
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, composite-with-product-logo The React atom mark is a Meta trademark; recoloring, rotating, or compositing it with a product's own logo implies endorsement and is not permitted. Use the mark monochrome or in canonical React Cyan only.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA White on Gray-90 (#23272F) exceeds 12:1 — well above the WCAG AA threshold for body text. The react.dev dark theme uses this pair as its primary text contrast.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. react.dev's color token system is designed to satisfy AA on both light and dark canvases; consumers must not derive intermediate stops that defeat the AA property.
warning · 5 rules
colorChoice roles.colors.identity allowed react-cyan forbidden react-blue-50, react-blue-40, react-blue-30 React Cyan (#61DAFB) is the canonical logo color across the project's history and packaging. The docs-site blue ramp (#087EA4 / #149ECA / #58C4DC) carries link / interactive semantics on react.dev and should not be used as the mark fill.
contrastRatio roles.colors.accent against background minRatio 3 standard WCAG-AA-large React Cyan (#61DAFB) on Gray-90 sits around 8.5:1 — clears AA for body text on dark surfaces. On light surfaces it does NOT clear AA; use the docs blue ramp (Blue 50 #087EA4) for interactive links on light backgrounds instead.
variantSelection roles.colors.primary use react-blue-50 when mode="light" The react.dev docs document Blue 50 (#087EA4) as the AA-compliant link color on light surfaces. Use this token for primary interactive elements in light mode rather than React Cyan.
variantSelection roles.colors.primary use react-blue-30 when mode="dark" The react.dev docs document Blue 30 (#58C4DC) as the AA-compliant link color on dark surfaces. Use this token for primary interactive elements in dark mode.
contextRestriction roles.colors.identity forbiddenContexts background-fill, large-marketing-block React Cyan is the mark color — a thin accent against dark canvas. Using it as a large background fill compromises the dark-first brand voice; reserve it for the logo and small-glyph accents.
recommendation · 1 rule
fontPairing typography.heading requires body minSizeRatio 1.25 react.dev uses a single sans for heading and body with modest size differential. Maintain at least a 1.25× heading-to-body ratio to preserve hierarchy.
Provenance
- Source
- https://react.dev/
- License
MIT- Attribution
- React is MIT-licensed; the react.dev codebase (github.com/reactjs/react.dev) is MIT-licensed. The React logo (atom orbiting an electron) is a trademark of Meta Platforms, Inc. — historically released by Facebook under BSD/Patents and now widely used across the ecosystem. Brand palette values are captured verbatim from the react.dev `colors.js` module on main; the React Cyan identity (#61DAFB) is verified against the simple-icons project.
- Imported
2026-05-18- Notes
- react.dev does not publish a standalone brand-guidelines document; the colors.js module on the docs repository is the canonical source. Meta's broader brand uses Optimistic Display for marketing — that family is not in the catalog, so this atom substitutes Inter (catalog) for both heading and body roles, in keeping with the open-source spirit of the React project.