refactor(design): finish the colour sweep, and make it enforceable - #148
Merged
Conversation
#144 put the bot pages on the brand. This does the other 60 files, so the whole product reads as one thing, and adds the guard that keeps it that way. ~410 raw palette classes became semantic tokens across the public marketing surface (/try, /enterprise, /about, /knowledge, /personal, /professionals, /bots, blog, navigation) and the app internals (dashboard, documents, chat, conversations, onboarding, auth, settings, profile). Gradient text is gone. Fifteen headings were `bg-gradient-to-r from-X to-Y bg-clip-text text-transparent`; they are now solid text-ink or text-action. globals.css says the identity is carried by typography, and a serif display does not need a gradient to do that. The 'B' mark was still a blue/purple gradient in BotNavigation's MOBILE menu. #144 only fixed the desktop header. Both now render the shared <Logo>. Three defects introduced mid-sweep and corrected, all caught by reading the diff rather than trusting the regex: - degenerate gradients (`from-action-tint to-action-tint`) collapsed to solid - dead hovers (tint on tint) rebased to bg-surface + hover:bg-action-tint - `to-action\b` matched the prefix of `to-action-hover`, so a collapse left a stray `bg-action-hover` as a BASE background in 11 places -- those are the primary, not the hover shade Deliberately NOT changed: - components/knowledge/Callout.tsx -- its blue is the `info` half of an info/warning/error triad. Semantic status colour is a separate scale from the brand accent, and warning is amber, so ochre-ing info would make the two nearly indistinguishable. - the custom-bot surfaces -- custom_bots.accent_color is a real column with a CHECK constraint and the owner picks it. User data, not a design token. Never-twice: tests/__tests__/lib/design-tokens.test.ts refuses any raw brand-palette class, and any bg-clip-text, outside those two documented exceptions. Mutation-verified -- swap one token back to bg-blue-600 and it fails and names the file. No allowlist debt: every other file was swept rather than excused. verify: format, lint, typecheck, 256 tests, build -- all green. Twelve pages smoke-tested and checked visually against a local production build. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVwg8DKHQktxJuHeLM3xpG
github-actions Bot
pushed a commit
that referenced
this pull request
Aug 28, 2026
…ssed it (#149) #148 shipped with the guard passing and the homepage still emitting bg-blue-100, text-indigo-600, bg-purple-100. Both were true, because the guard only walked app/ and components/. The palette was in data/professionals.ts -- its own getAccentColorClasses, giving each of the six first-party professionals a colour (blue, green, indigo, red, amber, purple). Same mistake as the bots in #144, in the one directory the scanner did not read. That is the whole lesson: a source scanner is blind in exactly the shapes you forget to look at, so its first clean run proves nothing. - the six professionals now use the brand, like the six bots - the guard walks data/ and lib/ too - data/menuItems.ts lost a blue/purple gradient Two files are now DOCUMENTED exceptions rather than debt, because their colour is categorical and has to stay mutually distinguishable: lib/constants.ts document status -- pending yellow, processing blue, ready green, error red. Recolouring "processing" to ochre would make state read as brand chrome. lib/infrastructure/providers.ts per-provider identity, so Ollama and OpenAI are tellable apart at a glance. Both sit alongside Callout.tsx's info/warning/error triad, each with its reason written next to it. verify: format, lint, typecheck, 256 tests, build -- all green. Homepage confirmed to emit no raw palette class at all. Claude-Session: https://claude.ai/code/session_01HVwg8DKHQktxJuHeLM3xpG Co-authored-by: Mao Nakamoto <41178744+maonakamoto@users.noreply.github.com> Co-authored-by: Claude Opus 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.
#144 put the bot pages on the brand. This does the other 60 files, so the whole product reads as one thing — and adds the guard that keeps it that way.
What changed
~410 raw palette classes → semantic tokens, across the public marketing surface (
/try,/enterprise,/about,/knowledge,/personal,/professionals,/bots, blog, navigation) and the app internals (dashboard, documents, chat, conversations, onboarding, auth, settings, profile).Gradient text is gone. Fifteen headings were
bg-gradient-to-r from-X to-Y bg-clip-text text-transparent; they're now solidtext-inkortext-action.globals.csssays the identity is carried by typography — a serif display doesn't need a gradient to do that.The
Bmark was still a blue/purple gradient inBotNavigation's mobile menu. #144 only fixed the desktop header. Both now render the shared<Logo>.Three defects I introduced mid-sweep and corrected
Caught by reading the diff rather than trusting the regex:
from-action-tint to-action-tint(same colour both ends) collapsed to solid.hover:bg-action-tinton abg-action-tintbase; rebased tobg-surface+hover:bg-action-tint.to-action\bmatched the prefix ofto-action-hover(the hyphen is a word boundary), so a gradient collapse left a straybg-action-hoveras a base background in 11 places. Those want the primary, not the hover shade.Deliberately NOT changed
components/knowledge/Callout.tsx— its blue is theinfohalf of an info/warning/error triad. Semantic status colour is a separate scale from the brand accent, andwarningis amber, so ochre-inginfowould make the two nearly indistinguishable.custom_bots.accent_coloris a real column with aCHECKconstraint and the owner picks it. User data, not a design token.Never-twice
tests/__tests__/lib/design-tokens.test.tsrefuses any raw brand-palette class, and anybg-clip-text, outside those two documented exceptions. Mutation-verified — swap one token back tobg-blue-600and it fails and names the file.No allowlist debt: every other file was swept rather than excused.
Verify
format:check,lint,typecheck, 256 tests,build— all green. Twelve pages smoke-tested and checked visually against a local production build.🤖 Generated with Claude Code
https://claude.ai/code/session_01HVwg8DKHQktxJuHeLM3xpG