- Empathetic
- Professional
- Innovative
- Trustworthy
Brand & Interface System
Replenish Health
Dark-mode design system for a health platform: brand pillars, color tokens, typography, iconography, and dashboard UI components.
Overview
Interactive design system specimens for Replenish Health — hover, click, and toggle light/dark on each stage.
Brand principles
- Six pillar cards anchor the brand voice: clarity, care, momentum, trust, energy, and balance.
- Each pillar uses a distinct accent header so values stay scannable in product and marketing surfaces.
- Rounded-top column shapes carry through cards, panels, and navigation for a calm, approachable feel.
Interface principles
- Dark navy base with high-contrast cyan accents keeps health data readable without feeling clinical.
- Generous radius, pill inputs, and soft elevation separate layers without heavy borders.
- Status semantics (success, warning, danger) stay consistent across buttons, chips, and chart highlights.
Brand Identity
Value pillars with distinct accent headers — hover for emphasis.
- Supportive
- Clear
- Direct
- Encouraging
- Clean lines
- Accessible
- Modern
- Calm contrast
- Sans-serif hierarchy
- Readable at small sizes
- Bold display
- Consistent stroke
- Rounded caps
- Health metaphors
- 8px base grid
- Generous padding
- Soft card radius
Foundations
Core tokens and typographic rhythm. Click swatches to copy hex values.
Primary
Accent & Neutral
Status
Display Large
Replenish Health
Display Medium
Daily Progress
Display Small
Wellness Overview
Headline
Hydration Goals
Title
Activity Summary
Body
Track habits with calm, readable surfaces.
Label
STATUS · UPDATED 2M AGO
Components
Buttons, inputs, charts, and status surfaces with hover and focus states.
Status
Tap to set priorityWeekly activity
8,43218%
UI Patterns
Composed dashboard layouts built from the component kit.
Daily Summary
TodayHydration
1Goals met
2In progress