Design system

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

Site only: used for the pictures of the app and the logo tiles.

• 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

Colors by role

Contrast

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

Recording

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.

Families

Text

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

Code

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

Scale

1. hero40–80 px · line height 1.02 · tracking -0.038emgrows with the screen

   Notes that stay on your computer

2. doc-title36–60 px · line height 1.05 · tracking -0.034emgrows with the screen

   Notes that stay on your computer

3. xl30–44 px · line height 1.08 · tracking -0.028emgrows with the screen

   Notes that stay on your computer

4. doc24–32 px · line height 1.15 · tracking -0.024emgrows with the screen

   Notes that stay on your computer

5. lg25 px · line height 1.2

   Notes that stay on your computer

6. lead18–20 px · line height 1.55grows with the screen

   Notes that stay on your computer

7. md20 px · line height 1.32

   Notes that stay on your computer

8. base16–17 px · line height 1.6grows with the screen

   Notes that stay on your computer

9. code14 px · line height 1.7

   Notes that stay on your computer

10. sm15 px · line height 1.55

    Notes that stay on your computer

11. xs13 px · line height 1.45

    Notes that stay on your computer

Weights

• Rice

  400 · Regular, body text

• Rice

  500 · Medium, links, buttons and labels

• Rice

  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.

Steps

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

Page gutter

16–32 px spacing-gutter

Between sections

64–128 px spacing-section

Header height

64 px spacing-header

Content width

1280 px container-page

Breakpoints

480 px xs640 px sm1152 px nav960 px lg

Corners, shadows and motion

Corner radius

Shared with the app

• xs

  4px

• sm

  6px

• md

  8px

• lg

  10px

• xl

  12px

• 2xl

  14px

• pill

  50%

Shadows

• shot

  Screenshots and the video

  Site only

• pop

  Menus and the mobile navigation

  Shared with the app

• focus

  Keyboard focus ring

  Shared with the app

• rule

  The line under the header

  Site only

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

Curves

ease-base: easeease-out: ease-out

Shared with the app

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.

• 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

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.

• On light

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

Components

The pieces the pages are made of, as they appear on the site.

Command with copy button

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

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

Badges

AvailablePreviewComing soon

Links and inline code

Read the guide. Each meeting is saved as .md files that any app opens.

Icon button

Disclosure

List

• Recording and transcription on the computer
• Notes with the AI you choose
• No account and no telemetry

Files

The full guide, with the rules for writing and for the app, is in DESIGN.md on GitHub. The site reads its tokens from src/styles/index.css.