# Building Obsidian, Tinder’s Design System

[Tinder](https://yomu.fyi/company/tinder) · Tinder · Jan 9, 2023

**Type:** Problem & solution

## Summary

As Tinder scaled over a decade, maintaining visual consistency across its client applications became unsustainable and increased engineering overhead. To address this, the UI Platform team developed Obsidian, a unified design system combining design tokens, reusable components, and documentation. Designers define base and context tokens in Figma using the Tokens Studio plugin, which are then transformed by Style Dictionary into native artifacts for iOS, Android, and Web. Web developers integrate these tokens using Atomizer to generate static stylesheets, while a Zeroheight documentation portal and a custom token lookup tool assist legacy migrations. The ongoing migration has streamlined collaboration between designers and engineers, resolved styling ambiguities, and improved color contrast accessibility across platforms.

## Context

Over a decade of rapid feature development at Tinder led to inconsistent design practices across screens and components. The cost of designing, building, and maintaining features across iOS, Android, and Web became unsustainable due to fragmented styles and thousands of hardcoded raw values in the codebase.

## Approach / What changed

Tinder's UI Platform team built Obsidian, a design system centered on design tokens and reusable UI components. Designers define tokens in Figma with Tokens Studio, and a pipeline using Style Dictionary transforms this data into code artifacts for Kotlin, Swift, and TypeScript. For Tinder Web, tokens integrate with Atomizer build-time stylesheets. To support migration, the team launched a Zeroheight documentation site with over 100 pages and built a token lookup tool that maps raw values and names to cross-platform code snippets.

## Takeaways

- Obsidian categorizes tokens into base tokens for raw styling values and context tokens for semantic usage and theming, enabling automatic dark mode adaptation.
- Tokens Studio in Figma serves as the source of truth, where a custom script and Style Dictionary transform token data into native artifacts for iOS, Android, and Web.
- Tinder created a token lookup search tool and over 100 pages of Zeroheight documentation to help engineers replace thousands of legacy raw hex and font values.

**Tags:** [Android](https://yomu.fyi/topic/android), [Developer Experience](https://yomu.fyi/topic/developer-experience), [iOS](https://yomu.fyi/topic/ios), [Migrations](https://yomu.fyi/topic/migration), [TypeScript](https://yomu.fyi/topic/typescript)

[Read original post](https://medium.com/tinder/building-obsidian-tinders-design-system-e127770d8e3f)