logo

Design System


Color Palette

primary

text-primary-4

rgba(38, 94, 246, 0.04)

text-primary-8

rgba(38, 94, 246, 0.08)

text-primary-16

rgba(38, 94, 246, 0.16)

text-primary-24

rgba(38, 94, 246, 0.24)

text-primary-base

#265EF6

hover

text-hover-16

rgba(155, 181, 251, 0.16)

text-hover-24

rgba(155, 181, 251, 0.24)

text-hover-base

#9BB5FB

pressed

text-pressed-16

rgba(21, 52, 135, 0.16)

text-pressed-24

rgba(21, 52, 135, 0.24)

text-pressed-base

#153487

disabled

text-disabled-8

rgba(38, 94, 246, 0.08)

text-disabled-32

rgba(38, 94, 246, 0.32)

accent

text-accent-primary

#265EF6

text-accent-hover

#9BB5FB

text-accent-pressed

#153487

text-accent-focused

rgba(155, 181, 251, 0.24)

semantic

text-semantic-info

#4073FF

text-semantic-success

#299438

text-semantic-warning

#FF9933

text-semantic-error

#DB4035

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

display

text-display

4.5rem / 80px

h1

text-h1

3rem / 48px

h2

text-h2

2rem / 32px

mbl-display

text-mbl-display

2.625rem / 42px

mbl-h1

text-mbl-h1

2rem / 32px

mbl-h2

text-mbl-h2

1.625rem / 26px

Buttons

Primary Buttons

Outline Buttons

Rounded Buttons

Block Buttons

Color Variations

Buttons with Icons

Buttons with Icons and Outline

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
file upload icon
Select a file
file upload icon

Please upload a valid file

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

Drag & Drop or Browse File
to upload

file upload icon