Brand & Theme

Color tokens, typography, and logo assets for Canopy

Logo

Light Theme

Download SVG

Dark Theme

Download SVG

Typography

Fonts

Primary — Body & UI

Figtree

Variable weight, Google Fonts

Monospace — Code & Data

Geist Mono

Variable weight, Google Fonts

Type Scale

Mobile uses a minor third scale (1.2) at 16px base. Desktop uses a major third scale (1.25) at 20px base.

h1The quick brown fox2.986rem (47.8px) / 3.815rem (76.3px)

h2The quick brown fox2.488rem (39.8px) / 3.052rem (61px)

h3The quick brown fox2.074rem (33.2px) / 2.441rem (48.8px)

h4The quick brown fox1.728rem (27.6px) / 1.953rem (39.1px)

h5The quick brown fox1.44rem (23px) / 1.563rem (31.3px)

h6The quick brown fox1.2rem (19.2px) / 1.25rem (25px)

pThe quick brown fox1rem (16px) / 1rem (20px)

Color Tokens

Showing light theme (follows system setting)

Canopy ships with light and dark themes that switch automatically based on the operating system preference. All colors are defined as CSS custom properties and swap via prefers-color-scheme.

Base

background

#F8FAFF

background-texture

#EBF1FE

onbackground

#101D46

Surface

surface

#E9EFFF

surface2

#C6D4F9

surface-negative

#FFEFEF

CTA

cta

#101D46

on-cta

#F8FAFF

cta-negative

#DC3D43

on-cta-negative

#FFF8F8

Status

status-active

#18794E

onstatus-active

#E9F9EE

status-expired

#CD2B31

onstatus-expired

#FFF8F8

status-cancelled

#687076

onstatus-cancelled

#F8F9FA

status-funded