Dr. Soliman Fakeeh Hospital

Overview

Dr. Soliman Fakeeh Hospital embodies Clinical Minimalism—a design philosophy that prioritizes clarity, trust, and accessibility within a healthcare context. The brand serves patients and families across the Kingdom of Saudi Arabia, delivering world-class medical care through an interface that feels both authoritative and approachable. The visual language uses a sophisticated teal-primary palette (#317796) paired with crisp whites and soft blues, evoking stability, expertise, and calm. The aesthetic is distinctly Saudi-centric: RTL typography in Almarai (the national font for Arabic), directional layouts that honor cultural norms, and imagery that reflects the diversity of the patient population. The emotional response is one of reassurance—users should feel that their health is in capable, modern hands.

The brand voice is professional yet warm, precise yet human. Tone vocabulary includes terms like 'comprehensive care,' 'international standards,' 'patient-centered,' and 'trusted expertise.' The hospital avoids clinical jargon in public-facing copy; instead, it speaks in clear, empowering language. Example sentence in brand voice: 'رعاية متكاملة للأم والجنين بمعايير عالمية' (Comprehensive maternal and fetal care to international standards)—direct, benefit-focused, and confidence-building.

Colors

The color system is anchored in a medical-professional teal (#317796, used as primary) that conveys trust, cleanliness, and expertise without the coldness of pure blue. This teal appears on all primary CTAs, navigation highlights, and interactive focus states. Secondary teal (#237295) provides depth for hover states and secondary navigation. Accent teals (#4f99ba, #6cadca) are reserved for tertiary elements, badges, and data visualization. The surface stack is deliberately minimal: pure white (#ffffff) for the main canvas, with soft blue-tinted containers (#f5f8fd, #eafafc) used sparingly for card backgrounds and section dividers. This restraint reinforces the 'clinical clarity' aesthetic—every color choice has a functional purpose, never decorative. Greys (#7b7c7f for secondary text, #ddd

Typography

The type system uses Almarai as the primary family for all Arabic content, with Mulish as a fallback for numerals and English text (critical for phone numbers, dates, and medical codes). Almarai was chosen for its professional weight distribution and excellent RTL rendering—it reads naturally at all sizes without requiring optical adjustments. The hierarchy spans from Display (60px, -0.04em letter-spacing for dramatic headlines) down to Label-sm (12px, 0.05em tracking for small UI labels). Headlines (40px–28px) use 600–700 weight and negative letter-spacing (-0.01em to -0.02em) to create visual compression and authority. Body text (16px–18px) sits at 400 weight with 24–28px line-height, ensuring readability on mobile and desktop. A specific treatment: apply text-shadow 0 2px 4px rgba(0, 0,

Layout

The page layout uses a 12-column fluid grid with a max-width of 1280px, allowing content to breathe on large screens while remaining compact on mobile. The RTL direction is baked into the CSS (direction: rtl on key sections), ensuring navigation, text, and imagery flow naturally for Arabic readers. Container padding uses the gutter token (24px) on desktop, reducing to 12px (sm spacing) on tablets and mobile. Section separation follows the lg spacing scale (40px vertical margin between major sections), with headline-to-body spacing at md (24px). The hero banner spans full-width with 80px vertical padding and 40px horizontal padding, creating a breathing room that doesn't feel cramped. Card-based layouts (departments, testimonials, services) use 24px gaps between items, achieved via CSS Grid

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the 'floating' effect of heavy shadows. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and inactive states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and standard interactive elements, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated overlays. The hero banner uses no shadow; instead, it relies on a linear gradient overlay (rgba(79, 153, 186, 0.87) fading to transparent) to create visual hierarchy over the background image. Navigation bars and header elements use sm

Shapes

The shape philosophy is Refined Geometry—a balance between clinical precision and human warmth. Border-radius values are intentionally limited to four key sizes: 8px (md, used for buttons, inputs, and small cards), 16px (lg, used for larger cards and image containers), 24px (xl, reserved for hero sections and major containers), and 50% (full, used only for circular badges and avatar frames). This constraint creates visual consistency and prevents the design from feeling 'rounded' or overly soft. Buttons use 8px radius (md), creating a modern, approachable feel without the harshness of sharp co

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#317796) background with white text, 8px border-radius, 9px vertical and 15px horizontal padding, and 40px height. Font-weight is 500 (label-md typography). On hover, the background transitions to {colors.primary-fixed-dim} (#2c6b87) with a 200ms ease-out transition. The button-secondary variant uses a transparent background with a 1px solid border in {colors.primary}, maintaining the same padding and height. On hover, it fills with {colors.surface-container-low} (#eafafc) while keeping the text color as primary. Both variants include a subtle box-shadow on focus (0 0 0 3px rgba(49, 119, 150, 0.1)) to indicate keyboard navigation.

Containers & Surfaces Cards use {colo

Do's and Don'ts

**Do**

• Do use {colors.primary} (#317796) exclusively for primary CTAs, focus states, and brand-critical interactive elements—never dilute it with secondary uses.
• Do maintain RTL direction: rtl on all text-heavy sections and ensure navigation flows naturally for Arabic readers; test with actual Arabic content, not placeholder text.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) as the default card shadow; reserve {elevation.lg} for hover and modal states to create clear depth hierarchy.
• Do use Almarai for all Arabic headlines and body text; reserve Mulish only for numerals, English abbreviations, and medical codes to maintain professional consistency.
• Do enforce a minimum 40px vertical spacing (lg token) between major sections; white-space is a design asset, not wasted real estate.

**Don't**

• Don't use secondary teals (#237295, #4f99ba) as primary button colors—they dilute brand recognition and confuse the interaction hierarchy.
• Don't apply border-radius values outside the defined scale (8px, 16px, 24px, 50%); arbitrary radii create visual inconsistency and break the geometric language.
• Don't place small text (label-sm) over busy hero imagery without a text-shadow (0 2px 4px rgba(0, 0, 0, 0.15))—readability will fail for users with low vision.
• Don't mix Almarai and Mulish weights arbitrarily; use 400 for body, 500 for labels, 600 for headlines, and 700 only for display-level text.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; instead, use {colors.on-surface} (#333333) or {colors.on-primary} (#ffffff) to maintain the color system's integrity.