Voy

Overview

Voy embodies a 'Naturalistic Minimalism' aesthetic—a design philosophy that prioritizes human warmth and scientific credibility through restrained, sophisticated visual language. The brand serves health-conscious individuals seeking personalized wellness guidance from medical experts, evoking trust, clarity, and gentle empowerment. The UI avoids aggressive calls-to-action in favor of conversational, inviting interfaces that feel like guidance from a knowledgeable companion rather than a commercial transaction.

Voy's voice is authoritative yet approachable: precise without being clinical, confident without being prescriptive. The tone favors active, outcome-focused language grounded in evidence. Example: 'Your personalized plan adapts as your health evolves—guided by 15+ years of clinical research.' The brand personality balances scientific rigor with human empathy, speaking to users as partners in their own health journey.

Colors

The color system anchors on a deep forest green primary (#19301e), chosen for its association with natural wellness, growth, and medical authority—appearing on CTAs, interactive states, and key navigation elements. This is paired with warm, approachable supporting colors: a soft peach secondary (#ffa87c) used for highlights and positive reinforcement, and a muted mauve tertiary (#dfcacf) for secondary information and gentle accents. The surface stack uses warm, off-white tones (surface #ffffff, surface-dim #f4f1e7, surface-container-high #e4e1d8) to create visual hierarchy without harsh contrast, maintaining readability while preserving the naturalistic aesthetic. The outline color (#67796b) is a muted sage-green, reinforcing the brand's botanical sensibility. Primary (#19301e) is used exc

Typography

The type system pairs a serif display font (Season Mix at 95px, 300 weight) for hero headlines with a humanist sans-serif (Nb International pro) for body and UI text. This pairing communicates both sophistication and accessibility—the serif conveys editorial authority and timelessness, while the sans-serif ensures clarity and modern usability. Display text (95px, 300 weight, -0.02em letter-spacing) is reserved for hero statements and major section breaks; headline-lg (56px, 400 weight) for subsection titles; body-lg (18px, 400 weight, 28px line-height) for descriptive copy and longer-form content; body-md (16px, 400 weight, 24px line-height) for standard UI text and form labels; label-md (14px, 600 weight) for buttons, badges, and interactive elements. Apply text-shadow 0 1px 2px rgba(0, 0

Layout

The layout uses a 12-column fluid grid with a 1280px container max-width, maintaining consistent horizontal rhythm across breakpoints. Page sections are separated using lg spacing (40px) on desktop, reducing to md spacing (24px) on tablet and sm spacing (12px) on mobile, creating a breathing, hierarchical composition. The gutter width is fixed at 24px, ensuring consistent left/right padding within the container. Hero sections span full-width with centered content, while card-based sections use a 2–3 column layout on desktop, collapsing to single-column on mobile. Whitespace is treated as a design element: generous padding around key messaging (md to lg spacing) prevents cognitive overload, while tighter spacing (xs to sm) groups related UI elements. Container max-width of 1280px ensures op

Elevation & Depth

Depth is conveyed through subtle, naturalistic shadows rather than bold layering. Level 1 (Base): flat surfaces with no shadow, used for primary content areas and the page background. Level 2 (Raised Cards): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and secondary containers to create gentle separation from the background. Level 3 (Modals/Overlays): box-shadow 0 8px 24px rgba(0, 0, 0, 0.12), reserved for modals, dropdowns, and floating elements that demand visual prominence. All shadows use a warm black (rgba with slight brown tint) to harmonize with the warm sur

Shapes

The shape language follows 'Soft-Technical' principles: rounded corners are used consistently to soften the interface while maintaining clarity and hierarchy. Buttons and primary interactive elements use full-radius (border-radius: 9999px) to convey friendliness and approachability—the extreme roundness signals 'this is safe to interact with.' Cards and secondary containers use lg radius (1rem / 16px) to balance softness with structure. Input fields and smaller UI components use DEFAULT radius (0.5rem / 8px) for a more restrained, functional appearance. This graduated approach ensures that the

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use full-radius (border-radius: 9999px), padding 14px 32px, height 48px, with background {colors.primary} and text {colors.on-primary}. On hover, the background transitions to {colors.primary-fixed-dim} over 200ms. Secondary buttons mirror the primary structure but use a transparent background with a 2px solid border in {colors.primary}, maintaining the same padding and height. Focus states on both button types apply a 3px outline in {colors.primary} with 4px offset, ensuring keyboard accessibility. All buttons use {typography.label-md} (14px, 600 weight) for consistent visual weight.

Containers & Surfaces Cards use {colors.surface-container-low} (#f4f1e7) background with {rounded.lg} (1rem) and {spacin

Do's and Don'ts

**Do**

• Do use the primary green (#19301e) exclusively for primary CTAs, active navigation states, and focus indicators—never dilute it with secondary uses.
• Do maintain lg spacing (40px) between major sections on desktop to create visual breathing room and prevent cognitive overload.
• Do apply full-radius (9999px) to all primary buttons and interactive elements to signal approachability and safety.
• Do use Season Mix serif only for hero headlines (display and headline-lg); never use it for body text or UI labels.
• Do transition all hover and focus states over 200ms with ease-in-out timing to provide smooth, non-jarring feedback.
• Do apply subtle shadows ({elevation.md}) to cards and secondary containers; avoid hard borders in favor of soft outline colors.

**Don't**

• Don't use the secondary peach (#ffa87c) or tertiary mauve (#dfcacf) as primary CTAs—these are supporting colors only.
• Don't apply border-radius values smaller than sm (0.25rem) to any interactive element; maintain visual softness throughout.
• Don't use pure black (#000000) or pure white (#ffffff) for text; always use {colors.on-surface} (#19301e) for dark text and {colors.on-primary} (#ffffff) for light text.
• Don't mix serif and sans-serif fonts within a single UI component; maintain clear typographic hierarchy by reserving serif for headlines only.
• Don't apply multiple shadows or layered elevation effects; use only one shadow value per element from the elevation scale.
• Don't reduce padding below sm (12px) on interactive elements; maintain minimum touch targets of 44px height for accessibility.