A mostly reasonable although opinionated approach to building responsive Digital Interfaces sharing the same anatomy.
Design Principles
01.MEANINGFUL SIMPLICITY + BEAUTY
Yes. Simple and beautiful are always good but make sure it solves a problem first.
02.BORROW FROM NATURE
Nature is already perfect. Use natural forces to influence the user's senses through code and design.
03.BE THE BRAND
The success of my message is rooted in the consistency of my personal Brand.
What is this?
OSKRHQ.DS is a themable Styleguide AND a Component Library written in React for both web and mobile. I created the system for myself to showcase my personal Brand but you can fork it and make it your own. Although this website consumes the system, the site of is just a face for what it really is. The magic is in the code which allows Design and Code to coexists in one sole language. All this, so that I can compose products from the same Brand Identity and Anatomy.
Every UI element you see here was composed of the same 5 foundational elements or what I call The Anatomy of UI: Color, Typography, Space, Motion, and Depth.
Design System (noun): A product made of living guidelines that communicates a unified set of UX and design decisions which promotes harmony across various media outputs.
Why is this even a thing?
Every interface you interact with was designed at some point. And those interfaces were probably crafted by design teams divided into smaller teams. These silos create fragmented experiences looking at the product holistically. Coupled with headaches when trying to communicate designs to developers, it can get really ugly for the user since their experience is the interaction with the whole product, not just a specific part of it.
Design Systems are a Visual Language. A language that allows designers and developers to communicate with one another, amongst each other, and it allows your brand to communicate with your users through carefully crafted and hopefully cohesive experiences.
How Do I use it?
If you are a Designer... I got you. I created a UI Kit that mirrors the components you see on this website. That way, you can create experiences with the same building blocks (components) the Developers have. It also has all the design assets you will need to get started.
If you are a Developer, check the Github repo for guidance. And if you feel like contributing, it would make my day 😎
Can I theme it?
Yep. OSKRHQ.DS supports theming out of the box. You can fork the code repo in Github, change a couple of values in one place and be able to have a Design System with your unique personality and brand identity. Below you can see theming in action shifting from one theme to another. For more info, checkout the repo.