Skip to main content
Olivrae logo
Contact

Template Info

Style guide

An in-depth guide to the colour, typography and components that shape the Olivrae design system.

Colours

  • Green 25

    #f6f6f1

  • Green 50

    #ebecdc

  • Green 100

    #daddce

  • Green 300

    #96d4a8

  • Green 600

    #365543

  • Green 700

    #384a42

  • Green 800

    #1a312a

  • Green 900

    #262d29

  • Green 950

    #1f2a24

  • Gray 250

    #d9d9d9

  • Gray 300

    #d6d3d1

  • White

    #ffffff

Typography

Heading 1

Instrument Sans · Medium · 40 → 84px / 1.15

Heading 2

Instrument Sans · Medium · 32 → 60px / 1.2

Heading 3

Instrument Sans · Medium · 24 → 32px / 1.3

Heading 4

Instrument Sans · Medium · 20 → 24px / 1.3

Body copy is DM Sans at 18px on a 1.6 line-height — long-form paragraphs stay comfortable to read, while the italic accent inside a heading is set inInstrument Serif.

Paragraph · DM Sans · Regular · 18px / 1.6

Recovery should never rest on guesswork — every plan we write is drawn from proven clinical research, held together by compassion.

Blockquote · DM Sans · 20px