EDV Logo
Eating Disorders Victoria Official Design System

Compassionate, Grounded UI Foundations

A comprehensive design system uniting the warmth of Fraunces serif and Poppins sans, the iconic EDV color spectrum in perceptual OKLCH, accessible shadcn/ui primitives, and trauma-informed clinical safety guardrails.

Design Tokens

Color Spectrum & Contrast (OKLCH)

Rooted in the official Eating Disorders Victoria brand identity. All colors are defined in perceptual OKLCH in src/app/globals.css with tailored values for Light mode and anxiety-friendly low-glare Dark mode.

#5C2D8EAAA (10.5:1 on White)
Primary (EDV Plum)
Brand anchor, primary call-to-action buttons, editorial headings
Light:oklch(0.38 0.16 305)
Dark:oklch(0.72 0.15 305)
#20834AAA (5.2:1 on White)
Secondary (Forest Green)
Hope, recovery coping milestones, positive affirmative actions
Light:oklch(0.53 0.14 148)
Dark:oklch(0.68 0.14 148)
#84C441AA (Dark text on Lime: 7.1:1)
Accent (Fresh Spring Lime)
Leaf logo highlights, active indicators, achievement chips
Light:oklch(0.76 0.17 132)
Dark:oklch(0.80 0.16 132)
#F2E9FFAAA (Plum text on Lavender: 11.2:1)
Helpline (Tonal Lavender)
Landing footer helpline strip, calming callouts, input focus background
Light:oklch(0.95 0.025 305)
Dark:oklch(0.23 0.04 305)
#FF3C45AA (4.8:1 on White)
Destructive / Crisis (Coral Red)
Crisis Safety Cards, Lifeline emergency escalation
Light:oklch(0.60 0.22 25)
Dark:oklch(0.68 0.20 25)
#F5F0FBAccessible UI boundaries
Muted / Soft Tint
Subtle backgrounds, inactive tabs, placeholder fills
Light:oklch(0.96 0.015 305)
Dark:oklch(0.24 0.025 295)
Font Hierarchy

Typography: Fraunces & Poppins

A harmonious pairing that conveys compassionate human warmth with clinical trustworthiness. Headings utilize the organic, comforting curves of Fraunces, while interface controls and readable body copy rely on Poppins.

FrauncesDisplay H1
Weight: SemiBold (600)Size: 2.75rem / 44pxLH: 1.15
Recovery is not linear. You deserve gentle, compassionate support every step of the way.
FrauncesHeading H2
Weight: SemiBold (600)Size: 2.0rem / 32pxLH: 1.25
Recovery is not linear. You deserve gentle, compassionate support every step of the way.
FrauncesHeading H3
Weight: Medium (500)Size: 1.5rem / 24pxLH: 1.3
Recovery is not linear. You deserve gentle, compassionate support every step of the way.
PoppinsSubheading H4
Weight: SemiBold (600)Size: 1.25rem / 20pxLH: 1.4
Recovery is not linear. You deserve gentle, compassionate support every step of the way.
PoppinsBody Large
Weight: Regular (400)Size: 1.125rem / 18pxLH: 1.6
Recovery is not linear. You deserve gentle, compassionate support every step of the way.
PoppinsBody Base
Weight: Regular (400)Size: 1.0rem / 16pxLH: 1.6
Recovery is not linear. You deserve gentle, compassionate support every step of the way.
PoppinsUI Medium / Input
Weight: Medium (500)Size: 0.875rem / 14pxLH: 1.5
Recovery is not linear. You deserve gentle, compassionate support every step of the way.
PoppinsCaption / Badge
Weight: Medium (500)Size: 0.75rem / 12pxLH: 1.4
Recovery is not linear. You deserve gentle, compassionate support every step of the way.
Spatial System

Elevation & Border Radii

Soft, gentle geometric curves that feel approachable and calming. Configured with standard balanced modern tokens (--radius: 0.625rem).

Corner Radius Tokens

radius-sm
0.375rem (6px)
radius-md
0.5rem (8px)
radius-lg (Default)
0.625rem (10px)
radius-xl
0.75rem (12px)
radius-2xl
1.0rem (16px)
radius-full
9999px (Pill)

Atmospheric Elevation & Shadows

Flat / Muted

For inline sections, cards within cards, and table headers

Subtle (xs)

Default resting state for content cards, inputs, and interactive tiles

Ambient Raised (sm)

Hoverable cards, quick actions, prompt suggestions

Floating Modal (xl)

Dialog modals, dropdown popovers

Iconography

Curated Lucide Icon Set

Clear, accessible visual metaphors for mental health support, helpline assistance, multimodal chat, and navigation.

Phone
Helpline & crisis direct dial
Heart
Caregiver empathy & donations
Shield
Safety guardrails & privacy
Sparkles
AI companion & insights
MessageSquare
Active session threads
Volume2
Text-to-voice read aloud
Mic
Voice speech transcription
Compass
Resource navigation
BookOpen
EDV reference knowledge
AlertTriangle
Acute crisis interceptor
Check
Form validation & completion
User
User profile & roles
Graphic Assets

Brand Logos, Persona Avatars & Botanical Motifs

Official assets crafted for EDV Companion. Personas feature gentle, empathetic illustrative portraits, complemented by organic leaf and wave motifs.

Sam

Sam

Empathetic Peer & Warm Listener

Gentle, non-clinical lived experience support.

Alex

Alex

Factual Resource & EDV Navigator

Medicare, clinical referral steps, structured pathways.

Jordan

Jordan

Recovery & Coping Coach

Forward-looking reflections, mindfulness, grounding tools.

Morgan

Morgan

Carer & Family Support Companion

Compassion for burnout, meal support, healthy boundaries.

EDV Official Logo

Official Eating Disorders Victoria Identity

Original vector logo at public/edv-logo.svg

Leaf AccentDual Leaf Hope Symbol