TNT Design System

Problem

Trajector's design library had drifted out of sync with what was shipping in code. Colors and components were duplicated brand by brand across Sketch and Abstract, with no accessible system built around WCAG contrast. Maintaining consistency meant chasing inconsistencies one brand at a time instead of designing from a single source of truth.

Constraints

Role: Senior UX/UI Designer. System had to stay operational during migration, no downtime for active brands. WCAG 2.1 AA had to hold across every brand's color palette.

Process

Audited the existing Sketch + Abstract system and diagnosed the duplication problem, then built a proof of concept in Figma before committing to the migration. Rebuilt the color system with a 0–100 numbering convention (baking in accessibility compliance), established a typescale and 8pt grid foundation, then built a core component library structured for reuse across brands.

Key Decision

Restructured the system around a shared core (colors, type, components) with brand-level overrides, instead of Sketch's model of duplicated per-brand libraries, enforced via the 0–100 color numbering convention.

Solution

Core component library, token-based color system (0–100 convention), typescale, and 8pt grid, documented as living docs in Zeroheight for design-dev parity.

Key Outcomes

• 01Migrated the system from Sketch + Abstract to Figma, cutting color library maintenance work substantially
• 02Built a core component library so teams across all brands could build from the same parts
• 03Set up Zeroheight documentation so the system didn't depend on one person's memory to maintain
• 04Built WCAG 2.1 AA compliance directly into the color system through a 0-100 numbering convention

Summary