Styleguide

Typography

Heading 1

Heading 1 – 105/100

Heading 1.5

Heading 1.5 – 80/90

Heading 2 (Bold & Regular)

Heading 2 B – 60/68

Heading 2 R – 60/68

Heading 3

Heading 3 – 35/42

Heading 4 (Bold & Regular)

Heading 4 B – 24/32

Heading 4 R – 24/32

Heading 5 (Lead In – Bold & Regular)

Lead In B – 18/26
Lead In R – 18/26

Heading 6 (Remark)

Remark – 14/24

Body Text

Add class ‘o-reveal-childs’ to wrapper for animation. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Link

Link url

Add class ‘gradient-animation’ We are a global creative tech studio forging delightful experiences by blending design, technology, and storytelling. Driven to create value for people and brands through interaction

Colors

Text Color

var(--color-text) #fff

Dark Blue

var(--color-dark-blue) #003966

Light Blue

var(--color-light-blue) #005DA7

Blue 4

var(--color-blue-4) #002340

Buttons

Primary

.btn-primary (Link)

Secondary

.btn-secondary (Link)

Next / Prev (Primary)

Next / Prev (Secondary)

White Variants (on dark background)

.btn-secondary.btn-white
.btn-third.btn-white

Line Animation