Reskin of the customer portal sign-in pages (/accounts/login/ and /accounts/login/password/) to the 2026 brand system. This is a template and stylesheet change only. No changes to authentication logic, routing, or the identifier-first flow. The report viewer and everything post-login are out of scope.
Working reference: the interactive concept page. Source of truth for markup and CSS: portal.html in the Perspectum-Concept repo. The page is self-contained: one inline style block plus assets/css/tokens.css and assets/fonts/fonts.css.
In scope: the two login templates, forgot-password page styling to match, the logo asset swap (portal-logo.png is replaced by perspectum-navy.svg), fonts, colours, spacing.
Not in scope: auth behaviour, staff OAuth route, session handling, report rendering (report output colours are regulated and must never be restyled), post-login pages.
| Live route | Concept equivalent | Notes |
|---|---|---|
/accounts/login/ | Step 1: username field + Next | Identifier-first flow preserved exactly |
/accounts/login/password/ | Step 2: password + Sign in, staff block appears | Staff OAuth link de-emphasised below a “Perspectum staff” divider, not a parallel card |
/accounts/forgot_password | “Forgotten your password?” link above the password field | Keep route, restyle page to match |
/accounts/oauth/login/ | “Staff sign in” outline button | Unchanged target |
The concept demonstrates the two steps with a few lines of JS on one page. In production these remain two server-rendered templates; no JS flow change is requested.
Desktop (>980px): two equal columns (grid-template-columns: 1fr 1fr), min-height 100vh. Left: warm off-white sign-in column, content block max-width 380px, centred both ways. Right: navy panel, content block max-width 420px, centred, with a decorative concentric-arc SVG positioned absolutely top right (pointer-events: none, clipped by overflow: hidden).
Mobile (<980px): columns stack, sign-in first, no forced viewport height, 24px horizontal padding, input font-size raised to 16px to prevent iOS zoom on focus. Short desktop viewports (<820px height) use the compressed spacing set already in the stylesheet.
Single source: assets/css/tokens.css. Copy into portal static assets; do not fork values.
| Token | Value | Usage |
|---|---|---|
--bg | #F7F4EE | Left column ground, primary button text |
--ink | #0A1A2F | Body text, navy panel ground, outline button border |
--ink-soft | #3D3D3D | Secondary text, muted labels |
--rule | #E2DBC9 | Hairlines, input borders, dividers |
--terracotta as --accent | #B05434 | Primary button fill only; never as small text or outline |
--sandstone as --accent-light | #E9A582 | Bold em in the navy panel heading only |
--science-light | #82A892 | Status dot |
--data | #5BC8E6 | Decorative arcs on navy only (dark grounds only, per brand rules) |
--radius-sm | 6px | Inputs and buttons |
--dur / --ease | 200ms / cubic-bezier(.2,.6,.2,1) | All transitions |
Typography: --display (Space Grotesk) for headings, eyebrows, labels and the certification line; --body (Inter) for body and buttons. Fonts are self-hosted woff2 in assets/fonts/; serve them from portal infrastructure, no external font CDN.
| Element | State | Behaviour |
|---|---|---|
| Text input | Focus | Border --ink, ring 0 0 0 3px rgba(10,26,47,0.12), no default outline |
| Primary button | Hover | filter: brightness(0.92), 200ms |
| Staff outline button | Hover | Background --bg-card (#EFEAE0) |
| Links (left column) | Hover | Underlined; --ink-soft to --ink |
| Navy panel list item | Hover | Title underlines; the whole row is the link target |
| Form | Error | Not designed yet. Use --terracotta border on the failing input plus a 14px message below it in --ink; do not introduce a new red. Confirm final copy with brand |
| Form | Submitting | Disable button, keep label; no spinner needed at this scale |
These behaviours exist today and must survive the reskin: the unsupported-browser modal, the JavaScript-disabled notice, and the “Report a problem” mailto modal. Restyle them with the same tokens (navy text on off-white, hairline rules); do not drop them.
Long values: the username field accepts long strings; input scrolls internally, no wrap. Translations are not in scope (single-language page).
All strings are in the concept page and are final unless flagged: eyebrow “Customer Portal”, heading “Sign in”, subline “Access your reports and studies.”, the authorised-users notice, and the footer links (Report a problem, Provide feedback, Terms of Use, Privacy Policy; both PDFs unchanged).
Flagged, resolve before build:
Focus order: logo, username, primary button, then footer links; on step 2: password, forgotten-password link, sign in, staff sign in. Labels are real <label for> elements, not placeholders. The decorative arc SVG carries aria-hidden="true". Logo alt="Perspectum". All text combinations in the concept pass WCAG AA on their grounds; if any value changes, re-check the terracotta button text and the 66%-opacity text on navy. Both steps must be fully keyboard-operable, which they are by default as standard forms.
Add click tracking to the three navy-panel items and the staff sign-in link, using whatever the portal already uses. This is the evidence for keeping or cutting the panel content after 60 days.
assets/logos/perspectum-navy.svg (wordmark, single colour #0A1A2F), assets/css/tokens.css, assets/fonts/ (fonts.css plus six woff2 files), and portal.html itself as the markup reference.