← Back to all projects

// 001

Public Procurement Support SaaS

Design Systems Information Architecture Accessibility AI-Augmented GovTech · B2G

A fifteen-year-old SaaS that supports public procurement in Brazil ran on production screens with no design system — a modernization long on the roadmap, never built. Independently, after my years in the domain, I built the system that roadmap only promised and made it govern every surface — across the internal-phase feature set.

Role Independent · sole designer
Timeline 2024 — 2026
Scope DS + 15 features
Sector Public Procurement

// Built · self-directed Figma design library · token pipeline · 30 ADRs · public Discovery dossier

// Disclosure Independent portfolio project. The client and the product are not named. Built from public information and domain knowledge, after my time in the sector. The detailed redesign screens are shown on request; the method, the domain and the Discovery dossier are open below.

Restricted Area Redesign surfaces · shown on request
Public Procurement Support SaaS
_OVERVIEW

What was broken

The production screens ran with no shared system — colour with no semantics, density with no air, a grid of misaligned columns, filters costumed as tabs. Every screen its own set of rules. A modernization sat on the roadmap for years and was never built.

What we did

Rebuild it design-led and foundation-first — a foundation of token collections and the components they bind, with Refactoring-UI as an embedded lens and every material decision logged as an ADR. Then breadth: the feature set re-housed on a real application shell, the tokens exported as a pipeline feeding a living documentation site.

What changed

Then it governed everything. The design held across every feature — proof it was a system, not a set of one-offs — one discipline reaching every surface at once.

No system to inherit — fifteen years of screens, each its own rules. So I built one.

THE PLAN THE SCREENS ✕

The plan · the screens · never built

// Scale of the platform Public figures · mapped in full in the Discovery
374M Reference price bank
4,500 Institutions served
14,000 Active users
15+ Years in market
// Operator context 1366×768 · 8h/day

The procurement domain, the nine-artefact internal-phase chain, the three operator personas, the four-source pricing method and the error-propagation finding are mapped in the Discovery dossier — published in full. This case picks up where that leaves off: at the design system.

[ Open the Discovery dossier → ]

Domain · personas · the four-source method · the error-propagation finding

_DESIGN SYSTEM // 01

One token, every surface

The system the roadmap only ever planned, I built — and made it govern every one. A semantic token resolves to a primitive and binds to a component; from there it governs each surface that uses it — change the token, every surface follows. This is the inversion of never built, drawn.

One token · every surface · now connected

A system that doesn't govern is decoration. So I built one that governs.

// 02

The system, enforced

A design system is just words until its rules survive contact with code, time, and other people. Three mechanisms keep this one honest — a pipeline that exports itself, a method that logs every fork in the road, and a measurable before-and-after.

// A · Pipeline

From canvas to code, automatically

An automated pipeline reads the Figma variables export, verifies count parity and slug collisions, and writes the system to JSON, CSS and Tailwind config in one pass. Zero hand-translation.

// B · Method

The loop that keeps the system honest

30+ ADRs — Architecture Decision Records — logged across two years. Each fork in the road went through this cycle: never improvised, never re-litigated.

01 02 03 04 Conflict A fork surfaces Trade-off or cross-cutting impact Council Diverse lenses N-agent workshop + research ADR Decision logged Rationale + alternatives + consequences Apply Build to it No re-litigating; observe and learn Method 30 ADRs
// C · Proof

From no system to a governed one

Eight measurable shifts from the legacy screens to the system I built. Strikethrough is the legacy; teal is what I built.

Metric Legacy screens The system I built Verdict
Colour tokens primitives only, no semantic layer206 across 7 collections · alias-chainedindexed
Hardcoded hex 25+ across screens 0 · audited eliminated
Components 12 partial · ad-hoc cards 50 · uniform doc-block pattern catalogued
Patterns library — 8 documented · page 12 documented
Dark mode declared, not visually validatedWCAG AA both modes · scripted contrast auditvalidated
Density 1 default · no toggle 3 tiers · compact · normal · comfortable tiered
Live documentation— tokens/index.html · data-driven live
Code export hand-written CSS automated pipeline → JSON · CSS · Tailwind automated

System-level comparison only; individual feature screens aren’t shown here.

// SYSTEM AT SCALE [FIG.05.04] FAMILY = HEADER one band, one hue — the identity carrier. ORANGE = MARK identifies the flagship. does not act. STATUS = TOKEN every state pulls from one tiny table. TEAL = ACT if it acts, it's teal. no exceptions. [FIG.05.04.b] — SAME RULES · DIFFERENT FAMILIES 15 FEATURES × 7 FAMILIES · SAME 4 RULES · ZERO ONE-OFFS
_A11Y & DENSITY // 03

Three floors that hold

The operator submits compliance documents on a government-issue notebook, usually after the queue closes. The system has to be readable, defensible at audit, and quiet under time pressure. Density that respects the busy hand, contrast verified on every token pair in both modes, and a layout sized for the screen the operator actually has.

// A · Density

Sized for the busy hand

Normal is the default. Compact widens the floor for power users; Comfortable for first-time operators and 4K secondary monitors. The base form-row never drops below the 17 px legibility floor, and helper text stays first-class at every tier — never a tooltip.

28pxCompact
36pxNormal · default
44pxComfortable

ADR-007 · Workflow Stepper retired everywhere; the approval step lives outside the platform (SEI), so the product never pretends otherwise.

// B · Contrast

Above the AA floor on every pair

Eight foreground/background token pairs, both modes, scripted in the same CI pass that writes the CSS. The AA 4.5:1 line is the floor; the lightest pair clears it by a wide margin.

// C · The operator's screen

1366 × 768, government issue

C-04. Module navigation stays in the topbar to keep the full width for dense content; the left edge is reserved for the per-feature filter rail. C-03. Compliance evaluation is per row, under IN SEGES/ME 65/2021 · Art. 6º — three independent price sources or the row blocks. There is no legal “fix all selected”.

The operator is the first auditor — same three words.

VIEWPORT 1366 × 768 · government-issue notebook topbar nav · full width preserved filter rail 3 sources · per row · IN 65/2021 · Art. 6º
Restricted Access
// 04

Inside the Redesign

Eight surfaces stay in the room. The system reaches them all — the detailed redesign screens are shown on request. Fifteen features redesigned across seven procurement families; the system, the method, the craft and the domain are open above and in the dossier linked below.

Classified Content

The Pricing-Quotation Flagship

Clearance: Interview Only
Classified Content

The Price Research Pilot

Clearance: Interview Only
Restricted

The Authoring Workspaces

Clearance: Interview Only
Restricted

The Supplier Vetting Cluster

Clearance: Interview Only
Classified Content

The Mapping Surfaces

Clearance: Interview Only
Access Denied

The Legal-Grade Price Report

Clearance: Interview Only
Restricted

The Contract Management Module

Clearance: Interview Only
Classified Content

The Auxiliary Surfaces

Clearance: Interview Only

15 features · 7 procurement families · 206 design-system tokens · 50 components. The system, the method and the craft are above; the features are restricted.

_REFLECTION // 05

A design system is governance disguised as ornament.

The tokens, the components, the docs site — these read as craft. What they actually are is rule, written in a form the next designer can re-enact. The system I built governs every surface not because it was prettier than the alternative, but because it was enforced earlier: at the canvas with variables, at the build with parity checks, at the ADR with logged decisions.

The federal audit court speaks three words: motivação · rastreabilidade · justificativa — motivation, traceability, justification. The discipline that makes a procurement price defensible at federal audit is the same discipline that makes a screen coherent: every value sourced, every decision logged, every fork resolved before it shipped. Both are work. Neither is taste.