Fisioterapia Bebê

Overview

Fisioterapia Bebê embodies a "Playful Medical Precision" aesthetic—merging the clinical credibility of pediatric physiotherapy with the wonder and joy of childhood. The brand serves parents seeking specialized care for cranial asymmetries and congenital torticollis, transforming a medical journey into an adventure. The visual identity draws from space exploration and cosmic themes (astronauts, rockets, stars), creating an environment where complex medical conditions feel approachable and even exciting. The UI celebrates movement, growth, and discovery through vibrant primary blues (#0962e1), energetic magentas (#da4480), and sunny yellows (#fcb900), layered over a clean white canvas that ensures medical information remains legible and trustworthy.

The brand voice is warm, encouraging, and parent-centric—never clinical or intimidating. Sentences are direct yet reassuring: "Somos pioneiros no trabalho com capacetes 3D no país" (We are pioneers in 3D helmet therapy in the country). The tone balances expertise with accessibility, speaking to parents' concerns while celebrating their child's potential. Typography uses Poppins throughout, a rounded, friendly typeface that softens technical content. The design system prioritizes clarity over decoration, ensuring that every element—from CTAs to form fields—guides parents toward confident decision-making.

Colors

The color system is organized around three emotional pillars: Trust (primary blue #0962e1), Energy (secondary magenta #da4480), and Optimism (tertiary yellow #fcb900). Primary blue (#0962e1) anchors all interactive elements—buttons, links, and focus states—establishing a consistent, clickable presence. It appears on the main CTA "CONTATO" button (rgb(9, 98, 225) / #0962e1) and secondary actions, creating a visual hierarchy that guides users toward engagement. Secondary magenta (#da4480) is reserved for accent buttons, badges, and highlights that demand attention without competing with primary actions; it appears frequently in cookie consent buttons and tertiary CTAs. Tertiary yellow (#fcb900) provides celebratory accents for achievements, badges, and decorative elements (stars, icons) that

Typography

Poppins is the sole typeface family, loaded in weights 100–900 and italics, ensuring consistency and reducing cognitive load. The type system follows a clear hierarchy: Display (60px, 700 weight, -0.04em letter-spacing) for hero headlines; Headline-lg (40px, 600 weight) for section titles; Headline-md (28px, 600 weight) for subsections; Title-lg (20px, 600 weight) for card titles; Body-lg (18px, 400 weight) for rich content; Body-md (16px, 400 weight) for standard copy; Label-md (14px, 600 weight) for buttons and form labels; and Label-sm (12px, 500 weight, 0.05em letter-spacing) for badges and metadata. The rounded letterforms of Poppins soften medical terminology, making phrases like "Assimetrias Cranianas" feel less clinical. On small labels over busy backgrounds (e.g., badges on hero i

Layout

The layout employs a 12-column fluid grid with a maximum container width of 1280px, allowing responsive scaling from mobile to desktop. The page rhythm is driven by 24px (md spacing) section separators, creating breathing room between hero, feature blocks, and CTAs. The hero section spans full-width with a vibrant magenta background (#da4480 or similar), establishing immediate brand recognition; navigation sits in a white pill-shaped container (border-radius: 50px, padding: 15px 30px) centered within the hero, creating a focal point. White space is generous: 40px (lg spacing) between major sections, 12px (sm spacing) between related elements within cards. The gutter width is consistently 24px, applied to left/right padding on constrained sections. Container max-width of 1280px ensures read

Elevation & Depth

Depth is conveyed through a three-tier shadow system combined with subtle background color shifts. Level 1 (Base/Surface): no shadow, white background (#ffffff) with optional 1px border at surface-container-high (#e0e0e0) for definition. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background #ffffff, creating a gentle lift from the page. Level 3 (Elevated/Modals): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), background #ffffff with optional surface-container-low (#f0f0f0) tint, signaling modal or overlay prominence. Interactive hover states transition cards from Level 2

Shapes

The design philosophy is "Rounded Warmth with Medical Clarity"—sharp corners are avoided entirely, replaced with consistent border-radius values that reinforce the child-friendly, approachable brand. Buttons use border-radius: 50px (full rounding), creating pill-shaped CTAs that feel inviting and clickable; this applies to all button variants (primary, secondary, tertiary). Cards and containers use border-radius: 1.5rem (24px), providing a softer frame than typical 8px radii while remaining professional. Form inputs use border-radius: 0.5rem (8px), a subtle curve that distinguishes them from b

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses background-color: #0962e1, color: #ffffff, border-radius: 50px, padding: 15px 30px, height: 48px, font-size: 19.2px, font-weight: 500, and font-family: Poppins. On hover, background-color transitions to #50aaee (button-primary-hover) over 200ms. The button-secondary variant uses background-color: #da4480, font-weight: 700, and maintains the same dimensions; on hover, it shifts to a darker magenta (#c23a6a or similar). A tertiary button-tertiary uses background-color: #fcb900 with on-tertiary text (#000000), creating a celebratory accent for secondary actions. All buttons include a focus state: box-shadow: 0 0 1px 3px rgba(218, 68, 128, 0.4) for keyboard navigation.

Containers & Surfaces

Do's and Don'ts

**Do**

• Do use Poppins at 600+ weight for all headings to maintain visual warmth and hierarchy; never fall back to system fonts for brand-critical text.
• Do apply the full 200ms ease-in-out transition on all interactive elements (buttons, cards, inputs) to provide tactile feedback and reduce perceived latency.
• Do reserve primary blue (#0962e1) exclusively for primary CTAs and focus states; secondary magenta (#da4480) for energy and accent buttons; tertiary yellow (#fcb900) for celebratory badges and decorative stars.
• Do use the 24px (md spacing) gutter consistently between sections and 12px (sm spacing) within cards to maintain rhythm and breathing room.
• Do apply box-shadow: 0 0 1px 3px #da4480 on focus states for keyboard navigation, ensuring WCAG AA compliance without breaking the rounded aesthetic.

**Don't**

• Don't use sharp 90-degree corners (border-radius: 0) anywhere in the UI; minimum border-radius is 0.5rem (8px) for inputs, 1.5rem (24px) for cards, 50px for buttons.
• Don't mix typefaces; Poppins is the sole family across all weights and styles—no system fonts, no serif fallbacks, no display-only typefaces.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) on standard cards; excessive depth contradicts the clean, accessible aesthetic.
• Don't use colors outside the defined palette for primary UI elements; if a new accent is needed, derive it from the existing primary/secondary/tertiary hues via tints or shades.
• Don't disable focus states or keyboard navigation; all buttons, inputs, and interactive elements must have visible focus indicators (box-shadow or outline) for accessibility.