Read the whole DESIGN.md.
Follow a marked line into its reasoning. This is our complete original fixture, not a generated site or a substitute for the current specification.
---version: alphaname: After Hours Reading Roomcolors: primary: "#202025"↗ paper: "#F5EEDC" signal: "#D1F15F" quiet: "#5A5860"typography: heading: fontFamily: Georgia fontSize: 48px fontWeight: 400 lineHeight: 1.1 body: fontFamily: Arial fontSize: 16px lineHeight: 1.6spacing: paragraph: 16px section: 48pxrounded: paper: 0px action: 20pxcomponents: button-primary: backgroundColor: "{colors.signal}"↗ textColor: "{colors.primary}" rounded: "{rounded.action}" padding: 16px---## OverviewAn independent reading room for people choosing one essay to read now. The visitor needs an excerpt, its reading time, and a clear way into the full essay.## ColorsSignal green identifies the single primary action in the current reading context. Paper is the article surface; quiet text is supporting information on paper.## TypographyUse the heading face for essay titles and the body face for running prose. Keep supporting labels in the body face; a third typeface is unnecessary.## LayoutOn desktop, lead with one excerpt, followed by its title and reading time. Keep a separate narrow reading queue alongside the excerpt. On a phone, move the queue after the excerpt; do not collapse it into an icon.↗## Elevation & DepthUse surface contrast and whitespace. The reading queue is subordinate to the active excerpt and does not need a floating shadow.## ShapesThe article surface has square corners. Only the primary reading action is rounded.## ComponentsThe primary button opens the complete essay. Its label names that action. Secondary essay choices are plain text links in the queue.## Do's and Don'tsDo keep the title and reading time visible before the primary action. Do not put every essay into an equally prominent card. Do preserve a visible keyboard focus indicator and descriptive links.↗
Adapt the decisions, not just the names.
This example asks for one active essay, a subordinate reading queue and visible reading time. A product with several equal-priority tasks needs different hierarchy. Start with the visitor’s next decision and rewrite the Overview and Layout sections before changing colors.
Keep the role and value together: signal is reserved for the primary reading action. If you replace its green with pink, also review the sentence under Colors that still calls it “Signal green.” Our token-change experiment deliberately leaves that sentence unchanged to isolate the token change; it is not a finished design revision.
Our original file’s paper and quiet values have no component references. The resulting native warnings remain visible. Removing those values merely to silence a warning would remove design information; either give them a real component use or retain the warning with an explanation. No lint result establishes contrast or keyboard usability in a rendered page.
See the token-change record · Decide what to send to implementation · Read the versioned sources
A valid file can still describe the wrong page.
Imagine two implementations of this exact reading-room brief. Both use the exported green, paper background and Georgia headings. One opens with six equally large essay cards. The other begins with one excerpt, its title and reading time, with a quieter queue beside it. Matching colors cannot decide between them. The original Overview and Layout instructions can.
This is a proposed review exercise, not a pair of Stitch generations we tested. Keep the actual layout paragraph in sight while reviewing a page someone has built from the file.
Review one decision at a time.
- The reader’s first choice
- Find the active excerpt without clicking. Then find its title and reading time. If every item competes equally, record the conflict with the “one active essay” decision. “Make it feel more editorial” is harder to act on than naming the missing priority.
- The phone order
- Read the page from the top at a narrow width. In this baseline, the queue follows the excerpt. A collapsed menu hides the queue; a queue before the excerpt reverses the instruction. Either may be a deliberate redesign, but neither is the same implementation merely because the colors match.
- The reading action
- Activate the primary link and check that it opens the complete intended essay. Return, then reach it using the keyboard. A visible focus indicator and descriptive label are separate observations from whether navigation succeeds.
Write a useful revision request.
In the phone view, the queue is above the excerpt. The baseline Layout paragraph says it follows the excerpt. Please move that existing queue after the excerpt while preserving its text links. Keep the desktop sidebar. Then send the phone view and the keyboard path to the reading action.
This request names the observed state, the relevant decision and the smallest intended change. It does not ask for a new palette or a new set of cards. If the product decision has changed instead, revise the document first and explain the new order. Otherwise the next person may “fix” the implementation back to the old brief.
Keep document review and page review separate.
A token change can require dependent component checks; a prose-only change can require a new layout even when the exported theme is identical. Record both independently. For this sample, “theme unchanged” is compatible with “phone reading order changed”. A successful command exit tells you neither whether the link opens the right essay nor whether the queue stays available on a phone.
Take the concrete reading-room review sheet. It names the exact baseline decisions and leaves room for actual observations. Do not prefill its result from the CLI’s regression field.