SECONDARY COLOURS
Light Indigo
#A5B4FC
Medium Indigo
#818CF8
System Indigo
#4338CA
Dark Indigo
#312E81
PRIMARY COLOURS
Indigo
#6366F1
Dark
#16143A
Light
#E0E7FF
SYSTEM COLOURS
Green
#35E275
Yellow
#FACC15
Red
#DC2626
Bue
#2563EB
NEUTRAL COLOURS
White
#FBFBFB
Light Gray
#E5E7EB
Medium Gray
#9CA3AF
Dark Gray
#4B5563
Spacing
Grid System
Desktop
Column width: 80px
Gutter: 30px
Columns: 12
Buttons
BASIC STATES
BUTTON SCALE
34
110
42
52
52
150
170
52
STATUS INPUT
Success
Error
Warning
Placeholder
Placeholder
Placeholder
Success Text
Success Text
Success Text
DROPDOWN
Default
Select
Multi Select
Select
Select
Example 1
Example 3
Example 2
Select
Example 1
Example 3
Example 2
Selections
TOGGLE SWITCH
CHECKBOX
RADIO BUTTONS
On
Off
Disabled On
Disabled Off
Unchecked
Hover
Checked
Disabled Unchecked
Disabled Checked
Unselected
Hover
Selected
Disabled Unselected
Disabled Selected
Typography
TYPERFACE
TEXT STYLE
Headline 1
40
Extra Bold
Headline 2
36
Extra Bold
Headline 3
32
Semi Bold
Headline 4
24
Regular
Headline 5
20
Regular
Body Text Medium
18
Regular
Body Text Medium 2
32
Extra Bold
Body Text Small
14
Regular
Button
18
Semi Bold
4px
8px
12px
16px
20px
24px
32px
40px
48px
56px
64px
72px
80px
96px
Solid
Outline
Text
Right Icon
Left Icon
Default
Hover
Pressed
Disabled
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button >
Button >
Button >
Button >
Button
Button
Button
Button
Placeholder
|Placeholder
Martin |
Martin Kin
ICONS BUTTONS
Solid
Outline
Default
Hover
Pressed
Disabled
Inputs
TEXT INPUT
Default
Hover
Focussed
Placeholder
Placeholder
Filled
Typing
Disabled