GYMEE

Overview

GYMEE is a fitness and gym membership platform designed to make fitness accessible, motivating, and community-driven. The brand serves gym owners, personal trainers, and fitness enthusiasts seeking a modern, energetic digital experience. The aesthetic is "Functional Dynamism"—combining Bootstrap's structured grid system with bold accent colors (particularly the signature red-orange primary #e63a34) that convey energy, urgency, and action. The UI evokes confidence and forward momentum, transforming fitness discovery into an engaging, friction-free journey. The brand personality is direct, motivational, and inclusive: never condescending, always action-oriented. Voice example: "Join 10,000+ members transforming their fitness journey—start your free trial today."

Colors

GYMEE's color philosophy centers on high-contrast, action-driven accents layered over a clean, neutral foundation. Primary (#e63a34) is the brand's signature call-to-action color—used on all CTAs, active states, and key interactive elements. It conveys urgency and energy without aggression. Secondary (#6c757d) provides calm, professional grounding for body text, disabled states, and secondary navigation. Tertiary (#ffc107) highlights achievements, badges, and promotional elements. The surface stack (white #ffffff down to #d0d0d0 for highest containers) ensures legibility and visual hierarchy. On-surface text (#212529) maintains 7:1 contrast on light backgrounds. Error (#dc3545) is reserved for validation failures and destructive actions. Usage rules: Primary is never used for body text; se

Typography

The type system uses Ubuntu sans-serif across all weights (400, 500, 600, 700), creating a cohesive, modern voice. Display (60px, 700, -0.02em letter-spacing) anchors hero sections and major announcements. Headline-lg (40px, 600) titles key sections; headline-md (28px, 600) subtitles and card headers. Title-lg (20px, 600) labels feature cards and modal titles. Body-lg (18px, 400, 28px line-height) and body-md (16px, 400, 24px line-height) handle descriptive copy and form labels. Label-md (14px, 600, 0.01em) and label-sm (12px, 500, 0.02em) style buttons, badges, and metadata. On small labels over busy backgrounds or feature cards, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain legibility. All headings use -0.01em to -0.02em letter-spacing to tighten visual weight and convey pr

Layout

GYMEE uses a 12-column Bootstrap grid with a fixed max-width of 1200px, centered on the viewport. The layout philosophy is "structured spaciousness"—generous whitespace (lg spacing: 40px for section separation, md spacing: 24px for component padding) prevents visual clutter and guides the eye to CTAs. Container padding uses gutter (24px) on desktop, reducing to sm (12px) on mobile. Hero sections span full-width with background images, overlaid with semi-transparent dark gradients (rgba(0,0,0,0.3) to rgba(0,0,0,0.5)) to ensure text legibility. Feature cards are arranged in responsive rows (5 columns on xl, 3 on md, 1 on sm). All sections use consistent vertical rhythm: 130px padding-top and 100px padding-bottom for major sections, creating a predictable, professional cadence.

Elevation & Depth

Depth in GYMEE is achieved through a three-tier shadow system combined with subtle transforms. Level 1 (Base): no shadow, flat surface. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on feature cards and input fields. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with transform: translateY(-4px) on hover, creating perceived lift. Buttons use md elevation (0 3px 8px) at rest, lg elevation on hover. Focus states on inputs add a 3px ring of rgba(230, 58, 52, 0.1) around the field. Modals and overlays use the highest shadow (lg) with a semi-transpa

Shapes

GYMEE employs "Approachable Geometry"—rounded corners that feel modern and friendly without sacrificing clarity. Buttons use lg radius (1rem / 16px), creating pill-like shapes that feel inviting and clickable. Input fields use full radius (9999px), emphasizing their interactive nature and creating visual distinction from static containers. Feature cards and standard containers use md radius (0.75rem / 12px), balancing softness with structure. Small UI elements (badges, tags) use full radius for maximum friendliness. The rationale: larger radius on interactive elements (buttons, inputs) signals

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use #e63a34 background, white text, 48px height, 12px 24px padding, and lg radius. On hover, the background darkens to #d63228, the element lifts 2px (transform: translateY(-2px)), and shadow elevates to lg (0 8px 24px rgba(0,0,0,0.12)). Active state returns to baseline (translateY(0)) with sm shadow. Secondary buttons use transparent background, 2px primary-colored border, and the same height/padding. All button transitions use 200ms cubic-bezier(0.4, 0, 0.2, 1).

Containers & Surfaces Cards (card) use white background, md radius (12px), md padding (24px), 1px outline-variant border, and md elevation shadow. On hover (card-hover), background shifts to surface-container-low (#f0f1f3), sh

Do's and Don'ts

**Do**

• Do use primary (#e63a34) exclusively for CTAs, active states, and high-priority interactive elements—never for body text or backgrounds.
• Do maintain 7:1 contrast between on-surface (#212529) and surface (#ffffff) for WCAG AA compliance on all body copy.
• Do apply md elevation (0 3px 8px rgba(0,0,0,0.15)) to cards and lg elevation (0 8px 24px rgba(0,0,0,0.12)) on hover with 200ms transitions for consistent depth feedback.
• Do use lg radius (1rem) on buttons and full radius (9999px) on inputs to signal affordance and interactivity.
• Do pair Ubuntu 600 weight headlines with 400 weight body text to create clear visual hierarchy without excessive weight variation.

**Don't**

• Don't use secondary (#6c757d) for CTAs or primary interactive elements—it reads as disabled or de-emphasized.
• Don't apply shadows larger than lg elevation (0 8px 24px) to avoid creating a floating, disconnected appearance.
• Don't mix radius scales within a single component family (e.g., don't use sm radius on some buttons and lg on others).
• Don't use letter-spacing greater than 0.02em on body text—it reduces legibility and feels artificial.
• Don't nest more than 2 levels of surface-container colors in a single view—the hierarchy becomes ambiguous.