Dr. Fərid Zeynalov Dental Practice

Overview

Dr. Fərid Zeynalov's dental practice embodies a 'Clinical Confidence' aesthetic—a design philosophy that merges professional precision with warm, human-centered approachability. The brand serves patients seeking high-quality aesthetic and restorative dentistry in Baku, Azerbaijan, and communicates expertise through a carefully balanced visual language: clean, modern layouts with strategic use of energetic accent colors (primary red #e32400 and secondary teal #027bb0) that convey both urgency and trust. The UI evokes a sense of modern professionalism tempered by accessibility—the kind of place where cutting-edge techniques (zirkon crowns, press-ceramic restorations) meet genuine patient care.

The brand voice is precise, confident, and reassuring. Vocabulary leans toward clinical specificity ('ultrasonic scaling', 'Class-B sterilization standards', 'aesthetic restorative dentistry') paired with patient-friendly explanations. The tone is never patronizing; instead, it educates while respecting the patient's intelligence. Example sentence in brand voice: 'Your zircon crown is milled to 0.5mm tolerances—precision that ensures a perfect fit and a natural smile that lasts.'

Colors

The color system is anchored by two complementary accent colors that work in concert to guide user attention and convey emotional intent. **Primary (#e32400)** is a vibrant, warm red used exclusively on high-priority CTAs ('Sualınız var?' button, active navigation states, accent text in headings) and error states. This color commands attention without aggression—it reads as 'action required' or 'important information.' **Secondary (#027bb0)** is a professional teal that appears on secondary CTAs ('Ətraflı məlumat' buttons), hover states, and supporting interactive elements. The two colors are never used simultaneously on the same element; instead, they create a visual rhythm across the page, with primary driving immediate action and secondary supporting exploration.

The surface stack uses

Typography

The type system uses Roboto exclusively, a typeface that communicates both professionalism and accessibility. The hierarchy spans from display (60px, 700 weight) for hero statements down to label-sm (12px, 500 weight) for metadata and form hints. **Display (60px, 700 weight, -0.04em tracking)** is reserved for the most prominent page titles and hero headlines—rarely used, maximum impact. **Headline-lg (40px, 600 weight, -0.02em tracking)** anchors major section breaks and service category titles. **Headline-md (28px, 600 weight, -0.01em tracking)** is used for subsection headings and card titles. **Title-lg (20px, 600 weight)** marks service names and form labels. **Body-lg (18px, 400 weight, 28px line-height)** is the primary reading size for introductory paragraphs and CTA descriptions.

Layout

The layout uses a 12-column grid system with a fixed container max-width of 1200px, providing a stable, predictable structure across all viewport sizes. The page rhythm is built on a semantic spacing scale: **lg spacing (40px)** separates major sections (hero, services, contact), creating breathing room and visual pause points. **md spacing (24px)** is used for padding within cards, form fields, and button internals—the standard 'comfortable' distance. **sm spacing (12px)** handles internal component spacing (icon-to-text distance, list item gaps). **xs spacing (4px)** is reserved for micro-interactions (focus ring offset, badge padding). The gutter between grid columns is 24px, maintaining consistency with the md spacing scale. Hero sections use full-width backgrounds with centered conten

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids the heavy, dark shadows common in older design systems. The three elevation levels are: **Level 1 (Base)**: no shadow; used for the main background and flat surfaces. **Level 2 (Standard Cards)**: box-shadow: 0 2px 28px rgba(0,0,0,0.06); applied to cards, dropdowns, and standard interactive elements. This shadow is soft and diffuse, suggesting a subtle lift without drama. **Level 3 (Elevated/Hover)**: box-shadow: 0 3px 8px rgba(0,0,0,0.15); used on hover states, modals, and prominent cards. The increased blur (8px) and opacity (0

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the clinical precision of the brand without sacrificing professionalism. **Buttons and CTAs** use rounded: full (9999px), creating pill-shaped elements that feel modern and approachable. This is the most distinctive shape in the system and is applied consistently to all primary and secondary buttons (48px height, 12px 24px padding). **Cards and containers** use rounded: lg (1rem / 16px), a moderate radius that suggests friendliness without being overly organic. This radius is applied to service cards, for

Components

Action Elements Buttons are the primary interaction pattern and come in three variants. **Button-primary** (background: #e32400, text: white, rounded: full, padding: 12px 24px, height: 48px, font-size: 15px, font-weight: 400) is used for high-priority CTAs like 'Sualınız var?' and 'Ətraflı məlumat' links. On hover, the background transitions to secondary (#027bb0) with all 0.3s ease. **Button-secondary** (background: #027bb0, text: white, same padding and height) is used for supporting actions and secondary CTAs. On hover, it transitions to primary (#e32400). **Button-ghost** (background: transparent, text: primary, border: 2px solid #e32400, rounded: full) is used for tertiary actions and is rarely seen in the current design but available for future expansion. All buttons have a minim

Do's and Don'ts

**Do**

• Do use primary (#e32400) exclusively for high-priority CTAs and active states—never use it for passive elements or backgrounds.
• Do apply lg spacing (40px) between major sections to create visual breathing room and guide the eye through the page hierarchy.
• Do use Roboto 600 weight for all interactive labels (buttons, form labels, navigation) to ensure they stand out from body text.
• Do transition all state changes (hover, focus, active) with transition: all 0.3s ease to create a cohesive, responsive feel.
• Do maintain a minimum touch target of 48px height for all interactive elements to ensure accessibility on mobile devices.
• Do use the soft shadow system (0 2px 28px rgba(0,0,0,0.06) for standard, 0 3px 8px rgba(0,0,0,0.15) for elevated) to add depth without heaviness.

**Don't**

• Don't mix primary and secondary colors on the same interactive element—use one or the other, never both.
• Don't use sharp corners (border-radius: 0) on buttons or cards; maintain the soft-technical aesthetic with rounded: full for buttons and rounded: lg for cards.
• Don't apply text-shadow or heavy shadows to body text; reserve shadows for containers and interactive elements only.
• Don't use font-weight lighter than 400 for body copy; Roboto 300 is too thin and reduces readability at standard sizes.
• Don't exceed the container max-width of 1200px; use full-width backgrounds only for hero sections and decorative elements.
• Don't use more than two accent colors in a single view; stick to primary (#e32400) and secondary (#027bb0) to avoid visual chaos.