---
version: alpha
name: "Cleveland Clinic"
description: "Cleveland Clinic organizes a large hospital ecosystem through direct navigation, authoritative blue links, white content fields, and substantial Source Sans Pro typography. The audited homepage uses a 51px extra-bold hero over healthcare photography, 42.5px section headings, compact 3px utility controls, and larger 10px care actions. Provider, location, appointment, and health-library routes are surfaced before institutional storytelling."
colors:
  bg: "#ffffff"
  bg-soft: "#f1faff"
  surface: "#ffffff"
  surface-muted: "#f1f5f8"
  surface-strong: "#e6e6e6"
  text: "#363636"
  text-body: "#555555"
  text-muted: "#808080"
  text-inverse: "#ffffff"
  brand: "#0078bf"
  brand-link: "#007bc2"
  brand-deep: "#005688"
  brand-bright: "#0088d9"
  on-brand: "#ffffff"
  support: "#249c3d"
  border: "#dddddd"
  border-strong: "#808080"
  scrim: "rgba(0,70,110,0.58)"
  focus: "#005688"
  success: "#249c3d"
  warning: "#8a5a00"
  danger: "#b42318"
typography:
  display:
    fontFamily: "Source Sans Pro"
    fontSize: "72px"
    lineHeight: 1.365
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Source Sans Pro"
    fontSize: "20.4px"
    lineHeight: 1.365
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "10px"
  card: "14px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "32px"
  xl: "48px"
---

## Overview

## Overview

Cleveland Clinic is direct, authoritative, and service-first. White content fields, dark gray body copy, and medical blue links create a familiar hospital information environment. Photography supports care context, but navigation to providers, locations, appointments, and health information remains the visual priority.

The design should feel established rather than luxurious or technically experimental. Large bold headings establish confidence; clear utility rows reduce uncertainty.

## Colors

Use white as the dominant field, `#555555` for long-form copy, and `#363636` for strong headings. Primary blue is `#0078bf`, with `#005688` for deeper text and focus states. Pale blue `#f1faff` supports informational bands.

Green `#249c3d` may indicate help or positive service availability but must include a label. Red and amber are reserved for actual error or warning content, never brand decoration.

## Typography

Source Sans Pro carries the full experience. The audited hero is 51px/55px at 900 and reduces to 40px/44px on mobile. Major sections use approximately 42.5px at 700; utility card titles use 21.25px.

Body copy is unusually generous at about 20px/28px in prominent editorial regions. Compact navigation and metadata may use 15-17px, but health guidance should not be compressed to dashboard density.

## Layout

Use a broad 1296px content container and 24px grid gaps. Surface provider, location, and appointment routes near the top in equal columns. Keep editorial health content below operational access routes unless a true public-health alert changes priority.

Long-form material should use a narrower 780px reading measure. Full-width blue or pale bands can separate major areas without wrapping each area in a floating panel.

Use a deep-blue focus ring on pale surfaces and white on blue. Health articles require review dates, authors or medical reviewers, heading hierarchy, and clear emergency limitations. Links must describe their destination rather than repeat "learn more".

Forms need persistent labels, error summaries, and recovery instructions. Provider, location, and appointment routes must be keyboard reachable without navigating promotional content first.

## Elevation & Depth

Default cards need no shadow; borders and spacing establish hierarchy. Dropdown navigation can use an 8px/24px shadow, and dialogs can use a stronger neutral shadow over a clear scrim. Do not float ordinary health articles above the page.

## Shapes

Most structure is square. Use 3px for compact controls and 10px for large patient actions. Circular geometry is limited to portraits, media controls, and status icons. Avoid pill-shaped navigation and oversized soft cards.

## Components

Major care actions use 58px blue controls with 10px corners. Compact provider, directions, and appointment actions use 42px controls with 3px corners. Content cards are mostly square and border-defined rather than elevated.

Search uses a pale gray-blue field, a visible label, and an explicit submit control. Alerts use a blue leading border and plain-language next step instead of a decorative banner.

Keep navigation feedback between 100-180ms. Menus and care disclosures should open predictably without animated detours. Preserve the user's position when a location, provider, or service filter updates.

Reduced-motion mode removes hero movement and carousel transitions. Search results, appointment status, and form errors remain immediate and programmatically announced.

The blue hero becomes a compact mobile statement at 40px/44px. Stack provider, location, and appointment actions in that order with full-width touch targets. Maintain 20px gutters and readable 17-20px body copy.

Collapse institutional navigation, but leave search and care access prominent. Avoid horizontal card rails for decision-critical services; a vertical list is easier to scan and operate.

Use real care environments, clinicians, patients, and wayfinding context. Images should explain the service or human relationship, not simply signal wellness. Preserve faces and clinical context in responsive crops and provide meaningful alt text only when the image adds information.

Use plain, precise health language. State what a service is, who it is for, where it is available, and what the next step entails. Separate educational guidance from diagnosis and clearly identify when urgent or emergency care is required.

The key reusable pattern is an operational access trio: find a provider, locate care, and schedule an appointment. It suits hospitals and public services with multiple high-frequency destinations.

A second pattern is broad editorial typography paired with restrained card chrome, allowing medically reviewed content to feel important without marketing theatrics.

## Do's and Don'ts

Implement service routing, search semantics, and article metadata before visual polish. Use real links for every provider and appointment destination, and preserve visible labels on forms. Treat the 42.5px headings as fixed breakpoint values rather than viewport-scaled type.

Do not infer emergency status from brand colors. Create dedicated semantic tokens and ensure every status has readable text.

Do not use glass panels, pastel wellness gradients, ambiguous icon-only care choices, or hidden navigation. Avoid compressing health content into tiny dashboard cards, placing promotional carousels before care access, or using color as the only urgency signal. Never present educational content as individualized diagnosis.