Claude Code
Cursor
Codex
GitHub Copilot
GrammarlyBrand
DESIGN.md · measured October 22, 2026
React Bits design system
Dark monochrome interface measured from reactbits.dev: Geist type, tonal surfaces and 6px corners.
- Background
- #120F17
- Primary
- #F4F2F7
- Type
- Geist
- Corners
- 6px
From reactbits.dev ↗ · 412 elements at 1440×900 and 390×844 · Independent analysis, not affiliated with React Bits
React Bits colors
13 roles measured on the page, grouped by where each color is used.
Surfaces
Cool Charcoal
#120F17backgroundPage background · 13×Cool Charcoal
#0E0B13surface-container-lowRaised areas one step from the page · 3×Cool Charcoal
#1F1A27surface-containerCards and panels · 5×Cool Charcoal
#221E29surface-container-highHover and pressed fills · 3×White 4%
#FFFFFF0AoverlayTranslucent fill for cards and controls · 56×Cool Charcoal 55%
#18141F8Coverlay-strongStronger translucent fill · 26×Text
White
#FFFFFFon-surfacePrimary text and headings · 28×Snow
#F6F4F9on-surface-variantSecondary text · 20×Silver
#B8B7BAon-surface-mutedMuted text and metadata · 4×Cool Gray
#9B989Fon-surface-subtleSubtle text and placeholders · 12×Cool Charcoal
#141118on-primaryText and icons on primaryAccents
Snow
#F4F2F7primaryPrimary buttons and calls to action · 2×Borders
White 5%
#FFFFFF0DoutlineBorders and dividers · 5×React Bits fonts
2 families.
AaGeistWeights 400, 500, 600Geist, sans-serif
Aaui-monospaceMonospace · Weights 400ui-monospace, SFMono-Regular, Menlo, Monaco
headline-displayPage title (h1)React Bits42px · 500 · 1.1 · -0.036em
mobile 29px
mobile 29px
headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog37.5px · 500 · 1.08 · -0.036em
mobile 29px
mobile 29px
body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5
body-smSecondary and small textThe quick brown fox jumps over the lazy dog15px · 400 · 1.7
captionCaptions and fine printThe quick brown fox jumps over the lazy dog13px · 400 · 1.55
label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog16px · 500 · 1.5
label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog15px · 600 · 1.5 · -0.01em
label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog14.5px · 500 · 1.6 · -0.005em
codeCode and technical valuesconst ready = true;14px · 400 · 1.72
Contrast
Text on #120F17
AaAAA
19.0:1AaAAA
17.4:1AaAAA
9.5:1AaAA
6.7:1Spacing
No strict grid · 37% are multiples of 4px
sm5pxmd12pxlg17pxxl52pxgutter16pxsection80pxmargin24pxBreakpoints: 480px 600px 601px 640px 700px 768px 769px 900px 960px 1000px 1024px 1100px 2160px
Shapes
Corner radii, most used first.
xs6px · 180×
xl16px · 168×
md11px · 120×
sm8px · 24×
lg12px · 24×
full9999px · 12×
Depth
Inset
Shadow
Inset
Inset
Components
Rebuilt from the measured CSS.
Browse components
Star on GitHub
Get React Bits Pro
"#a1a1aa"
Card
Inline link
Motion
Interface transitions
0.2s0.12s0.3s0.15scubic-bezier(0.23, 1, 0.32, 1)ease
Do’s and don’ts
Rules written from the measurements, so a coding agent stays on style.
- Use #120F17 for the page and lift surfaces in small steps: #0E0B13, #1F1A27, #221E29.
- Keep text in 4 levels: #FFFFFF, #F6F4F9, #B8B7BA, #9B989F.
- Let contrast carry emphasis; primary actions use #F4F2F7 on #120F17.
- Set headlines in Geist with tight tracking (-0.036em).
- Reuse the measured spacing steps (5px, 12px, 17px).
- Use 6px corners on most elements; larger surfaces also use 16px, 11px and 8px.
- Use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
- Introduce new font families beyond Geist and ui-monospace.
- Add saturated accent colors; the measured palette is almost entirely neutral.
- Make interface transitions slower than 0.46s.
DESIGN.md246 lines
---
version: alpha
name: React Bits
description: "Dark monochrome interface measured from reactbits.dev: Geist type, tonal surfaces and 6px corners."
colors:
background: "#120F17"
surface: "#120F17"
on-surface: "#FFFFFF"
on-background: "#FFFFFF"
on-surface-variant: "#F6F4F9"
on-surface-muted: "#B8B7BA"
on-surface-subtle: "#9B989F"
surface-container-low: "#0E0B13"
surface-container: "#1F1A27"
surface-container-high: "#221E29"
overlay: "#FFFFFF0A"
overlay-strong: "#18141F8C"
outline: "#FFFFFF0D"
primary: "#F4F2F7"
on-primary: "#141118"
typography:
headline-display:
fontFamily: Geist
fontSize: 42px
fontWeight: 500
lineHeight: 1.1
letterSpacing: -0.036em
headline-lg:
fontFamily: Geist
fontSize: 37.5px
fontWeight: 500
lineHeight: 1.08
letterSpacing: -0.036em
body-md:
fontFamily: Geist
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
body-sm:
fontFamily: Geist
fontSize: 15px
fontWeight: 400
lineHeight: 1.7
caption:
fontFamily: Geist
fontSize: 13px
fontWeight: 400
lineHeight: 1.55
label-lg:
fontFamily: Geist
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
label-md:
fontFamily: Geist
fontSize: 15px
fontWeight: 600
lineHeight: 1.5
letterSpacing: -0.01em
label-sm:
fontFamily: Geist
fontSize: 14.5px
fontWeight: 500
lineHeight: 1.6
letterSpacing: -0.005em
code:
fontFamily: ui-monospace
fontSize: 14px
fontWeight: 400
lineHeight: 1.72
headline-display-mobile:
fontFamily: Geist
fontSize: 29px
fontWeight: 500
lineHeight: 1.12
letterSpacing: -0.036em
headline-lg-mobile:
fontFamily: Geist
fontSize: 29px
fontWeight: 500
lineHeight: 1.08
letterSpacing: -0.036em
rounded:
xs: 6px
sm: 8px
md: 11px
lg: 12px
xl: 16px
full: 9999px
spacing:
sm: 5px
md: 12px
lg: 17px
xl: 52px
gutter: 16px
section: 80px
margin: 24px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.body-sm}"
rounded: 13px
padding: 0px 17px 0px 21px
height: 46px
button-primary-hover:
backgroundColor: "{colors.on-surface}"
button-outline:
backgroundColor: "{colors.surface-container-high}"
textColor: "{colors.on-surface-variant}"
typography: "{typography.body-sm}"
rounded: 13px
padding: 0px 20px
height: 46px
button-outline-hover:
backgroundColor: "#2B2633"
button-secondary:
backgroundColor: "#64646A"
textColor: "{colors.on-surface}"
typography: "{typography.caption}"
rounded: 10px
padding: 0px 18px
height: 36px
button-ghost:
textColor: "{colors.on-surface-variant}"
typography: "{typography.code}"
rounded: 5px
padding: 0px 1.4px
card:
backgroundColor: "{colors.overlay}"
textColor: "{colors.on-surface}"
typography: "{typography.body-md}"
rounded: "{rounded.xl}"
padding: 5px
link:
textColor: "{colors.on-surface}"
---
# React Bits Design System
## Overview
React Bits describes itself as: “Free, open source React components for animated text, backgrounds, interactive cards and micro interactions. Explore live demos and copy the source.” The interface is dark, built on **Cool Charcoal (#120F17)** with **White (#FFFFFF)** text and almost no color: actions are carried by contrast, not hue.
Type is set in **Geist**, with **ui-monospace** for code. Headlines run large with tight negative tracking; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 6px.
Measured from [reactbits.dev](https://reactbits.dev/) on October 22, 2026 at 1440×900 and 390×844 from 412 rendered elements. Values are computed styles from the live page, not the original source files.
## Colors
The palette has 13 roles.
- **Cool Charcoal (#120F17):** Page background, seen 13 times. Token `background`.
- **White (#FFFFFF):** Primary text and headings, seen 28 times. Token `on-surface`.
- **Snow (#F6F4F9):** Secondary text, seen 20 times. Token `on-surface-variant`.
- **Silver (#B8B7BA):** Muted text and metadata, seen 4 times. Token `on-surface-muted`.
- **Cool Gray (#9B989F):** Subtle text and placeholders, seen 12 times. Token `on-surface-subtle`.
- **Cool Charcoal (#0E0B13):** Raised areas one step from the page, seen 3 times. Token `surface-container-low`.
- **Cool Charcoal (#1F1A27):** Cards and panels, seen 5 times. Token `surface-container`.
- **Cool Charcoal (#221E29):** Hover and pressed fills, seen 3 times. Token `surface-container-high`.
- **White 4% (#FFFFFF0A):** Translucent fill for cards and controls, seen 56 times. Token `overlay`.
- **Cool Charcoal 55% (#18141F8C):** Stronger translucent fill, seen 26 times. Token `overlay-strong`.
- **White 5% (#FFFFFF0D):** Borders and dividers, seen 5 times. Token `outline`.
- **Snow (#F4F2F7):** Primary buttons and calls to action, seen 2 times. Token `primary`.
- **Cool Charcoal (#141118):** Text and icons on primary. Token `on-primary`.
## Typography
**Geist** and **ui-monospace** (monospace) share the interface. Fallback stack: `Geist, sans-serif`. Other loaded fonts: Geist Mono.
- **headline-display:** Geist 42px at weight 500, line height 1.1, tracking -0.036em (29px on mobile). Page title (h1).
- **headline-lg:** Geist 37.5px at weight 500, line height 1.08, tracking -0.036em (29px on mobile). Section headings (h2).
- **body-md:** Geist 16px at weight 400, line height 1.5. Body text.
- **body-sm:** Geist 15px at weight 400, line height 1.7. Secondary and small text.
- **caption:** Geist 13px at weight 400, line height 1.55. Captions and fine print.
- **label-lg:** Geist 16px at weight 500, line height 1.5. Large buttons and tabs.
- **label-md:** Geist 15px at weight 600, line height 1.5, tracking -0.01em. Buttons, navigation and labels.
- **label-sm:** Geist 14.5px at weight 500, line height 1.6, tracking -0.005em. Small labels and badges.
- **code:** ui-monospace 14px at weight 400, line height 1.72. Code and technical values.
## Layout
Spacing does not follow a strict grid: 37% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.
- **Scale:** sm 5px, md 12px, lg 17px, xl 52px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 16px is the most common gap in flex and grid layouts.
- **Page margin:** 24px on each side of full-width sections.
- **Breakpoints:** 480px, 600px, 601px, 640px, 700px, 768px, 769px, 900px, 960px, 1000px, 1024px, 1100px, 2160px.
## Elevation & Depth
Depth comes mostly from hairline rings and inset highlights on tonal surfaces (#0E0B13 → #1F1A27 → #221E29):
- `rgba(255, 255, 255, 0.07) 0px 1px 0px 0px inset`
- `rgba(255, 255, 255, 0.07) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.04) 0px 0px 0px 1px inset`
- `rgba(255, 255, 255, 0.055) 0px 0px 0px 1px inset`
A few raised panels add a soft drop shadow: `rgba(255, 255, 255, 0.07) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.35) 0px 8px 20px 0px`.
## Shapes
Most elements use 6px corners. Measured radii, most used first:
- **xs (6px):** 180 elements.
- **xl (16px):** 168 elements.
- **md (11px):** 120 elements.
- **sm (8px):** 24 elements.
- **lg (12px):** 24 elements.
- **full (9999px):** 12 elements.
## Components
Measured from the rendered page. Token values reference the tokens above.
- **button-primary (“Browse components”):** #F4F2F7 fill, #141118 text, 15px/500, 13px radius, padding 0px 17px 0px 21px.
- **button-primary-hover:** background #FFFFFF, text #141118 on hover.
- **button-outline (“Star on GitHub”):** #221E29 fill, #F6F4F9 text, 15px/500, 13px radius, padding 0px 20px, shadow `rgba(255, 255, 255, 0.07) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.04) 0px 0px 0px 1px inset`.
- **button-outline-hover:** background #2B2633, text #F6F4F9 on hover.
- **button-secondary (“Get React Bits Pro”):** #64646A fill, #FFFFFF text, 13px/600, 10px radius, padding 0px 18px, shadow `rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 2px 0px`.
- **button-ghost (“"#a1a1aa"”):** transparent fill, #F6F4F9 text, 14px/400, 5px radius, padding 0px 1.4px.
- **card:** #FFFFFF0A fill, #FFFFFF text, 16px/400, 16px radius, padding 5px, shadow `rgba(255, 255, 255, 0.07) 0px 1px 0px 0px inset`.
- **link:** transparent fill, #FFFFFF text, padding 0px.
## Do's and Don'ts
- Do use #120F17 for the page and lift surfaces in small steps: #0E0B13, #1F1A27, #221E29.
- Do keep text in 4 levels: #FFFFFF, #F6F4F9, #B8B7BA, #9B989F.
- Do let contrast carry emphasis; primary actions use #F4F2F7 on #120F17.
- Do set headlines in Geist with tight tracking (-0.036em).
- Do reuse the measured spacing steps (5px, 12px, 17px).
- Do use 6px corners on most elements; larger surfaces also use 16px, 11px and 8px.
- Don't use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
- Don't introduce new font families beyond Geist and ui-monospace.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.46s.
## Motion
Interface transitions are quick: 0.2s, 0.12s, 0.3s, 0.15s. Longer ambient animations run 30s, 20s.
- **Easing:** `cubic-bezier(0.23, 1, 0.32, 1)`, `ease`, `linear`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.
Generated by [Sitepeel](https://sitepeel.dev/design-md/reactbits.dev/), the free DESIGN.md generator.
What you can build with it
Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.
Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.
Build a landing page for my product. Follow for every color, font, spacing value, corner and button.
Need more than one page?
Design MD in the Sitepeel tools for Chrome measures pages behind a login, combines several pages into one file and works on any site you open.
More designs
See all →
FAQ
Questions
What can I build with the React Bits DESIGN.md?
Any page or component in this style: a landing page, pricing table, dashboard or sign-up form. Your AI coding agent uses the measured colors, Geist type, spacing, corners and buttons instead of its own defaults.
How do I use it with Claude Code or Cursor?
Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.
Is this React Bits’s official design system?
No. Sitepeel measured it from reactbits.dev’s public page on October 22, 2026. It is an independent analysis, not made or approved by React Bits.
Can I use React Bits’s style in my own product?
Use it to learn, prototype and compare. For a real product, make the style your own, and never copy React Bits’s logo, name, pictures or text.
How accurate are the values?
Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.