Colors
This typographic system uses class-based styling to maintain clarity and readability. This section outlines the typographic standards, from fonts to weights, ensuring text consistency and seamless design integration through reusable classes.
CUSTOm cOLORS
Gr 01
#2CC8FE
#8b56fe
#8b56fe
color
Gr 01
#00C6FB
#005BEA
#005BEA
color
Black (Heading)
303031
color
Grey (Text)
818493
color
Light grey (Border)
EEF0F4
color
Blue (Links)
#476CFF
color
C - PURPLE
5
#f7f7fe
color
10
#f0eefd
color
20
#e1defb
color
30
#d2cdf9
color
40
#c3bcf7
color
50
#b3abf5
color
60
#a49bf3
color
70
#958af1
color
80
#8679ef
color
90
#7769ed
color
100
#6858eb
color
120
#4c3fb2
color
200
#150e4d
color
C - GREEN
5
#F2FCF8
color
10
#E6F8F1
color
20
#CCF2E4
color
30
#B3EBD6
color
40
#99E4C9
color
50
#80DDBB
color
60
#66D7AE
color
70
#4DD0A0
color
80
#33C992
color
90
#1AC385
color
100
#00BC77
color
C - NEUTRAL
0
#FFFFFF
color
2
#F8F8FB
color
5
#ECECF0
color
10
#DFE1E7
color
20
#CFD3DC
color
30
#BEC4CF
color
40
#9EA6B8
color
50
#7D89A0
color
60
#5D6B88
color
70
#424E66
color
80
#303C53
color
90
#1D2940
color
100
#0E182D
color
SLATE
50
#f8fafc
color
100
#f1f5f9
color
200
#e2e8f0
color
300
#cbd5e1
color
400
#94a3b8
color
500
#64748b
color
600
#475569
color
700
#334155
color
800
#1e293b
color
900
#0f172a
color
950
#020617
color
GRAY
50
#f9fafb
color
100
#f3f4f6
color
200
#e5e7eb
color
300
#d1d5db
color
400
#9ca3af
color
500
#6b7280
color
600
#4b5563
color
700
#374151
color
800
#1f2937
color
900
#111827
color
950
#030712
color
Zinc
50
#fafafa
color
100
#f4f4f5
color
200
#e4e4e7
color
300
#d4d4d8
color
400
#a1a1aa
color
500
#71717a
color
600
#52525b
color
700
#374151
color
800
#1f2937
color
900
#111827
color
950
#09090b
color
NEUTRAL
50
#fafafa
color
100
#f5f5f5
color
200
#e5e5e5
color
300
#d4d4d4
color
400
#a3a3a3
color
500
#737373
color
600
#525252
color
700
#404040
color
800
#262626
color
900
#171717
color
950
#0a0a0a
color
stone
50
#fafaf9
color
100
#f5f5f4
color
200
#e7e5e4
color
300
#d6d3d1
color
400
#a8a29e
color
500
#78716c
color
600
#57534e
color
700
#44403c
color
800
#292524
color
900
#1c1917
color
950
#0c0a09
color
RED
50
#fef2f2
color
100
#fee2e2
color
200
#fecaca
color
300
#fca5a5
color
400
#f87171
color
500
#ef4444
color
600
#dc2626
color
700
#b91c1c
color
800
#991b1b
color
900
#7f1d1d
color
950
#450a0a
color
orange
50
#fff7ed
color
100
#ffedd5
color
200
#fed7aa
color
300
#fdba74
color
400
#fb923c
color
500
#f97316
color
600
#ea580c
color
700
#c2410c
color
800
#9a3412
color
900
#7c2d12
color
950
#431407
color
Amber
50
#fffbeb
color
100
#fef3c7
color
200
#fde68a
color
300
#fcd34d
color
400
#fbbf24
color
500
#f59e0b
color
600
#d97706
color
700
#b45309
color
800
#92400e
color
900
#78350f
color
950
#451a03
color
YELLOW
50
#fefce8
color
100
#fef9c3
color
200
#fef08a
color
300
#fde047
color
400
#facc15
color
500
#eab308
color
600
#ca8a04
color
700
#a16207
color
800
#854d0e
color
900
#713f12
color
950
#422006
color
LIME
50
#f7fee7
color
100
#ecfccb
color
200
#d9f99d
color
300
#bef264
color
400
#a3e635
color
500
#84cc16
color
600
#65a30d
color
700
#4d7c0f
color
800
#3f6212
color
900
#365314
color
950
#1a2e05
color
GREEN
50
#f0fdf4
color
100
#dcfce7
color
200
#bbf7d0
color
300
#86efac
color
400
#4ade80
color
500
#22c55e
color
600
#16a34a
color
700
#15803d
color
800
#166534
color
900
#14532d
color
950
#052e16
color
EMERALD
50
#ecfdf5
color
100
#d1fae5
color
200
#a7f3d0
color
300
#6ee7b7
color
400
#34d399
color
500
#10b981
color
600
#059669
color
700
#047857
color
800
#065f46
color
900
#064e3b
color
950
#022c22
color
TEAL
50
#f0fdfa
color
100
#ccfbf1
color
200
#99f6e4
color
300
#5eead4
color
400
#2dd4bf
color
500
#14b8a6
color
600
#0d9488
color
700
#0f766e
color
800
#115e59
color
900
#134e4a
color
950
#042f2e
color
CYAN
50
#ecfeff
color
100
#cffafe
color
200
#a5f3fc
color
300
#67e8f9
color
400
#22d3ee
color
500
#06b6d4
color
600
#0891b2
color
700
#0e7490
color
800
#155e75
color
900
#164e63
color
950
#083344
color
SKY
50
#f0f9ff
color
100
#e0f2fe
color
200
#bae6fd
color
300
#7dd3fc
color
400
#38bdf8
color
500
#0ea5e9
color
600
#0284c7
color
700
#0369a1
color
800
#075985
color
900
#0c4a6e
color
950
#082f49
color
BLUE
50
#eff6ff
color
100
#dbeafe
color
200
#bfdbfe
color
300
#93c5fd
color
400
#60a5fa
color
500
#3b82f6
color
600
#2563eb
color
700
#1d4ed8
color
800
#1e40af
color
900
#1e3a8a
color
950
#172554
color
INDIGO
50
#eef2ff
color
100
#e0e7ff
color
200
#c7d2fe
color
300
#a5b4fc
color
400
#818cf8
color
500
#6366f1
color
600
#4f46e5
color
700
#4338ca
color
800
#3730a3
color
900
#312e81
color
950
#1e1b4b
color
VIOLET
50
#f5f3ff
color
100
#ede9fe
color
200
#ddd6fe
color
300
#c4b5fd
color
400
#a78bfa
color
500
#8b5cf6
color
600
#7c3aed
color
700
#6d28d9
color
800
#5b21b6
color
900
#4c1d95
color
950
#2e1065
color
PURPLE
50
#faf5ff
color
100
#f3e8ff
color
200
#e9d5ff
color
300
#d8b4fe
color
400
#c084fc
color
500
#a855f7
color
600
#9333ea
color
700
#7e22ce
color
800
#6b21a8
color
900
#581c87
color
950
#3b0764
color
Fuchsia
50
#fdf4ff
color
100
#fae8ff
color
200
#f5d0fe
color
300
#f0abfc
color
400
#e879f9
color
500
#d946ef
color
600
#c026d3
color
700
#a21caf
color
800
#86198f
color
900
#701a75
color
950
#4a044e
color
PINK
50
#fdf2f8
color
100
#fce7f3
color
200
#fbcfe8
color
300
#f9a8d4
color
400
#f472b6
color
500
#ec4899
color
600
#db2777
color
700
#be185d
color
800
#9d174d
color
900
#831843
color
950
#500724
color
ROSE
50
#fff1f2
color
100
#ffe4e6
color
200
#fecdd3
color
300
#fda4af
color
400
#fb7185
color
500
#f43f5e
color
600
#e11d48
color
700
#be123c
color
800
#9f1239
color
900
#881337
color
950
#4c0519
color
Typography
This typographic system uses class-based styling to maintain clarity and readability. This section outlines the typographic standards, from fonts to weights, ensuring text consistency and seamless design integration through reusable classes.
TEXT BLOCK H1-H6 (CLasses & No-spacing)
H1 / 44px
Lorem ipsum dolor sit
H2 / 36px
Lorem ipsum dolor
H3 / 28px
Lorem ipsum dolor sit amet consectetur
H4 / 24px
Lorem ipsum dolor sit amet, consectetur
H5 / 22px
Lorem ipsum dolor sit amet, consectetur
H6 /18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
TEXT BLOCK - BODY TEXT
body-12-b / 12px / 1.5em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
body-12 / 12px / 1.5em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
body-12-m / 12px / 1.5em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
body-14-b / 14px / 1.5em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
body-14 / 14px / 1.5em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
body-14 / 14px / 1.5em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
body-16-b / 16px / 1.4em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
body-16 / 16px / 1.4em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
body-16 / 16px / 1.4em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
body-18-b / 18px / 1.4em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
body-18 / 18px / 1.4em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
body-18 / 18px / 1.4em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
body-20-b / 20px / 1.45em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
body-20 / 20px / 1.45em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
body-20 / 20px / 1.45em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
body-24-b / 24px / 1.3em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
body-24 / 24px / 1.3em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
body-24 / 24px / 1.3em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
Buttons
Variety of button styles and sizes to drive user action. Each is designed for coherence and usability, ensuring a seamless user experience.
BUTTOnS - PRIMARY
BUTTOnS - OUTLINE
BUTTOnS - FLAT
BUTTOnS - FLAT LIGHT
BUTTONs - DISABLED
BUTTONs - SIZES
