
Sapphire
A meticulously crafted open-source UI kit featuring 40+ polished components built with accessibility and flexibility in mind, for builders who want to create beautiful interfaces without starting from scratch.
Context
Personal Project
Status
Launched on Figma Community in March 2023

Sapphire
A meticulously crafted open-source UI kit featuring 40+ polished components built with accessibility and flexibility in mind, for builders who want to create beautiful interfaces without starting from scratch.
Context
Personal Project
Status
Launched on Figma Community in March 2023

Sapphire
A meticulously crafted open-source UI kit featuring 40+ polished components built with accessibility and flexibility in mind, for builders who want to create beautiful interfaces without starting from scratch.
Context
Personal Project
Status
Launched on Figma Community in March 2023
V1.3.0
Sapphire
Sapphire
Sapphire
Architecture
My approach for this UI kit was to maximize functionality. I use this for different types of projects and different style directions, and my intention is to allow other users to customize it to fit their project's needs.
Architecture
My approach for this UI kit was to maximize functionality. I use this for different types of projects and different style directions, and my intention is to allow other users to customize it to fit their project's needs.
Architecture
My approach for this UI kit was to maximize functionality. I use this for different types of projects and different style directions, and my intention is to allow other users to customize it to fit their project's needs.



Features
Meticulously crafted and easy to use with Auto Layout 4.0 and instantly swappable components. 40+ Components, 3000+ Variants. Figma Variables support. Completely customizable. With much more to come.
Features
Meticulously crafted and easy to use with Auto Layout 4.0 and instantly swappable components. 40+ Components, 3000+ Variants. Figma Variables support. Completely customizable. With much more to come.
Features
Meticulously crafted and easy to use with Auto Layout 4.0 and instantly swappable components. 40+ Components, 3000+ Variants. Figma Variables support. Completely customizable. With much more to come.



Inspiration
Here are a few UI Kits that I’ve either come across or learned from. A lot of the techniques that I’ve used to build this design system were inspired by these designers, and they’ve all put far more time and effort into their libraries than I have. If you want to try out a more robust UI Kit, there are a few that I highly recommend checking out.
Inspiration
Here are a few UI Kits that I’ve either come across or learned from. A lot of the techniques that I’ve used to build this design system were inspired by these designers, and they’ve all put far more time and effort into their libraries than I have. If you want to try out a more robust UI Kit, there are a few that I highly recommend checking out.
Inspiration
Here are a few UI Kits that I’ve either come across or learned from. A lot of the techniques that I’ve used to build this design system were inspired by these designers, and they’ve all put far more time and effort into their libraries than I have. If you want to try out a more robust UI Kit, there are a few that I highly recommend checking out.
The Staples
I started off with the basics. Ironically, getting these all to be consistent and scalable was more difficult to achieve than building any complex components.
The Staples
I started off with the basics. Ironically, getting these all to be consistent and scalable was more difficult to achieve than building any complex components.
The Staples
I started off with the basics. Ironically, getting these all to be consistent and scalable was more difficult to achieve than building any complex components.



Adaptive Color System
All of the components are WCAG 2.1 and 3.0 compliant. Semantic Variables allow for more control over the styling and themes. And of course, dark mode is on the way.
Adaptive Color System
All of the components are WCAG 2.1 and 3.0 compliant. Semantic Variables allow for more control over the styling and themes. And of course, dark mode is on the way.
Adaptive Color System
All of the components are WCAG 2.1 and 3.0 compliant. Semantic Variables allow for more control over the styling and themes. And of course, dark mode is on the way.



The Calendar
The calendar was eventually made up of 4 subcomponents and 481 variants. And there's still more functionality to come.
The Calendar
The calendar was eventually made up of 4 subcomponents and 481 variants. And there's still more functionality to come.
The Calendar
The calendar was eventually made up of 4 subcomponents and 481 variants. And there's still more functionality to come.



Metrics
For the sake of exploration, I built a simple metrics card with 6 subcomponents, 43 variants, and over 20,000 possible combinations.
Metrics
For the sake of exploration, I built a simple metrics card with 6 subcomponents, 43 variants, and over 20,000 possible combinations.
Metrics
For the sake of exploration, I built a simple metrics card with 6 subcomponents, 43 variants, and over 20,000 possible combinations.



Timeline
Scrolling did create some complexity, but we made it work with 4 components and 213 variants.
Timeline
Scrolling did create some complexity, but we made it work with 4 components and 213 variants.
Timeline
Scrolling did create some complexity, but we made it work with 4 components and 213 variants.



Kanban Board
Notion has done unspeakable things to us as a society. Kanban board with 5 subcomponents and 139 variants.
Kanban Board
Notion has done unspeakable things to us as a society. Kanban board with 5 subcomponents and 139 variants.
Kanban Board
Notion has done unspeakable things to us as a society. Kanban board with 5 subcomponents and 139 variants.



What Next?
This is by no means a finished project. In fact, I hope it never becomes one. This little project has turned into an arena for my curiosity to run wild. My hope is that someone finds my tinkering helpful in some way.
What Next?
This is by no means a finished project. In fact, I hope it never becomes one. This little project has turned into an arena for my curiosity to run wild. My hope is that someone finds my tinkering helpful in some way.
What Next?
This is by no means a finished project. In fact, I hope it never becomes one. This little project has turned into an arena for my curiosity to run wild. My hope is that someone finds my tinkering helpful in some way.
Sapphire is available on Figma Community!
Try it out
Try it out
Try it out