Colors
Primary Colors
OurWorld Green
Primary accent used for highlights, links, and call-to-action states.
Hex: #04B782
White
Neutral surface used for cards and content blocks.
Hex: #FFFFFF
Ivory
Default light canvas color used across the site.
Hex: #FDF8F1
Void
Primary dark color used for headings, body text, and contrast.
Hex: #1F1D1A
Secondary Colors
Evergreen
Used for hover states (e.g. hover text) alongside green-50 backgrounds.
Hex: #039E6F
Warm Porcelain
Warm off-white used for soft surfaces and secondary cards.
Hex: #FEFCF8
Soft Ash
Light neutral used for borders, dividers, and subtle backgrounds.
Hex: #E5E7EB
Stone Gray
Default supporting text color across the UI.
Hex: #6B7280
Typography
OurWorld uses a simple system-first stack for body text (Avenir / Avenir Next with modern OS fallbacks) and a clean display stack for headings. Quicking is used for brand-forward headings, and Source Sans 3 is available for lighter supporting UI.
Eyebrow
p · text-sm/6 · font-medium · uppercase · tracking-[0.16em] · color: #04B782 · font: Avenir stack
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
Header (H3)
h3 · text-3xl lg:text-5xl · font-medium · leading-tight · tracking-tight · font: Quicking
The quick brown fox jumps over the lazy dog
Paragraphs (P)
p · text-base lg:text-xl · leading-relaxed · regular weight · font: Avenir stack
The quick brown fox jumps over the lazy dog.
Card Title (CT)
span · text-base lg:text-lg · leading-normal · font-medium
The quick brown fox jumps over the lazy dog
Card Texts (CP)
p · text-xs lg:text-base · tracking-wide · leading-normal · font-light · font: Source Sans 3
The quick brown fox jumps over the lazy dog.