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

  or

  here

• 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

Title

Checkbox

Accept terms and conditions.

Popover

Show Popover

Table

Title	Title	Title
Data	Data	Data
Data	Data	Data

Tabs

AccountPassword

Account description. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut molestias veritatis ullam quae rem quis aliquam, accusantium debitis sint praesentium.

Toast

Show Toast

Internal Link

Internal Link

External Link

External Link

Tooltip

Tooltip

Button: Primary

Button

Button: Loading

Button

Button: Secondary

Button

Button: With Icon

Bookmark

Button: Only Icon

Button: Danger

Button

Button: Disabled

Button

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

State : OFF

Breadcrumbs

/main/trunk/leaf

Badges

General

Success

Danger

Attention

Information

Back Button

Previous Page

Logo

Harits Syahharitssr.com

Haris Labharislab.com

Haris Studioharisstudio.com

Modal

Open Modal

Select

Coming Soon

Bottom Navigation Mobile

Coming Soon

Slider

Coming Soon

Context Menus

Coming Soon

Date Picker

Coming Soon

Figma Design