Clínica Dental Urbina

Overview

Clínica Dental Urbina's design system embodies Clinical Minimalism—a healthcare aesthetic that prioritizes clarity, trust, and patient accessibility without sacrificing visual sophistication. The brand serves Spanish-speaking patients seeking professional dental care, combining institutional credibility (40+ years of practice, multidisciplinary teams) with warm, approachable communication. The visual language uses a vibrant cyan accent (#00bcd4) against clean white and deep navy surfaces, creating a modern, hygienic impression that feels both contemporary and reassuring. The emotional response is one of professional competence paired with genuine care: patients should feel they're in expert hands, not intimidated by clinical coldness.

The brand voice is direct, informative, and patient-centric. Vocabulary emphasizes accessibility ("primera visita gratuita," "presupuesto sin compromiso") and expertise ("equipo multidisciplinar," "especialistas"). Tone avoids medical jargon when addressing patients; instead, it uses clear Spanish with warm inflection. Example sentence in brand voice: "Llevamos más de 40 años cuidando sonrisas en Salamanca—tu confianza es nuestro compromiso."

Colors

The color system is anchored by Primary Cyan (#00bcd4), the signature accent used exclusively for call-to-action buttons, interactive elements, and key focal points. This high-saturation cyan conveys clinical precision and modern healthcare while remaining approachable—it's the color patients' eyes are drawn to when seeking the "Schedule Appointment" button. Secondary Navy (#2b354b) and Tertiary Dark Navy (#172137) provide institutional weight, used in headers, top bars, and text-heavy sections to establish authority and professionalism. The surface stack is built on pure white (#ffffff) as the primary background, with a carefully calibrated gray scale for depth: surface-container-low (#e5e5e5) for subtle dividers and input backgrounds, surface-container (#dddddd) for secondary surfaces, a

Typography

The type system uses Poppins exclusively, a geometric sans-serif that balances modern approachability with professional clarity—essential for a healthcare brand where patient trust depends on readable, unambiguous communication. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major page titles; Headline-lg (40px, 600 weight) anchors section headers and treatment category names; Headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and patient testimonials, while Body-md (16px, 400 weight, 24px line-height) is the workhorse for body copy, appointment descriptions, and form labels. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, badge lab

Layout

The layout follows a 12-column fluid grid with a 1280px container max-width, ensuring responsive scaling from mobile (single column, 24px gutter) through tablet (6-column, 24px gutter) to desktop (12-column, 24px gutter). Page rhythm is established through consistent spacing: lg spacing (40px) separates major sections (hero, treatment overview, testimonials), md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides breathing room within components. The top bar (12px line-height, 24px padding) sits above the main header, creating a two-tier navigation hierarchy. Hero sections use full-width backgrounds with 40px vertical padding and a minimum height of 400px to accommodate hero imagery (dental tools, patient care moments) alongside text. Cards are grouped in 3-c

Elevation & Depth

Depth in this system is achieved through a restrained shadow and border strategy that avoids the heavy drop-shadows common in older healthcare websites. Level 1 (Base): flat white surfaces with a 1px solid border in surface-container-low (#e5e5e5), creating subtle definition without visual weight. Level 2 (Cards & Modals): box-shadow 0 4px 12px rgba(0, 0, 0, 0.08) paired with a 1px border in surface-container-low, lifting cards 4px above the base and creating a soft, approachable depth. Level 3 (Elevated Modals & Overlays): box-shadow 0 16px 40px rgba(0, 0, 0, 0.12) with the same 1px border, r

Shapes

The shape philosophy is Soft-Technical: rounded corners are used strategically to soften the institutional feel of healthcare while maintaining professional clarity. Buttons use rounded-DEFAULT (0.5rem / 8px) for a modern, slightly rounded appearance that feels contemporary without being playful—this is a dentist's office, not a toy store. Cards and containers use rounded-md (0.75rem / 12px) to create gentle visual separation while keeping the design grid-aligned and structured. Input fields use rounded-sm (0.25rem / 4px) for a more technical, form-like appearance that signals data entry. Badg

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. The button-primary component uses a 48px height, 18px vertical padding, 60px horizontal padding, uppercase label-md typography (14px, 600 weight, 0.01em tracking), and a 0.5rem border-radius. The background is always primary cyan (#00bcd4) with on-primary text (#212121). On hover, the background transitions to primary-fixed-dim (#80deea) over 200ms with ease-in-out timing, creating a subtle brightening effect that signals interactivity without jarring color shifts. The button-secondary variant uses the same dimensions but swaps the background to secondary navy (#2b354b) with white text, used for secondary actions like "Learn More" or "View Blog." The button-ghost variant removes the back

Do's and Don'ts

**Do**

• Do use primary cyan (#00bcd4) exclusively for CTAs, interactive elements, and focus states—it's the visual anchor that guides patient attention to appointment booking and contact information.
• Do maintain 48px minimum height for all interactive elements (buttons, inputs, list items) to ensure touch-friendly targets on mobile devices and accessibility compliance.
• Do apply the sm elevation shadow (0 1px 2px rgba(0, 0, 0, 0.06)) to cards and containers at rest, transitioning to md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) on hover to create tactile feedback.
• Do use Poppins 600 weight for all button and label text to ensure visual hierarchy and readability, especially on small screens where weight differentiation is critical.
• Do pair primary cyan backgrounds with text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) on small labels to maintain 4.5:1 WCAG AA contrast over photographic hero images.
• Do organize content into 3-column card grids on desktop with 24px gaps, collapsing to 2-column on tablet and single-column on mobile for responsive consistency.
• Do use uppercase label-md typography (14px, 600 weight, 0.01em tracking) for button text to create visual distinction and signal interactivity.

**Don't**

• Don't use secondary navy (#2b354b) or tertiary dark navy (#172137) for CTAs—these colors are reserved for headers and institutional elements; using them on buttons will confuse patient navigation.
• Don't apply border-radius greater than 1rem (16px) to buttons or cards—the soft-technical aesthetic requires restraint; excessive rounding reads as playful rather than professional.
• Don't use body-md (16px) or smaller typography for button labels; always use label-md (14px, 600 weight) or label-sm (12px, 500 weight) to ensure buttons stand out visually.
• Don't place small labels (label-sm) directly over photographic backgrounds without text-shadow; the 0.15 opacity shadow is non-negotiable for WCAG AA compliance.
• Don't exceed 1280px container max-width on desktop—this ensures line lengths remain under 80 characters for body text, maintaining readability for patient-facing content.
• Don't use hover transitions longer than 200ms for buttons or cards—faster feedback (150-200ms) feels responsive; slower transitions feel sluggish in a healthcare context.
• Don't mix Poppins with other typefaces in body copy or UI text—the geometric consistency is essential to the brand's modern, trustworthy aesthetic.