Ring UI

# Ring UI — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by JetBrains. "Ring 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:** Ring UI
**Owner:** JetBrains
**Official documentation:** https://jetbrains.github.io/ring-ui/
**Visual character:** IDE-company economy: 13px workhorse text, JetBrains Mono accents, and chrome that stays out of the way of code.

---

## Summary

A collection of UI components for web applications.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Main / Blue | `#008eff` | `--ring-main-color` | Primary actions and links |
| Text | `#1f2326` | `--ring-text-color` | Primary text |
| Secondary Text | `#737577` | `--ring-secondary-color` | Secondary text |
| White | `#ffffff` | `--ring-content-background-color` | Surfaces |
| Sidebar Background | `#f7f9fa` | `--ring-sidebar-background-color` | Panels |
| Border | `#dfe5eb` | `--ring-line-color` | Borders |
| Error | `#c22731` | `--ring-error-color` | Errors |
| Success | `#1b8833` | `--ring-success-color` | Success |

## Typography

- **Body:** System stack — weights 400, 700 — `system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif`
- **Mono:** JetBrains Mono — weights 400 — `'JetBrains Mono', 'Fira Code', monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `24px` | `28px` |
| h2 | `20px` | `24px` |
| body | `13px` | `20px` |
| small | `12px` | `16px` |

## Spacing

Base unit: `8px (ring-unit)`

Scale: `8px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `4px` |

## Quick start (CSS)

```css
/* Ring UI — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://jetbrains.github.io/ring-ui/ */

:root {
  /* Color */
  --ring-main-color: #008eff; /* Primary actions and links */
  --ring-text-color: #1f2326; /* Primary text */
  --ring-secondary-color: #737577; /* Secondary text */
  --ring-content-background-color: #ffffff; /* Surfaces */
  --ring-sidebar-background-color: #f7f9fa; /* Panels */
  --ring-line-color: #dfe5eb; /* Borders */
  --ring-error-color: #c22731; /* Errors */
  --ring-success-color: #1b8833; /* Success */

  /* Typography */
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale */
  --text-h1: 24px /* line-height 28px */;
  --text-h2: 20px /* line-height 24px */;
  --text-body: 13px /* line-height 20px */;
  --text-small: 12px /* line-height 16px */;

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

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

## Engineering profile

- **Ships for:** React
- **Token pipeline:** Custom
- **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 Ring UI by JetBrains — A collection of UI components for web applications. Character: IDE-company economy: 13px workhorse text, JetBrains Mono accents, and chrome that stays out of the way of code. Use a primary colour near #008eff, the typeface "System stack" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px (ring-unit) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Ring UI documentation](https://jetbrains.github.io/ring-ui/)

---

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