# React

> `react@1.0.0`

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** · `react@1.0.0` · 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** `(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 |
|----|------|-------|
| `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.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. 

---

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