Ariakit

# Ariakit — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Ariakit. "Ariakit" 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:** Ariakit
**Owner:** Ariakit
**Official documentation:** https://ariakit.org/
**Visual character:** Styling-agnostic by design: Ariakit ships behavior and accessibility, leaving color and shape entirely to your product.

---

## Summary

Toolkit for building accessible rich web applications with React (formerly Reakit).

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Ariakit is an unstyled primitive library; visual tokens above describe its documentation site, not a shipped theme._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Blue / Primary | `#007acc` | `--ariakit-primary` | Focus rings and interactive accents (docs) |
| Text | `#1f2328` | `--ariakit-text` | Primary text |
| White | `#ffffff` | `--ariakit-white` | Surfaces |
| Gray 100 | `#f6f8fa` | `--ariakit-gray-100` | Subtle background |
| Border | `#d0d7de` | `--ariakit-border` | Borders |

## Typography

- **Body:** Inter / system — weights 400, 500, 700 — `Inter, system-ui, -apple-system, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `36px` | `44px` |
| body | `16px` | `24px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `8px` |

## Quick start (CSS)

```css
/* Ariakit — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://ariakit.org/ */

:root {
  /* Color */
  --ariakit-primary: #007acc; /* Focus rings and interactive accents (docs) */
  --ariakit-text: #1f2328; /* Primary text */
  --ariakit-white: #ffffff; /* Surfaces */
  --ariakit-gray-100: #f6f8fa; /* Subtle background */
  --ariakit-border: #d0d7de; /* Borders */

  /* Typography */
  --font-body: Inter, system-ui, -apple-system, sans-serif;

  /* Type scale */
  --text-h1: 36px /* line-height 44px */;
  --text-body: 16px /* line-height 24px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  /* Radius */
  --radius-default: 8px;
}
```

## Engineering profile

- **Ships for:** React
- **Token pipeline:** None public
- **Source model:** Open source

## Apply this style with an AI tool

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

> Design in the spirit of Ariakit by Ariakit — Toolkit for building accessible rich web applications with React (formerly Reakit). Character: Styling-agnostic by design: Ariakit ships behavior and accessibility, leaving color and shape entirely to your product. Use a primary colour near #007acc, the typeface "Inter / system" (or a close equivalent), corner radius around 8px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Ariakit documentation](https://ariakit.org/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/reakit) — 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._