Brand exploration · 14 October 2026
The parts the sign-in and account pages need, built from tokens and the decided form, button and link rules. Six parts had real alternatives: each shows A, B and C, with exact CSS. All six are decided, and components/ builds the decided version, which recipe R7 uses. Simple additions are at the bottom. Recipe: R7 Account pages.
| Component | Decided | Status |
|---|---|---|
| 1. Auth card | A: bordered card on the white band, H1 at h2 size, no rule | Decided |
| 2. Password toggle | B: eye icon inside the field, on every password field | Decided |
| 3. Form divider and support note | A: hairline, then the note in the card, the lead-in on its own line | Decided |
| 4. Secondary action line | A: centred quiet line under the card | Decided |
| 5. Confirmation panel | A: icon disc beside the heading, text below, left-aligned | Decided |
| 6. Signed-in notice | A: info callout under the heading | Decided |
| Settled additions | Full-width button, form link, form divider, error summary (existing form alert) | Built |
Decided: A
How does an account page frame its one form on the white content area?
Today on: /user/login and /user/password: Drupal core forms in the theme content area, with the legacy .hs-login-help line in the form suffix. Every account page now uses one centred card: max 560px, 1px border, 8px radius.
Welcome back. Sign in to your account.
Need help signing in? Visit our Help Center or contact Honor Society support.
New to Honor Society? Join now
.hs-auth max 35rem centred; card white, 1px #E6E8EF, 8px radius, pad 20px (32px from 36rem), no shadow; heading Didot 700 at h2 size, no rule; intro 17px slateWelcome back. Sign in to your account.
Need help signing in? Visit our Help Center or contact Honor Society support.
New to Honor Society? Join now
as A, band #F7F8FB behind the cardshared page head (soft band, H1 at full size, gold rule), then the form in a 35rem column with no borderDecided: B. One toggle pattern across the site.
How does a member see the password they typed?
Today on: /user/{uid}/password uses the round 2b eye icon (hs_user_password element). /user/login has no toggle. B works on this page; A and C are drawn only.
button 4rem x 40px at the end of the field, Mukta 600 16px navy, underline on hover; input padding-end 4.5rem; aria-pressed, aria-controls, aria-label flips; text flips Show / Hide44px square hit area, 20px eye / eye-off icon in slate, navy on hover; aria-pressed, aria-controls, aria-label flips Show password / Hide passwordnative checkbox row (40px) under the control; needs its own scriptDecided: A
Where does “Need help signing in?” sit, and how loud is it?
Today on: the form suffix of user_login and user_pass (user_profile_enhancements): “Need help? Visit our knowledge base … or to contact us.” under the button, in .hs-login-help.
Welcome back. Sign in to your account.
Need help signing in? Visit our Help Center or contact Honor Society support.
hr 1px #E6E8EF; note 16px slate, lead-in ink 600 on its own line; links .hs-form-link (navy 600, 1px line-strong underline)Welcome back. Sign in to your account.
base .hs-callout: soft ground, 4px line-strong bar, slate iconWelcome back. Sign in to your account.
Need help signing in? Visit our Help Center or contact Honor Society support.
.hs-fine-print, 14px slate, centred under the cardDecided: A
How does a visitor with no account find the way to join, without competing with Sign in?
Today on: no join route on /user/login. The sign-in page adds “New to Honor Society? Join now” below the card: a secondary route, with no free-membership promotion.
Welcome back. Sign in to your account.
New to Honor Society? Join now
.hs-auth__alt 16px slate, centred, 24px under the card; one .hs-form-linklabel line, then .hs-button--secondary --blockWelcome back. Sign in to your account.
Need help signing in? Visit our Help Center or contact Honor Society support.
New to Honor Society? Join now
a second .hs-form-note in the cardDecided: A, with the icon beside the heading
What does the page say after a reset request, and how does it show that it worked?
Today on: core user_pass_submit() redirects to /user/login with the status message “Further instructions have been sent to your e-mail address.” above the login form.
We sent a link to set a new password to avery.example@example.com. The link works once and expires in 24 hours.
Did not get the email? Check your spam folder, or send the link again.
24px envelope in a 40px #E9F5EE disc, success #0F7A41, centred on the heading’s first line; heading at h2 size beside it; text 17px slate below, full width, the address ink 600.hs-callout--success inside the card, the page heading unchangedWe sent a link to set a new password to avery.example@example.com. The link works once and expires in 24 hours.
Did not get the email? Check your spam folder, or send the link again.
56px navy icon, everything centredDecided: A
How does /user/password tell a signed-in member which account it will reset?
Today on: core user_pass() for a signed-in user: the field becomes the text “Password reset instructions will be mailed to %email. You must log out to use the password reset link in the e-mail.”
We will email you a link to set a new password. The link works once.
.hs-callout--info (info surface, blue bar and icon); title ink 600; Sign out .hs-form-linkWe will email you a link to set a new password. The link works once.
Signed in as avery.example@example.comSign out
soft row, 4px radius, 12px 16px; text 14px slate, address ink; Sign out at the endYou are signed in as avery.example@example.com. We will email a reset link to that address. Sign out to reset another account.
no new part: the intro carries the stateThese follow decisions already made. Each is live; open “HTML” for the snippet.
.hs-button--block: display: flex; inline-size: 100%, label centred. Only for the one submit button of a column 35rem or narrower. button.css.
<button class="hs-button hs-button--block" type="submit">Sign in</button>.hs-form-link: navy 600, 1px line-strong underline, navy on hover, as the link list. In the hint slot it gets a 46px tap target. form.css.
<div class="hs-field"><label class="hs-label" for="s-pass">Password</label><input class="hs-control" id="s-pass" type="password" autocomplete="current-password"><p class="hs-hint"><a class="hs-form-link" href="/user/password">Forgot your password?</a></p></div>hr.hs-form-divider: 1px line, no margin (the card gap spaces it). Between a form and its support note only, never between bands. form.css.
<hr class="hs-form-divider">Your email address or password is not correct
No new part: the round 2b form alert already lists each error as a link to its field. Sign-in failure shows it under the head, with the error repeated under the email field. form.css, callout.css.
<div class="hs-callout hs-callout--danger hs-form-alert" role="alert" tabindex="-1"><svg class="hs-callout__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5"/><path d="M12 16.4v.1"/></svg><div class="hs-callout__body"><p class="hs-callout__title">Your email address or password is not correct</p><ul class="hs-form-alert__list"><li><a href="#s-pass">Check your email address and password, then sign in again.</a></li></ul></div></div>