docs: add DESIGN.md and render proof - #190
Conversation
Covers color tokens, typography, radius scale, gradient budget, touch targets, and motion policy. Render proof: 16/16 live Playwright checks pass (radius, type ladders, paper tokens, settings bg, shimmer). Product profile: DESIGN_VARIANCE 3, MOTION_INTENSITY 2, density D5.
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 635723d77a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| Render proof: 16/16 checks pass via live Playwright probe. | ||
| - wp2 radius tokens: 4 values verified | ||
| - wp3 type ladders: mark/title/h2 at 1280px and 320px | ||
| - wp4 paper/state tokens: all defined in computed style | ||
| - wp5 settings-workspace: bgImage=none confirmed, shimmer token defined |
There was a problem hiding this comment.
The 16/16 pass claim does not satisfy this document's own completion condition: the required proof includes eleven typography widths, light/dark themes, geometry and overflow checks, all wp6 touch targets, and the wp9 modal focus/Escape stack, with exact measurements recorded. This summary covers only two typography widths, token presence, and a few computed styles, while omitting wp6 and wp9 entirely, so downstream release work can treat unexecuted accessibility and layout checks as passed; either attach the complete measurements or mark the remaining checks outstanding.
Useful? React with 👍 / 👎.
| | `--surface` | `#14141a` | `#eaeaef` | Card/panel background | | ||
| | `--surface-2` | `#1c1c23` | `#e2e2e9` | Raised surface | | ||
| | `--surface-3` | `#26262f` | `#d8d8e0` | Tertiary surface | |
There was a problem hiding this comment.
The new living reference disagrees with the theme it documents: in ui/src/index.css, the light values are --surface: #fafafc, --surface-2: #ececf1, and --surface-3: #e2e2e9, not the three values listed here. The later text/control tables contain similar mismatches, so designers or contributors copying these documented values will produce colors inconsistent with the application; synchronize the light columns with :root[data-theme="light"].
Useful? React with 👍 / 👎.
|
|
||
| ### Rules | ||
|
|
||
| - **Letter spacing must be 0.** No negative letter-spacing anywhere. |
There was a problem hiding this comment.
The enforced rule is that letter spacing must be zero or positive, not universally zero: tests/ui-typography-rules-contract.test.ts rejects only negative declarations, and the committed UI intentionally contains many positive values such as agent-stage.css's 0.01em and home-workspace.css's 0.08em. Stating that all spacing must be zero makes the authoritative design guide contradict both the contract and existing typography, so contributors cannot tell whether those declarations are allowed.
Useful? React with 👍 / 👎.
| A global `prefers-reduced-motion` reset at `index.css` covers all | ||
| animations. MOTION_INTENSITY 2: subtle transitions only, no decorative | ||
| animation. Skeleton shimmer is the only repeating animation. |
There was a problem hiding this comment.
Skeleton shimmer is not the only permitted repeating animation. The global reset in ui/src/index.css deliberately exempts [data-motion-essential], and required status indicators such as the agent and in-flight spinners use infinite animations so running work remains distinguishable from stalled work. Calling shimmer the only repeating animation contradicts that accessibility behavior and could lead future cleanup to remove necessary progress feedback; document the essential-state exception explicitly.
Useful? React with 👍 / 👎.
1 participant
Summary
Adds DESIGN.md as the living reference for the visual system and records
render proof from live Playwright probes.
DESIGN.md contents
Render proof (16/16 pass)
Tests
Full suite: 2732 pass / 0 fail / 2 skipped