Colour Scheme

Brand 1 primary
lighter #425069
default #1E242F
darker #14171f
Brand 2 secondary
lighter #425069
default #2D3341
darker #14171f
Background container
lighter #F5F5F5
default #D9D9D9
darker #B5B5B5
Positive message success
bg-green-500 #10B981
Negative message error
bg-red-500 #EF4444
Caution message warning
bg-yellow-500 #F59E0B
Neutral message empty
bg-gray-500 #6B7280

Typography

[Primary] Heading Font

Mic32 New | Uppercase

abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()_+<>

[Primary] Additional Font

Mic32 New | Normal case

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890!@#$%^&*()_+<>

[Secondary] Body Font

Axiforma | Normal case

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890!@#$%^&*()_+<>


Font weights

Light 300
Regular 400
Bold 700

Headings

H1 Heading Level 1

H2 Heading Level 2

H3 Heading Level 3

H4 Heading Level 4

H5 Heading Level 5
H6 Heading Level 6

Body Copy Sizing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam architecto at beatae consectetur debitis eligendi esse harum magni natus perspiciatis provident quidem quod quos sequi totam unde, velit veritatis! Excepturi harum hic impedit nostrum rem repudiandae. Aliquam dolor, minima nam pariatur qui quibusdam quod rerum unde velit voluptas? Cumque doloremque et incidunt iure laborum! Accusamus aliquid atque blanditiis consequuntur culpa cupiditate, doloribus facere fugiat inventore itaque iure iusto labore magnam magni maiores natus nobis officiis quae quibusdam ratione rem voluptas voluptatibus. Ad deleniti ducimus eligendi expedita impedit, incidunt odio officia? Assumenda ex facilis in itaque laborum ratione sequi temporibus!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur commodi eos fugit hic necessitatibus nemo nisi, odit quae reprehenderit! Aspernatur corporis culpa deleniti dolorem et impedit in incidunt, nobis officia placeat possimus provident ratione recusandae repellendus reprehenderit repudiandae sit suscipit unde vel voluptates. Ad corporis dicta dolorem ducimus expedita facere fugiat, id illo ipsum itaque laudantium officiis quas, saepe.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, cupiditate delectus dignissimos eligendi illo laboriosam laborum qui quo quos reprehenderit?

Buttons

Primary
btn btn-primary
btn btn-primary disabled
Secondary
btn btn-secondary
btn btn-secondary disabled
Tertiary
btn-link
btn-link disabled

Inputs

Form
This is a required field.
Checkboxes
Radio Button

Site Messages

Successfully completed the action that has happened.
Failed to complete the action that has happened.
This message is a warning.
This message is for your information.
This section is empty.
This section is for your notice.