Obsidan Design System

2024

A Tinder design system.

Role
Design System
Experience
Visual
Client
Tinder
Obsidian, a Tinder design system, provides foundational styling, components and guidelines for designers and engineers. These resources support product feature teams empowering them to work more efficiently and to make the Tinder experience more cohesive and inclusive for end users.
As senior product designer, I am responsible for creating and maintaining a cohesive design system across platforms, developing token & component libraries, creating vision mocks, crafting design guidance, and collaborating with design & engineering teams to ensure consistency and innovation.

Establishing cohesive semantic tokens

Color, type and iconography tokens sync between Figma libraries and engineering style directories aligning semantics for designers and engineers.
Semantic Color Tokens
Semantic Iconography Tokens

Powering designers with a Figma design kit

A Figma design kit resource provides a visual dashboard of tokens and grab-and-go component instances increasing velocity of consumption.

Guidance for design and engineering

A centralized documentation website supports designers and engineers across feature teams with resources and guidance on system foundations, components, patterns and accessibility.