Web Design System

A single source of truth for building the Vibrant Health website. This library contains all design tokens, UI components, navigation patterns, and visual assets — everything needed to design and build consistent, on-brand digital experiences.

Elements

Colors

The full VH color palette organized as design tokens. Includes brand primaries, semantic roles, neutrals, and surface colors — all bound to Figma variables for consistent theming.

Typography

A multi-font type system using VH New Order, Feature Display Condensed, Poppins, and IBM Plex Sans. Covers the full type scale, weight hierarchy, and usage guidance for every context.

Components

Buttons, form elements, tags, cards, and UI primitives that make up the Vibrant Health website. All components use design tokens and are built for reuse across pages and breakpoints.

Navigation

Desktop and mobile header, mega-menu, and footer patterns. Includes all states and menu variants for Shop and Learn sections, with showcase specs for handoff.

Iconography

Lucide icon systems used in three different sizes — 16px, 24px, and 32px. A full reference grid of all icons and social media marks.

Illustrations

Custom line illustrations in three groups, two different sizes — 48px and 120px. Sourced from ICOGRID via Adobe Stock.

Spacing & Radius

Spacing scale, radius tokens, and layout grid that govern how components stack and breathe across breakpoints.