docs: align button spec with the shipped styles - #1058
Merged
Conversation
The brand style guide described a button system the frontend stopped matching. It called the primary button "rounded corners" when the theme ships it fully pill-shaped, and specified a Parchment disabled state at 50% opacity when the code uses a gray fill at full opacity with Golden Pollen and Cotton Candy borders on hover and click. Also repoints the stale relative links in the button design system doc, which broke when that file moved out of frontend/docs. Every link in it now resolves. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
spashii
approved these changes
Sep 11, 2026
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
2 participants
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.
The button rules live in four places. Two of them had drifted from what the frontend actually ships.
What was wrong
Shape.
brand/STYLE_GUIDE.mddescribed the primary button as "rounded corners".button.module.cssgivesvariant="filled"aborder-radius: 9999pxpill, and explicitly keepsoutlineandsubtleon standard corners. The pill is the signal that marks the primary action, so the guide now says so.Disabled state. The guide specified a Parchment background with Graphite text at 50% opacity. The code uses a gray fill with Graphite text at full opacity (
opacity: 1is set deliberately so the label stays readable), plus a 1px Golden Pollen border on hover and Cotton Candy on click. The guide now matches.Dead links. Every relative link in
docs/style-guides/frontend_button_design_system.mdwas broken, left over from when the file sat infrontend/docs/. They pointed at../src/colors.tsand friends, and one pointed at aCOPY_GUIDE.mdthat does not exist. All of them now resolve, and the copy guidance points atbrand/STYLE_GUIDE.mdwhere it actually lives.What was left alone
frontend_button_design_system.mdcalls#4169E1"Institution Blue" while everything else calls it Royal Blue. Same hex, deliberately left as is.Docs only. No code changes.
🤖 Generated with Claude Code