Design system

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

Só no site: usada nas imagens do app e nos quadros do logo.

• 0

  #ffffff

• 25

  #fcfcfb

• 50

  #f2f2f2

• 100

  #e3e3e3

• 300

  #b0b0b0

• 400

  #969696

• 700

  #3b3b3b

• 800

  #2b2b2b

• 850

  #202020

• 875

  #1e1e1e

• 900

  #1c1c1c

• 950

  #191919

• 975

  #141414

Cores por função

Contraste

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

Gravação

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.

Famílias

Texto

Rice 0123456789'Instrument Sans', 'Instrument Sans Fallback', system-ui, sans-serif

Código

Rice 0123456789ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace

Escala

1. hero40–80 px · entrelinha 1.02 · espacejamento -0.038emcresce com a tela

   Notas que ficam no seu computador

2. doc-title36–60 px · entrelinha 1.05 · espacejamento -0.034emcresce com a tela

   Notas que ficam no seu computador

3. xl30–44 px · entrelinha 1.08 · espacejamento -0.028emcresce com a tela

   Notas que ficam no seu computador

4. doc24–32 px · entrelinha 1.15 · espacejamento -0.024emcresce com a tela

   Notas que ficam no seu computador

5. lg25 px · entrelinha 1.2

   Notas que ficam no seu computador

6. lead18–20 px · entrelinha 1.55cresce com a tela

   Notas que ficam no seu computador

7. md20 px · entrelinha 1.32

   Notas que ficam no seu computador

8. base16–17 px · entrelinha 1.6cresce com a tela

   Notas que ficam no seu computador

9. code14 px · entrelinha 1.7

   Notas que ficam no seu computador

10. sm15 px · entrelinha 1.55

    Notas que ficam no seu computador

11. xs13 px · entrelinha 1.45

    Notas que ficam no seu computador

Pesos

• Rice

  400 · Regular, texto corrido

• Rice

  500 · Médio, links, botões e rótulos

• Rice

  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.

Passos

1. 1 · 4 px
2. 2 · 8 px
3. 3 · 12 px
4. 4 · 16 px
5. 6 · 24 px
6. 8 · 32 px
7. 12 · 48 px
8. 16 · 64 px
9. 24 · 96 px
10. 32 · 128 px

Layout

Margem da página

16–32 px spacing-gutter

Entre seções

64–128 px spacing-section

Altura do cabeçalho

64 px spacing-header

Largura do conteúdo

1280 px container-page

Pontos de quebra

480 px xs640 px sm1152 px nav960 px lg

Cantos, sombras e movimento

Raio dos cantos

Compartilhado com o app

• xs

  4px

• sm

  6px

• md

  8px

• lg

  10px

• xl

  12px

• 2xl

  14px

• pill

  50%

Sombras

• shot

  Prints e o vídeo

  Só no site

• pop

  Menus e a navegação no celular

  Compartilhado com o app

• focus

  Anel de foco do teclado

  Compartilhado com o app

• rule

  A linha sob o cabeçalho

  Só no site

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 120msbase 180msslow 300ms

Curvas

ease-base: easeease-out: ease-out

Compartilhado com o app

Í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.

• copy
• check
• sun
• moon
• menu
• close
• plus
• chevronDown
• download
• arrowLeft
• arrowRight
• volume
• volumeOff
• play
• botOff
• laptop
• plug
• code
• languages
• drive
• cloud
• shield
• star
• book
• search
• fork
• pullRequest
• scale
• clock

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.

• No claro

• 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.

Componentes

As peças de que as páginas são feitas, como aparecem no site.

Comando com botão de copiar

curl -fsSL https://ricenotes.app/install | bash

curl -fsSL https://ricenotes.app/install | bash

Selos

DisponívelPréviaEm breve

Links e código no texto

Leia o guia. Cada reunião fica em arquivos .md que qualquer app abre.

Botão de ícone

Abre e fecha

Lista

• Gravação e transcrição no computador
• Notas com a IA que você escolher
• Sem conta e sem telemetria

Arquivos

O guia completo, com as regras de texto e do app, está no DESIGN.md no GitHub. O site lê os tokens de src/styles/index.css.