All Case studies

Scalable Design System

Four Brands, Three Platforms

I owned the design system behind Microtec's ERP ecosystem, the Tokens, the Component structure, and the Handoff to two dev teams.

  • Web

    • ERP
    • Web Dimensions
    • Web Typography

  • Point of Sale

    • O-Green
    • O-Red
    • Tablet Dimensions
    • Tablet Typography

  • Mobile

    • O-Orange
    • Mobile Dimensions
    • Mobile Typography

Double the cost, to build the same thing over and over

  • ×2

    Components

    Built twice, once per dev team.

  • ×4

    Values

    Defined four times, once per brand.

  • by hand

    Screens

    Every component placed, every parameter set, one screen at a time.

20%of front-end time spent implementing UI, every sprint

Planning for a system that would fit

  1. 01 Universal

    One source of truth in Figma, for UX and dev teams.

  2. 02 Scalable

    Future-proof for new products and new platforms.

  3. 03 Flexible

    Designers can still curate each product to its own users.

Our Taxonomy System

  • Technology-agnostic, so one name serves both teams without either stack's vocabulary leaking into it.
  • Category-specific, not component-specific, so a new component inherits its values instead of introducing its own.

Actions

Post Invoice
Save as Draft
Attachments (2)
  • actionRadius
  • actionSecondaryFillDefaultSoft
  • actionSecondaryOutlineDefaultSoft

Inputs

Search Invoices
CustomerAl-Rajhi Trading Co.
  • inputInactiveOutlineDefault
  • inputRadius
  • inputPaddingXMd

50+ Variants → 8 Components

Platform Alias — brand
Responsive + Typography — platform
OverdueThis MonthUnpaid
Attachments (2)
CustomerRecurring invoice
ConfirmCancel

ERPWeb

Giving the AI less room to hallucinate

  1. Figma MCP

    Reads components, variants and descriptions directly.

    Button.Primary.Solid

  2. Index matrix

    Indexes every Figma component to its coded counterpart.

    mtc-button[variant="primary"][style="solid"] · PrimarySolidButton

  3. Claude

    Implements the screen without deviating from either.

    <mtc-button variant="primary" style="solid">Place Order</mtc-button>

  4. Linted Code

    Output refined once against both real codebases.

    Angular Code Flutter Code

Built to Scale

Adding a new Platform/Brand takes less than5 Minutes of Code
Tokens from the Responsive Component and Typography collections resolved across all four platform modes, followed by the four the control container introduced
TokenWebMobilePoint of SaleKiosknew
Action/Padding Y·X/Lg12×2012×2020×3232×32
Action/Radius8px8px12px24px
Content/Gap/Md12px8px12px24px
Size/Body/216px14px20px22px
New — POS and Kiosk only
Control/Container/Padding X0px0px16px24px
Control/Container/Padding Y0px0px12px16px
Control/Container/FillNoneNoneSecondary/50Secondary/50
Control/Container/OutlineNoneNoneSecondary/300Secondary/300

Front-end UI implementation went from 20% of capacity to under 1%

  1. Before20%
    Every screen implemented by hand
  2. After<1%
    Generated from the system, reviewed not built
Next case studyCoachino – A Platform for Gym Coaches
1/8
4 min read