# Design system

> The colors, type, spacing, icons and components of Rice, shown straight from the tokens the site is built with. Use it to build something that looks like Rice, or to check that it still does.

Updated 2026-10-20. https://ricenotes.app/design

Generated when the site is built, from the tokens shared with the app ([design/tokens.json](https://github.com/WalissonCF/rice/blob/main/design/tokens.json) in the app repository) and the site's own in `src/styles/index.css`.

## Principles

- **Warm and quiet.** Warm greys, the same as the app, in light and dark. The content carries the color: screenshots, video, the logo of each AI. Red is kept for recording, and blue appears only on the keyboard focus ring.
- **Light and local.** One typeface, served by the site itself, and no images or scripts the page does not need. Pages open fast on a phone and nothing moves while they load. The app itself sends nothing about you anywhere.
- **Two languages, written for each.** Every page exists in English and in Portuguese, written for each reader, not translated word by word. No emoji, anywhere.
- **Readable by everyone.** Text meets WCAG AA contrast in both themes, everything works with the keyboard, focus is always visible and motion stops when the system asks for less.

## Color

A set of names that change with the theme. Components use only the names, so one class works in light and in dark. Most come from the app, so the site and the app share the same greys, text colors and lines.

### Neutral scale

- neutral-0: `#ffffff`
- neutral-25: `#fcfcfb`
- neutral-50: `#f2f2f2`
- neutral-100: `#e3e3e3`
- neutral-300: `#b0b0b0`
- neutral-400: `#969696`
- neutral-700: `#3b3b3b`
- neutral-800: `#2b2b2b`
- neutral-850: `#202020`
- neutral-875: `#1e1e1e`
- neutral-900: `#1c1c1c`
- neutral-950: `#191919`
- neutral-975: `#141414`

### Colors by role

| Name | Light | Dark | Use |
| --- | --- | --- | --- |
| `bg` | `#fcfcfb` (bg) | `#191919` (bg) | Page background |
| `raised` | `#ffffff` (neutral-0) | `#1c1c1c` (neutral-900) | Surfaces above the page: buttons, fields |
| `sunk` | `#f5f5f3` (sidebar) | `#1e1e1e` (sidebar) | Quiet panels and code |
| `line` | `rgba(42,42,40,.1)` (line) | `rgba(255,255,255,.1)` (line) | Dividers and borders |
| `line-strong` | `rgba(42,42,40,.2)` (guide) | `rgba(255,255,255,.2)` (guide) | Borders that must be seen: badges, the install command |
| `ink` | `#2a2a28` (ink) | `rgba(255,255,255,.88)` (ink) | Text, primary actions, focus ring |
| `ink-2` | `#52524e` | `rgb(255 255 255 / 0.68)` | Body text next to headings |
| `ink-3` | `#6b6b66` (muted) | `rgba(255,255,255,.5)` (muted) | Dates, labels, captions |
| `on-ink` | `#fcfcfb` (bg) | `#191919` (bg) | Text on an ink fill |
| `accent` | `#4a6fd6` (accent) | `#86a0f0` (accent) | Edge of the keyboard focus ring |
| `ring` | `rgba(74,111,214,.28)` (ring) | `rgba(134,160,240,.32)` (ring) | Keyboard focus ring |
| `rec` | `#e5484d` (rec) | `#ff6369` (rec) | Recording dot, in pictures of the app |
| `shot` | `#1e1e1e` (neutral-875) | `#1e1e1e` (neutral-875) | Frame of the app screenshots, the same in both themes |

### Contrast

Each text color on each surface, in both themes. WCAG AA asks for 4.5:1 for body text.

| Text on surface | Light | Dark |
| --- | --- | --- |
| ink / bg | 14.01:1 | 13.75:1 |
| ink / raised | 14.38:1 | 13.37:1 |
| ink / sunk | 13.17:1 | 13.11:1 |
| ink-2 / bg | 7.65:1 | 8.61:1 |
| ink-2 / raised | 7.85:1 | 8.44:1 |
| ink-2 / sunk | 7.19:1 | 8.31:1 |
| ink-3 / bg | 5.22:1 | 5.23:1 |
| ink-3 / raised | 5.36:1 | 5.17:1 |
| ink-3 / sunk | 4.91:1 | 5.12:1 |

### Recording

Red appears only on the recording dot, in pictures of the app, with the app's own value. It is never a link, a button or an alert on the site.

## Type

On the site, Instrument Sans for everything, with a fallback measured against Arial so the page does not move when the font arrives; the app uses the system font. Commands use the same monospace as the app. Sizes follow a major third from 17 px, and the large ones grow with the screen. Three weights, shared with the app.

- Text: `'Instrument Sans', 'Instrument Sans Fallback', system-ui, sans-serif`
- Code: `ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace`

### Scale

- xs: `0.8125rem`, line height 1.45
- sm: `0.9375rem`, line height 1.55
- code: `0.875rem`, line height 1.7
- base: `clamp(1rem, 0.96rem + 0.2vw, 1.0625rem)`, line height 1.6
- md: `1.25rem`, line height 1.32
- lead: `clamp(1.125rem, 1.02rem + 0.45vw, 1.25rem)`, line height 1.55
- lg: `1.5625rem`, line height 1.2
- doc: `clamp(1.5rem, 1.3rem + 0.8vw, 2rem)`, line height 1.15, tracking -0.024em
- xl: `clamp(1.875rem, 1.45rem + 1.6vw, 2.75rem)`, line height 1.08, tracking -0.028em
- doc-title: `clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem)`, line height 1.05, tracking -0.034em
- hero: `clamp(2.5rem, 1.55rem + 4.1vw, 5rem)`, line height 1.02, tracking -0.038em

### Weights

- 400: Regular, body text
- 500: Medium, links, buttons and labels
- 600: Semibold, headings and questions

## Space and layout

A 4 px base; layout steps on an 8 px rhythm. The page gutter and the space between sections grow with the screen.

- base: `0.25rem`
- Page gutter: `clamp(1rem, 0.4rem + 2.6vw, 2rem)`
- Between sections: `clamp(4rem, 2.8rem + 5vw, 8rem)`
- Header height: `4rem`
- Content width: `80rem`
- Breakpoints: xs `30rem`, sm `40rem`, nav `72rem`, lg `60rem`

## Corners, shadows and motion

### Corner radius

- xs: `4px`
- sm: `6px`
- md: `8px`
- lg: `10px`
- xl: `12px`
- 2xl: `14px`
- pill: `999px`

### Shadows

- shot (Screenshots and the video): `0 1px 2px rgb(0 0 0 / 0.06), 0 12px 32px -12px rgb(0 0 0 / 0.22), 0 40px 80px -40px rgb(0 0 0 / 0.28)`; dark: `0 0 0 1px rgb(255 255 255 / 0.04), 0 24px 64px -24px rgb(0 0 0 / 0.8)`
- pop (Menus and the mobile navigation): `0 8px 28px rgba(0,0,0,.18)`; dark: `0 0 0 1px var(--line), 0 8px 28px rgba(0,0,0,.28)`
- focus (Keyboard focus ring): `0 0 0 3px var(--ring)`
- rule (The line under the header): `0 1px 0 var(--line)`

### Motion

The same timing as the app: fast for color changes on hover, base for things that open and close, slow for larger moves. With reduced motion turned on in the system, nothing animates.

- Durations: fast `120ms`, base `180ms`, slow `300ms`
- Curves: ease-base `ease`, ease-out `ease-out`

## Icons

Line icons on a 24 px grid, 1.5 px stroke as in the app, round ends, in the color of the text around them. Drawn after Lucide (ISC license). They always come with a word; an icon alone is only used where its meaning is universal, and then it has an accessible name.

## Logo

A bowl with rice on top, drawn by the author of the app. It is a single shape in one color: the text color on light, white on dark.

- Leave around it at least a quarter of its width.
- Smallest size: 16 px on screen.
- Do not add color, outlines, shadows or effects, and do not stretch it.
- Next to the name, the word Rice is set in Instrument Sans Semibold.

SVG and PNG files are in the [press kit](https://ricenotes.app/press).

## Files

The full guide, with the rules for writing and for the app, is in [DESIGN.md](https://github.com/WalissonCF/rice/blob/main/DESIGN.md) on GitHub. The site reads its tokens from `src/styles/index.css`.