Skip to content
John Morais

Product design, leadership and the Harness Design series

Portfolio

Harness Design

We prepared the design system so AI could understand the product on its own.

A design system for a B2B SaaS platform for the fleet and logistics sector, with about 90 people, is now read and applied correctly by AI, on both platforms, already in production.

A dense field of small color cards in rows on light paper. In the right third, a huge moss-green card with a drawn branch dominates the scene. In the upper half, a small card has a folded corner. In the lower left corner, a hand holds a branch.
Role
Product Design Manager
Duration
5 months
Platforms
Web and mobile

Key results

of design tokens already have usage instructions ready for AI, 491 of 496
99%
of web code already uses the new design standard
97.6%
of the mobile app already uses the new standard, up from 0% before the rollout
68%
design system components still on the old standard
0

The challenge

A B2B SaaS company for the fleet and logistics sector started using AI to speed up software development. The gain in engineering speed exposed a bottleneck: design could not keep up, and squads without a dedicated designer began generating interface straight in code with AI, without a design system prepared for it.

The result was rework, visual inconsistency, and an AI that invented its own interface logic whenever it found no documented product standard. The question that motivated the project: how to prepare the design system so that an AI could produce interface consistently, without growing the design team.

How we solved it

  1. An honest diagnosis

    We mapped what already existed before creating anything new. The estimate was three days, it took five, and that avoided wrong decisions further down the road.

  2. Errors as a map

    AI gets universal patterns right on its own, but it invents when it finds no product reference. Each error showed exactly what was missing from the documentation.

  3. Usage instructions per token

    Color, spacing and typography began to carry purpose, when to use, when not to use and what they pair with, right inside the design tool.

  4. Production, not prototype

    Web in July and the mobile app in September 2026, with automated tests and visual comparison to give the team confidence.

Accessibility, before and after

Color contrast measured by the WCAG criterion. The higher the ratio, the easier to read.

  • Before
  • After
3.0 Text, before: 4.3 to 1 4.3 Text, after: 8.0 to 1 8.0 Text Icon, before: 2.7 to 1 2.7 Icon, after: 10.0 to 1 10.0 Icon
Contrast ratio, for the most commonly used text and icon in the product. The dashed line marks the recommended minimum, 3.0.

Adoption of the new standard by platform

Share of code that already uses the new design vocabulary, measured in October 2026.

target, 100% Web: 97.6% Web 97.6% Mobile: 68% Mobile 68% Component library: 91.8% Library 91.8%
Component library: interface pieces reused by both platforms.
R$ 500,000

was the market budget for just 30 ready-made components. We delivered the complete base on both platforms with about 4 hours per week per developer.

15,500+

automated tests protected an update that touched 1,093 files at once, with only 1 visual discrepancy found.

What comes next

The token base was the first step. The second layer, documenting the intent of each interface component (not only color and spacing, but when to use each piece and why), is under way until the end of October 2026, covering about 60 components.

In parallel, we are building a way to measure, with a fidelity score, how much an AI-generated screen already reflects the product standard without needing manual adjustment, with a target of 80% fidelity. The end goal is for AI to assemble entire screens at a quality close to what the team delivers today, freeing designers for higher-level decisions.

Anonymized case: company and people names were removed. Updated in October 2026.