Brand Guidelines · 2026

Brand
Book

The visual language of Ratio — colors, typography, and logo usage for a consistent brand experience.

Scroll
01
Logo
Ratio

Wordmark · Dark Background

Ratio

Wordmark · Light Background

Icon Mark · Animated

Circle Anatomy

Blue#2B8CFF
Light Blue#A3CDFF
Pink#E30BCE
Dark Blue#4B46FF
Purple#A16CF7
02
Color Palette

Brand Colors

Neutral Scale

03
Typography

Headings

h-3xl

48px · 600w

lh 132%

Display Heading

h-2xl

36px · 600w

lh 120%

Page Heading

h-xl

24px · 600w

lh 115%

Section Heading

h-l

20px · 600w

lh 120%

Subsection Heading

h-sm

15px · 600w

lh 120%

Small Heading

h-xs

13px · 600w

lh 120%

Micro Heading

Body & Captions

body

15px · 400w

lh 135%

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

body-semibold

15px · 600w

lh 135%

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

caption-md

12px · 400w

lh 130%

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

caption-sm

11px · 400w

lh 145%

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Interactive

button-lg

18px · 600w

lh 125%

Call to Action

button-md

16px · 600w

lh 130%

Call to Action

button-sm

14px · 600w

lh 130%

Call to Action

input-label

12px · 400w

lh 130%

Field label

input-placeholder

12px · 500w

lh 130%

Placeholder text

input-helper

11px · 400w

lh 145%

Helper text below the input

04
Brand in Motion

Ratio

Think Clearly

Ratio

Brand Guidelines · 2026