Typography
scale ratio 1.375- Optimistic Textbody400 500 600 70065%
- Optimistic Displaydisplay400 60026%
- Source Code Promono4009%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Optimistic Display | 52px | 600 | 1.375 | 0em |
| title | Optimistic Text | 15px | 700 | 1.25 | 0em |
| body | Optimistic Text | 20px | 400 | 1.5 | 0em |
| label | Optimistic Text | 13px | 500 | 2.308 | 0em |
| mono | Source Code Pro | 13.6px | 400 | 1.765 | 0em |
Type scale
Aa11Aa13Aa13.5Aa15Aa17Aa20Aa28Aa32Aa52
- Body size
- 20px / 1.5
- Display size
- 52px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 14.97:1
- Muted on bg
- 9.32:1
- Accent on bg
- 4.64:1
- Dark mode
- follows system
Declared accent tokens
- --docsearch-primary-color#0074A6not on page
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 40
- 64
- 80
- 128
Corner radii
816pill
Shadows (2)
- Borders
- regular, 2px
- Section padding
- 113px
Components
exact computed valuesbutton-primary
Learn React
- backgroundColor
- #087EA4
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 12px 24px
- height
- 47.4px
- fontFamily
- Optimistic Text
- fontSize
- 17px
- fontWeight
- 700
card
- rounded
- 16px
- padding
- 0px
- backgroundColor
- #FFFFFF
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 16px 32px -16px, rgba(0, 0, 0
input
- rounded
- 9999px
- height
- 40px
- padding
- 16px 0px
- backgroundColor
- #EBECF0
Layout & motion
- Container
- 768px
- Grid columns
- 5
- Hero
- left-aligned
- Navigation
- top-sticky+blur
- Page height
- 9,097px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 100ms 150ms 300ms
- Transitions
- 104
- Keyframes
- 1
- Stack
- next.js, tailwind, google-tag-manager, vercel
Page sections (11)
section labels are heuristic
01nav
02logos
03heroReact
04code sample?Create user interfaces from components
05code sample?3 Videos
06code sample?5 Videos
07code sample?Go full-stack with a framework
08feature detail?Use the best from every platform
09features?Vulnerability in React Server Components
10feature detail?Welcome to the React community
11footer
How React compares
- Body text
- 20px: larger than 90% of indexed sites (median 16px).
- Largest heading
- 52px: smaller than 63% of indexed sites (median 60px).
- Type scale
- 1.38×: steeper than 76% of indexed sites (median 1.28×).
- Container
- 768px: narrower than 92% of indexed sites (median 1242px).
- Text contrast
- 15.0:1: lower than 75% of indexed sites (median 17.6:1).
- Page length
- 9,097px: longer than 60% of indexed sites (median 8,217px).
- Corner radius
- Mostly 16px, shared by 11 of 274 indexed sites (4%).
- Optimistic Text
- The only site in the index that loads Optimistic Text.
- Optimistic Display
- The only site in the index that loads Optimistic Display.
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does React use?
React uses Optimistic Text for body text. Optimistic Display is used for headings. Source Code Pro is used for code.
What are React's brand colors?
React's website uses a light scheme: background #FFFFFF, surface #EBECF0, text #23272F, muted text #404756 and borders #23272F1A.
How is React's website laid out?
The most common corner radius is 16px, body text is 20px with 1.5 line height, and the page container is 768px wide.
