Gaby GosztolaBack to work

Work/UX/UI/№04

UX/UI

TheGuarantors

Enterprise design system

I built the company’s first comprehensive Figma design system to remove visual misalignment and restore brand credibility.

Role
Senior UX Designer & Design System Architect
Year
2021
Team
Design · Engineering · Product
Stack
Figma · Material Design · WCAG 2.1

Problem

When an insurance platform looks inconsistent, users get nervous. Three core products lacked a unified UI direction, designers were working in silos, and the resulting visual misalignment was so severe that customer reviews raised scam concerns.

We did not just need a cleanup; we needed a bulletproof visual language that could win back user confidence and scale across every product.

Approach

I engineered a bespoke Figma design system from scratch, making it the single source of truth for all digital touch points.

  1. 01

    Bespoke Figma architecture

    Instead of a generic kit, I built a custom library of components — including complex interactive states and accessibility-compliant forms — aligned to our technical constraints and Material Design migration.

  2. 02

    Scalable typographic system

    I centralized typography with strict rules for headings, body copy, and micro-copy, documenting line-heights and responsive behaviors so developers could build complex layouts with precision.

  3. 03

    Accessible visual hierarchy

    I expanded the color palette to support interaction states — hover, active, disabled — while keeping brand identity intact, stress-testing every element to meet WCAG 2.1 readability standards.

  4. 04

    Deep prototyping logic

    Building from scratch let me leverage Figma’s advanced prototyping so component behaviors in design mirrored exactly how they should function in code.

  5. 05

    Collaborative contribution model

    I established regular review cycles where designers and developers could refine component behaviors together, and documented usage guidelines so the system became a shared company asset.

Process

Artifacts from the room.

Color theme — semantic palette, states, and decorative colors
Color theme — semantic palette, states, and decorative colors
Typography scale with weights, sizes, line-heights, and responsive behaviour
Typography scale with weights, sizes, line-heights, and responsive behaviour
Button system — contained, outlined, and text variants across sizes, colors, and states
Button system — contained, outlined, and text variants across sizes, colors, and states
Card patterns — info, details, selection, input, and dashboard variants
Card patterns — info, details, selection, input, and dashboard variants
Alert components across info, success, warning, and error, with title and action variants
Alert components across info, success, warning, and error, with title and action variants
Checkbox states — inactive, checked, indeterminate, and form group patterns
Checkbox states — inactive, checked, indeterminate, and form group patterns

Outcome

The project restored brand credibility by fixing inconsistent experiences that were actively damaging user trust. It also established a highly efficient design-to-development pipeline that reduced handoff friction .

By turning the design system into a shared asset, the team gained a scalable foundation for future products without sacrificing consistency.

Building from scratch reinforced a core lesson that long-term consistency is not just about beautiful UI components. It also needs meticulous documentation.

1

Single source of truth for all digital touchpoints

3

Core products unified under one design system

WCAG 2.1

Accessibility standard met across components

From scratch

Bespoke Figma library built to exact technical constraints

Previous case

Optimizing the renters insurance funnel

Senior UX/UI Designer · TheGuarantors

Next case

Legacy platform migration

Senior UX/UI Designer · Nets

Next

Working on something in this space? Let's talk.

Get in touch