Paul TinkerProduct designer · Design systems Back to portfolio

AI-native products & design systems

A working log of designing and building digital products with AI

Two design systems rebuilt as interactive design artifacts, four product experiences on top of them, and audits that run while you work.

  • Two systems
  • Four brands
  • Light and dark
  • LTR and RTL
Source documentation, introduction: a single library behind every screen, shown across phones and a laptop.
Source documentation, principles: four rules that settle arguments, starting with agnostic before platform-specific.
Source documentation, system architecture: four token layers from primitives to product.
Source documentation, foundations: accessibility, brand marks, colour, tokens, elevation, grid, icons, motion, radius, space and typography.
Source documentation, grid: four columns on mobile and twelve on tablet and desktop, with common spans.
Source documentation, all components: live components with their variants, not pictures of them.
Source documentation, the dashboard card: allowance and connection variants.
Source documentation, progress bars: medium, small and journey variants with their anatomy.
Source documentation, map: markers and overlays drawn on top of the provider's tiles.
Source documentation in dark mode, data table: desktop rows and the narrow stacked layout.
1 / 10

All of this was built as design artifacts: interactive, clickable, running in a browser, but not code. Worth being clear about that, because turning them into real code is the next step.

None of it was missing when I first built these systems: theming, propagation, documentation and direction all shipped back then, in design and in code, in use across markets. I'm going back through that work to see what the same job costs now, so what's below is the same capabilities, with the cost of having them taken off.

What links these isn't capability, it's demonstration.

Brand theming. Ask for a new brand and it arrives themed: every component, every state, both directions, in minutes. Adding a brand is a conversation rather than a week of work.

Dark mode. Built across both systems in an afternoon. It's the one thing here that never went live first time: specified, costed and cut every time, not because anyone argued against it but because nobody ever got to see it or play with it.

Direction. Flip the toggle and the whole system turns over, docs and products. Back then RTL was a project of its own, with layouts mirrored by hand and icon flipping that was meant to be automatic and reliably wasn't. Now the only work left is the checking, and anyone on the team can see it working for themselves.

The Keystone member dashboard reskinned for four brands (Smart, Zurich, New Ireland and Keystone), each in light and dark.

Also

  • Documentation with search that finds a component by what it does, and every state, theme and direction reachable from the page you're already on, so the system explains itself instead of needing me in the room
  • Four products on top: three user-facing experiences on one system, a consumer app on the other. Working journeys assembled from the system's own components, so a change in the source of truth changes the product
  • Audits built in rather than bought: what isn't linked back to the system, accessibility across both themes, whether the docs still match the components. A check you run before committing something, not a report once a month
  • How the files are organised matters more than how well you prompt. It's the same discipline that stops a human team diverging

What links these isn't capability, it's demonstration. The work that sat between we support this and here, look (the demo, the sandbox, the maintained example) was always the first thing cut when the quarter got tight. That work is now a few hours, so it doesn't get cut.