Styles Guides

Guides include
Headings, Paragraphs and Details, Quotes, Color Styles, Buttons, Components

Headings

Typography – Roboto

On white

H1 — 3.815rem

Аа Бб Вв Гг Ґґ

H2 — 3.052rem

Aa Bb Cc Dd Ee

H3 — 2.441rem

Aa Bb Cc Dd Ee

H4 — 1.953rem

Aa Bb Cc Dd Ee

H5 — 1.563rem

Aa Bb Cc Dd Ee

H6 — 1.25rem

Aa Bb Cc Dd Ee

On white

H1 — 3.815rem

Аа Бб Вв Гг Ґґ

H2 — 3.052rem

Aa Bb Cc Dd Ee

H3 — 2.441rem

Aa Bb Cc Dd Ee

H4 — 1.953rem

Aa Bb Cc Dd Ee

H5 — 1.563rem

Aa Bb Cc Dd Ee

H6 — 1.25rem

Aa Bb Cc Dd Ee

Paragraphs & Details

Typography – Proxima Nova

On light

Paragraph — 1rem

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.

Paragraph small — 0.8rem

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.

Paragraph detail — 0.64rem

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.

On light

Paragraph — 1rem

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.

Paragraph small — 0.8rem

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.

Paragraph detail — 0.64rem

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.

Quotes

Typography – Proxima Nova

Quote block — 1rem

On light

Its energy surrounds us and binds us. Luminous beings are we, not this crude matter. You must feel the Force around you – here, between you, me, the tree, the rock, everywhere, yes. Anger, fear, aggression – the dark side of the Force are they.

Color Styles

Blue palette

Royal Blue
#315efb
Slate Blue
#274bc8
Cornflower Blue
#649dff
Sky Blue
#9fdfff
Light Blue
#cceeff

Grayscale palette

Dark Slate Blue
#343b4c
Dim Grey
#62687f
Light Slate Grey
#8d96b2
Light Steel Blue
#c6cad8
White Smoke
#eef2f4

Accent Coral

Coral
#ff564e
Firebrick
#b32d25
Salmon
#FF7069
Red
#f2392e
Light Pink
#ffb6b3

Accent Green

Lime Green
#28bc00
Forest Green
#219900
Light Green
#8be573
Grass Green
#5ccc3d
Pale Green
#c3ffb3

Accent Gold

Gold
#ffc000
Goldenrod
#f2b600
Khaki
#ffe080
Shine Gold
#ffcd33
Moccasin
#ffecb3

Gradients

Deep Blue
#315efb + #274bc8
Dark Grey
#62687f + #343b4c

Buttons

Book a demoDefaultDisable
SuccessWarningPrimaryPrimaryDelete
SecondaryWarningSecondarySuccessDelete

Industry specialists already tried the SSAI solution

Name Lastname

Company / Industry

Server-Side Ad Insertion – the technology where the ads are inserted in the video stream providing a buffer-less seamless transition from content, to ad, then back to content.

Name Lastname

Company / Position

Server-Side Ad Insertion – the technology where the ads are inserted in the video stream providing a buffer-less seamless transition from content, to ad, then back to content.