Accent scarcity: terracotta only where it means something - #35
Merged
Merged
Conversation
Step two of the approved style review. The terracotta was everywhere — eyebrows, the hero's second line, prose links, step and service numbers, callout indexes, info notices, config chips, hover borders, row-hover insets, text buttons, the particle field. A brand colour that appears on every surface stops reading as a brand colour and starts reading as the template's tint; the review's finding was that this palette family is the single most common generated-site look, and ubiquity is what makes it look generated. The accent now marks exactly three things: the primary action (button, skip link), the mark itself (BrandMark stem, unchanged), and selected state (platform picker's checked option, explorer's .is-selected, :active flashes — a press is a selection beginning). Everything that was terracotta because "accent goes here" moves to the ink ladder: eyebrows and numbers to --ink-faint (4.88:1 on paper, AA), links and the display em to --ink with the underline as the link affordance, chip-accent and notice-info to the neutral surface (a support fact is not a state; green/orange/red chips keep their colours because those are states), explorer hover to --line-strong (hover is not selection), the particle field to ink channels. --chip-accent-line leaves both theme blocks with its last consumer. All six replacement pairs verified ≥4.88:1 in both themes; the axe contrast gates in e2e pass unchanged, and no visual baseline moved — the console styles are untouched. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Step two of the approved style review (after #34's copy register). The finding it implements: the terracotta appeared on every surface — eyebrows, the hero's second line, prose links, step/service numbers, callout indexes, info notices, config chips, hover borders, text buttons, the particle field — and a brand colour that ambient stops reading as brand. This palette family is also the most common generated-site look, and ubiquity is what makes it read that way.
The rule after this PR
Accent marks exactly three things:
.button-primary, skip link.is-selected,:activepress flashes (a press is a selection beginning)Everything else moves to the ink ladder:
--ink-faintem→--ink(underline stays as the link affordance;.button-textgains one for the same reason)chip-accent(托管配置) andnotice-info→ neutral surface — a support fact is not a state; green/orange/red chips keep their colours because those are states--line-strong(hover ≠ selection;.is-selectedkeeps accent)--chip-accent-linedeleted from both theme blocks with its last consumerTest plan
GITHUB_TOKEN: 216 passed / 18 skipped, zero failures — the axe contrast gates pass unchanged, and no visual baseline moved (console styles untouched)Remaining steps per the review: latin/mono data-voice typography (step 3), HeroParticles removal + motion consolidation (step 4).
🤖 Generated with Claude Code