Style Guide

Pro-tips: Paste this content into a dedicated page named “Style guide”. Convert each color style below to global swatches so they can be used in text, borders, backgrounds, and gradients. To do this, select a color style element, navigate to the Background Color section in the Style panel, edit the color, and add it as a global swatch.

Text styles

Heading 1

Archia Bold 56px/64px - Mobile: 36px/56px

Heading 2

Archia Bold 32px/44px - Mobile: 28px/40px

Heading 3

Archia Bold 20px/28px

Bodytext: 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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Archia Regular 16px/26px

Small bodytext: 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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Archia Regular 12px/16px

Extra / Introduction

Archia Medium 16px/24px

Extra / Number

Archia Bold 72px/96px

Extra / Button/Link

Archia Bold 16px/24px

Extra / Menu

Archia Bold 36px/40px

Color styles

image-BG - #C8C8C8

Accent-100 - #95D4EB

Accent-500 - #32BDEF

Accent/Able - #097EA8

Neutral-00 - #FFFFFF

Neutral-100 - #FAFAFA

Neutral-200 - #ADB9BA

Neutral-300 - #7F8E8F

Neutral-400 - #5C6263

Neutral-500 - #3D4041

Neutral-150 - #E9E9E9

Secondary-00 - #DDF5F8

Secondary-400 - #195D63

Secondary-500 - #004A51

Tertiary-100 - #80A5A8

Tertiary-200 - #157A92

Gradient-header - 0% / #004A51 / 100% / rgba(0, 74, 81, 0)

Gradient-laser - 0% / #32BDEF / 100% / rgba(50, 189, 239, 0.12)