Prisma Design System
Prisma design system is a reflection on my work experiences around design systems when working at ZEISS and Mask Network.
It strikes to be a flexible and scalable design system that will be continuously updated by me, with the aim of sharing it to the design community in the future.
Desktop
Web
Design System
Color tokens
Why do we need a design system?
Increases efficiency and scalability
For a start up like Mask Network that needs to ship products from zero, we set up color and typography foundations, created buttons, input forms etc. based on the foundation, which formed a very simple design system, that can be scaled and expanded as the company grows.
For an enterprise with existing design system, it constantly envolves. E.g. At ZEISS, the design system utilizes primitive colors at first, then the team introduces color tokens.
A design system increases efficiency and scalability for companies and enterprises. It smoothens the collaboration between designers and engineers.
Typography
Determine font family and styles
For font family, system fonts are utilized.
Windows → Segoe UI. Apple → San Francisco.
The styles of fonts are organized from caption to H0.
Color
Primitive colors
It is important to have a scalable color system, that is flexible to adapt and customize. The primitive colors are created first.
Semantic colors
Based on the primitive colors, semantic colors are asigned as background, text/icon, stroke/border colors.
For example, bg/light/brand/enabled has a primitive color of p/100.
Dark and light themes
Assign primitive colors to respective dark and light themes for Background, Text/Icon, Stroke/Border.
Components
Example: Buttons
Buttons are based on the color system established before. Based on the foundation, buttons of different states can be created.
Variants of buttons of different states, sizes and themes can be created, and the colors of buttons are semantic.
Example: Menubar
A scalable side menu with collapsable options. Further component level semantic color is created. For example, comp/dark/menuBar/secondary/selected refers to p 110 70%.
Collapsable menu bars of dark and light themes can be created.
Outcome
WIth design system, if a brand wants to change its brand color, it can do so by changing its color token. It can always be maintained and envolved as more components can be modified and added, if it suits the need of the product.