Optavia Design system

Lifestyle marketing photograph showing two women outdoors against a light blue sky and white circular background, with text overlay reading '(Healthy habits) designed for life.' in Optavia's brand typography - parenthetical text in black, tagline in purple

The Problem

Optavia's product team was rebuilding components from scratch for every new feature, slowing down development and creating inconsistencies across the health platform.

Our Approach

We built a design system that prioritized developer efficiency over visual complexity. Instead of trying to accommodate every possible design variation, we focused on the components we actually used most - buttons, forms, alerts - and made them bulletproof.

Optavia design system color palette documentation showing Primary Blue scale (4 shades from dark to light), Grayscale (Light & Dark variants with swatches from black to white), and extended color palette including Gray, White, Blue (primary and coach rank variants), Magenta, Sky, Dusk, Slate, Orange-HH4A, and Green-Lean & Green, each with hex codes and usage notes for primary colors, habits, and coach rank indicators. Includes borders & icons color specification

The Solution

Typography guidelines showing Open Sans font family (Bold, Semibold, Regular) with size scale from X Small (12px) to X Large (24px), each demonstrating regular, semibold, and bold weights. Includes usage guidelines explaining X Large for display, Large for headers, Medium as default (16px), Small for secondary info (14px), and X Small for captions (12px). Right side shows alternative display typefaces and emphasizes consistency in visual hierarchy with note that typography conveys detail, action, and voice

Impact

The team could ship new features faster without sacrificing quality. Developers stopped asking "what color should this button be?" because the system made those decisions obvious. Most importantly, users got a more consistent experience across the entire health platform.

Why This Worked

Constraints breed creativity. By limiting options to what actually mattered for the product, we freed up mental bandwidth for solving harder problems. Sometimes the best design system is the one people actually use.

Comprehensive button component documentation showing six button variants (Default Large, Default Small, Primary Large, Primary Small, Text Button, Non-padding Text) across four states (Resting, Hover, Active/on click, Disabled) in both light and dark modes. Includes philosophy note that Default is standard with only one Primary action per screen, plus link types documentation explaining Button link (semibold in color) versus Text link (underlined for body copy) Form fields component library showing input field variations including default state, focus state (blue border), error state (red border with warning icon), success state (teal border with checkmark), dropdown variants, phone number input with country code selector (+1 United States, +65 Singapore, +852 Hong Kong), and password field with validation indicators (lowercase character, uppercase character, one number). All fields include proper labeling and accessibility considerations UI component documentation for alerts, banners, panels, and tooltips including: dismissable alert with left icon and action buttons, neutral information alert (blue), success message (teal), warning alerts (yellow and red variants), panel component with title, description, body copy, bullet points and button, tooltip example, and full-width purple banner in Spanish ('Estamos trabajando para traducir este sitio web') demonstrating translation notification pattern

Next Project: SimpleNexus Agent Experience