feat(auth): the gateway says what the product is - #541
Merged
Conversation
The sign-in page was a card floating on an empty canvas — the same page any CRUD app ships, and the first screen anyone sees. It is now a split: the form keeps its column, and beside it an ink panel names the product and three things that are true about it. The panel is the same ink surface as the post-login global bar, deliberately. Signing in should read as entering the product, not as crossing from a marketing page into a different application, and reusing `--topbar-*` means the contrast on that surface is already measured rather than invented here. The mark's teal appears on it — the accent whitelist covers the gateway, and `--brand-on-ink` is the teal built for ink. What the panel says is checkable, not atmospheric: Apache-2.0 and self-hosted; vulnerability data from NVD, OSV and GHSA with EPSS and CISA KEV; SBOMs in CycloneDX and SPDX. A gateway that promises a feeling instead is a page readers learn to skip, and none of those three can quietly stop being true without a test noticing. Below `lg` the panel is not rendered at all. A phone has no room for a brand column beside a form, and stacking them would bury the form under a screenful of copy — the compact lockup above the card already carries the identity. Verified at 390 px: zero horizontal overflow. Two documentation drifts fixed while in the design-system doc: `--brand-strong` has been listed since W14 but was removed from the stylesheet when it turned out nothing painted with it, and `--brand-on-ink` was documented as "global bar only", which this change makes untrue.
Captured on the Linux runner via the ui-gates dispatch. Login is the one that changed; the other seven re-render byte-identically under --update-snapshots=all. The a11y baseline is unchanged: the panel's text sits on --topbar-* whose contrast on ink is already measured, so it adds no violations.
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.
W16-c. The sign-in page was a card floating on an empty canvas — the page any CRUD app ships, and the first screen anyone sees. It is now a split: the form keeps its column, and beside it an ink panel names the product and three things that are true about it.
Why ink
The panel is the same surface as the post-login global bar. Signing in should read as entering the product, not as crossing from a marketing page into a different application, and reusing
--topbar-*means the contrast on that surface is already measured rather than invented here. The mark's teal appears on it — the accent whitelist covers the gateway, and--brand-on-inkis the teal built for ink (9.52:1 on--topbar).What it says
Checkable, not atmospheric:
A gateway that promises a feeling instead is a page readers learn to skip. Each of those three is a claim the product either honours or does not, and a unit test pins them so one cannot quietly stop being true.
Narrow viewports
Below
lgthe panel is not rendered. A phone has no room for a brand column beside a form, and stacking them would bury the form under a screenful of copy — the compact lockup above the card already carries the identity. Measured at 390 px: zero horizontal overflow, and the narrow gate passes.Documentation drift fixed on the way
The design-system doc has listed
--brand-strongsince W14, but the token was removed from the stylesheet when it turned out nothing painted with it (tokenConsumers.test.tsfails on a token no call site uses — an unused colour is a contrast promise nobody has checked). And--brand-on-inkwas documented as "global bar only", which this change makes untrue. Both corrected in EN and KO.Gates
a11y passes on login (the ink panel's text uses the measured
--topbar-*scale), narrow-viewport passes, 174 unit tests across the auth pages and shared components green, tsc clean, token-lint holds at 130, ko-style 0 findings.Visual baselines need recapturing — login is one of the eight, and it is the only pre-auth one.