Wellhub

Overview

Wellhub is a B2B wellness platform that democratizes corporate health by connecting employees to fitness, mindfulness, nutrition, and sleep solutions through a single subscription. The design system embodies "Energetic Minimalism"—a philosophy that pairs a warm, cream-colored canvas (#fbf8ec) with bold, saturated accent colors (primary magenta #d83856, secondary cobalt #3860be, tertiary green #68b631) to create an interface that feels both approachable and purposeful. The aesthetic evokes clarity and optimism: employees should feel motivated, not overwhelmed, when exploring wellness options. The UI prioritizes breathing room and legibility, using generous padding (24px gutters, 16px input padding) and a condensed display typeface (NaN Holo Condensed) that commands attention without aggression.

The brand voice is conversational, empowering, and grounded in real outcomes. Wellhub speaks to both HR decision-makers and individual employees, using language that celebrates small wins and normalizes wellness as a daily habit. Example sentence in brand voice: "Seus colaboradores merecem opções que se encaixem na vida deles—não o contrário." The tone avoids corporate jargon; instead, it uses active verbs, inclusive pronouns, and concrete benefits. Typography reinforces this: Inter (medium weight, 500) for interactive elements conveys approachability, while NaN Holo Condensed (400 weight, 64px) for headlines delivers impact without pretension.

Colors

The color system is built on three distinct roles: a warm, neutral surface stack anchored by cream (#fbf8ec) and off-white (#ffffff), a vibrant primary accent (magenta #d83856) for CTAs and key interactions, and supporting secondary (cobalt #3860be) and tertiary (green #68b631) accents for status, secondary actions, and wellness-specific messaging. Primary (#d83856) appears on all primary CTAs ("Solicitar cotação gratuita", "Começar"), hover states darken to #c41e47 (box-shadow: 0 3px 8px rgba(0,0,0,0.15) on elevation), and the container variant (#ffd8e0) provides a soft background for badges and secondary emphasis. Secondary (#3860be) is reserved for alternative actions and secondary CTAs ("Para colaboradores" tab), while tertiary (#68b631) signals positive outcomes, success states, and w

Typography

The type system pairs two distinct families to create visual hierarchy and personality: NaN Holo Condensed (400 weight, custom font from assets-cdn.wellhub.com) for all display and headline levels (64px, 48px, 36px), and Inter (400–600 weight, also custom-loaded) for body, label, and interactive text. The condensed typeface is narrow and geometric, lending authority and modernity to page titles and section headers without requiring bold weights; this keeps the interface feeling open and friendly. Inter provides warmth and legibility at smaller sizes (16px body, 14px labels), with medium weight (500) used for interactive elements (buttons, input labels) to signal clickability. Display text (64px, -0.02em letter-spacing) is reserved for hero headlines; headline-lg (48px) for major section br

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered with symmetric margins. The primary gutter is 24px (md spacing token), applied consistently to horizontal padding on hero sections, card containers, and form groups. Vertical rhythm follows a 40px (lg spacing) scale for section separation, creating clear visual breaks between hero, feature sections, and CTAs. The header uses 70px horizontal padding (custom, slightly larger than standard gutter) to accommodate the logo and navigation menu. Container widths vary by content type: hero sections span full-width with internal padding, while card grids typically use 3–4 columns on desktop, collapsing to 1–2 on tablet and 1 on mobile. Input fields use 16px padding (top/bottom) with 15px horizontal padding to accommodate f

Elevation & Depth

Depth is conveyed through a three-level shadow system and surface layering, avoiding dark overlays or opacity tricks. Level 1 (Base): the cream surface (#fbf8ec) with no shadow, used for the page background and default card states. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0,0,0,0.15), applied to cards, input fields, and dropdown panels; this creates a subtle lift and defines interactive boundaries. Level 3 (Elevated/Hover): box-shadow: 0 4px 24px rgba(0,0,0,0.15), applied on card hover, modal overlays, and primary CTA hover states; the larger blur radius (24px vs. 8px) and increased

Shapes

The shape philosophy is "Technical Warmth"—rounded corners are used strategically to soften the geometric precision of the interface without sacrificing clarity or professionalism. Buttons and primary CTAs use full border-radius (9999px, pill-shaped) to signal friendliness and approachability; this is the most distinctive shape in the system and appears on all primary actions ("Solicitar cotação gratuita", "Começar", "Aceitar cookies"). Input fields use 16px border-radius (lg token), a moderate curve that balances usability (easier to tap on mobile) with a clean, modern aesthetic. Cards and co

Components

Action Elements Buttons are the primary interaction pattern and use three variants: primary (magenta #d83856 background, white text, 12px 24px padding, 44px height, full border-radius, 500 weight), secondary (cobalt #3860be background, white text, same padding/height/radius), and ghost (transparent background, magenta text, 1px magenta border). All buttons use Inter medium weight (500) and label-md typography (14px, 20px line-height). Hover states darken the background by ~15% (primary → #c41e47, secondary → #2a4a9a) and apply box-shadow: 0 3px 8px rgba(0,0,0,0.15); active/pressed states maintain the darker background and add a 2px inset shadow (inset 0 2px 4px rgba(0,0,0,0.2)). Focus states apply a 3px outline at {colors.primary} with 2px offset (outline-offset: 2px) for keyboard navi