Design System


Color Palette

primary

text-primary-8

rgba(58, 136, 251, 0.08)

text-primary-12

rgba(58, 136, 251, 0.12)

text-primary-16

rgba(58, 136, 251, 0.16)

text-primary-24

rgba(58, 136, 251, 0.24)

text-primary-base

#3A88FB

hover

text-hover-16

rgba(107, 167, 255, 0.16)

text-hover-24

rgba(107, 167, 255, 0.24)

text-hover-base

#6BA7FF

pressed

text-pressed-16

rgba(11, 97, 224, 0.16)

text-pressed-24

rgba(11, 97, 224, 0.24)

text-pressed-base

#0B61E0

disabled

text-disabled-8

rgba(2, 138, 88, 0.08)

text-disabled-32

rgba(2, 138, 88, 0.32)

accent

text-accent-primary

#ABE749

text-accent-hover

#BBE477

text-accent-pressed

#8DC62F

text-accent-focused

rgba(141, 198, 47, 0.24)

semantic

text-semantic-info

#2F80ED

text-semantic-success

#4CAF50

text-semantic-warning

#F59638

text-semantic-error

#D81A33

neutral

text-neutral-2

rgba(33, 33, 33, 0.02)

text-neutral-4

rgba(33, 33, 33, 0.04)

text-neutral-8

rgba(33, 33, 33, 0.08)

text-neutral-16

rgba(33, 33, 33, 0.16)

text-neutral-24

rgba(33, 33, 33, 0.24)

text-neutral-32

rgba(33, 33, 33, 0.32)

text-neutral-48

rgba(33, 33, 33, 0.48)

text-neutral-72

rgba(33, 33, 33, 0.72)

text-neutral-base

#212121

Typography

Plus Jakarta Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Light 300

Medium 500

Semibold 600

Extrabold 800

h1

text-h1

5rem / 80px

h2

text-h2

3rem / 48px

h3

text-h3

2rem / 32px

h4

text-h4

1.375rem / 22px

mbl-h2

text-mbl-h2

1.5rem / 24px

Buttons

Primary Buttons

Outline Buttons

Rounded Buttons

Block Buttons

Color Variations

Buttons with Icons

Forms

Text Inputs

This field is required

0/20
$
.com

Textarea Inputs

This field is required

0/100

Selector Inputs

This field is required

Checkboxes

This field is required

Checkbox with Parent Label *

Radio Inputs

Default Radio Input

Radio Input with Object Options

Radio Input with Error

This field is required

Disabled Radio Input

Default Radio Input Column

Default Radio Input Required *

Password Input

Password is required

Mobile Number Input

+63
+63

Invalid mobile number

+63
+63

File Upload

Select a file
Select a file

Please upload a valid file

Select a file
Select a file
Select a file
Select a file
png, jpg, gif, webp up to 2.0 MB

Drag & Drop or Browse File to upload

PDF Format up to 40.0 MB

Drag & Drop or Browse File to upload