SurfaLux — design system & website build

SurfaLux makes a hydrophobic coating for architectural glass — the kind of product whose proof is in a photograph of water refusing to stick. 9045andco set the brand direction and initial comps ahead of final client content, deliberately, so the structure could be built while copy was still being written.

What arrived was six page frames of visual direction — and no reusable objects of any kind. Every page was absolutely-positioned rectangles and text. My scope ran from the visible craft — the icon set, image generation and editing, page layout and the carousels — down to everything underneath: the token architecture, the component library, the accessibility decisions, the responsive system, and the handoff document a developer could actually build from.

The brief asked for six things — header and footer, an accordion FAQ, a data-capture widget, button and type styles, content sections, and “an overarching design system, responsive and accessible from the outset.” None of them existed as objects when I started. All of them do now.

Before any of the system work, there was the work you can see. The comps carried brand direction, a few flattened reference icons and placeholder art — no icon library, and no photography that could survive being blown up to full-bleed width. The icon set and the imagery on this site were produced for this build, alongside the layout and the carousels.

Icons are not placed loose on the page. They sit inside an Icon Callout component, and the component takes its colour from a collection that holds exactly one variable — ink — with four modes. Set the mode on a section and every icon inside it recolours at once. Nobody has to remember which green a callout is supposed to be on a dark band, because nobody is choosing it.

The brand photography was shot by 9045andco’s photographer — the hero, the comparison, the machine. What that shoot did not cover was the applications themselves: the five surfaces the coating actually sells into. The SurfaLux applications carousel is mine end to end — shower doors, windows, glass railings, solar panels and car windshields, every one of the five slides generated with AI, then graded and composed to sit beside the photography without announcing itself. So is the professional-application band further down the coating page. The SurfaLine machine pages are photographed throughout: that hardware is real, and it was shot.

Matching is the whole job. Same low-key lighting, same cool glass against warm interior, same depth of field, same restraint about how much beading is on the surface. The test was never whether a generated image looked impressive on its own — it was whether it looked like it came off the same shoot. An image that reads as a different library is worse than no image at all.

Before proposing anything I audited all six frames and every loose object on the canvas, and reported the measured state rather than an impression of it. These are counts read from the live file, not estimates:

The audit was written to be useful rather than damning. Designing ahead of content is a legitimate choice and the visual language was consistent enough to tokenize cleanly — three typefaces, five colors, a small set of genuinely repeating patterns. A small, well-behaved system, not a sprawl. But it also surfaced fifteen structural findings that would each get more expensive the longer they sat:

The original comps were duplicated into an archive page before anything was touched, so the studio always had the untouched version to compare against. Everything after that was additive.

Tokens only pay off if they're layered. Raw values live at the bottom and are hidden from every picker in the file, so a designer physically cannot reach for a hex — they have to reach for a meaning. If the meaning is missing, the answer is to add the token, not to work around it.

Two findings the ramp produced. The green ramp was built mathematically around Alpine Green as step 700. When the studio later added a second brand green independently, the derived 400 step landed within one value in two channels of it — a useful signal that the ramp's maths matched the brand's intent. It was snapped to the exact brand value.

The second was less flattering and more useful: the documented type ramp specified a display weight the site does not use. A scan of the live pages found 18 of 19 licensed-font headings set in 45 Light and exactly one in the documented 35 Thin — and no token existed for the weight actually in use, so nothing could have been bound to it. The specimen and the pages now agree. They didn't before, and nobody had checked.

The brand palette is small and strong. The work was giving each value a defined role — a colour doing three unrelated jobs isn't a token yet, it's a coincidence.

The brief asked for accessible from the outset, so every semantic pairing was measured before it became a token rather than audited afterwards. The core palette turned out to be genuinely strong — three of the four primary pairings clear AAA.

