I started this project to provide a resource to the Obsidian community and learn about design systems by recreating one. Obsidian has a great design system to learn from because it has both light and dark mode, is available on desktop, tablet, and mobile, and also has a web component (Obsidian Publish). The Figma community file is available on Figma's community website and I continue to update it as I learn more about Obsidian's design system and design systems in general.
Below is a sample of the colors used in the Obsidian app. The colors are being tokenized for use within this Figma file using the Token Studio for Figma plugin.
So far, the most robust component created for this design system is the button which has light and dark variants, with two different types, and two states. More components will be added with this level of fidelity to help designers understand specific details.
Obsidian uses a 4 point grid system.
Many more aspects of design systems have been and are being explored in this file including…
Corner radius
Shadows/Elevation
Responsive/Adaptive design
Design Tokens
Typography
Icons
