Design System

A sage-toned design language for a wildlife rehabilitation wiki — built with semantic tokens, accessible components, and a calm, evidence-first aesthetic.

React Router 7 Tailwind CSS v4 shadcn/ui + Radix OKLCH color space

01 — Overview

Design Principles

Juniper's visual identity draws from forest understory greens, warm terracotta accents, and soft sage backgrounds. The system prioritizes readability for long-form care guides while keeping navigation and actions clear.

Calm & Grounded

Low-chroma sage backgrounds reduce visual noise so rehabilitators can focus on critical care information.

Semantic First

Every color maps to a role — background, foreground, primary, muted — enabling automatic light/dark adaptation.

Evidence-Forward

Monospace body copy signals technical precision. Disclaimers and callouts use high-contrast secondary surfaces.

Composable UI

Radix primitives + CVA variants keep components accessible and consistent across wiki, directory, and shop flows.

02 — Color

Color Palette

Colors are defined in OKLCH for perceptually uniform lightness across hues. Semantic tokens live in CSS custom properties and map to Tailwind utilities via @theme inline.

Semantic Tokens
Background
--background
Foreground
--foreground
Primary
--primary
Secondary
--secondary
Muted
--muted
Accent
--accent
Destructive
--destructive
Border
--border
Chart & Chip Accents
Terracotta
--chart-1
Sage
--chart-2
Warm Yellow
--chart-4
Chip Primary
--chip-secondary

03 — Typography

Type System

The Juniper wordmark is an image asset (logo-light.png / logo-dark.png), not a web font — no download required. UI headings use system sans; body copy uses monospace.

Juniper
Brand — Wordmark
logo-light.png · logo-dark.png
Aa
UI — System Sans
Headings, labels, buttons, nav
Aa
Body — IBM Plex Mono
Paragraphs, summaries, code
Type Scale
Brand / Wordmark
Juniper
logo-light.png in light mode · logo-dark.png in dark mode
Hero Heading
Wildlife Rehabilitation Resource
text-4xl → text-6xl · font-bold · tracking-tight
Heading 1
Featured Care Guides
text-4xl → text-7xl · font-bold · tracking-tight
Heading 2
Essential Protocols
text-2xl → text-3xl · font-bold
Heading 3
Eastern Cottontail
text-lg · font-semibold
Lead / Body Large
Evidence-based care protocols and resources for wildlife rehabilitators working with native species.
text-lg → text-xl · text-muted-foreground · leading-relaxed
Body
Nestlings require supplemental heat between 85–90°F. Monitor hydration status and weight gain daily during the first week of care.
text-sm · font-mono · leading-relaxed
Caption / Meta
Sylvilagus floridanus
text-xs · uppercase · tracking-wider

04 — Tokens

Design Tokens

Spacing, radius, and shadow tokens ensure consistent rhythm across cards, forms, and navigation. Radius derives from a single --radius base of 0.625rem (10px).

Border Radius
TokenValuePreviewTailwind
--radius-sm 6px rounded-sm
--radius-md 8px rounded-md
--radius 10px rounded-lg
--radius-xl 14px rounded-xl
— full rounded-full
Spacing Scale
TokenValueCommon Use
--space-14pxIcon gaps, tight padding
--space-28pxChip padding, inline gaps
--space-312pxForm field spacing
--space-416pxCard padding, grid gaps
--space-624pxSection inner padding
--space-832pxSection headings margin
--space-1040pxPage section gaps
--space-1664pxHero vertical padding
Elevation
shadow-xs
Inputs, outline buttons
shadow-sm
Cards, active tabs
shadow-md
Dropdowns, selects
shadow-lg
Dialogs, sheets

05 — Components

Component Library

Built on Radix UI primitives with class-variance-authority for variants. Components use semantic tokens and support light/dark modes out of the box.

Buttons
Chips & Tags
Mammals Northeast Orphan Care Sylvilagus floridanus Critical
Form Controls
Disclaimer Callout

This resource is for licensed wildlife rehabilitators. Always consult local regulations and a veterinarian before administering care.

Full disclaimer →
Directory Card
L

Leporidae

Rabbits & Hares
Article Cards
Eastern Cottontail

Eastern Cottontail Orphan Care

Temperature, hydration, and feeding protocols for nestling and juvenile cottontails through release preparation.

Read full guide
Raptor

Raptor Intake Assessment

Initial evaluation checklist for injured raptors including fracture assessment, emaciation scoring, and stabilization.

Read full guide

06 — Implementation

Tech Stack

The design system is implemented as CSS custom properties consumed by Tailwind v4, with React components composed from accessible Radix primitives.

FrameworkReact Router 7 (SSR)
StylingTailwind CSS v4 · @theme inline · OKLCH tokens
Componentsshadcn/ui (new-york) · Radix UI · CVA
CMSSanity · Portable Text · Visual Editing
Dark ModeCookie-persisted · light / dark / system
Sourceapp/app.css · app/components/ui/*