System foundations

Style Guide

Every global style, variable and reusable component used across the ORYVA template, in one place.

Typography

Heading 1

IBM Plex Serif · 74 / 56 / 48 / 40px

Heading 2

IBM Plex Serif · 52 / 44 / 38 / 34px

Heading 3

IBM Plex Serif · 40 / 34 / 32 / 30px

Heading 4

IBM Plex Serif · 32 / 28 / 26 / 24px

Heading 5

IBM Plex Serif · 24 / 22 / 20 / 20px

Heading 6

IBM Plex Serif · 20 / 20 / 18 / 18px

Body Large — Care designed around your whole wellbeing.

Inter Tight · 18 / 18 / 16 / 16px

Body Base — Care designed around your whole wellbeing.

Inter Tight · 16px on every device

Body Medium — Care designed around your whole wellbeing.

Inter Tight · 14px on every device

Body Small — Care designed around your whole wellbeing.

Inter Tight · 12px on every device

Body Extra Small — Care designed around your whole wellbeing.

Inter · 10px on every device

Care That Works

Together

Headline pattern · second line in italic (is-italic combo)

Rich Text

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Buttons

Book A Session

Button Primary

Get Started

Button Dark

Get Started

Button White

Our Services

Button Link

Arrow Buttons

Our services

Tag

Colors

Primary

#E5804F

Primary Hover

#D46E3D

Heading

#2F3A42

Dark 2

#3A464F

Paragraph

#555E6B

Body Text

#4A4A4A

Muted Text

#7E868F

BG

#F4F0EC

BG 2

#E7E7E3

BG 3

#E1E0D6

White

#FFFFFF

Stroke

#D3D4D1

Key Light

#C6D1D9

Sand

#CDBAA5

Success

#39C27B

Overlay Dark

#2F3A42 · 72%