mocca:health

Overview

mocca:health is a mobile compression care provider (Sanitätshaus) that brings expert lymphedema and lipedema treatment directly to patients' homes in Germany. The brand aesthetic is 'Warm Professionalism'—combining the approachable, human-centered care of a trusted healthcare partner with the confident directness of a modern, efficient service. The UI evokes calm competence: soft, warm neutrals (#f8ede9 background, #462a21 text) paired with a confident coral-red accent (#eb4f4d) that signals action, trust, and the brand's commitment to patient care. The emotional response is reassurance without clinical coldness—patients feel seen, supported, and in capable hands.

The brand voice is direct, warm, and solution-oriented. Vocabulary emphasizes flexibility, reliability, and speed—three pillars stated in the hero: 'flexibel, zuverlässig, schnell.' Tone avoids medical jargon; instead, it speaks to lived experience ('Wir kommen zu dir nach Hause'—we come to your home). The brand personality is that of an experienced, personable healthcare professional who listens, acts quickly, and removes friction from care. Example sentence in brand voice: 'Deine Vermessung und Anprobe—flexibel bei dir zu Hause, ohne Wartezeiten.'

Colors

The color system balances warmth, trust, and clinical clarity. Primary (#eb4f4d) is a confident coral-red used exclusively on CTAs ('Termin vereinbaren'), key links, and interactive focus states—it signals action and the brand's commitment to patient care. Secondary (#462a21) is a deep warm brown deployed for body text, headings, and secondary buttons; it grounds the interface with earthy sophistication and pairs naturally with the warm beige surface. Tertiary (#116dff) is a bright blue reserved for accent elements, links, and status indicators—it provides visual contrast and draws attention to secondary actions. The surface stack uses warm, off-white tones: surface (#f8ede9) as the primary background, surface-container-low (#f8ede9) for subtle depth, and surface-container-highest (#e7dcd7

Typography

The type system uses Helvetica and Arial as the foundational sans-serif family, reinforcing the brand's direct, no-nonsense healthcare positioning. Display and headline weights (700) are set in helvetica-w01-bold for maximum impact on hero sections and key messaging; body text (400) uses standard Arial for optimal readability at 16–18px. The hierarchy is steep: display at 60px (68px line-height, -0.04em letter-spacing) commands attention; headline-lg at 40px (48px line-height) anchors section titles; body-md at 16px (24px line-height) ensures comfortable reading on mobile and desktop. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons and form labels, creating visual distinction without sacrificing legibility. On small labels over busy backgrounds (e.g., badges on car

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on desktop and full-width on mobile (320px container on device-mobile-optimized). The page rhythm is built on a semantic spacing scale: lg (40px) separates major sections (hero from features, features from testimonials); md (24px) creates breathing room within sections (card padding, section margins); sm (12px) is used for component-level spacing (button padding, list item margins). The gutter is 24px on desktop, collapsing to 12px on mobile. White-space is generous but purposeful—the hero uses 40px vertical spacing between the headline and supporting text, and 64px (xl) between the hero and the next section. Container padding is 24px on desktop, 12px on mobile, ensuring content never touches the viewport edge. The gr

Elevation & Depth

Depth in mocca:health is achieved through subtle shadows and layered surfaces, not through dramatic contrast. The elevation system uses three levels: sm (0 1px 4px rgba(0,0,0,0.06)) for base cards and subtle interactive states; md (0 4px 12px rgba(0,0,0,0.08)) for elevated cards, modals, and hover states; lg (0 16px 40px rgba(0,0,0,0.12)) reserved for full-screen overlays and critical modals. Cards at rest use sm elevation and a 1px border in outline-variant (#cbd3dc) to define edges without harsh shadows. On hover, cards transition to md elevation with a 200ms ease, creating a subtle lift tha

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, reflecting the brand's balance between approachable warmth and clinical precision. Buttons and form inputs use 8px (DEFAULT) border-radius, creating a friendly, modern appearance without feeling overly playful. Cards and elevated surfaces use 16px (lg) radius, adding visual softness while maintaining structure. Badges and pills use 9999px (full) radius for maximum roundness, signaling secondary or supplementary information. Input fields and small interactive elements use 8px radius; larger containers (modals,

Components

Action Elements Buttons are the primary interaction pattern. All buttons use 48px height (padding: 12px 24px, typography: label-md, fontWeight: 600) for comfortable touch targets on mobile. Primary buttons (#eb4f4d background, white text) are used for main CTAs ('Termin vereinbaren', 'Jetzt buchen'). On hover, the background shifts to #d63d3b with a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition; no shadow is added, keeping the interaction subtle. Secondary buttons (#462a21 background, white text) are used for alternative actions; they follow the same sizing and transition rules. Ghost buttons (transparent background, 2px primary border, primary text) are used for tertiary actions or cancel buttons; on hover, they gain a light primary-container background (#f5d5d3) without changing text

Do's and Don'ts

**Do**

• Do use primary (#eb4f4d) exclusively on CTAs and interactive focus states—it signals action and builds trust with patients seeking care.
• Do maintain 24px gutter spacing on desktop and 12px on mobile; this rhythm creates visual calm and prevents cognitive overload in a healthcare context.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active); this timing feels natural and responsive without feeling sluggish.
• Do use helvetica-w01-bold (700 weight) exclusively for headlines and display text; body text must be 400 weight to ensure readability and hierarchy.
• Do pair warm neutrals (#f8ede9 surface, #462a21 text) with the coral-red accent; this combination evokes both warmth and clinical competence.

**Don't**

• Don't use primary (#eb4f4d) for body text, backgrounds, or non-interactive elements—it will dilute its signal as the action color and confuse users about what is clickable.
• Don't apply shadows larger than lg (0 16px 40px rgba(0,0,0,0.12)) to any element except full-screen modals; excessive depth creates visual noise in a healthcare interface.
• Don't animate border-radius or use transitions longer than 300ms; these create jarring, unnatural interactions that feel untrustworthy in a medical context.
• Don't use system fonts (system-ui, -apple-system) or serif typefaces; stick to Helvetica and Arial to maintain the brand's direct, modern healthcare positioning.
• Don't reduce padding below 12px or border-radius below 8px on interactive elements; this creates cramped, inaccessible interfaces that frustrate patients seeking care.