One shell, sixteen screens. Field order, validation placement, focus behaviour, button geometry, spacing and copy are identical on every card. A product changes four token values and nothing else, so the team builds this once and themes it eight times.
Read this before picking colours from the mock. Three brand hues cannot
legibly carry a button label in white or black — Conversite #C75A2E is 4.26:1 on
white and 4.25:1 on black, Marnji #C2593A is 4.39 / 4.13, MentalModelHub
#BD5A38 is 4.48 / 4.04. All three sit mid-luminance, where nothing contrasts. So the
brand hue stays the brand hue and the button uses a darker shade of the same hue. Marnji
and MentalModelHub already ship one; Conversite's was derived as the lightest shade that clears
AA. Every button below is at or above 4.5:1.
Everything else in the card is shared. Sources marked confirm need a decision before build.
| Product | --accent | --btn | --btn-fg | Label contrast | Ground | Source |
|---|---|---|---|---|---|---|
| Keystack | #7C8CFF | #7C8CFF | #14161A | 6.08:1 | #F5F6FA | confirm most-used in emubrain-ui-shell |
| Conversite | #C75A2E | #AB4D27 | #FFFFFF | 5.49:1 | #F8F4EC | agreed Atelier ember; btn derived |
| Greenpen | #1F6B45 | #1F6B45 | #FFFFFF | 6.47:1 | #F6F2EA | confirm no accent in shipped code |
| CourseVenture | #41633F | #41633F | #FFFFFF | 6.82:1 | #F5F7F3 | shipped theme config |
| Marnji | #C2593A | #9E4325 | #FFFFFF | 6.40:1 | #F7F3EB | shipped --terra / --terra-ink |
| MentalModelHub | #BD5A38 | #8A3F23 | #FFFFFF | 7.46:1 | #FAF7F1 | shipped --primary / --primary-hover |
| ClassicInvestor | #7FBFA8 | #7FBFA8 | #0E1A16 | 8.56:1 | #141210 | shipped Desk jade, dark ground |
| Wideshot | #66D9EF | #66D9EF | #07090D | 10.99:1 | #07090D | agreed Instrument cyan, dark ground |
Field order (email, then password, with "Forgot password?" inline on the password label) · validation always below its field · the 40px field height and 42px button · 9px radii · the 380px card · all copy · the focus ring · the footer link. Only the four tokens above change. Sign-up adds a name field and a password hint; nothing else moves.
Not covered here, deliberately: forgot-password, reset,
verify-email, logout, loading, rate-limited and error states. Those exist in the fleet auth
specification at fleet-auth-ui.pages.dev and use the same shell — this file is the
two screens you asked for.