Writing surfaces

The draft leads and the margin follows: one relationship color, one active pair at a time, and the rest of the margin softened to 72% while a pair is open. The split and rail numbers live on Sizing and density.

Read mode

A white sheet with a hairline boundary, square corners, and a generous inset. Student text is set in the prose role at a 55–72ch measure, and every authored line break is preserved. Nothing on the sheet may imply the product edits it: no cursors it does not own, no inserted text, no rewrite affordances.

Editor variant

Composing uses the same sheet with a bottom rail: an inset hairline rule, quiet actions on the left, and metadata on the right, led by the mono word count. While feedback loads the sheet does not change; status is written elsewhere, as in Your draft is saved while feedback loads.

Accessibility. Read mode is plain document text. The editor is a real labeled text field, the word count is text associated with it, and Upload file is a real button. Because line breaks are preserved in both modes, what assistive technology reads matches what the student wrote.

Passage highlight

A resting mark washes the passage in brand-100; the active mark deepens to brand-200 and adds the 2px brand-700 baseline. Both clone across wrapped lines, and the text color never changes. Exact values, and how native selection stays legible over marks, are owned by Color.

Accessibility. Highlights are buttons: Enter and Space activate them, and aria-current marks the active one. Because the text color never changes, ink on brand-100 and brand-200 keeps its contrast, and the focus ring is the shared brand-700 outline.

Question card

The margin unit. It is an annotation on the manuscript plane, so it keeps the square corners of the draft sheet it serves. A zero padded mono ordinal sits top right in ink-400, the dimension title runs as a colored overline, and the question follows in body-sm ink-700. The title is one of the five feedback dimensions or seven Brainstorming purposes, always written out.

Brainstorming asks purpose labeled questions about starting material, so a Brainstorming card may stand in the rail with no passage attached. Start Brainstorming runs the mode from the compose flow.

Card states

State changes stay on the border and in the margin's weight. When one card is active its siblings soften to 72% opacity over duration.sm; with no active card every card sits at full opacity, and the faded state never applies to the card under the pointer. The margin recedes so the open question and its passage carry the moment. No shadow, no fill change. A second activation copies the question text and confirms with a toast.

Accessibility. The whole card is one button whose accessible name is the written dimension, the ordinal, and the full question, which is why cards never truncate. The copy confirmation is announced politely through the toast's status region, and activation never moves focus away from the card.

The margin rail

Cards stack at 12px gaps beside the draft. On desktop the rail scrolls independently behind a 14px edge fade; below lg it stacks after the full width draft in one document flow. The rail never outweighs the draft: the split and 320–400px rail bounds are owned by Sizing and density.

Accessibility. The rail is a keyboard reachable scroll region with an accessible name, so arrow keys can move through overflowing questions. Because cards never truncate, scrolling is the only response to overflow, and reduced motion users get the same instant scroll positions as everyone else.

Progress rail

Three steps as 24px circles joined by hairline connectors. Done fills ink-900 with a paper check, current sets an ink-900 number in a 2px ink-900 ring, and upcoming sets an ink-400 number in a hairline ring. Labels sit in body-sm. Below lg the rail compresses to the written Step 2 of 3.

Accessibility. The rail is an ordered list named Compose progress, the current step carries aria-current="step", and the done circle pairs its check with a hidden Completed label. The mobile compression is literal text, so small screens lose nothing.

Draft maturity

Four 6px full round segments in ink-100 fill in the success tone as the draft matures. The stage is labeled in writing beside the meter: rough, developing, strong, polished. It describes where the draft is in its life; it is never a grade and never red.

Accessibility. The written label is the accessible content and the segments are decorative, so the stage never depends on color alone. Success is the only fill the meter may use: a draft going backward is still described, never warned about.

A paper canvas holds one centered column: the reading indicator, Reading your draft in h4, Your draft is saved. in body-sm ink-600, and the mono about a minute estimate. The indicator is the brand's own gesture: three schematic manuscript lines whose butter highlight sweeps across them line by line in sequence, a calm loop at duration.lg per line with no bounce, the sanctioned waiting exception from Motion.

The contract. The wait names what is happening, always says the draft is safe, gives an honest estimate, and never blocks the student from knowing that: all three lines hold the screen for the whole run. Under prefers-reduced-motion the sweep stops and the middle line keeps a static full highlight, so the state stays legible in a single frame.

Rating chips Planned

A per card Useful and Needs work pair as 24px chips: hairline border, radius 4, selected state in ink-900 fill with paper text. Reason codes appear only after Needs work. One tap answers; no typing is ever required.

Accessibility. The pair behaves as a labeled toggle group with pressed state exposed, each 24px chip keeps a 44px effective target, and reason codes arrive as a labeled group below the pair without stealing focus.

1. The draft is never edited by the product. Questions sit beside the writing, nothing is ever generated into the student's text, and read mode preserves every line break.
2. The relationship is always yellow. Every passage mark uses brand-100 and brand-200, for every dimension; taxonomy and status colors never tint a highlight.
3. The dimension is always written. Color rides the written overline title; it never carries the meaning alone and never fills the card.
4. Cards never truncate. The full question is always shown; long content grows the card and the rail scrolls instead.
5. The margin never outweighs the draft. The workspace keeps its draft led split and the rail stays inside its 320–400px bounds.
6. The workspace stays flat. Sheet, marks, and cards share the manuscript plane: shadow.none and square corners everywhere; only a transient tool such as the copy toast lifts.
7. States stay quiet. Hover and active change border color, mark depth, and sibling opacity only; no fills, no lift.
8. Activity is described, never judged. Draft maturity names a stage in writing; it is never a grade, never a percentage, and never red.