Santé Clinic Barcelona

Overview

Santé Clinic Barcelona is a luxury aesthetic medicine practice serving Barcelona's discerning clientele seeking natural, precision-driven beauty treatments. The design system embodies 'Refined Minimalism'—a philosophy that strips away visual noise to reveal essential elegance. The aesthetic draws from high-end spa and medical design traditions: warm neutrals (beige #e5d6d0, taupe #bfaf9b, off-white #fafaf5), precise typography in the Sinkin Sans family, and generous whitespace create an atmosphere of calm professionalism and trust. The UI evokes a sense of understated luxury: every interaction feels intentional, every surface breathes, and the color palette whispers rather than shouts.

The brand voice is sophisticated yet approachable—precise without coldness, aspirational without pretension. Santé speaks in the language of results, safety, and natural enhancement. Example: 'HIFU tightening delivers visible lifting in a single session—no downtime, no compromise.' The tone favors active verbs, concrete outcomes, and the language of medical precision paired with wellness warmth. Typography is uppercase for headlines (letter-spacing: 0.025em to 0.08em), reinforcing authority and clarity, while body copy remains lowercase and generous (line-height: 1.6, letter-spacing: 0.01em) to maintain readability and approachability.

Colors

The color system is anchored in a warm, earthy palette that conveys both medical professionalism and spa-like serenity. Primary (#ffffff) is pure white, used for CTAs ('Book' button) and interactive surfaces—it commands attention without aggression. Secondary (#bfaf9b, a soft taupe) is the brand's signature accent, appearing on borders, hover states, and supporting UI elements; it bridges the gap between luxury and accessibility. Tertiary (#c9a96a, a warm gold) is reserved for premium badges, highlights, and accent details that signal exclusivity.

The surface stack progresses from bright white (#ffffff) through warm off-whites (#fafaf5, #f5f5f0) to soft beiges (#ede9e4, #e5ddd8), creating visual depth without harsh contrast. On-surface text is jet-black (#1a1a1a) for maximum legibility at

Typography

The typography system uses Sinkin Sans (a custom, geometric sans-serif) as the primary family, with Inter as fallback. The hierarchy is built on weight contrast (300 Light for captions, 500 Medium for labels, 600 Semibold for headlines) rather than size alone, creating visual rhythm across the page. Display (60px, 600 weight, -0.02em tracking) anchors hero sections with authority; Headline-lg (48px, 600 weight) leads major sections; Body-md (16px, 400 weight, 1.5 line-height) is the workhorse for product descriptions and clinic information. All headlines use uppercase text-transform with expanded letter-spacing (0.025em to 0.08em) to reinforce the brand's precision and luxury positioning. Body copy maintains tight line-height (1.5 to 1.6) and modest letter-spacing (0.01em) for comfort at s

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid container on mobile (padding: 24px) and expanding to fixed width on desktop (padding: 48px). The page rhythm is built on the spacing scale: section separation uses lg spacing (40px on mobile, 64px on desktop), card padding uses md spacing (24px), and internal element gaps use sm spacing (12px). The hero section spans full-width with a dark overlay (rgba(0, 0, 0, 0.5) to 0.7) over a high-quality photograph, ensuring white headline text (#ffffff) and CTAs remain legible. Below the fold, content sections alternate between full-width and constrained layouts, with generous whitespace (40–64px vertical rhythm) between major sections. The design favors asymmetrical layouts—text on left, imagery on right—to create vis

Elevation & Depth

Depth is achieved through subtle shadows and layering rather than dramatic drop-shadows. The elevation system uses three levels: sm (0 1px 2px rgba(26, 26, 26, 0.02)) for baseline cards and inputs, md (0 4px 6px rgba(26, 26, 26, 0.04)) for interactive hover states and modals, and lg (0 10px 15px rgba(26, 26, 26, 0.04)) for floating elements and overlays. Cards use a 1px border in outline-variant (#c9c3bd) paired with sm shadow to define edges without harsh contrast. On hover, cards transition to md shadow and shift up 2px (transform: translateY(-2px)) over 200ms, signaling interactivity. Input

Shapes

The shape philosophy is 'Architectural Softness'—clean, geometric forms with subtle rounding that feels refined rather than playful. Buttons use DEFAULT radius (0.5rem / 8px), creating a soft rectangle that feels contemporary without being overly rounded. Cards and containers use lg radius (1rem / 16px) for a slightly more generous curve that softens the medical/clinical feel. Input fields use DEFAULT radius (0.5rem) to match buttons, creating visual consistency in interactive elements. Badges and pills use full radius (9999px) to signal their secondary, decorative role. The rationale: DEFAULT

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses white background (#ffffff) with jet-black text (#1a1a1a), 14px medium weight, 12px vertical padding, 20px horizontal padding, and DEFAULT radius (8px). On hover, the background transitions to primary-container (#f5f5f0) and text to on-primary-container (#404040) over 200ms (cubic-bezier(0.16, 1, 0.3, 1)). The secondary button uses a transparent background with a 1px border in outline (#9ca3af) and on-surface text; on hover, it gains a surface-container-high background (#ddd5d0) and the border shifts to secondary (#bfaf9b). Both button variants maintain 44px height for touch accessibility. The 'Book' CTA in the header and hero uses the primary button style; secondary CTAs like 'Contact us' use the secon

Do's and Don'ts

**Do**

• Do use uppercase headlines with 0.025em–0.08em letter-spacing to reinforce precision and luxury; this is core to the Santé brand voice.
• Do maintain 40–64px vertical spacing between major sections; this generous whitespace is essential to the refined aesthetic and prevents visual fatigue.
• Do apply secondary (#bfaf9b) to all interactive hover states and focus rings; this creates a cohesive, recognizable interaction language.
• Do use sm shadow (0 1px 2px rgba(26, 26, 26, 0.02)) on cards and md shadow (0 4px 6px rgba(26, 26, 26, 0.04)) on hover to create subtle depth without drama.
• Do pair white CTAs (#ffffff) with dark overlays (rgba(0, 0, 0, 0.5–0.7)) on hero images to ensure legibility and visual hierarchy.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on text; always use jet-black (#1a1a1a) for body copy and on-surface text to reduce eye strain.
• Don't apply rounded corners larger than lg (16px) on interactive elements; full radius (9999px) is reserved for badges and decorative elements only.
• Don't mix Sinkin Sans with system fonts in the same component; always specify the full fallback chain (sinkinSansMedium, Inter, Avenir, Helvetica Neue, sans-serif) to maintain visual consistency.
• Don't use tertiary (#c9a96a) as a primary accent; it's reserved for premium badges and highlights. Primary accent is secondary (#bfaf9b).
• Don't apply shadows larger than lg (0 10px 15px rgba(26, 26, 26, 0.04)); larger shadows feel heavy and undermine the refined, minimalist aesthetic.