RUDO · m8201 · Quick Reference · v0.1

Design tokens.

Single-page reference for whoever ports this to TSX or builds new RUDO surfaces. Palette swatches (click to copy hex). Type ladder. Component primitives. Spacing & motion scales. Everything below is also in 02_BRAND.md + fonts/fonts.css + the source SVGs — this is the fast lookup.

1 · Palette#palette

12 brand tokens · moss = the world · casque/bill/belly/body = the bird (never substitute) · paper = sketch/annotation surfaces. Click a chip to copy its hex.

Moss greens · the world

Bird literals · the truth (never substitute)

2 · Type#type

Display + headings in Instrument Serif (italic em in casque red for emphasis). Body in DM Sans. UI labels in JetBrains Mono uppercase 0.14em letter-spacing. Annotations in Caveat (story page only).

Display

Instrument Serif · 400 · 64-80px

font-family: var(--font-serif)

Empower good with AI.

Instrument Serif · 400 · 48px

I'm here because my cousins aren't.

Instrument Serif · 500 · 28-32px

几件事，先讲清楚。

Instrument Serif · 400 · 22px

Privacy

Body

DM Sans · 400 · 15-17px · 1.5-1.6 LH

I help your child with their math mistakes. Each day, I send you one sentence about what they got stuck on. I won't do the problems for them. I won't guess what I don't know.

Body · small

DM Sans · 400 · 13px

数据库层面看不到别家的，结构上做不到。

UI label

JetBrains Mono · 400 · 10-11px · 0.14em letter-spacing · UPPERCASE

ONB-1 · /companion/onboard/welcome

Hand · annotation

Caveat · 500 · 22px (story page only)

the casque · "red ivory" · $6,150 / kg →

3 · Component primitives#components

Reusable atoms across all 11 surfaces. Same CSS classes, same behaviors.

Buttons

.btn-primary  // moss-900 fill
.btn-ghost    // transparent + border
.btn-danger   // casque border + text
.btn-cta      // casque fill (nav/marketing)

Pilot badge

Pilot · 30 families Pilot

.pilot-badge  // casque-tint pill
              // ::before red dot
              // remove at W4 launch

Toggle

.toggle       // off (gray-15)
.toggle.on    // on  (lh-success)

Status pills

ON OFF PENDING

.status       // green (ON / healthy)
.status.off   // moss-700 (OFF · neutral)
.status.warn  // amber (PENDING · warn)

Form field

Grade

label[for] ↔ input[id] · always
focus = 2px solid var(--moss-500)
a11y: explicit for/id pair

4 · Spacing scale#spacing

Observed scale across the 11 surfaces. Not a strict 4/8-system — uses what reads well. m510 port can normalize to Tailwind p-{2,3,4,5,6,8} if needed.

xs · 4

4px · gap, dot

sm · 6

6px · tag pad

· 8

8px · tag gap

md · 10

10px · btn radius

· 12

12px · btn pad

lg · 14

14px · card pad

· 16

16px · stage pad

xl · 18

18px · privacy pad

· 20

20px · card pad

2xl · 24

24px · onb pad

3xl · 32

32px · email mock pad

4xl · 48

48px · section gap

5xl · 60

60px · page side pad

5 · Motion#motion

From 02_BRAND.md §6. Default ease = cubic-bezier(0.16, 1, 0.3, 1) (LIGHT HOPE house ease). Reduced-motion mode kills all transitions.

Default easecubic-bezier(0.16, 1, 0.3, 1)All transitions · hovers · panel slides

Idle breath4s loop · ±2% scale on bodyMascot resting state · subtle "alive"

Flyingarc path · tail trails ~80msFuture · marketing animation

Wavesingle wing · ±15° · 1.2s loopPoseHi · greeting

Togglebackground 200ms · transform 200msConsent toggle · privacy pillar

Sticker hovertransform 200ms easeSticker sheet · subtle tilt

RefuseNONE — no animationNo bouncing, no marketing wiggle, no mascot trivialization

6 · Voice · in 6 lines#voice

From 06_VOICE.md. The full rules are in strings.json $meta.voice_rules. These are the load-bearing ones.

First person, present tense: "I can", "I won't guess". Never "as an AI", never "I'm just an AI".
Plain words: help not assist · show not demonstrate · can not "have the ability to".
Honest before charming: "I don't know" is the right first move. Then offer what RUDO can do.
No emoji of any kind. Plain words first.
Names the bird honestly: helmeted hornbill / 鹤顶红 / Rhinoplax vigil.
Banned: "happy to help" · "literally" · "synergize" · "ecosystem" · "journey" · "leverage" · "robust" · "frictionless" · "delight" (verb) · "best-in-class" · "seamlessly".