Customer sign-in portal

People using the software suite needed to recover a forgotten username or reset a password without calling support, with clear feedback at every step.

• Built three flows end to end, each with a form component, a data hook and a routed page.
• Inline validation with a hooks-based form library: required fields, password rules and confirmation matching, plus inline success and error alerts. A successful reset returns people to sign-in with a confirmation banner.
• Tried a separate schema-validation layer first, then simplified to the form library's built-in rules two days later and removed that layer.
• Covered each form with React Testing Library tests, including router mocking and async submit handling.

All three flows landed incrementally over about six weeks. Teammates later generalized the forgot-password form into a shared recovery form, and the screens were re-skinned in 2026.

After the company rebrand, all 12 screens needed a new look, and the per-page stylesheets had drifted into near-copies of each other. People also saw a brief flash of the light default theme before the dark theme loaded.

• Designed one shared set of semantic custom properties (surfaces, borders, muted greys, glow, on-primary). Each theme fills the same names with its own values, so shared components never know which theme they're in.
• Introduced a common auth-page shell and brand-header component, and moved duplicated layout rules into them.
• Traced the flash to the theme stylesheet being chosen and loaded at runtime. Moved the choice to build time with an environment-driven bundler alias, configured for both webpack and Turbopack, so the theme CSS is a static import that ships with first paint.

All 12 routes were re-skinned, the duplicated CSS shrank by about 270 lines and both themes come from one contract. The wrong-theme flash is gone.

Every primary action was filled in alarm red. The new design system keeps red for irreversible or high-consequence actions, and in an industrial product suite red usually means an alarm.

• Paired with an AI coding assistant to audit the app against the design system, then reviewed and prioritized the six areas of drift it surfaced.
• Retokenized the primary button to a neutral fill with its own hover and active shades, and added a destructive variant that keeps the red.
• An audit of every button showed the forms already used the semantic variant, so only the final sign-in button needed a code change. The spec allows that one to keep the accent.

Every primary action picked up the new style from a single token change, and only one component needed an edit.

On the dark sign-in screen, the username field looked different depending on whether you typed, picked a browser autofill suggestion or clicked away: a different background and a slightly different font size.

• The app had no autofill styling, so the browser painted its own light treatment over the dark input. The fix repaints autofilled fields in the theme's surface colour and pins text colour and size.
• Chasing the size shift found a second, hidden cause: the brand typeface was named in the font stack but never actually loaded, so everyone without it installed got a fallback with different metrics. Proper font-face declarations fixed it.

The field looks the same typed, autofilled or unfocused, and the typeface renders the same on every machine. The browser's own suggestion dropdown is native UI outside the page's control, and that limit is documented.