Pure Design System
Design Principles
- Design System is a set of specific rules of design principles or opiniated design that transcendence to the user interface that affect user experience as a whole.
- Design Principles explain why we do specific things, now how, how part is the implementation of the code.
- Pure Design System mimicing the traditional (most cases) environment when student solving math and physics problem, like in paper, pencil, white board, pencil cases, etc, especially in Analysis (MAKI) process.
- Why called "Pure"?
- Well, honestly, I have no idea on naming.
- Blue, black, gray, and white seems pure and minimalist color to me, and it actually my four favourite colors.
- The word "Pure" also not a long word so it can fit on the TabBars (bottom navigation on mobile-like apps) and top navigation bar at desktop).
- Distinguish between link and button, link to navigate, button for action.
- Both link and button, they must be have hover and active state UI representation.
- Hover state mean you hovering the UI so you ready to act on it, but not acting on it yet, and active state is when you act on the UI and it doing their own functionality (navigate or doing action)
- Strive to only using basic color and UI components provided in design system to accelerate development, maintaining consistency, and familiarity.
- Each component already have hover, active, and focus state (not all component need that state though)
- This design system is accessible at mobile and desktop web (a.k.a responsive).
- You can see the component code here
- If you want to see other variation of these component you can see
here
orhere
- There is a lot of work to be done in this design system, like: typography, use cases, example, do's and don't's, description to each UI component, and guidelines. Coming soon.
UI Components
Switch
Accordion
Checkbox
Popover
Table
Title | Title | Title |
---|---|---|
Data | Data | Data |
Data | Data | Data |
Tabs
Account description. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut molestias veritatis ullam quae rem quis aliquam, accusantium debitis sint praesentium.
Toast
Internal Link
External Link
Tooltip
Tooltip
Button: Primary
Button: Loading
Button: Secondary
Button: With Icon
Button: Only Icon
Button: Danger
Button: Disabled
Main Colors
Success
#34c759
Attention
#eab308
Danger
#ef4444
Action
#2563eb
Black
#27272a
Background
#fff
Hierachical Colors
white
#fff
zinc-50
#fafafa
zinc-100
#f4f4f5
zinc-200
#e4e4e7
zinc-300
#d4d4d8
zinc-400
#a1a1aa
zinc-500
#6b7280
zinc-600
#52525b
zinc-700
#3f3f46
zinc-800
#27272a
zinc-900
#18181b
black
#000
Input: Text
Input: Search
Input: Number
Box
Title
Content
Text Area
Toggle
Breadcrumbs
/main/trunk/leaf
Badges
General
Success
Danger
Attention
Information
Back Button
Logo
Harits Syahharitssr.com
Haris Labharislab.com
Haris Studioharisstudio.com
Modal
Select
Coming Soon
Bottom Navigation Mobile
Coming Soon
Slider
Coming Soon
Context Menus
Coming Soon
Date Picker
Coming Soon