# Design system

> As cores, a tipografia, os espaços, os ícones e os componentes do Rice, mostrados direto dos tokens com que o site é construído. Serve para fazer algo com cara de Rice, ou para conferir que ainda tem.

Atualizado em 2026-10-20. https://ricenotes.app/pt/design

Gerado no build do site, a partir dos tokens compartilhados com o app ([design/tokens.json](https://github.com/WalissonCF/rice/blob/main/design/tokens.json) no repositório do app) e dos próprios do site em `src/styles/index.css`.

## Princípios

- **Quente e calmo.** Cinzas quentes, os mesmos do app, no claro e no escuro. Quem traz cor é o conteúdo: prints, vídeo, a marca de cada IA. O vermelho fica para a gravação, e o azul aparece só no anel de foco do teclado.
- **Leve e local.** Uma fonte só, servida pelo próprio site, e nenhuma imagem ou script que a página não precise. As páginas abrem rápido no celular e nada se mexe enquanto carregam. O app em si não manda nada sobre você para lugar nenhum.
- **Duas línguas, escritas para cada uma.** Toda página existe em português e em inglês, escrita para quem lê cada uma, não traduzida palavra por palavra. Sem emoji, em lugar nenhum.
- **Para todo mundo ler.** O texto passa no contraste AA da WCAG nos dois temas, tudo funciona pelo teclado, o foco sempre aparece e a animação para quando o sistema pede menos movimento.

## Cores

Nomes que mudam com o tema. Os componentes usam só os nomes, então a mesma classe funciona no claro e no escuro. A maioria vem do app, então site e app têm os mesmos cinzas, as mesmas cores de texto e as mesmas linhas.

### Escala neutra

- 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`

### Cores por função

| Nome | Claro | Escuro | Uso |
| --- | --- | --- | --- |
| `bg` | `#fcfcfb` (bg) | `#191919` (bg) | Fundo da página |
| `raised` | `#ffffff` (neutral-0) | `#1c1c1c` (neutral-900) | Superfícies acima da página: botões, campos |
| `sunk` | `#f5f5f3` (sidebar) | `#1e1e1e` (sidebar) | Painéis discretos e código |
| `line` | `rgba(42,42,40,.1)` (line) | `rgba(255,255,255,.1)` (line) | Divisórias e bordas |
| `line-strong` | `rgba(42,42,40,.2)` (guide) | `rgba(255,255,255,.2)` (guide) | Bordas que precisam aparecer: selos, o comando de instalação |
| `ink` | `#2a2a28` (ink) | `rgba(255,255,255,.88)` (ink) | Texto, ações principais, anel de foco |
| `ink-2` | `#52524e` | `rgb(255 255 255 / 0.68)` | Texto corrido ao lado dos títulos |
| `ink-3` | `#6b6b66` (muted) | `rgba(255,255,255,.5)` (muted) | Datas, rótulos, legendas |
| `on-ink` | `#fcfcfb` (bg) | `#191919` (bg) | Texto sobre um fundo cor de tinta |
| `accent` | `#4a6fd6` (accent) | `#86a0f0` (accent) | Borda do anel de foco do teclado |
| `ring` | `rgba(74,111,214,.28)` (ring) | `rgba(134,160,240,.32)` (ring) | Anel de foco do teclado |
| `rec` | `#e5484d` (rec) | `#ff6369` (rec) | Ponto de gravação, nas imagens do app |
| `shot` | `#1e1e1e` (neutral-875) | `#1e1e1e` (neutral-875) | Moldura dos prints do app, igual nos dois temas |

### Contraste

Cada cor de texto sobre cada superfície, nos dois temas. A WCAG AA pede 4,5:1 para texto corrido.

| Texto sobre superfície | Claro | Escuro |
| --- | --- | --- |
| 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 |

### Gravação

O vermelho aparece só no ponto de gravação, nas imagens do app, com o mesmo valor do app. No site ele nunca é link, botão nem alerta.

## Tipografia

No site, Instrument Sans para tudo, com uma fonte reserva medida contra a Arial para a página não se mexer quando a fonte chega; o app usa a fonte do sistema. Comandos usam a mesma monoespaçada do app. Os tamanhos seguem uma terça maior a partir de 17 px, e os grandes crescem com a tela. Três pesos, os mesmos do app.

- Texto: `'Instrument Sans', 'Instrument Sans Fallback', system-ui, sans-serif`
- Código: `ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace`

### Escala

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

### Pesos

- 400: Regular, texto corrido
- 500: Médio, links, botões e rótulos
- 600: Seminegrito, títulos e perguntas

## Espaços e layout

Base de 4 px; o layout anda num ritmo de 8 px. A margem da página e o espaço entre seções crescem com a tela.

- base: `0.25rem`
- Margem da página: `clamp(1rem, 0.4rem + 2.6vw, 2rem)`
- Entre seções: `clamp(4rem, 2.8rem + 5vw, 8rem)`
- Altura do cabeçalho: `4rem`
- Largura do conteúdo: `80rem`
- Pontos de quebra: xs `30rem`, sm `40rem`, nav `72rem`, lg `60rem`

## Cantos, sombras e movimento

### Raio dos cantos

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

### Sombras

- shot (Prints e o vídeo): `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 e a navegação no celular): `0 8px 28px rgba(0,0,0,.18)`; dark: `0 0 0 1px var(--line), 0 8px 28px rgba(0,0,0,.28)`
- focus (Anel de foco do teclado): `0 0 0 3px var(--ring)`
- rule (A linha sob o cabeçalho): `0 1px 0 var(--line)`

### Movimento

O mesmo ritmo do app: rápido para mudanças de cor no hover, base para o que abre e fecha, lento para movimentos maiores. Com a redução de movimento ligada no sistema, nada anima.

- Durações: fast `120ms`, base `180ms`, slow `300ms`
- Curvas: ease-base `ease`, ease-out `ease-out`

## Ícones

Ícones de linha numa grade de 24 px, traço de 1,5 px como no app, pontas arredondadas, na cor do texto em volta. Desenhados a partir do Lucide (licença ISC). Sempre vêm com uma palavra; ícone sozinho só onde o sentido é universal, e aí ele tem um nome acessível.

## Logo

Uma tigela com arroz em cima, desenhada pelo autor do app. É uma forma só, numa cor: a cor do texto no claro, branco no escuro.

- Deixe em volta pelo menos um quarto da largura dele.
- Tamanho mínimo: 16 px na tela.
- Não adicione cor, contorno, sombra ou efeito, e não o estique.
- Ao lado do nome, a palavra Rice vai em Instrument Sans Seminegrito.

Os arquivos em SVG e PNG estão no [kit de imprensa](https://ricenotes.app/pt/imprensa).

## Arquivos

O guia completo, com as regras de texto e do app, está no [DESIGN.md](https://github.com/WalissonCF/rice/blob/main/DESIGN.md) no GitHub. O site lê os tokens de `src/styles/index.css`.