Design
System
Auto Layout
Components
Library
Overview
This Design System was created to establish consistency and scalability across products. It provides a unified set of foundations, components, and guidelines to streamline the design process, improve collaboration, and ensure cohesive user experiences.
Figma
Notion
Using Atomic
Design Methodology
Inspired by Brad Frost’s Atomic Design methodology, the system is structured into scalable building blocks—from atoms to pages—ensuring consistency, flexibility, and efficient product development.
Design Tokens
Basic design variables that define visual design parameters (fonts, color, spacing)
Atoms
Basic building blocks such as icons, buttons and checkboxes.
Molecules
Simple combinations of atoms like input fields, search bars, and form groups.
Organisms
More complex components formed by combining molecules, such as cards and tables.
Templates
Layout structures that define the placement of components across pages.
Pages
Final screens that showcase real content using templates.
Colors System
A consistent color palette ensures visual harmony and clear communication across interfaces.
Purple
50
#F4EEFD
100
#E6D7FB
200
#D2B8F7
300
#BD98F1
400
#A875EB
500
#753FC9
600
#6939B5
700
#5C32A0
800
#4E2A89
900
#3F2271
Gray
50
#F9FAFB
100
#F3F4F6
200
#EAECF0
300
#D1D5DB
400
#9CA3AF
500
#6B7280
600
#4B5563
700
#2D3747
800
#151F2D
900
#000413
Highlight
50
#FFF5CC
200
#FFE066
500
#FFCC00
Success
50
#DBEDE0
200
#B7DBC1
500
#4AA564
Warning
50
#FFEDCC
200
#FFC966
500
#FFA500
Alert
50
#F4D4D4
200
#DD7E7E
500
#C62828
Satoshi
Light / Regular / Medium / Bold / Black
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789
Icon Set
Consistent iconography enhances usability and visual clarity.
Shadows & Effects
Shadows define depth and hierarchy, helping users understand elevation, focus, and interactive elements across the interface.
Drop Shadow
Shadow-xs
Shadow-sm
Shadow-md
Shadow-lg
Shadow-xl
Shadow-2xl
Shadow-3xl
Flat Shadow
Shadow-xs
Shadow-sm
Shadow-md
Shadow-lg
Shadow-xl
Shadow-2xl
Shadow-3xl
Corner Radius
Corner radius ensures visual consistency and creates a cohesive, modern look across components and layouts.
Spacing System
A consistent spacing system based on the 4-point grid ensures balanced layouts, predictable spacing, and scalable design across all components and screens.
Design Components
Reusable components built on foundational elements to ensure consistency, scalability, and efficient design across products.
Buttons
Checkboxes
Radio Buttons
Toggles
Badges
Input Fields
Paginations
Tabs
