Hum Studio
All Work

TNT Design System

A unified and adaptable design system for a multi-brand environment

Role

Senior UX/UI Designer

Client

Trajector Medical

Year

2023

Disciplines

Design SystemsUI Design
TNT Design System cover

The TNT Design System comprises libraries of shared colors, styles, components, and documentation. Initially created in Sketch and Abstract, the project involved auditing the system, migrating it to Figma, and ensuring components remained current in development to allow for greater reusability across different brands.

Key Outcomes

  • 01Migrated system from Sketch + Abstract to Figma — cutting color library maintenance in half
  • 02Built a core component library enabling Component Driven Development across all brands
  • 03Deployed Zeroheight living documentation, eliminating knowledge silos and the Bus Factor risk
  • 04WCAG 2.1 AA accessibility compliance baked into the color system via a 0–100 numbering convention

Impact

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
%

Reduction in UI maintenance overhead

0
1
2
3
4
5
6
7
8
9

Brands unified under one system

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
%

Faster design-to-dev handoff

0
1
2
3
4
5
6
7
8
9
x

Component reuse velocity

Gallery

Ready to Start?

Have a project in mind?

I'd love to hear about it. Let's build something great together.

Get in TouchTypically responds within 24 hours