This is a website made to showcase a Design System I created from scratch. The website itself is consuming the system which you can find and download the npm package here. The system was created for both Designers and Developers. It makes use of a CSS architecture based on a shared anatomy (Color, Typography, Space, Depth, and Motion), and a variety of React Presentational Components built from this shared anatomy. The system also has a UI Kit with available Sketch Symbols matching these React Components so Designers and Developers are always in sync. 🤙🏽
Head to the Design System's repo here.
You are not lost, feel free to dig through the code but you will be more interested in the UI Kit which mirrors this repo code. You can find it here.
Read my Medium series here
- Source code is licensed under MIT
My definition is as follows:
(noun): A product made of living guidelines that communicates a unified set of UX and design decisions which promotes harmony across various media outputs.
If you are here, you already know why. 🤓
You can create your own components using the base Anatomy which provides some really useful utility sass functions, mixins and classes.
- Part I: The Anatomy of all Interfaces
- Part II: Crafting a New Visual Language
- Part III: A Dictionary for a Design Language