Get Healthy

Overview

Get Healthy is a Dutch fitness brand that embodies energetic vitality through a bold, minimalist design language rooted in 'Fitness Modernism'—a movement that pairs clean geometric forms with vibrant brand crimson to convey confidence, accessibility, and community-driven wellness. The brand serves fitness enthusiasts of all levels in Ermelo and Harderwijk, transforming gym culture into a welcoming, judgment-free experience. The UI evokes a sense of forward momentum: white space breathes, the primary crimson (#c40731) commands attention on CTAs and key interactions, and typography hierarchy guides users through their fitness journey with clarity and warmth. Voice: direct, encouraging, never condescending. Example sentence: 'Start je reis naar een gezondere leefstijl vandaag—onze trainers wachten op je.'

Colors

The color system centers on a striking primary crimson (#c40731) paired with a clean white surface (#ffffff), creating maximum contrast and visual pop. Primary (#c40731) is reserved exclusively for call-to-action buttons, active states, and brand-critical interactive elements; it appears on 'Start jouw reis' and 'Kenmismaken' CTAs, commanding user attention with 48px height and 10px 30px padding. Secondary blue (#066aab) supports form elements and secondary actions, while tertiary orange (#ff6900) highlights accent content and badges. The surface stack ranges from pure white (#ffffff) at surface-container-lowest to light gray (#e0e0e0) at surface-container-highest, enabling subtle depth without sacrificing clarity. On-surface text is pure black (#000000) for maximum readability at 16–20px

Typography

The type system balances Roboto's geometric precision with system-ui fallbacks for body text, creating a modern yet accessible hierarchy. Display (Tahoma, 60px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; headline-lg (Roboto, 40px, 700 weight) breaks content into scannable sections; body-md (system-ui, 16px, 400 weight, 24px line-height) ensures comfortable reading at all screen sizes. Labels use Roboto at 14px with 0.01em letter-spacing to maintain visual consistency with button text. Form inputs employ Montserrat at 16px, 500 weight to differentiate input zones from body copy. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text overlaid on hero images (e.g., h1 in hero) to ensure legibility over photographic backgrounds. Maintain minimum

Layout

The layout follows a 12-column fluid grid with a 1280px container max-width, enabling responsive scaling from mobile (single column) to desktop (multi-column). Page rhythm is governed by the spacing scale: md (24px) for section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section spans full viewport height with a background image overlay (rgba(0, 0, 0, 0.4)) and centered text content; primary CTA sits 24px below the headline. Navigation uses md (24px) horizontal padding and sm (12px) vertical padding for touch-friendly targets. Cards employ md (24px) internal padding with md (12px) gap between grid items. Form inputs maintain 43px height with 10px vertical padding and 14px horizontal padding, ensuring comfortable interaction on to

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids heavy drop-shadows in favor of subtle, directional lighting. Level 1 (Base): flat white surface (#ffffff) with no shadow, establishing the clean foundation. Level 2 (Cards & Inputs): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), creating a soft lift 4px above the base with 12px blur radius—applied to card components and input fields to indicate interactivity. Level 3 (Hover & Focus): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), expanding blur to 40px and offset to 16px on card-hover and button-primary-hover states, signaling elevat

Shapes

The shape philosophy is 'Functional Roundness'—curves are applied strategically to soften hard edges and improve usability without sacrificing geometric clarity. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel approachable and modern; this applies to both primary (#c40731) and secondary (transparent with border) buttons at 48px height. Cards and containers use md (0.75rem / 12px) border-radius for subtle softness that doesn't distract from content. Form inputs use 10px border-radius (slightly less than md) to differentiate them from cards while maintaining visual c

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use #c40731 background with white text, Roboto 18px 700 weight, 10px 30px padding, 48px height, and full (9999px) border-radius. On hover (button-primary-hover), the background shifts to #a00520 with a 200ms ease-in-out transition, signaling state change without animation jank. On active (button-primary-active), the background deepens to #8a0419. Secondary buttons (button-secondary) use transparent background with a 2px solid black border, matching primary button dimensions and typography. Secondary hover adds a light gray background (#e8e8e8) for visual feedback. Both button types must maintain minimum 48px height and 44px width for touch accessibility (WCAG 2.1 AA).

Containers & Surfa

Do's and Don'ts

**Do**

• Do use primary crimson (#c40731) exclusively on CTAs and active states—never on backgrounds or body text.
• Do maintain minimum 48px height and 44px width on all interactive elements for touch accessibility.
• Do apply md (24px) spacing between major sections and lg (40px) spacing for hero-to-content transitions.
• Do use Roboto 18px 700 weight for button labels and Montserrat 16px 500 weight for form inputs to differentiate interaction zones.
• Do apply 200ms ease-in-out transitions on hover states to signal interactivity without jarring animation.
• Do use full (9999px) border-radius on buttons and md (12px) on cards to maintain the Functional Roundness philosophy.

**Don't**

• Don't use primary crimson on non-interactive elements—it must remain reserved for CTAs and active states to maintain visual hierarchy.
• Don't apply heavy drop-shadows (>12px blur) on cards; use the md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) as the standard.
• Don't mix font families within a single component; use Roboto for labels/buttons, system-ui for body, Montserrat for inputs.
• Don't create buttons smaller than 48px height or 44px width—this violates touch accessibility standards.
• Don't use near-black (#1a1a1a) or near-white (#f5f5f5) as primary surface colors; stick to pure white (#ffffff) and light gray (#e0e0e0) for clarity.
• Don't apply border-radius greater than full (9999px) on buttons; use full for pills and md (12px) for cards to maintain visual consistency.