--- name: CVS Health tagline: CVS-red heart on a clean white canvas — custom CVS Sans, near-black ink, trustworthy healthcare clarity. updated_at: 2026-05-28T22:15:56.999Z published_at: 2026-05-28T22:15:56.999Z author: webdesignhot source_url: https://www.cvshealth.com spec: webdesignhot/0.1 quality: curated featured: false categories: [saas, retail] tags: [light, structured, sans, healthcare, red, pharmacy, clean, trustworthy] preview_swatch: ['#ffffff', '#cc0000', '#000000'] related: [walmart, best-buy, amazon] description: 'CVS Health''s storefront is clean, trustworthy, and healthcare-register calm — a white (`#ffffff`) canvas with near-black (`#000000`) ink and the unmistakable **CVS red** (`#cc0000`) doing the brand work. The red is the heart in the logo, the primary CTA fill, and the single accent that carries pharmacy urgency without shouting. Type runs the custom **CVS Sans** family across both display and body: H1 at 32px / 700, body at 16px / 400 with a comfortable 1.55 line-height for legibility a pharmacy audience can trust. Shape language is restrained and modern — 8px buttons and inputs, 12px cards, soft 16px feature panels, full pills reserved for chips and status badges. The page is engineered for clarity and reassurance: generous whitespace, a strict 4px spacing grid, high-contrast type, and a single red accent against a quiet white-and-near-black system. No clutter, no decoration — just the legibility and trust a health brand has to earn.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand muted: text-muted border: border ring: focus-ring colors: bg: '#ffffff' # default canvas — clinical white bg-soft: '#f7f7f7' # alternate band / page floor surface: '#ffffff' # card and panel surface surface-soft: '#f7f7f7' # disabled fields, alternating rows surface-muted: '#efefef' # divider band, inactive chip ground surface-red-tint: '#fdeaea' # subtle red wash behind savings / pharmacy callouts text: '#000000' # primary ink — true near-black text-strong: '#000000' # strongest heading ink text-muted: '#5b5b5b' # secondary metadata, captions text-soft: '#767676' # helper text, placeholder, timestamps text-on-brand: '#ffffff' # white text on CVS red text-on-dark: '#ffffff' # white text on dark footer brand: '#cc0000' # CVS red — the heart, the CTA, the brand brand-hover: '#a30000' # deeper red on hover brand-active: '#8a0000' # pressed state brand-soft: '#e34a4a' # lighter red for tints and large fills link: '#cc0000' # inline links use the brand red link-hover: '#a30000' # link hover deepens link-visited: '#7a1f5c' # visited link plum border: '#000000' # default hairline — true black, high contrast border-soft: '#d7d7d7' # quiet divider between rows border-strong: '#000000' # focused / emphasized outline border-input: '#767676' # form input outline at rest focus-ring: '#cc0000' # red focus ring scrim: 'rgba(0,0,0,0.55)' # modal backdrop shadow-card: 'rgba(0,0,0,0.08)' shadow-elev: 'rgba(0,0,0,0.16)' success: '#1f7a3d' # refill ready / order confirmed green success-soft: '#e7f3ec' # success banner surface warning: '#9a6700' # advisory amber (refill due, low stock) warning-soft: '#fbf3e0' # warning banner surface danger: '#cc0000' # validation error — same hex as brand red danger-soft: '#fdeaea' # error banner surface info: '#005a9c' # informational blue (insurance, plan info) info-soft: '#e6f0f8' # info banner surface on-brand: '#ffffff' # legacy alias — white on CVS red typography: display: family: '"CVS Sans Regular", system-ui, -apple-system, sans-serif' weights: [500, 600, 700] body: family: '"CVS Sans Regular", system-ui, -apple-system, sans-serif' weights: [400, 500, 600] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' weights: [400, 500] scale: display-hero: { size: 80, weight: 700, lineHeight: 1.0, tracking: '-0.03em', family: display } display-lg: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display } h1: { size: 32, weight: 700, lineHeight: 1.1, tracking: '-0.018em', family: display } h2: { size: 28, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display } h3: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display } h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body } h5: { size: 18, weight: 600, lineHeight: 1.35, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } button: { size: 16, weight: 600, lineHeight: 1.0, tracking: '0', family: body } nav-link: { size: 15, weight: 500, lineHeight: 1.0, tracking: '0', family: body } badge: { size: 12, weight: 600, lineHeight: 1.0, tracking: '0.04em', family: body, transform: uppercase } price: { size: 24, weight: 700, lineHeight: 1.0, tracking: '-0.01em', family: body, opentype: ['tnum'] } overline: { size: 12, weight: 600, lineHeight: 1.2, tracking: '0.08em', family: body, transform: uppercase } radius: micro: 2 sm: 4 md: 8 # default buttons + inputs lg: 12 # cards xl: 16 # feature panels, modals pill: 9999 # chips, status badges, avatar spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96] layout: page-width: 1280 prose-width: 720 header-height: 64 components: button-primary: bg: '#cc0000' color: '#ffffff' radius: 8 padding: '10px 16px' height: 44 font: button use: 'Primary action — Refill prescription, Find a store, Continue.' button-primary-hover: bg: '#a30000' color: '#ffffff' radius: 8 use: 'Hover / focus — deeper red.' button-ghost: bg: 'transparent' color: '#000000' border: '1px solid #000000' radius: 8 padding: '10px 16px' height: 44 use: 'Secondary action — Cancel, Learn more, inverse pairing beside primary.' button-secondary: bg: '#ffffff' color: '#cc0000' border: '1px solid #cc0000' radius: 8 padding: '10px 16px' height: 44 use: 'Red-outline secondary — Sign in, See details over white surfaces.' button-text: bg: 'transparent' color: '#cc0000' radius: 0 use: 'Tertiary text link — Show more, View all, underlined on hover.' card: bg: '#ffffff' color: '#000000' border: '1px solid #d7d7d7' radius: 12 padding: '24px' use: 'Content / product / service card. Hairline border, no shadow at rest.' card-interactive: bg: '#ffffff' color: '#000000' border: '1px solid #d7d7d7' radius: 12 padding: '24px' shadow-hover: 'rgba(0,0,0,0.08) 0 4px 12px' use: 'Clickable card — gains a soft lift and red border on hover.' input: bg: '#ffffff' color: '#000000' border: '1px solid #767676' radius: 8 padding: '10px 12px' height: 44 focus: '2px solid #cc0000' use: 'Form input — label above, red focus ring.' select: bg: '#ffffff' color: '#000000' border: '1px solid #767676' radius: 8 height: 44 use: 'Dropdown — same look as input with chevron indicator.' badge: bg: '#cc0000' color: '#ffffff' radius: 9999 padding: '4px 10px' font: badge use: 'Status pill — "Ready", "New", count badges on cart / notifications.' badge-soft: bg: '#fdeaea' color: '#cc0000' radius: 9999 padding: '4px 10px' use: 'Soft red status — savings, ExtraCare offers, pharmacy callouts.' chip: bg: '#efefef' color: '#000000' radius: 9999 padding: '6px 12px' use: 'Filter / category chip — toggles to red ground when selected.' nav-link: bg: 'transparent' color: '#000000' font: nav-link underline-hover: '2px solid #cc0000' use: 'Header department link — red underline grows on hover / active.' alert-success: bg: '#e7f3ec' color: '#1f7a3d' border: '1px solid #1f7a3d' radius: 8 use: 'Refill ready / order confirmed banner.' alert-error: bg: '#fdeaea' color: '#cc0000' border: '1px solid #cc0000' radius: 8 use: 'Validation / pharmacy error banner.' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' ease-out: 'cubic-bezier(0.0, 0, 0.2, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 cta-press: 'CTA bg deepens cc0000 → 8a0000 over 150ms on :active' card-hover: 'shadow appears + border lightens d7d7d7 → cc0000 over 240ms' nav-underline: '2px red underline grows from centre over 150ms on hover' reduced-motion: 'respects prefers-reduced-motion: reduce — colour transitions remain, transforms / slides suppressed' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: ambient: 'none — CVS stays flat at rest' hover-card: 'rgba(0,0,0,0.08) 0 4px 12px' modal: 'rgba(0,0,0,0.16) 0 8px 24px' ring: '0 0 0 2px #cc0000' accessibility: contrast-text-on-bg: 21.0 # #000000 on #ffffff — AAA (maximum) contrast-text-on-brand: 5.9 # #ffffff on #cc0000 — AA body / AAA large contrast-brand-on-bg: 5.9 # #cc0000 on #ffffff — AA body / AAA large contrast-muted-on-bg: 7.0 # #5b5b5b on #ffffff — AAA contrast-soft-on-bg: 4.5 # #767676 on #ffffff — AA contrast-link-on-bg: 5.9 # #cc0000 link on #ffffff — AA focus-ring: '2px solid #cc0000 + 2px outline offset (CVS red ring)' reduced-motion-honored: true touch-target-min: 44 # all CTAs hit 44×44 keyboard-nav: 'Tab moves logo → primary nav → utility (account / cart) → main content → footer; arrow keys inside dropdown menus' dark-mode: null # No public-web dark mode. Light-only across cvshealth.com. lineage: summary: | CVS Health's web identity sits in the modern American healthcare-and-pharmacy register: a clinical white canvas, true near-black ink for maximum legibility, and a single brand red — the heart in the CVS logo — carrying every accent. The lineage is unmistakably retail-pharmacy crossed with patient-trust design language: the same red-on-white discipline that anchors Walgreens, Target's pharmacy, and the broader US drugstore tradition, but pulled toward a quieter, more corporate-health tone after CVS repositioned from "CVS/pharmacy" to "CVS Health". The custom CVS Sans family is the move that distinguishes the brand from its peers — a humanist, highly-legible workhorse sans commissioned so prescriptions, dosage, and plan copy read cleanly at small sizes on both web and in-store signage. What CVS rejects is decoration: no gradients, no photography-as-texture behind text, no playful illustration in the core flows, and emphatically no dark mode. The system trusts whitespace, a strict 4px grid, high-contrast type, and one confident red to do the work — because a health brand earns trust through clarity, not flourish. influences: - name: Walgreens role: Peer US pharmacy — the canonical red-on-white drugstore palette and dense service-card layout. url: https://www.walgreens.com - name: Mayo Clinic role: Patient-trust healthcare tone — legibility-first, calm, high-contrast clinical register. url: https://www.mayoclinic.org - name: Target role: Retail red-on-white discipline and clean big-box grid; CVS pharmacy counters live inside Target stores. url: https://www.target.com - name: Aetna role: Sibling CVS Health insurance brand — corporate-health card systems and plan-information layout. url: https://www.aetna.com - name: IBM Plex / Carbon Design role: Enterprise humanist-sans legibility tradition that CVS Sans parallels for dense health copy. url: https://www.ibm.com/plex --- ## 1. Visual Theme & Atmosphere CVS Health's storefront is clean, trustworthy, and unmistakably healthcare in register. The base canvas is pure white (`#ffffff`), the ink is true near-black (`#000000`) for maximum legibility, and the entire chromatic identity rests on a single brand colour: **CVS red** (`#cc0000`) — the same red as the heart in the logo. There is no second accent fighting for attention, no gradient wash, no decorative photography behind text. The page reads the way a well-run pharmacy counter feels: orderly, high-contrast, and quietly reassuring. Type runs the custom **CVS Sans** family across both display and body — a humanist workhorse sans commissioned specifically so prescription names, dosages, plan details, and store hours read cleanly at small sizes. Headlines render in CVS Sans at 700 weight (H1 at 32px), and body copy sits at 16px / 400 with a generous 1.55 line-height that prioritizes readability for an audience that spans every age and visual ability. The brand never sacrifices legibility for style; the type system is built to be trusted with health information. The red is used with discipline. It is the primary CTA fill ("Refill prescription", "Find a store"), the focus ring, the inline link colour, the status badge, and the navigation underline — but it is never a background wash behind running text and never paired with a competing hue. Against the quiet white-and-near-black system, a single red button or red-underlined nav link carries all the urgency the page needs. This restraint is the brand: pharmacy is a context where confusion has consequences, so the design removes anything that could distract from the next correct action. Shape language is restrained and modern. Buttons and inputs round at 8px, content cards at 12px, feature panels and modals at 16px, with full pills (9999px) reserved for chips and status badges. There are no compound radii and no playful organic shapes — the geometry is calm and consistent. Depth is almost entirely flat: surfaces sit on hairline borders rather than shadows, and a soft single-layer lift appears only on interactive cards when hovered. The page is engineered for **clarity and reassurance over visual spectacle**. The overall atmosphere is that of a trustworthy, contemporary health brand: lots of whitespace on a strict 4px grid, high-contrast type, generous touch targets, and one confident red against an otherwise neutral system. It is the digital equivalent of a clean, well-lit pharmacy aisle — everything labelled, everything legible, nothing in the way. **Key Characteristics:** - Pure white (`#ffffff`) canvas with true near-black (`#000000`) ink — maximum legibility - A single brand colour, CVS red (`#cc0000`) — the heart, the CTA, the focus ring, the link - Custom CVS Sans family across display and body — H1 at 32px / 700, body at 16px / 400 - Generous 1.55 body line-height for health-information legibility - Red used only as accent and action — never a background wash behind running text - Restrained radius scale: 8px buttons / inputs, 12px cards, 16px panels, pills for chips - Almost entirely flat — hairline borders carry structure; shadows only on hover - Strict 4px spacing grid with generous whitespace between sections - High-contrast, AA/AAA-leaning system suited to a broad, multi-age audience - Light-only — no dark mode anywhere on the public web ## 2. Color Palette & Roles ### Canvas / Background - **Canvas** (`#ffffff`) [→ `bg`]: default page floor, every card and panel surface - **Page Soft** (`#f7f7f7`) [→ `bg-soft`]: alternating band behind content sections - **Surface Muted** (`#efefef`) [→ `surface-muted`]: divider bands, inactive chip ground - **Red Tint Surface** (`#fdeaea`) [→ `surface-red-tint`]: subtle wash behind savings / pharmacy callouts ### Text / Ink - **Ink** (`#000000`) [→ `text`]: primary text colour — true near-black, the live token - **Heading Ink** (`#000000`) [→ `text-strong`]: headlines — same maximum-contrast black - **Muted** (`#5b5b5b`) [→ `text-muted`]: secondary metadata, captions, breadcrumbs - **Soft** (`#767676`) [→ `text-soft`]: helper text, placeholder, timestamps - **On Brand** (`#ffffff`) [→ `text-on-brand`]: white text on CVS red CTAs ### Brand - **CVS Red** (`#cc0000`) [→ `brand`]: the heart in the logo — primary CTA fill, focus ring, link, badge - **Brand Hover** (`#a30000`) [→ `brand-hover`]: deeper red on hover / focus - **Brand Active** (`#8a0000`) [→ `brand-active`]: pressed state - **Brand Soft** (`#e34a4a`) [→ `brand-soft`]: lighter red for large fills and decorative tints ### Interactive - **Link** (`#cc0000`) [→ `link`]: inline body links use the brand red - **Link Hover** (`#a30000`) [→ `link-hover`]: deepens on hover - **Visited** (`#7a1f5c`) [→ `link-visited`]: plum visited-link state - **Focus Ring** (`#cc0000`) [→ `focus-ring`]: 2px red ring on `:focus-visible` ### Neutral / Borders - **Border** (`#000000`) [→ `border`]: default hairline — true black, high-contrast structural edge - **Border Soft** (`#d7d7d7`) [→ `border-soft`]: quiet divider between rows and quiet cards - **Border Strong** (`#000000`) [→ `border-strong`]: emphasized / pressed outline - **Border Input** (`#767676`) [→ `border-input`]: form input outline at rest ### Surface - **Surface** (`#ffffff`) [→ `surface`]: default card / panel - **Surface Soft** (`#f7f7f7`) [→ `surface-soft`]: disabled fields, alternating table rows - **Surface Muted** (`#efefef`) [→ `surface-muted`]: section dividers, inactive controls ### Shadow Colors CVS stays flat. Depth is carried by hairline borders, not layered shadows. A single soft neutral grey lift appears only on hovered interactive cards — no coloured shadows, no atmospheric multi-layer composition. - `rgba(0,0,0,0.08) 0 4px 12px` — hover-card lift - `rgba(0,0,0,0.16) 0 8px 24px` — modal drop - `rgba(0,0,0,0.55)` — modal scrim ### Semantic - **Success Green** (`#1f7a3d`) [→ `success`]: refill ready, order confirmed, in-stock - **Warning Amber** (`#9a6700`) [→ `warning`]: advisory banners (refill due, low stock) - **Danger Red** (`#cc0000`) [→ `danger`]: inline form errors — same hex as brand red, keeping the system tight - **Info Blue** (`#005a9c`) [→ `info`]: insurance / plan-information banners — the lone non-red hue, used sparingly ## 3. Typography Rules ### Font Family **Display & Body**: `CVS Sans Regular`. Fallback chain: `system-ui, -apple-system, sans-serif`. CVS Sans is the brand's custom humanist sans, commissioned to read cleanly across web, app, and in-store signage. Unlike most retail systems, CVS uses a **single family for both display and body** — the hierarchy is built from weight and size, not from a display/body type pairing. Inter, IBM Plex Sans, and Source Sans 3 are the closest open-source substitutes. **Display weights**: 500, 600, 700. Headlines lean on 600–700. **Body weights**: 400, 500, 600. Running text is 400; labels and emphasized inline copy step to 500–600. **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace` — used only for technical contexts (order numbers, confirmation codes). Not a visible part of the marketing brand. **OpenType features**: `tnum` (tabular numerals) is enabled on prices and numeric tables so dosage counts, prices, and quantities align cleanly in columns. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | display-hero | CVS Sans | 80 | 700 | 1.0 | -0.03em | — | Campaign / landing hero headline | | display-lg | CVS Sans | 56 | 700 | 1.05 | -0.02em | — | Large marketing headline | | h1 | CVS Sans | 32 | 700 | 1.1 | -0.018em | — | Page title (live token) | | h2 | CVS Sans | 28 | 600 | 1.2 | -0.012em | — | Major section head | | h3 | CVS Sans | 24 | 600 | 1.25 | -0.005em | — | Sub-section head | | h4 | CVS Sans | 20 | 600 | 1.3 | 0 | — | Card title, block head | | h5 | CVS Sans | 18 | 600 | 1.35 | 0 | — | Small heading, list group title | | body-lg | CVS Sans | 18 | 400 | 1.55 | 0 | — | Lead paragraph, intro copy | | body | CVS Sans | 16 | 400 | 1.55 | 0 | — | Default body (live token) | | body-sm | CVS Sans | 14 | 400 | 1.5 | 0 | — | Secondary copy, dense lists | | label | CVS Sans | 13 | 500 | 1.4 | 0 | — | Form labels, field captions | | caption | CVS Sans | 12 | 500 | 1.4 | 0.02em | — | Footnotes, legal micro-text | | button | CVS Sans | 16 | 600 | 1.0 | 0 | — | CTA labels | | nav-link | CVS Sans | 15 | 500 | 1.0 | 0 | — | Header department links | | badge | CVS Sans | 12 | 600 | 1.0 | 0.04em | uppercase | Status pills, count badges | | price | CVS Sans | 24 | 700 | 1.0 | -0.01em | tnum | Product / service price | | overline | CVS Sans | 12 | 600 | 1.2 | 0.08em | uppercase | Eyebrow / category label above headings | ### Principles - **One family, weight-driven hierarchy.** CVS Sans carries everything; the difference between a headline and body is size + weight, not a second typeface. This keeps health copy consistent and legible end to end. - **Body is generous.** Body at 16/400 with 1.55 line-height is deliberately roomy — pharmacy and plan copy must be effortless to read for every age and ability. - **Headlines are confident, not loud.** Display weights top out at 700 with tight negative tracking; CVS never resorts to all-caps shouting for headlines. Uppercase is reserved for badges and overlines only. - **Tabular numerals on numbers that align.** `tnum` is enabled on prices, dosage counts, and quantity tables so columns line up. - **Tight tracking on large type, neutral on body.** Display sizes carry -0.02em to -0.03em; body sits at 0 for maximum readability. - **Emphasis steps weight, not colour.** Inline emphasis goes to 500–600 weight rather than recolouring text red — red is reserved for links and actions. - **Inter / IBM Plex Sans are the substitutes.** When CVS Sans is unavailable, fall back to a humanist sans with open apertures and a tall x-height, never a geometric or condensed face. ## 4. Component Stylings ### Buttons **`button-primary`** — the canonical action button. CVS red (`#cc0000`) fill, white text in `button` (16/600), 8px radius, 10×16px padding, ~44px height. Hover deepens to `#a30000`; active to `#8a0000`. Used for "Refill prescription", "Find a store", "Continue", "Add to cart". The 8px radius is the brand's default — square or full-pill action buttons read off-brand. **`button-secondary`** — white fill, 1px CVS red (`#cc0000`) outline, red text. 8px radius, same height. Used for "Sign in", "See details", red-coded secondary actions over white surfaces. Hover fills with `surface-red-tint` (`#fdeaea`). **`button-ghost`** — transparent fill, 1px black (`#000000`) outline, black text. 8px radius. The neutral secondary for "Cancel", "Learn more", and pairings beside a primary red button where a second red would over-emphasize. **`button-text`** — plain CVS red (`#cc0000`) text, no surface or border. Underlined on hover. Used for "Show more", "View all", inline tertiary actions. ### Cards **`card`** — content / product / service card. White surface, 1px `#d7d7d7` hairline border, 12px radius, 24px padding. No shadow at rest — structure comes from the border. Used for service tiles ("Pharmacy", "MinuteClinic", "ExtraCare"), article cards, and product tiles. **`card-interactive`** — clickable variant. Same base; on hover gains a soft single-layer lift (`rgba(0,0,0,0.08) 0 4px 12px`) and the border shifts from `#d7d7d7` to CVS red (`#cc0000`) over 240ms. No transform / scale — the lift is shadow + border only. **`feature-panel`** — larger marketing panel. White or `bg-soft` (`#f7f7f7`) ground, 16px radius, 32–48px padding. Holds a headline, supporting copy, and a single red CTA. The page's largest surface unit. ### Badges, Tags, Pills **`badge`** — solid CVS red (`#cc0000`) pill with white uppercase text in `badge` (12/600, 0.04em). 9999px radius, 4×10px padding. Used for "Ready", "New", and count badges on cart and notifications. **`badge-soft`** — soft variant: `surface-red-tint` (`#fdeaea`) ground with CVS red (`#cc0000`) text. Used for savings, ExtraCare offers, and pharmacy callouts where a solid red would over-weight the row. **`chip`** — filter / category chip. `surface-muted` (`#efefef`) ground, black text, 9999px radius, 6×12px padding. Selected state toggles to CVS red ground with white text. **status badges (semantic)** — success uses `success` green text on `success-soft` ground; warning uses `warning` amber on `warning-soft`; error uses `danger` red on `danger-soft`. All rounded 9999px or 8px depending on context. ### Inputs / Forms **`input`** — white surface, 1px `#767676` border, 8px radius, ~44px height, 10×12px padding. Label sits above in `label` (13/500). On focus the border thickens to 2px CVS red (`#cc0000`) with a red ring. Error state borders in `danger` red with an `alert-error` message below. **`select`** — same look as `input` with a chevron indicator on the right. **`checkbox` / `radio`** — 20×20px, 1px `#767676` border at rest, fills CVS red (`#cc0000`) with a white check / dot when selected. **`alert-success` / `alert-error`** — full-width banners: success is `success-soft` (`#e7f3ec`) ground with `success` green border and text; error is `danger-soft` (`#fdeaea`) ground with `danger` red border and text. 8px radius. ### Navigation **`header`** — full-width white bar, 64px height, 1px `#d7d7d7` bottom hairline. Logo (the CVS heart) flush left, primary department links centred-left, utility actions (account, store locator, cart) flush right. Stays light — no dark chrome. **`nav-link`** — black text in `nav-link` (15/500). On hover / active a 2px CVS red (`#cc0000`) underline grows from centre. The red underline is the brand's navigation signature. **`dropdown-menu`** — opens beneath a nav item; white surface, 8px radius, 1px hairline border, hover-card shadow. Menu items in 15/500 black, red underline on hover. **`footer`** — quiet light footer on `bg-soft` (`#f7f7f7`) or white with a top hairline. Multi-column link list in `body-sm` (14/400) black; section heads in 500 weight. Legal micro-text in `caption`. **`breadcrumb`** — `text-muted` (`#5b5b5b`) text with `/` or `›` separators in `body-sm`; the current page is non-linked. ## 5. Layout Principles ### Spacing System - Base unit: **4px** - Scale: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96` - Section padding (vertical): **48–96px** between major bands — generous breathing room is part of the trust register - Card internal padding: **24px** for content cards; **32–48px** for feature panels - Gutters: **24px** between cards in grid view; **16px** between dense list rows; **8–12px** between adjacent inline controls - Form field spacing: **16px** between stacked fields; **8px** between a label and its input ### Grid & Container - Max content width: **1280px** centred - Prose / article width: **720px** for long-form reading comfort - Homepage / landing: 3-column service-card grid at desktop, collapsing to 2-up then 1-up - Product / category grids: 4-column at desktop with 24px gutters - Two-column content + rail layouts (e.g. pharmacy account): ~66% main / ~34% sidebar - Footer: 4-column link list at desktop, stacking to a single accordion column at mobile ### Whitespace Philosophy CVS leans on **whitespace as a calming, trust-building device**. Sections breathe with 48–96px vertical padding; cards carry roomy 24px internal padding; type runs at a generous 1.55 line-height. Unlike a dense big-box retailer, CVS resists crowding — the goal is for a stressed patient or caregiver to find the next correct action without visual noise. Density is acceptable in account / pharmacy data tables, but marketing and entry flows stay open. ### Section Cadence The page alternates between **white bands** (default) and **soft-grey bands** (`#f7f7f7`) to chunk content without hard rules. A typical homepage rhythm is: white hero with a single red CTA → soft-grey service-card row → white feature panel → soft-grey supporting content → light footer. Red appears as punctuation in each band — one CTA, one underline, one badge — never as a band background. ## 6. Shapes & Radius Scale | Tier | Value | Use | |------|-------|-----| | Micro | 2px | Tight inline tags, dense table-cell corners | | Standard | 4px | Small chips, inline code, helper boxes | | Comfortable | 8px | Buttons, inputs, selects, alerts — the default interactive radius | | Relaxed | 12px | Content cards, product / service tiles | | Large | 16px | Feature panels, modals, hero cards | | Pill | 9999px | Status badges, filter chips, avatars, count bubbles | The **8px radius** on buttons and inputs is the brand's default interactive shape — soft enough to feel modern and friendly, restrained enough to read as trustworthy and clinical. Full pills are deliberately reserved for chips and status badges so the action buttons never look like tags. There are no compound radii in mainline UI; every surface rounds uniformly. ## 7. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow, 1px hairline border | Body, cards at rest, header, footer (~95% of surfaces) | | 1 — Hover Card | `rgba(0,0,0,0.08) 0 4px 12px` + red border | Interactive cards on hover, dropdown menus | | 2 — Modal | `rgba(0,0,0,0.16) 0 8px 24px` | Centred dialogs, sheets | | 3 — Scrim | `rgba(0,0,0,0.55)` | Modal backdrop | ### Shadow Philosophy CVS stays flat. Structure is carried by **hairline borders** (`#d7d7d7` quiet, `#000000` strong) rather than by elevation. The only shadow in normal flow is the single-layer hover lift on interactive cards, and even that is paired with a border colour shift to CVS red so the affordance reads without heavy depth. Modals get a slightly stronger drop, but there is no atmospheric, multi-layer, or coloured-shadow language anywhere. The brand position: a health interface should feel clean and grounded, not floaty — depth should never compete with legibility. ## 8. Interaction & Motion ### Easing - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover and colour transitions - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry, dropdown open - **Out**: `cubic-bezier(0.0, 0, 0.2, 1)` — toast / banner appearance ### Durations | Bucket | Value | Use | |--------|-------|-----| | Fast | 150ms | Hover colour swap, focus ring, nav underline | | Standard | 240ms | Card hover lift, dropdown open, modal enter | | Slow | 320ms | Banner / toast slide, page-section reveal | ### Per-Component Recipes - **CTA hover**: background transitions from `#cc0000` to `#a30000` over 150ms. No transform, no scale. - **CTA press**: deepens further to `#8a0000` for 150ms on `:active`. - **Nav-link hover**: a 2px CVS red underline grows from the centre outward over 150ms. - **Card hover**: shadow appears (`rgba(0,0,0,0.08) 0 4px 12px`) and the border shifts from `#d7d7d7` to CVS red over 240ms. No lift transform. - **Input focus**: border thickens to 2px CVS red with a red ring fading in over 150ms. - **Dropdown open**: 240ms emphasized fade + 4px slide-down from the trigger. - **Banner / toast**: slide + fade in over 320ms ease-out; auto-dismiss for non-critical messages. ### Page Transitions Page-to-page navigation fires a hard navigation with no transition — CVS prioritizes perceived speed and predictability over choreographed transitions. In-page reveals (accordion expand, content load) use the standard 240ms ease. ### Reduced Motion Respects `prefers-reduced-motion: reduce`. All slides and transforms are suppressed; colour transitions and focus rings remain so affordances stay legible. Modal enter degrades to opacity-only. The nav underline appears instantly rather than growing. ## 9. Accessibility & A11y ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | #000000 ink on #ffffff canvas | 21.0 | AAA (maximum) | | #ffffff on #cc0000 CVS red CTA | 5.9 | AA body / AAA large | | #cc0000 CVS red on #ffffff | 5.9 | AA body / AAA large | | #5b5b5b muted on #ffffff | 7.0 | AAA | | #767676 soft on #ffffff | 4.5 | AA | | #1f7a3d success on #ffffff | 4.9 | AA | | #cc0000 on #fdeaea (badge-soft) | 5.3 | AA | The core pair — true black (`#000000`) ink on white (`#ffffff`) — hits **21.0, the maximum possible contrast ratio (AAA)**. This is the brand's defining accessibility commitment: a health audience that spans every age and visual ability gets the most legible text pairing there is. CVS red on white sits at **5.9 (AA body, AAA large)**, comfortably passing for buttons, links, and large headings, while muted metadata stays at 7.0 (AAA). Red is never used as small text on a coloured background where it would fall below AA. ### Focus Indicators Focus ring is **2px solid CVS red (`#cc0000`)** with 2px outline-offset. Buttons, inputs, links, chips, and cards all gain the red ring on `:focus-visible`. Red holds strong contrast on the white canvas and ties focus visually to the brand action colour. ### ARIA Patterns - **Primary nav**: `role="navigation"` with `aria-label="Primary"`; the cart utility carries `aria-label="Cart, 2 items"`. - **Service / product card**: wrapped in `` with a verbose `aria-label` describing the destination and any status. - **Status badge**: rendered with a text equivalent (e.g. `aria-label="Prescription ready"`), not colour alone. - **Dropdown menu**: `role="menu"` with `role="menuitem"` per link; arrow keys navigate, Escape closes. - **Alerts**: success / error banners use `role="status"` (polite) or `role="alert"` (assertive for errors) with `aria-live`. - **Form fields**: every input has a programmatically associated ``; errors use `aria-describedby` pointing to the message. ### Keyboard Navigation - Header: Tab moves logo → primary nav links → utility (account / store locator / cart) - Content: Tab through cards and links in document order; cards are single focusable targets - Forms: Tab through fields top-to-bottom; Enter submits; errors move focus to the first invalid field - Menus: arrow keys navigate items, Escape closes and returns focus to the trigger ### Screen Reader Hints CVS prefers verbose `aria-label` over icon-only controls. Status is always conveyed in text as well as colour (success green and danger red are both backed by labels and icons), so a colour-blind or screen-reader user never depends on the red/green distinction alone. ### Reduced Motion All transitions degrade to opacity-only or instant when `prefers-reduced-motion: reduce`. Slides, the growing nav underline, and card-hover transforms are suppressed; focus rings and colour states remain. ## 10. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Header collapses to logo + hamburger + cart; nav becomes a drawer; grids stack 1-up; footer becomes accordion | | Tablet | 640–1024px | Condensed header with key nav links; card grids 2-up; sidebar drops below main | | Desktop | 1024–1280px | Full primary nav with dropdowns; card grids 3-up; two-column content + rail | | Wide | 1280–1536px | Content caps at 1280px centred; product grids 4-up; extra side gutters | ### Touch Targets - Primary CTAs: 44px height — meets AA / AAA - Inputs and selects: 44px height — comfortable - Nav links and chips: minimum 44×44px hit area with inner padding - Icon utility buttons (cart, account): 44×44px tap area even when the glyph is smaller ### Collapsing Strategy - Header: utility labels collapse to icons first, then primary nav moves into a hamburger drawer at <640px - Card grids: column count steps down cleanly (4 → 3 → 2 → 1); gutters compress from 24px → 16px - Two-column layouts: the rail/sidebar drops beneath the main column at <1024px - Footer: multi-column link lists collapse to a stacked accordion at mobile - Tables: pharmacy / account tables switch to stacked label-value cards on narrow screens ### Image Behavior Service and product imagery uses `aspect-ratio` boxes with `object-fit: cover` for photography and `contain` for product shots on white. Hero imagery scales to full-bleed within the 1280px container; alt text is required on all meaningful images. ### Container Queries Used in card-dense modules: when a card narrows below ~280px, the inline CTA drops beneath the title and metadata, and secondary text truncates to a single line with an accessible full label. ## 11. Content & Voice ### Tone Clear, reassuring, and human — the voice of a trusted pharmacist who explains things plainly and never wastes your time. CVS Health speaks with warmth and authority about health without jargon or alarm. Headlines lead with the patient benefit ("Get your prescriptions delivered", "Care that comes to you") rather than with marketing flourish. The register is professional but never cold; it is built to lower a stressed visitor's anxiety, not raise it. ### Microcopy Patterns - **Button verbs**: "Refill prescription", "Find a store", "Schedule a visit", "Sign in", "Continue" — direct and outcome-named - **Error message recipe**: `[What went wrong] + [How to fix]` — e.g. "We couldn't find that prescription. Check the Rx number and try again." - **Success confirmations**: "Prescription ready for pickup", "Order placed", "Appointment scheduled" — short and reassuring - **Field labels**: short, plain, and specific — "Date of birth", "Rx number", "ZIP code" - **Status urgency**: "Ready today", "Refill due in 3 days" — names the timeframe, never just a colour ### Empty States Empty prescriptions: "You have no active prescriptions. Transfer or add one to get started." — names the next action. Empty cart: "Your cart is empty. Browse pharmacy and health products to get started." — names the destination. Empty search: "We couldn't find results for [query]. Check your spelling or try a different term." — names cause + remedy. ### CTA Verb Conventions - Primary: **"Refill prescription"**, **"Find a store"**, **"Schedule a visit"**, **"Continue"**, **"Sign in"** - Account / pharmacy: **"Transfer a prescription"**, **"Set up auto-refill"**, **"View prescription"** - Tertiary: **"Learn more"**, **"View all"**, **"See details"** - Avoided: "Submit", "Click here", vague "Go" — every CTA names the outcome and reads calm, never urgent-for-urgency's-sake ## 12. Dark Mode & Theming **Light-only on the public web.** CVSHealth.com and the storefront flows render exclusively on the white canvas with near-black ink and CVS red accent — there is no dark variant offered. The brand position is deliberate: maximum-contrast black-on-white is the most legible pairing for health information across every age and ability, and a dark theme would dilute that commitment. The single brand red is also tuned for white grounds; on a dark canvas it would need re-tuning to hold contrast, which the brand avoids. Any theming should keep the white canvas, the near-black ink, and the one CVS red intact rather than introducing a dark mode. ## 13. Lineage & Influences CVS Health's web identity sits squarely in the modern American healthcare-and-pharmacy register: a clinical white canvas, true near-black ink for maximum legibility, and a single brand red — the heart in the CVS logo — carrying every accent. The lineage blends retail-pharmacy heritage with patient-trust design language. The red-on-white discipline echoes the broader US drugstore tradition (Walgreens, the Target pharmacy counter), but CVS pulls it toward a quieter, more corporate-health tone — the shift that accompanied the brand's repositioning from "CVS/pharmacy" to "CVS Health" and its expansion into clinics, insurance, and care services. The custom CVS Sans family is the move that most distinguishes the brand from its peers: a humanist, highly-legible workhorse sans commissioned so prescriptions, dosages, and plan copy read cleanly at small sizes on web, in-app, and on in-store signage — a legibility commitment that parallels the enterprise humanist-sans tradition of IBM Plex and the Carbon Design System. What CVS rejects is decoration: no gradients, no photography-as-texture behind text, no playful illustration in the core flows, and emphatically no dark mode. The system trusts whitespace, a strict 4px grid, high-contrast type, and one confident red — because a health brand earns trust through clarity, not flourish. **Influences:** - **Walgreens** ([walgreens.com](https://www.walgreens.com)) — peer US pharmacy; the canonical red-on-white drugstore palette and dense service-card layout - **Mayo Clinic** ([mayoclinic.org](https://www.mayoclinic.org)) — patient-trust healthcare tone: legibility-first, calm, high-contrast clinical register - **Target** ([target.com](https://www.target.com)) — retail red-on-white discipline and clean big-box grid; CVS pharmacy counters live inside Target stores - **Aetna** ([aetna.com](https://www.aetna.com)) — sibling CVS Health insurance brand; corporate-health card systems and plan-information layout - **IBM Plex / Carbon Design** ([ibm.com/plex](https://www.ibm.com/plex)) — enterprise humanist-sans legibility tradition that CVS Sans parallels for dense health copy ## 14. Do's and Don'ts **Do** - Build on a pure white (`#ffffff`) canvas with true near-black (`#000000`) ink - Use CVS red (`#cc0000`) as the single brand accent — CTA fill, link, focus ring, badge, nav underline - Render primary buttons as CVS red with white text at 8px radius, ~44px tall - Use CVS Sans (humanist sans fallback) for both display and body — hierarchy via weight + size - Set body at 16/400 with a generous 1.55 line-height for health-copy legibility - Keep H1 at 32/700 with tight -0.018em tracking — confident, not shouting - Carry structure with hairline borders; reserve shadows for hover and modals only - Use the red focus ring (`2px #cc0000`) on every focusable element - Reserve full pills (9999px) for chips and status badges, not action buttons - Convey status in text as well as colour (success green / danger red always labelled) - Use whitespace generously — 48–96px between sections — to keep flows calm **Don't** - Don't introduce a second competing accent colour — CVS is a one-red system - Don't use CVS red as a background wash behind running text - Don't substitute a remembered "brighter" or "darker" CVS red — the brand red is `#cc0000` - Don't ship a dark mode — the brand is light-only on the public web - Don't pair red small text on coloured grounds where it drops below AA contrast - Don't use all-caps for headlines — uppercase is reserved for badges and overlines - Don't crowd the page; resist big-box density in marketing and entry flows - Don't add gradients, decorative photography behind text, or atmospheric multi-layer shadows - Don't use a geometric or condensed display face — CVS Sans is humanist; fallbacks must be too - Don't write urgent or alarmist microcopy — the voice is calm, plain, reassuring - Don't say "Submit" or "Click here" — every CTA names its outcome ## 15. Agent Prompt Guide ### Quick Color Reference ``` Canvas: #ffffff Page Soft: #f7f7f7 Ink: #000000 CVS Red: #cc0000 Brand Hover: #a30000 Brand Active: #8a0000 Red Tint: #fdeaea Link: #cc0000 Muted: #5b5b5b Border Soft: #d7d7d7 Success: #1f7a3d Info Blue: #005a9c ``` ### Example Component Prompts - "Create a CVS Health primary button: 8px radius, ~44px tall, CVS red (`#cc0000`) fill, white text in a humanist sans 16/600, 10×16px padding. Hover deepens to `#a30000`, active to `#8a0000`. Red 2px focus ring." - "Design a CVS service card: white surface, 1px `#d7d7d7` hairline border, 12px radius, 24px padding. Title in 20/600 near-black, supporting copy in 16/400 at 1.55 line-height, a single CVS red text link 'Learn more' at the bottom. On hover, add a soft `rgba(0,0,0,0.08) 0 4px 12px` shadow and shift the border to CVS red (`#cc0000`)." - "Build a CVS header: full-width white bar, 64px tall, 1px `#d7d7d7` bottom hairline. CVS heart logo flush left, primary nav links in 15/500 near-black centred-left (each gains a 2px red underline on hover), account / store locator / cart utilities flush right. Light chrome — no dark bar." - "Create a CVS hero section: white canvas, H1 in CVS Sans 32/700 near-black with -0.018em tracking, lead paragraph in 18/400 at 1.55 line-height, and one CVS red (`#cc0000`) primary CTA 'Refill prescription'. Generous 64–96px vertical padding, no background image behind the text." - "Design a CVS form field: stacked label in 13/500 above a white input with a 1px `#767676` border, 8px radius, ~44px height, 10×12px padding. On focus, thicken the border to 2px CVS red (`#cc0000`) with a red ring. Error state borders red with a `#fdeaea` error banner below." - "Build a CVS status badge: a 9999px pill, CVS red (`#cc0000`) ground, white uppercase text 12/600 at 0.04em — 'READY'. Provide a soft variant on `#fdeaea` ground with `#cc0000` text for savings / ExtraCare callouts." ### Iteration Guide 1. **Start with white and near-black.** The canvas is `#ffffff` and ink is `#000000` — 21:1 contrast. If your base isn't clean white with true near-black text, it isn't CVS. 2. **One red, used as punctuation.** CVS red (`#cc0000`) is the only accent — CTA, link, focus ring, badge, nav underline. If a second accent appears, remove it. 3. **Exactly the right red.** CVS red is `#cc0000` — a brighter or darker red reads off-brand. Match it precisely. 4. **8px is the action radius.** Buttons and inputs round at 8px; cards at 12px; panels at 16px. Pills are for chips and badges only — never for action buttons. 5. **One humanist sans, weight-driven.** Use CVS Sans (Inter / IBM Plex Sans as fallback) for everything; build hierarchy from weight + size, not a second typeface. 6. **Roomy body.** Body at 16/400 with 1.55 line-height. Tight body or small type reads off-brand for a health audience. 7. **Flat with hairlines.** Carry structure with `#d7d7d7` borders; add shadow only on hover and in modals. No atmospheric or coloured shadows. 8. **Calm, plain voice.** CTAs name outcomes ("Refill prescription"), errors say what + how to fix, and nothing shouts. Reassurance over urgency.