OVJAOttawa Valley
Join, free
Design system

Styleguide

Every component, in every theme. Switch theme below, if something loses contrast or breaks, it should be caught here rather than by a member.

Preview theme
Foundations

Tokens

Layer 2, what a theme overrides. Components never read these directly.

--color-bg
--color-surface
--color-surface-2
--color-surface-3
--color-border
--color-text
--color-text-muted
--color-text-subtle
--color-accent
--color-secondary
--color-success
--color-warning
--color-danger
Primitives

Button

Primitives

Tag

neutralaccentsecondarysuccesswarningdanger
TBCCancelled, weatherUpcoming8 went
Primitives

Card

The Gorge

A stock-friendly hydro line trail about an hour from Ottawa, ideal for new off-roaders.

Rating 2Open

Raised surface

For cards sitting on cards.

Muted

Past and cancelled runs.

Club

EventCard

Real events from the 2026 season, including a cancellation and a social, the states that actually occur.

Camp NL 2026

TBC · Rating 2-3 · 14 Aug 2026

The annual multi-day August camping trip.

CampUpcoming

Bring Your Bathing Suit & Towel, Crag Lake Run

Crag Lake · Rating 2+ · 3 Aug 2026

Civic holiday Monday swim run.

Trail runPast run8 went

Lavant Lookout Run

Lavant Lookout · Rating 3 · 2 Aug 2026

Trail runCancelled, weather3 went

Ice Cream Social

Ottawa · 23 Jul 2026

No rig required. Great time, great ice cream.

SocialPast
Typography

Type scale

Heading one

Heading two

Heading three

Heading four

Body copy in Barlow. Headings in Barlow Condensed, uppercase, wide tracking.