What is it?
Obsidian is a comprehensive design system crafted entirely in Figma, designed to unify product teams working on dark-mode-first digital products. It covers everything from atomic variables to complex organism-level components.
The system uses CSS custom properties as its source of truth, with a token architecture that supports multiple themes out of the box. Every component is documented with usage guidelines and accessibility notes.
Why was it built?
Most public design systems are either light-mode-first or overly complex for small teams. Obsidian fills the gap — it's built for teams that ship in dark environments and need to move fast without sacrificing quality.
The goal was to create a system that could scale from a solo developer's side project to a 20-person product team without needing a complete overhaul.
Process
The process started with a full audit of existing dark-mode design systems (Radix, Vercel, Linear). I identified gaps in token architecture, icon consistency, and responsive spacing. From there, I built the foundation layer first — colors, typography, and spacing — before moving to components.
Each component was built at three levels: base, variant, and state. This made theming predictable and kept overrides minimal. The final system shipped with 60+ components and a full documentation page.
Final Output
A fully documented Figma file with 60+ components, 8 typography styles, 3 spacing scales, and a dark-mode token sheet. The system has been used in 4 subsequent projects with zero refactoring needed.