Foundation

Color

Midnight carries text, structure, and actions. Butter Yellow identifies Inline, marks passages, and shows selection. Every supporting color has one named job. Light theme only.

The pair

Start with Midnight and Butter Yellow. Paper is the reading canvas; white is the working surface for drafts, cards, and dialogs.

Midnight ink-900 · #18213B Text, structure, primary actions
Butter Yellow brand-500 · #E9CB62 Identity, passage marks, selection
Paper paper · #F6F6F3 Marketing and product canvas
White surface · #FFFFFF Drafts, cards, dialogs
Yellow is a mark, not a text color.

The pale steps carry highlights, the dark steps carry focus rings and accessible text, and brand-500 itself never fills a page or carries type.

Scales

Eleven steps per family. Click a step to copy its value. Product code consumes semantic aliases from the tokens, not these primitives.

Midnight

600 is the lightest step for body text on paper900 anchors text and primary actions

Butter Yellow

100 and 200 carry passage highlights700 is the focus ring and passage boundary

Highlights and selection

A passage with attached feedback gets a pale yellow mark; the open question deepens it. Native text selection is 52% brand-500 so it stays legible over existing marks.

Cities preserve monuments because they appear permanent. Removing one can reveal more about public memory than leaving it untouched. The debate became a question about who owns civic history, not only about the statue itself.

Resting markbrand-100
Active markbrand-200 + brand-700 baseline
Selectionbrand-500 at 52%

Question colors

Two question systems share one neutral card: five draft feedback dimensions and seven Brainstorming purposes. Only the written title carries the color, and it identifies type, never status.

02

You state the debate became a question about who owns civic history. What moves it there, step by step?

Draft feedback · dimension title
Challenge 05

Which of these notes would a skeptical reader push back on first?

Brainstorming · purpose title

Draft feedback

5 dimensions
  • #515197
  • #735900
  • #2F5A8F
  • #016770
  • #416A33

Brainstorming

7 purposes
  • Understand#9B3F38
  • Explore#704776
  • Focus#955015
  • Gather#4F5873
  • Connect#2C6663
  • Challenge#873E63
  • Next step#536931
Titlefeedback-title-* / brainstorm-title-*
Cardsurface · hairline · body ink-700
Contrastevery title ≥ 6.11:1 on white

Status

Status colors answer what the application did. In the product they appear as a small indicator beside a written label, never as a full-bleed colored card. Each family ships as a wash, border, solid, and on-wash text.

Success Your draft is saved.
Warning The course title is missing.
Danger Feedback didn't come back. Your draft is saved.
Info 412 words will be read.
Success Saved, ready, complete
100200600800
Warning Missing, nearly out
100200600800
Danger Failed, destructive
100200600800
Info Neutral system state
100200600800

Usage

Keep every hue's job narrow. When a surface starts to feel colorful, remove color rather than balancing it.

04

Which reader is this paragraph written for?

Do keep the card neutral and color only the written dimension title.
Clarity 04

Which reader is this paragraph written for?

Don't fill the card with its dimension color. Large fills compete with the draft and read as status.
Do set primary actions in Midnight with paper text.
Don't use yellow as a button fill or put white text on it. Yellow identifies; it doesn't act.

Readable pairs

ForegroundBackgroundRatioResult
ink-900paper14.70:1AAA
ink-600paper5.88:1AA
ink-900brand-5009.99:1AAA
brand-700paper3.56:1UI boundary
brand-800paper6.04:1AA text
Every question-type titlewhite≥ 6.11:1AA