One pairing did not, and it mattered: the new CTA green. White on it is 3.05:1 and fails AA at the 14px button label size. Black on the same fill is 6.89:1 and passes at any size. So black labels are required — not preferred. The hover and active states also step lighter rather than darker, because the next step down fails against a black label. That's the kind of rule that gets quietly "fixed" by someone darkening a hover six months later, so it's written down in the file, not just in my head.

Button is the component every system gets wrong in the same way — by encoding content as variants and exploding the count into the thousands. Here the style, size and state axes are variants; label text, icon presence and icon choice are properties. Six styles × three sizes × five states is 90 variants, which is a perfectly reasonable number. Encoding the label as a variant would have made it unbounded.

The CTA tokens are deliberately mode-independent — the same green on any surface. The previous arrangement flipped white and black by mode, which is exactly why a white button and a black button couldn't be chosen independently. Splitting them was a two-token change that removed a whole class of override.

Everything the brief asked for, plus everything the comps repeated — thirty-two component sets and five standalone components, 323 variants between them. Each one auto-layout, semantically bound, with its states designed up front rather than invented later:

The brief called for a data-capture modal or widget. I argued for an on-page section instead, for two reasons: five fields fight a modal, and a modal can't be linked to from an email — which matters if the client wants to drive traffic straight to warranty registration.

The more instructive detail is where the interaction lives. Figma only lets a prototype navigate action target a frame on the same page, so the header's page-to-page links had to be wired as instance overrides — thirty of them, by hand, with every new page needing its own. The form's submit avoids that trap entirely: it's a state change inside the component set, so it works in every instance, on every page, at every breakpoint, wired exactly once.

Both states are pinned to identical dimensions, so the swap doesn't shift anything below it on the page. And the error state is built but deliberately unwired — documented rather than prototyped, so the treatment is unambiguous for the developer and nobody has to invent it later.

Responsive was built during the system, not retrofitted onto it — retrofitting is the single most expensive mistake available on a project like this. Every page exists at 1440, 768 and 375, with navigation wired at all three widths.

Type steps down through modes on the typography collection, which carry sizes only. Families, styles, line-heights and tracking are identical in all three, deliberately: the moment a family varies by mode, any context that can't load that font can no longer bind or edit the text.

Every page was reassembled from components: each section auto-layout, every colour and gutter variable-bound, header, footer, button, accordion and carousel as instances. Zero overflow verified on all twenty-seven frames.

Pages whose copy is still unresolved open with an amber placeholder notice, and their layers are named — DUPLICATE, — PLACEHOLDER or — SLOT. That's a small discipline that does real work: it means nobody — client, studio or developer — mistakes a functional stand-in for an approved decision.

Handoff is the terminus of this project, and the build ran off it. But the first spec sheet was written the day the registration form was built, because the form's validation rules needed a written home immediately, not eventually.

That document sets the template for the rest: the error state as a visual reference, then five numbered blocks — fields and message copy, validation behaviour, submit behaviour, accessibility with the specific WCAG criteria cited, and the open questions the form still depends on. Naming what's unresolved is part of the spec, not an admission against it.

The handoff also ships a code-consumable token file alongside the Figma system — W3C format JSON plus generated CSS custom properties. It costs very little and removes the largest single source of handoff drift: a developer reading a hex off the inspect panel and typing one digit wrong.

Three things behaved differently from how the build plan assumed, and each one is now a permanent property of the file rather than an outstanding task. Recording them is the difference between a system the next person can trust and one they quietly work around.

Every one of those started at zero. The site is live at surfalux.com, built from them — and nothing left on the open list is blocked by a missing token or a missing component.

What the client gets out of it: copy arriving in pieces no longer costs a redraw, because auto-layout absorbs it. A changed decision — the green, the display face, the button treatment — propagates instead of being reapplied by hand across twenty-seven frames. And the next page starts at eighty percent rather than from a blank artboard.

Credits: Brand direction, initial comps and brand photography by 9045andco. Icons, image generation and editing, page layout, carousels, audit, token architecture, component library, accessibility specification, responsive build and developer handoff by Anita Larkin.