The Simple Gym

Overview

The Simple Gym is a Brazilian fitness brand that democratizes access to quality gym experiences through a network of community-focused locations. The design system embodies 'Warm Minimalism'—a philosophy that strips away unnecessary complexity while maintaining human warmth through soft, rounded forms and an approachable neutral palette anchored by a confident blue accent. The aesthetic rejects cold, corporate gym imagery in favor of genuine community moments: real people, genuine smiles, and an invitation to belong. The UI evokes calm confidence and accessibility, never intimidation.

The brand voice is conversational, encouraging, and direct. Vocabulary favors clarity over jargon: 'Faça Parte' (Join Us) rather than 'Assine Agora' (Subscribe Now); 'Conheça nossa nova unidade' (Discover our new location) rather than 'Explore'. Tone is warm but never saccharine—sentences are short, active, and action-oriented. Example: 'This is what Simple feels like.' — a statement that trusts the visual to do the heavy lifting, paired with genuine human connection rather than aspirational fantasy.

Colors

The color system centers on a warm, neutral foundation (#f9f9f9 surface, #202020 on-surface text) that conveys approachability and calm. The primary accent is a confident, energetic blue (#5897fb) used exclusively on CTAs, interactive states, and focus indicators—this is the brand's signature call-to-action color, appearing on 'SEJA UM MEMBRO' buttons and form focus states. Secondary grays (#a8a8a8, #d2d2d2, #cacaca) provide hierarchy and visual breathing room across cards, dividers, and disabled states. A supporting cyan accent (#00bcd4) is reserved for form validation, badges, and secondary interactive elements, creating a complementary accent pair without competing for attention.

Usage rules: Primary (#5897fb) appears on all primary CTAs with padding 12px 24px, border-radius 9999px (fu

Typography

The type system uses Swiss 721 BT as the primary typeface—a geometric sans-serif that conveys both modernity and warmth through its rounded letterforms and generous proportions. Display (56px, 700 weight, -0.02em tracking) is reserved for hero statements like 'This is what Simple feels like.' Headline-lg (40px, 600 weight) anchors section titles. Body text (16px, 400 weight, 24px line-height) is set with generous line-height to ensure readability on mobile and desktop. Labels use a monospace fallback (antarctican-mono) at 12px for form inputs and data-dense contexts, creating a subtle visual distinction between prose and structured information. All type sizes scale proportionally on mobile (base font-size 6.66667px scales to 16px at desktop). Apply text-shadow 0 1px 2px rgba(0, 0, 0, 0.08)

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on desktop with 24px gutters. Mobile breakpoints collapse to single-column with 12px side padding. The page rhythm follows a 'breathing' principle: sections are separated by 40px (lg spacing) vertically, cards within sections by 24px (md spacing), and elements within cards by 12px (sm spacing). The hero section occupies the full viewport height with a centered CTA positioned 60% down the page, allowing the hero image to dominate the upper half. Form inputs use 44px height (padding 12px 20px, border-radius 1.5rem) to ensure touch-friendly targets on mobile. Container max-width is 1280px to prevent text lines from exceeding 80 characters at desktop. Whitespace is intentional: empty space around cards (24px padding) and bet

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids the harsh, high-contrast shadows of Material Design. Level 1 (Base): flat surfaces with no shadow, used for the page background and card backgrounds. Level 2 (Standard Card): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and floating elements. Level 3 (Elevated/Hover): box-shadow 0 8px 24px rgba(0, 0, 0, 0.12), applied on card hover and modal overlays. The shadow blur radius increases with elevation (3px → 8px) while the spread remains tight (0px), creating a subtle lift effect rather than a dramatic drop. N

Shapes

The shape philosophy is 'Soft-Technical'—geometric precision softened by generous border-radius values that feel human and approachable. Buttons and inputs use full pill-shaped borders (border-radius: 9999px, or 50% on square elements) to convey friendliness and reduce visual aggression. Cards use 1rem (16px) border-radius for a subtle roundness that feels modern without being playful. Form inputs use 1.5rem (24px) border-radius to match button styling and create a cohesive input family. Smaller UI elements (badges, tags) use 0.75rem (12px) border-radius. The rationale: sharp corners (0px) fee

Components

Action Elements Buttons follow a strict hierarchy: primary buttons use #5897fb background with white text, 12px 24px padding, 44px height, and 9999px border-radius. On hover, background transitions to #2299dd over 200ms. Secondary buttons use #a8a8a8 background with white text and identical sizing. Ghost buttons have transparent background with #5897fb text and a 1px solid #5897fb border. All buttons must include a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition on all state changes (background-color, color, box-shadow). Focus state adds a 3px inset box-shadow with rgba(88, 151, 251, 0.1).

Containers & Surfaces Cards use #ffffff background, 1rem border-radius, 24px padding, and box-shadow 0 3px 8px rgba(0, 0, 0, 0.15). On hover, shadow elevates to 0 8px 24px rgba(0, 0, 0, 0.12) over

Do's and Don'ts

**Do**

• Do use the full pill border-radius (9999px) on all buttons and primary inputs to reinforce the warm, approachable aesthetic.
• Do apply 200ms transitions on all interactive state changes (hover, focus, active) using cubic-bezier(0.4, 0, 0.2, 1) timing.
• Do maintain 44px minimum height on all touch targets (buttons, inputs, list items) to ensure mobile accessibility.
• Do use the primary blue (#5897fb) exclusively on CTAs and focus states—never use it for backgrounds, borders, or decorative elements.
• Do separate sections with 40px vertical spacing (lg) and cards within sections with 24px spacing (md) to create visual rhythm.
• Do apply box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) to cards and floating elements for consistent depth.

**Don't**

• Don't use sharp corners (0px border-radius) on buttons, inputs, or cards—minimum 1rem for cards, 1.5rem for inputs.
• Don't apply shadows larger than 24px blur radius or use multiple layered shadows—keep the shadow system simple and restrained.
• Don't use the secondary gray (#a8a8a8) on primary CTAs or interactive elements—reserve it for neutral surfaces and disabled states.
• Don't create custom spacing values—always use the semantic scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px).
• Don't remove or reduce border-radius on hover or focus states—maintain shape consistency across all interaction states.
• Don't use the tertiary cyan (#00bcd4) on primary actions—reserve it for form validation, badges, and secondary interactive elements only.