Training Lab VPA

Overview

Training Lab VPA is a premium fitness and lifestyle transformation platform serving ambitious individuals seeking athletic performance and holistic wellness. The design system embodies 'Sophisticated Athleticism'—a movement that merges minimalist dark interfaces with warm, earthy accents to convey both strength and approachability. The visual language prioritizes clarity and focus: deep charcoal backgrounds (#0b0b0b, #1f1f1f) create a professional, distraction-free canvas, while the signature golden-bronze primary color (#ba9862) acts as a beacon for action and brand identity, evoking premium materials and timeless craftsmanship. The emotional response is one of empowerment tempered by accessibility—users feel they're entering a serious, expert-led space, yet the warm accent and generous whitespace prevent the interface from feeling cold or intimidating.

The brand voice is direct, motivational, and grounded in results. Vocabulary leans toward action verbs (transform, elevate, achieve) and concrete outcomes rather than aspirational platitudes. The tone avoids breathless hype; instead, it speaks with the quiet confidence of a seasoned coach. Example sentence in brand voice: 'Mais do que um treino. Um novo estilo de vida.' (More than a workout. A new lifestyle.) This phrasing is declarative, benefit-focused, and emotionally resonant without overselling.

Colors

The color system is anchored by a dark, neutral foundation that serves as the primary canvas, with a warm accent system for interaction and emphasis. **Primary (#ba9862)** is the signature golden-bronze used exclusively for primary CTAs ('Ver em detalhe'), focus states, and brand-critical interactive elements. It conveys premium quality and warmth against the cool darkness. **Secondary (#1863dc)** is a deep, saturated blue reserved for secondary actions, links, and data visualization; it provides visual contrast without competing with primary. **Tertiary (#ff6600)** is a vibrant orange used sparingly for alerts, highlights, or tertiary CTAs to draw urgent attention. **Surface stack** ranges from near-black (#0b0b0b for base) through mid-grays (#1f1f1f for containers, #2a2a2a for elevated s

Typography

The type system pairs a bold, geometric sans-serif (Poppins) for display and headlines with a neutral system font stack (-apple-system, Segoe UI, Roboto) for body and labels. This combination balances brand personality with legibility and performance. **Display (64px, 700 weight, -0.02em tracking)** is reserved for hero headlines like 'Mais do que um treino. Um novo estilo de vida.'—the negative letter-spacing tightens the letterforms for visual impact. **Headline-lg (40px, 700 weight)** is used for section titles and major content divisions. **Headline-md (28px, 600 weight)** serves subsections and card titles. **Body-lg (18px, 400 weight, 28px line-height)** is the primary reading size for descriptive copy and feature explanations. **Body-md (16px, 400 weight, 24px line-height)** is the

Layout

The layout system uses a 12-column grid with a max-width of 1140px, centered on the viewport with symmetric gutters of 24px. The grid is fluid on mobile (100vw with 16px side padding) and snaps to fixed width at tablet breakpoints (768px+). **Section spacing** follows the semantic scale: 40px (lg) separates major content blocks (hero, benefits, testimonials), 24px (md) divides subsections within a block, and 12px (sm) provides breathing room between related items (list items, form fields). The container-max-width of 1140px ensures content remains scannable on ultra-wide displays; constrained content areas (e.g., form sections) use 800px to reduce cognitive load. **Whitespace philosophy** is 'generous but purposeful'—the dark background makes whitespace feel premium rather than empty, so ne

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background-color shifts rather than aggressive drop shadows. **Level 1 (Base)**: surface (#0b0b0b) with no shadow; this is the page background and default card state. **Level 2 (Elevated Card)**: surface-container (#1f1f1f) with box-shadow 0 4px 12px rgba(0, 0, 0, 0.15); used for interactive cards, modals, and hover states. **Level 3 (Modal/Overlay)**: surface-container-high (#2a2a2a) with box-shadow 0 8px 24px rgba(0, 0, 0, 0.2); reserved for dialogs, dropdowns, and top-layer UI. Shadows use a soft, spread blur (12px–24px) to sim

Shapes

The shape philosophy is 'Minimal Precision'—sharp corners with minimal rounding convey professionalism and technical rigor, while selective rounding on interactive elements signals affordance and approachability. **Buttons and inputs** use 2px border-radius (rounded.sm), a subtle curve that softens hard edges without appearing playful or rounded. **Cards and containers** use 6px border-radius (rounded.md), providing enough curvature to feel modern while maintaining a structured, grid-like appearance. **Badges and pills** use 9999px border-radius (rounded.full) for fully rounded ends, creating

Components

Action Elements Buttons are the primary interaction mechanism and follow a three-tier system. **Button-primary** (#ba9862 background, white text, 2px radius, 8px vertical / 24px horizontal padding) is the dominant CTA—used once per page for the primary conversion goal (e.g., 'Ver em detalhe'). On hover, the background shifts to #a68a52 (darkened by ~15%) with a 200ms transition, signaling interactivity without a jarring color jump. **Button-secondary** uses a transparent background with a 1px primary-colored border and primary text; it's used for secondary actions or when space is constrained. **Button-ghost** has no background or border, only text in on-surface color; it's used for tertiary actions or navigation links. All buttons maintain a minimum height of 40px to meet touch-target

Do's and Don'ts

**Do**

• Do use the primary golden-bronze (#ba9862) exclusively for primary CTAs and brand-critical moments—overuse dilutes its impact and confuses the hierarchy.
• Do maintain at least 24px of margin between major content sections (hero, benefits, testimonials) to create visual breathing room and reduce cognitive load on dark backgrounds.
• Do apply the full Material 3 color token system (surface-container-low, surface-container-high, etc.) to enable dynamic theming and accessible color modes without redesigning components.
• Do use Poppins (700 weight) for display and headlines to establish brand personality; reserve system fonts for body text to optimize performance and readability.
• Do include a visible focus ring (3px rgba(186, 152, 98, 0.3)) on all interactive elements to support keyboard navigation and meet WCAG 2.1 Level AA standards.

**Don't**

• Don't use the primary color for body text, backgrounds, or non-interactive elements—reserve it for CTAs and focus states to maintain visual hierarchy.
• Don't apply shadows darker than rgba(0, 0, 0, 0.2) or with blur radius greater than 24px; harsh shadows feel plasticky and undermine the sophisticated aesthetic.
• Don't mix rounded corners inconsistently—buttons should always be 2px, cards always 6px, badges always 9999px; inconsistency breaks the visual system.
• Don't reduce line-height below 1.5x on dark backgrounds; the reduced contrast between text and background requires extra vertical space for comfortable reading.
• Don't use the secondary blue (#1863dc) or tertiary orange (#ff6600) as primary CTAs; they are supporting colors and will dilute the brand's signature golden-bronze identity.