Kaiser Dental

Overview

Kaiser Dental is a professional dental practice brand rooted in Clinical Minimalism—a design philosophy that prioritizes clarity, precision, and patient trust through restrained visual language. The brand serves patients seeking expert dental care in Frankfurt, combining the authority of medical expertise with the warmth of personalized attention. The aesthetic is deliberately understated: a deep navy blue (#1e3e87) anchors the interface as the signature accent, paired with clean whites and neutral grays that evoke clinical cleanliness without coldness. The emotional response is one of calm confidence—patients should feel they are in capable, caring hands.

The brand voice is professional yet approachable, precise yet human. Kaiser Dental speaks in clear, direct language that respects the patient's time and intelligence. Vocabulary emphasizes expertise ('umfassende Zahnmedizin'), individual care ('Individuelle Beratung'), and long-term partnership ('2500+ zufriedene Patienten'). The tone avoids corporate jargon and medical intimidation; instead, it positions the dentist as a trusted advisor. Example sentence in brand voice: 'Wir behandeln Sie so, wie auch wir selbst behandelt werden möchten' (We treat you as we would wish to be treated)—a statement that grounds clinical excellence in human empathy.

Colors

The color system is anchored by Primary (#1e3e87), a deep, authoritative navy blue used exclusively for call-to-action buttons, interactive elements, and key brand moments. This color conveys medical credibility and trustworthiness without the coldness of pure black. Secondary (#252525) is a near-black used for body text and structural elements, providing maximum readability at 18px body size with a line-height of 28px. Tertiary (#1D414C), a muted teal-gray, supports secondary accents and status indicators. The surface stack is deliberately minimal: Surface (#ffffff) is pure white, with container variants stepping down through grays (#f5f5f5 to #dadada) to create subtle depth without visual noise. On-Surface (#515151) is a mid-gray that meets WCAG AA contrast requirements (4.5:1) against w

Typography

The type system uses Nunito (Google Fonts, sans-serif) throughout, a humanist sans-serif that balances clinical precision with approachability. Display (60px, weight 300, line-height 68px) is reserved for hero headlines like 'Dr. Olga Kaiser' and sets the emotional tone with its light weight and generous leading. Headline-lg (40px, weight 600, line-height 48px) anchors section introductions; headline-md (28px, weight 600, line-height 36px) breaks up content into digestible chunks. Body-lg (18px, weight 400, line-height 28px) is the primary reading size for patient testimonials and service descriptions, with 28px line-height ensuring comfortable scanning. Body-md (16px, weight 400, line-height 24px) handles form labels and secondary content. Label-md (14px, weight 600, line-height 20px, let

Layout

The layout system uses a 12-column grid with a fixed container max-width of 1140px, centered on the viewport. The grid is fluid below 768px (mobile), transitioning to fixed-width at tablet and above. White-space philosophy follows the 'breathing room' principle: section separation uses lg spacing (40px) to create visual rest between content blocks, while internal component padding uses md spacing (24px). The gutter between columns is 24px, maintained consistently across all breakpoints. Container padding on mobile is 10px on each side (from the Elementor defaults), expanding to 24px on tablet and desktop. This creates a natural margin hierarchy: outer container (10–24px) → section padding (24px) → component padding (12–24px) → internal element spacing (4–12px). The rhythm is 8px-based thro

Elevation & Depth

Depth in Kaiser Dental is achieved through subtle, restrained shadows and strategic use of borders rather than dramatic layering. The elevation system uses three levels: Level 1 (Base) has no shadow, relying on a 1px border in surface-variant (#e6e6e6) to define edges. Level 2 (Standard Card) applies box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), a soft shadow with 4px blur and 12px spread, creating gentle separation from the background. Level 3 (Modal/Elevated) uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), a deeper shadow with 16px blur and 40px spread for modals and overlays. Hover states t

Shapes

The shape philosophy is 'Refined Precision'—rounded corners are used strategically to soften the clinical aesthetic without introducing organic or playful qualities. Buttons use border-radius 12px (0.75rem), a subtle rounding that feels professional and modern. Cards use border-radius 16px (1rem), slightly more generous to create a sense of containment and care. Input fields use border-radius 12px, matching buttons for visual consistency. Modals and overlays use border-radius 16px. The full-radius token (9999px) is reserved for badges and small UI elements like avatar circles. The reasoning: 1

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use background-color #1e3e87, text-color #ffffff, padding 15px 24px, height 48px, border-radius 12px, font-weight 600, font-size 14px. On hover, background shifts to #142d5f (a 10% darkening) with transition: background-color 0.3s ease. On active/pressed, background becomes #0d1f47 (20% darker). Secondary buttons (button-secondary) use transparent background with a 2px border in #1e3e87, text-color #1e3e87. On hover, background becomes #d4dff0 (primary-container) with text-color #0d1f47. All buttons use Nunito, weight 600, letter-spacing 0.01em. Disabled state: opacity 0.5, cursor not-allowed, no hover effect.

Containers & Surfaces Cards (card) use background-color #ffffff, border 1px s

Do's and Don'ts

**Do**

• Do use Primary (#1e3e87) exclusively for CTAs, focus states, and brand moments—never for body text or backgrounds.
• Do maintain 28px line-height for 18px body copy to ensure comfortable reading and professional appearance.
• Do apply 24px (md spacing) between major sections and 12px (sm spacing) between related components to create clear visual hierarchy.
• Do use border-radius 12px for buttons and inputs, 16px for cards—never mix radii on the same component type.
• Do transition all interactive states (hover, focus, active) over 0.2–0.3s using ease timing to feel responsive without jarring.
• Do use Nunito weight 600 for all labels and buttons, weight 400 for body, weight 300 only for display headlines.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; always route through on-surface (#515151) or on-surface-variant (#6b7280).
• Don't apply shadows to buttons; use color contrast and border-radius alone to define their presence.
• Don't exceed 3 levels of visual hierarchy (primary, secondary, tertiary colors); additional colors dilute the clinical aesthetic.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the system's coherence.
• Don't apply text-shadow to body copy; reserve it only for display/headline text over photographic backgrounds.
• Don't mix font families; Nunito is the sole typeface—no serif, no system fonts, no decorative faces.