Radix UI

# Radix UI — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by WorkOS. "Radix UI" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Radix UI
**Owner:** WorkOS
**Official documentation:** https://www.radix-ui.com/
**Visual character:** The 12-step scale doctrine: every hue graded for exact use, accessibility encoded in the numbers, aesthetics left to you.

---

## Summary

Unstyled, accessible primitives that quietly power half of modern React.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Indigo 9 / Accent | `#3e63dd` | `--indigo-9` | Default accent step 9 (solid backgrounds) |
| Gray 12 Text | `#1c2024` | `--gray-12` | High-contrast text (gray scale step 12) |
| Gray 11 | `#60646c` | `--gray-11` | Low-contrast text (step 11) |
| Gray 1 Background | `#fcfcfd` | `--gray-1` | App background (step 1) |
| Gray 3 Surface | `#f0f0f3` | `--gray-3` | Component background (step 3) |
| Gray 6 Border | `#d9d9e0` | `--gray-6` | Subtle borders (step 6) |
| Red 9 | `#e5484d` | `--red-9` | Errors |
| Green 9 | `#30a46c` | `--green-9` | Success |

## Typography

- **Body:** Project-defined (Themes default: system) — weights 400, 500, 700 — `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| size-8 | `35px` | `40px` |
| size-6 | `24px` | `30px` |
| size-4 | `18px` | `26px` |
| size-3 | `16px` | `24px` |
| size-2 | `14px` | `20px` |
| size-1 | `12px` | `16px` |

## Spacing

Base unit: `4px (space-1)`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `40px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| radius-2 | `4px` |
| radius-3 | `6px` |
| radius-4 | `8px` |
| full | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| shadow-3 | `0 2px 3px -2px rgba(0,0,0,0.3), 0 3px 12px -4px rgba(0,0,0,0.15)` |

## Quick start (CSS)

```css
/* Radix UI — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://www.radix-ui.com/ */

:root {
  /* Color */
  --indigo-9: #3e63dd; /* Default accent step 9 (solid backgrounds) */
  --gray-12: #1c2024; /* High-contrast text (gray scale step 12) */
  --gray-11: #60646c; /* Low-contrast text (step 11) */
  --gray-1: #fcfcfd; /* App background (step 1) */
  --gray-3: #f0f0f3; /* Component background (step 3) */
  --gray-6: #d9d9e0; /* Subtle borders (step 6) */
  --red-9: #e5484d; /* Errors */
  --green-9: #30a46c; /* Success */

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --text-size-8: 35px /* line-height 40px */;
  --text-size-6: 24px /* line-height 30px */;
  --text-size-4: 18px /* line-height 26px */;
  --text-size-3: 16px /* line-height 24px */;
  --text-size-2: 14px /* line-height 20px */;
  --text-size-1: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Radius */
  --radius-radius-2: 4px;
  --radius-radius-3: 6px;
  --radius-radius-4: 8px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-shadow-3: 0 2px 3px -2px rgba(0,0,0,0.3), 0 3px 12px -4px rgba(0,0,0,0.15);
}
```

## Origin

Modulz built Radix Primitives starting in 2019 to ship unstyled, accessible component primitives for React. WorkOS acquired Modulz in 2022 and continues to maintain Radix as open source. shadcn/ui, Vercel's design system, and many internal design systems build on Radix Primitives.

## Governance

WorkOS-supported, open source under MIT. Active maintainer team with a measured release cadence. Radix Themes (a styled layer) ships alongside the unstyled Primitives for teams that want both.

## Known for

- Accessibility correctness — Radix Primitives are often the reference for proper focus management, ARIA, and keyboard handling in React.
- Composition pattern — every Radix component is a tiny set of building blocks (`Dialog.Root`, `Dialog.Trigger`, `Dialog.Content`) that consumers compose.
- Tiny per-primitive bundle size relative to the accessibility behavior they ship.

## Underrated

- Radix Colors — a separate package shipping accessible color scales with light/dark/alpha pairs. Underused outside the Radix ecosystem.
- Radix Icons — a clean, consistent SVG icon set that pairs naturally with the Primitives.

## Watch out for

- Radix is unstyled — you're responsible for the styling layer (Tailwind, CSS, CSS-in-JS). For teams that just want components that look right, shadcn/ui or Radix Themes is the better entry.
- The composition API is excellent but unfamiliar to teams used to traditional `<Modal isOpen={x} onClose={y}>` props.

## Components worth studying

- **Dialog** — Modal with focus trap, ESC handling, scroll lock, and overlay correctness.
- **DropdownMenu** — Keyboard-navigable menu with submenus, checkboxes, and radio groups.
- **Select** — Accessible select with searchable, scrollable, and grouped variants.

## When to choose Radix UI

Use Radix Primitives whenever you're building your own component library — they handle the hard parts (accessibility, focus, keyboard) so you can focus on visual design. If you don't want to think about styling at all, use Radix Themes or shadcn/ui (which wraps Radix with Tailwind).

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Radix UI by WorkOS — Unstyled, accessible primitives that quietly power half of modern React. Character: The 12-step scale doctrine: every hue graded for exact use, accessibility encoded in the numbers, aesthetics left to you. Use a primary colour near #3e63dd, the typeface "Project-defined (Themes default: system)" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px (space-1) base. Lean into what it's known for: Accessibility correctness — Radix Primitives are often the reference for proper focus management, ARIA, and keyboard handling in React. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Radix Primitives](https://www.radix-ui.com/primitives)
- [Radix Themes](https://www.radix-ui.com/themes)
- [Radix on GitHub](https://github.com/radix-ui/primitives)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/radix-ui) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._