Partners Connect:
registration landing
A registration landing for Partners Connect, Ultimate Group’s matchmaking platform for introducing brokers and affiliates. I designed the sign‑up flow for desktop and mobile, built the component library in Figma and made a working version of the page in code.
Recorded from the coded page: empty submit, inline errors, filling in the form, loading and the confirmation.
Challenge
Partners Connect matches introducing brokers and affiliates with brokers and prop firms. The page has a single conversion goal, registration. The copy, the form fields and the brand book were fixed, and the page had to work on desktop and mobile.
Approach
I put the form on the first screen, so a visitor can start typing without scrolling, and pointed every call to action back to it. For the visual system I took the stair from the brand book and used it for the hero pattern, the offset behind the form card, the How it works steps and the button hover.
Outcome
A handoff-ready Figma file with foundations, every component state, desktop and mobile layouts and a clickable sign‑up flow, and a coded version of the page with the same states and validation.
Base and Bold, each at 1440 and 375
118 variants, covering every state on the page
Colour in Light and Dark, layout in Desktop and Mobile
Figtree was the closest free match to the brand’s Adelphi PE
Counted from the Figma file’s variables and components, and from the font comparison.
Using the brand’s stair
The brand book’s main graphic element is a stair, and the four steps in the brief (Register, Explore, Connect, Grow) already read as one. I used it across the page: the moving hero pattern, the offset behind the form card, the How it works steps rising on Cobalt and a button hover that lifts by one step.
How it works: the four steps from the brief as a stair
Five fields, five states
The fields are the ones in the brief: first name, last name, email, country and role. Errors appear after submit, next to the field and in plain words, and clear as the visitor fixes them.
While the request runs, the button shows a loader. The confirmation then takes the form’s place at the same height, so nothing below shifts, and points to the next step, creating a profile.
Two directions.
Version A keeps the brand quiet. Version B uses heavier type and a larger pattern and is easier to remember, while staying inside the brand book. B went into the build; A is kept in the file’s archive.
Variables before layouts
Colour, type and spacing from the brand book are set up as Figma variables. Colour has Light and Dark modes and layout has Desktop and Mobile, so one set of components covers both breakpoints, and dark sections use the same components without overrides.
Pure Cobalt on Near Black is only 2.4:1, so accent text on dark backgrounds uses a lighter Cobalt at 7.3:1. The brand book lists Soft Gray as #F2F3F5 but fills its swatch with #D3D3D3; the file uses #F2F3F5 for backgrounds and #D3D3D3 for dividers.
Semantic colour tokens in Light and Dark modes
Adelphi PE from the brand book, then five free candidates, Figtree first
Replacing the brand font
The brand typeface, Adelphi PE, isn’t on Google Fonts, and the brief allowed a free substitute. I compared 75 Google Fonts and Fontshare families against the Adelphi glyphs embedded in the brand book PDF. Figtree matched most closely and has the same weight range, Light to Black, with italics.
The coded version.
Version B also runs as a plain HTML, CSS and JavaScript page with the same form logic, without a framework or a build step. The hero pattern is drawn on Canvas with the same maths as the Figma component, and the brandmark in Join uses the same scanlines.
What the build handles
Validation
Errors appear on submit, then each field re‑checks as it is edited. Focus moves to the first invalid field.
Stable layout
The confirmation shares the form’s grid cell, so the hero keeps its height after registration.
Sharp pixels
Every canvas draws in device pixels, so no grey grid appears at 125–150% browser zoom.
Reduced motion
A pause button stops all animation for the visit, and the reduced-motion setting stops it from the start.
Ready to hand off.
The Figma file holds the spec, the component library and a clickable sign‑up flow; the coded page shows the same design working in a browser. Both are linked at the top of this page.
- Form on the first screen, one call to action throughout
- Brand stair used for the pattern, form, steps and hover
- 53 variables, 20 component sets, 118 variants
- All text at WCAG 2.2 AA, touch targets 44 px and up
If this is the kind of case you are hiring for, I am happy to walk through the decisions behind it.