---
version: 1.0
name: Patterson-Companies-design-system
description: A clean corporate healthcare-distribution interface for Patterson Companies, Inc. The system anchors on generous white canvas with navy (#003767) structure and sky-blue (#00A8E1) voltage. Brand character comes from the navy→sky hover shift on every primary action, pill-shaped buttons, navy-tinted shadows, and oversized sky-blue statistics used as proof. Type voice is a single humanist sans — Proxima Nova (Typekit kit rul6mjk; Figtree fallback, Arial for PowerPoint), which ships only weights 400 and 700. Headlines are navy at every level; body is cool gray. Buttons and fields carry small radii, not pills. Never flashy; calm, clinical, and trustworthy since 1877.

colors:
  navy: "#003767"
  sky: "#00A8E1"
  blue: "#147EC2"
  blue-light: "#6DCFF6"
  green: "#7BC24D"
  teal: "#00817D"
  purple: "#522E91"
  primary-hover: "#315D83"
  primary-disabled: "#93A9BC"
  secondary-hover: "#96DBF6"
  secondary-disabled: "#DAEDF5"
  gray-warm: "#AFA593"
  slider-nav: "#D9D9D9"
  navy-80: "#335f85"
  navy-60: "#6687a4"
  navy-40: "#99afc2"
  navy-20: "#ccd7e1"
  navy-10: "#e5ebf0"
  sky-80: "#33b9e7"
  sky-60: "#66caed"
  sky-40: "#99dcf3"
  sky-20: "#ccedf9"
  sky-10: "#e5f6fc"
  ink: "#1d1d20"
  body: "#58585B"
  muted: "#7c7c80"
  gray-400: "#a3a3a7"
  hairline: "#e2e2e4"
  hairline-strong: "#c9c9cc"
  border-field: "#AFA593"
  canvas: "#FFFFFF"
  surface-subtle: "#f6f7f8"
  surface-muted: "#ECECEC"
  surface-brand: "#003767"
  on-brand: "#FFFFFF"
  success: "#00817D"
  success-bg: "#e5f2f1"
  info: "#147EC2"
  info-bg: "#e7f1f9"
  warning: "#d98a00"
  warning-bg: "#fbf1df"
  danger: "#c0392b"
  danger-bg: "#f8eae8"

typography:
  display:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 72px
    fontSizeMin: 44px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.02em
  h1:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 52px
    fontSizeMin: 36px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.02em
  h2:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 40px
    fontSizeMin: 28px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.01em
  h3:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 28px
    fontSizeMin: 22px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  h4:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  h5:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  stat:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 64px
    fontSizeMin: 40px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.02em
  lead:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0
  body-md:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0
  body-sm:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0
  caption:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0
  eyebrow:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
    textTransform: uppercase
  button:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0
  nav-link:
    fontFamily: "proxima-nova, Figtree, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  code:
    fontFamily: "IBM Plex Mono, ui-monospace, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0

rounded:
  btn: 5px
  btn-elevated: 6px
  field: 2px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 10px
  xl: 16px
  2xl: 24px
  pill: 999px

spacing:
  1: 4px
  2: 8px
  3: 12px
  4: 16px
  5: 24px
  6: 32px
  7: 40px
  8: 48px
  9: 64px
  10: 80px
  11: 96px
  12: 128px
  section: 96px

shadows:
  xs: "0 1px 2px rgba(0,55,103,0.06)"
  sm: "0 1px 3px rgba(0,55,103,0.08), 0 1px 2px rgba(0,55,103,0.06)"
  md: "0 4px 12px rgba(0,55,103,0.10), 0 2px 4px rgba(0,55,103,0.06)"
  lg: "0 12px 28px rgba(0,55,103,0.12), 0 4px 10px rgba(0,55,103,0.07)"
  xl: "0 24px 48px rgba(0,55,103,0.16)"
  download: "0 4px 8px rgba(0,0,0,0.08), 0 0 4px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.12)"
  ring-focus: "0 0 0 3px rgba(0,168,225,0.45)"
  ring-error: "0 0 0 3px rgba(192,57,43,0.35)"

motion:
  ease-standard: "cubic-bezier(0.2,0,0.2,1)"
  ease-out: "cubic-bezier(0.16,1,0.3,1)"
  dur-fast: 120ms
  dur-base: 200ms
  dur-slow: 320ms

layout:
  container-max: 1240px
  container-text: 720px
  control-h-sm: 34px
  control-h-md: 44px
  control-h-lg: 54px
  border-w: 1px
  border-w-thick: 2px

components:
  button-primary:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.on-brand}"
    typography: "{typography.button}"
    rounded: "{rounded.btn}"
    padding: 15px 30px
  button-primary-active:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-brand}"
    rounded: "{rounded.btn}"
  button-primary-disabled:
    backgroundColor: "{colors.primary-disabled}"
    textColor: "{colors.on-brand}"
    rounded: "{rounded.btn}"
  button-secondary:
    backgroundColor: "{colors.blue-light}"
    textColor: "{colors.navy}"
    typography: "{typography.button}"
    rounded: "{rounded.btn}"
    padding: 15px 30px
  button-secondary-active:
    backgroundColor: "{colors.secondary-hover}"
    textColor: "{colors.navy}"
    rounded: "{rounded.btn}"
  button-secondary-disabled:
    backgroundColor: "{colors.secondary-disabled}"
    textColor: "{colors.navy}"
    rounded: "{rounded.btn}"
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.navy}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 0 20px
    height: 44px
  button-ghost-active:
    backgroundColor: "{colors.navy-10}"
    textColor: "{colors.navy}"
    rounded: "{rounded.pill}"
  button-on-navy:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.navy}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 0 28px
    height: 44px
  icon-button:
    backgroundColor: transparent
    textColor: "{colors.navy}"
    rounded: "{rounded.pill}"
    size: 44px
  text-link:
    backgroundColor: transparent
    textColor: "{colors.blue}"
    typography: "{typography.body-md}"
  text-link-active:
    backgroundColor: transparent
    textColor: "{colors.navy}"
    typography: "{typography.body-md}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.navy}"
    typography: "{typography.nav-link}"
    height: 80px
    shadow: "{shadows.sm}"
  utility-bar:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.on-brand}"
    typography: "{typography.body-sm}"
    height: 40px
  hero-band-navy:
    backgroundColor: "{colors.surface-brand}"
    textColor: "{colors.on-brand}"
    typography: "{typography.display}"
    padding: "{spacing.11}"
  hero-band-photo:
    backgroundColor: "{colors.overlay-scrim}"
    textColor: "{colors.on-brand}"
    typography: "{typography.display}"
    padding: "{spacing.11}"
  content-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    typography: "{typography.body-md}"
    padding: "{spacing.11}"
  content-band-subtle:
    backgroundColor: "{colors.surface-subtle}"
    textColor: "{colors.body}"
    typography: "{typography.body-md}"
    padding: "{spacing.11}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    borderColor: "{colors.hairline}"
    borderWidth: "{layout.border-w}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.6}"
    shadow: "{shadows.sm}"
  card-interactive-active:
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.lg}"
    shadow: "{shadows.lg}"
    transform: translateY(-3px)
  card-accent-stripe:
    backgroundColor: "{colors.canvas}"
    borderTopColor: "{colors.sky}"
    borderTopWidth: 4px
    rounded: "{rounded.lg}"
    padding: "{spacing.6}"
    shadow: "{shadows.sm}"
  card-on-navy:
    backgroundColor: "{colors.navy-80}"
    textColor: "{colors.on-brand}"
    rounded: "{rounded.lg}"
    padding: "{spacing.6}"
  stat:
    backgroundColor: transparent
    textColor: "{colors.sky}"
    typography: "{typography.stat}"
  stat-label:
    backgroundColor: transparent
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
  eyebrow:
    backgroundColor: transparent
    textColor: "{colors.sky}"
    typography: "{typography.eyebrow}"
  badge:
    backgroundColor: "{colors.navy-10}"
    textColor: "{colors.navy}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-accent:
    backgroundColor: "{colors.sky}"
    textColor: "{colors.on-brand}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-field}"
    borderWidth: "{layout.border-w}"
    typography: "{typography.body-md}"
    rounded: "{rounded.field}"
    padding: 11px 12px
  input-focused:
    backgroundColor: "{colors.canvas}"
    borderColor: "{colors.sky}"
    rounded: "{rounded.field}"
    shadow: "{shadows.ring-focus}"
  input-error:
    backgroundColor: "{colors.canvas}"
    borderColor: "{colors.danger}"
    rounded: "{rounded.md}"
    shadow: "{shadows.ring-error}"
  select:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline-strong}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    height: 44px
  checkbox:
    backgroundColor: "{colors.canvas}"
    borderColor: "{colors.hairline-strong}"
    rounded: "{rounded.sm}"
    size: 20px
  checkbox-checked:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.on-brand}"
    rounded: "{rounded.sm}"
    size: 20px
  radio:
    backgroundColor: "{colors.canvas}"
    borderColor: "{colors.hairline-strong}"
    rounded: "{rounded.pill}"
    size: 20px
  radio-checked:
    backgroundColor: "{colors.navy}"
    borderColor: "{colors.navy}"
    rounded: "{rounded.pill}"
    size: 20px
  switch:
    backgroundColor: "{colors.gray-400}"
    rounded: "{rounded.pill}"
    width: 44px
    height: 24px
  switch-checked:
    backgroundColor: "{colors.sky}"
    rounded: "{rounded.pill}"
    width: 44px
    height: 24px
  alert-info:
    backgroundColor: "{colors.info-bg}"
    textColor: "{colors.ink}"
    borderColor: "{colors.info}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "{spacing.4}"
  alert-success:
    backgroundColor: "{colors.success-bg}"
    textColor: "{colors.ink}"
    borderColor: "{colors.success}"
    rounded: "{rounded.md}"
    padding: "{spacing.4}"
  alert-warning:
    backgroundColor: "{colors.warning-bg}"
    textColor: "{colors.ink}"
    borderColor: "{colors.warning}"
    rounded: "{rounded.md}"
    padding: "{spacing.4}"
  alert-danger:
    backgroundColor: "{colors.danger-bg}"
    textColor: "{colors.ink}"
    borderColor: "{colors.danger}"
    rounded: "{rounded.md}"
    padding: "{spacing.4}"
  tab:
    backgroundColor: transparent
    textColor: "{colors.body}"
    typography: "{typography.nav-link}"
    padding: 12px 20px
  tab-active:
    backgroundColor: transparent
    textColor: "{colors.navy}"
    borderBottomColor: "{colors.sky}"
    borderBottomWidth: 3px
    typography: "{typography.nav-link}"
  cta-band-navy:
    backgroundColor: "{colors.surface-brand}"
    textColor: "{colors.on-brand}"
    typography: "{typography.h2}"
    padding: "{spacing.9}"
  footer:
    backgroundColor: "{colors.surface-brand}"
    textColor: "{colors.navy-20}"
    typography: "{typography.body-sm}"
    padding: "{spacing.9}"
---

## Overview

Patterson Companies is a **corporate healthcare-distribution** brand — an international distributor for the oral-health (dental) and animal-health (veterinary and production) industries, founded 1877. The interface reads as **calm, clinical, and trustworthy**: predominantly white canvas, navy structure, sky-blue voltage, and a great deal of white space. It is deliberately *not* expressive. Where a consumer brand reaches for gradients and texture, Patterson reaches for a hairline, a soft navy-tinted shadow, and a bigger number.

Brand promise: **Trusted Expertise. Unrivaled Support.**
Purpose: **We strengthen the people who keep us and our animals healthy.**

The system's voltage is the **navy / sky relationship**. Two notes on how production actually spends it — both verified against the live `theme-styles.min.css` (see [Verification](#verification-against-production)):
1. **Primary buttons darken-lighten within navy on hover** — `#003767` → `#315d83`. They do *not* flip to sky. The **secondary** button is the one carrying blue: a filled light-blue `#6DCFF6` with a navy label, hovering to `#96DBF6`.
2. **Statistics render as oversized numerals** (`{component.stat}`) — proof, not decoration. *86,000,000 households. 98% of customers in 1-to-2-day shipping. 60 fulfillment centers. Since 1877.*

Surface pacing alternates between three modes:
1. **White canvas** (`{colors.canvas}`) — the default floor, and by far the dominant one
2. **Subtle gray band** (`{colors.surface-subtle}` / `{colors.surface-muted}`) — quiet section separation
3. **Navy band** (`{colors.surface-brand}`) — hero, pre-footer CTA, footer; the emphasis surface

**Key Characteristics:**
- White-dominant canvas with navy structure. White is the brand's ground, not a neutral default.
- Navy `{colors.navy}` (#003767) for headings, chrome, and emphasis surfaces; sky `{colors.sky}` (#00A8E1) for accent, focus, links-in-emphasis, and statistics.
- **Radii are small and restrained.** Production runs 5–6px on buttons and 2px on fields. **Patterson is not a pill brand** — the `{rounded.pill}` token in this system is a deliberate divergence, not brand truth.
- **Shadows are soft and sparing.** Production uses neutral black at very low alpha (`rgba(0,0,0,0.04–0.12)`); this system tints them navy. Either reads correctly; the tint is a system choice.
- **Focus is a visible 3px sky ring** (`{shadows.ring-focus}`) — an accessibility improvement this system adds. Production ships no branded focus style.
- **No letter-spacing.** Production sets none, anywhere — including on uppercase labels. The negative display tracking in this system is a system choice.
- Single humanist sans across display and body — Proxima Nova, Figtree fallback, Arial for PowerPoint. No serif, no display face, no second family.
- Section rhythm `{spacing.section}` (96px), container capped at `{layout.container-max}` (1240px), text measure at `{layout.container-text}` (720px).
- Photography is warm, authentic, natural-light — practitioners, animals, operations. Never stock-abstract, never illustration.

---

## Colors

### Brand & Accent
- **Navy** (`{colors.navy}` — #003767, PMS 540): Headings, nav chrome, primary button fill, hero and footer surfaces. Reads as clear thought and trust. The brand's spine.
- **Sky** (`{colors.sky}` — #00A8E1, PMS 2995): The accent. Focus ring, statistics, card accent stripes, active tab underline, and the highlight stroke in two-tone icons. Reads as intelligence and communication.
- **Blue** (`{colors.blue}` — #147EC2, PMS 7683): Secondary depth; the default inline link color.
- **Blue Light** (`{colors.blue-light}` — #6DCFF6, PMS 297): **The secondary-button fill in production** — solid #6DCFF6 with a navy label, hovering to #96DBF6. Also depth on navy surfaces and chart fills.

### Interaction-state tokens (from production)
`--primary-hover` #315D83 · `--primary-disabled` #93A9BC · `--secondary-hover` #96DBF6 · `--secondary-disabled` #DAEDF5 · `--color-medium-grey` #AFA593 (a **warm taupe**, used for input borders — the one non-cool gray in the brand) · `--color-slider-nav` #D9D9D9.

### Tertiary — infographics only
`{colors.green}` #7BC24D (PMS 369) · `{colors.teal}` #00817D (PMS 7718) · `{colors.purple}` #522E91 (PMS 7679).
These exist **for charts, infographics, and presentation data only**. They never appear as page chrome, button fills, or section backgrounds.

### Tints
Navy and sky each carry a 5-step tint ramp for washes, disabled states, and on-navy layering: `{colors.navy-80}` · `{colors.navy-60}` · `{colors.navy-40}` · `{colors.navy-20}` · `{colors.navy-10}`, and `{colors.sky-80}` → `{colors.sky-10}`. `{colors.navy-10}` (#e5ebf0) is the standard ghost-control hover wash.

### Surface
- **Canvas** (`{colors.canvas}` — #FFFFFF): The page floor. Pure white — a clinical brand earns pure white.
- **Surface Subtle** (`{colors.surface-subtle}` — #f6f7f8): Barely-there band separation.
- **Surface Muted** (`{colors.surface-muted}` — #ECECEC, Cool Gray 1 @ 50%): The brand's official light-gray accent for web and email bands.
- **Surface Brand** (`{colors.surface-brand}` — #003767): Navy emphasis bands — hero, CTA, footer.
- **Hairline** (`{colors.hairline}` — #e2e2e4): The 1px structural border on white.
- **Hairline Strong** (`{colors.hairline-strong}` — #c9c9cc): Input borders and stronger dividers.
- **Overlay scrim** — `rgba(0,55,103,0.55)`: A **navy** scrim, ~55%, over photography when text must sit on an image. Never a black scrim.

### Text
- **Ink** (`{colors.ink}` — #1d1d20): Near-black for dense headings on light surfaces.
- **Navy** (`{colors.navy}`): Display headlines, section heads, emphasized headings. The preferred heading color.
- **Body** (`{colors.body}` — #58585B, Cool Gray 11): The default running-text color at 1.6 leading. Confirmed from production capture.
- **Muted** (`{colors.muted}` — #7c7c80): Captions, metadata, fine print.
- **On Brand** (`{colors.on-brand}` — #FFFFFF): Text on navy and sky surfaces.

### Semantic
- **Success** (`{colors.success}` — #00817D, teal) on `{colors.success-bg}` #e5f2f1
- **Info** (`{colors.info}` — #147EC2, blue) on `{colors.info-bg}` #e7f1f9
- **Warning** (`{colors.warning}` — #d98a00, amber) on `{colors.warning-bg}` #fbf1df
- **Danger** (`{colors.danger}` — #c0392b, red) on `{colors.danger-bg}` #f8eae8

Semantics are drawn from — or harmonized to — the tertiary palette rather than imported from a generic status set, so alerts never look foreign on a Patterson page.

### PowerPoint theme mapping
The official `PDCO_template.potx` slide master confirms the set: accent1 `#003767` · accent2 `#00A8E1` · accent3 `#147EC2` · accent4 `#7BC24D` · accent5 `#00817D` · accent6 `#522E91` · dk2 `#58585B` · lt2 `#ECECEC`.

### Slide master — reversed from the corporate PVV deck [V]
`assets/deck/patterson-slides.css` is the corporate *Purpose. Vision. Values.* PowerPoint master rebuilt on a 1920 × 1080 canvas (13.333in × 7.5in ⇒ 1in = 144px, 1pt = 2px). All three deck templates use it.

**Layouts** — `.lay-cover` (white copy column 27.65% + navy icon-collage panel, sky logo flag) · `.lay-bar` (navy icon rail 15.3% + `.well` at padding-left 383px — the workhorse) · `.lay-navy` (full-bleed navy, pattern bleeding off the left edge, sky `.peyebrow` top-right — section dividers) · `.lay-wave-navy` · `.lay-wave-light` · `.lay-plain`.

**Type**, verbatim from `slideMaster1` — title **48pt bold UPPERCASE** in *secondary* blue `#147EC2` (not navy; the one place blue outranks navy) · body **18pt bold** navy · statement 24pt · section word **72pt** white · footer **7pt** gray right-aligned, `©YEAR Patterson Companies | pattersoncompanies.com | #`.

**Do** keep slide shapes as **flat rectangles** — the master has no rounded corners anywhere, so the web `--radius-*` scale does not apply to slides. **Do** stack overlapping definition cards as a descending stair (navy → blue → sky). **Don't** put two Patterson logos on one slide — the rail and the cover panel already carry the mark.

**Values panel colours** (lifted from the deck's own artwork, and the only sanctioned use of tertiary colour as a full-bleed field): Passionate `#41B8DA` · Focused `#7BC24D` · People-First `#522E91` · Always Advancing `#147EC2`.

---

## Typography

### Font Family
One family does everything. **Proxima Nova** is the real brand face (Adobe Fonts / Typekit); **Figtree** is the loaded open fallback; **Arial** is the PowerPoint-safe substitute named in the official template. The stack is `proxima-nova, Figtree, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif`. `{typography.code}` uses IBM Plex Mono, and only inside documentation and code surfaces.

There is no display/body split. Hierarchy comes from **size and weight**, not from a second typeface — which is exactly why the weight discipline below matters.

### Hierarchy

| Token | Size (min → max) | Weight | Line Height | Tracking | Use |
|---|---|---|---|---|---|
| `{typography.display}` | 44 → 72px | 800 | 1.05 | -0.02em | Hero headline, deck covers |
| `{typography.stat}` | 40 → 64px | 800 | 1.05 | -0.02em | Big sky-blue numbers — the signature device |
| `{typography.h1}` | 36 → 52px | 700 | 1.15 | -0.02em | Page title |
| `{typography.h2}` | 28 → 40px | 700 | 1.15 | -0.01em | Section head |
| `{typography.h3}` | 22 → 28px | 700 | 1.2 | -0.01em | Sub-section, card group head |
| `{typography.h4}` | 20px | 600 | 1.2 | 0 | Card title |
| `{typography.h5}` | 17px | 600 | 1.2 | 0 | Small card title, list label |
| `{typography.lead}` | 20px | 400 | 1.6 | 0 | Hero sub-headline, section intro |
| `{typography.body-md}` | 16px | 400 | 1.6 | 0 | Default running text |
| `{typography.body-sm}` | 14px | 400 | 1.6 | 0 | Footer, metadata, table cells |
| `{typography.caption}` | 12px | 500 | 1.4 | 0 | Fine print, badge labels |
| `{typography.eyebrow}` | 12px | 700 | 1.4 | 0.08em | UPPERCASE overline above section heads |
| `{typography.nav-link}` | 15px | 600 | 1.4 | 0 | Nav items |
| `{typography.button}` | 16px | 600 | 1.0 | 0 | Button labels |
| `{typography.code}` | 14px | 400 | 1.6 | 0 | Code — IBM Plex Mono |

Display, h1–h3, and stat are fluid (CSS `clamp()`); everything below h3 is fixed.

### Principles
**Production reality, verified:** only **h1 (2.75rem / 44px) and h2 (2.25rem / 36px) are weight 800**. **h3 and h4 are both 1.5rem / 24px at weight 400** — regular, not bold. Body is **1.125rem / 18px at 1.5rem (24px) line-height** — a 1.33 ratio, tighter than this system's 1.6. Buttons are 0.9375rem / 15px at weight 600 with 15px × 30px padding (≈50px tall). Production sets **no `letter-spacing` anywhere in the stylesheet** — not on display sizes, not on uppercase labels.

So hierarchy in production comes from a **hard size drop with a weight drop** (800 at h1/h2, 400 from h3 down), not from a continuous bold ramp. This system's 700 weights at h3 and its negative tracking are conventions layered on top; the 800/400 split is the brand truth.

**Sky-blue is the emphasis mechanism inside type**, but sparingly: statistics, accent strokes, active underlines. Production **eyebrows are navy at 0.875rem / 14px weight 500**, not sky and not letter-spaced. Never bold-plus-color at the same time — pick one.

**Casing:** sentence case for body and most headings. Title Case only for the brand promise and product brand names ("Patterson Dental", "Patterson Veterinary", "Advantage Rewards"). Eyebrows and overlines are UPPERCASE at `{typography.eyebrow}` tracking. ALL-CAPS never runs longer than a short label.

### Note on Font Substitutes
Proxima Nova requires an Adobe Fonts embed. Until one is added, **Figtree** renders — a close humanist geometric with similar proportions and a compatible bold. **Montserrat** is a weaker third option (wider, rounder). **Arial** is correct and expected in PowerPoint. Never substitute Inter (too neutral/UI), Roboto, or any serif.

---

## Layout

### Spacing System
- **Base unit:** 4px.
- **Tokens:** `{spacing.1}` 4 · `{spacing.2}` 8 · `{spacing.3}` 12 · `{spacing.4}` 16 · `{spacing.5}` 24 · `{spacing.6}` 32 · `{spacing.7}` 40 · `{spacing.8}` 48 · `{spacing.9}` 64 · `{spacing.10}` 80 · `{spacing.11}` 96 · `{spacing.12}` 128.
- **Section padding:** 64–128px vertical; `{spacing.11}` (96px) is the default. Hero and closing bands go to `{spacing.12}` (128px).
- **Card internal padding:** `{spacing.6}` (32px) standard, `{spacing.5}` (24px) for compact and storefront-density cards.
- **Stack rhythm inside a band:** eyebrow → `{spacing.3}` → head → `{spacing.4}` → lead → `{spacing.6}` → content.

### Grid & Container
- **Max content width:** `{layout.container-max}` (1240px), centered, with a fluid `--gutter` of 20 → 64px.
- **Readable measure:** `{layout.container-text}` (720px) for article and documentation body copy.
- **Hero:** 6/6 or 7/5 split — headline + lead + button row left, photography right (or full-bleed photo with navy scrim).
- **Card grids:** 3-up desktop / 2-up tablet / 1-up mobile. Stat rows 4-up desktop / 2-up mobile.
- **Storefront product grids:** 4-up or 5-up desktop — higher density than corporate surfaces, and the one place density beats whitespace.

### Whitespace Philosophy
**White space is part of the brand.** Generous, uncramped, never dense on corporate and marketing surfaces — the calm is the message. Product and storefront surfaces are permitted to tighten (they carry catalogs and tables), but corporate pages, decks, and documentation stay roomy.

---

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Content bands, navy bands, footer |
| Hairline | 1px `{colors.hairline}` | Dividers, table rows, sub-nav |
| `{shadows.xs}` | 0 1px 2px navy @6% | Chips, subtle inline surfaces |
| `{shadows.sm}` | 0 1px 3px navy @8% | **Default card resting state**, sticky header |
| `{shadows.md}` | 0 4px 12px navy @10% | Dropdowns, flyout menus, popovers |
| `{shadows.lg}` | 0 12px 28px navy @12% | Card hover lift (paired with `translateY(-3px)`) |
| `{shadows.xl}` | 0 24px 48px navy @16% | Modals, full-screen sheets |

Elevation is **gentle**. This system tints every shadow `rgba(0,55,103,…)` for cool consistency. **Production instead uses neutral black at very low alpha** — its only elevation token is `--download-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 0 4px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.12)`, applied to download and external-link buttons. Both readings are acceptable; what matters is that alpha stays very low. Never a hard 1px offset shadow, and never a dark or high-contrast one.

### Focus & Rings
`{shadows.ring-focus}` — a 3px sky ring at 45% alpha — is the universal focus indicator on buttons, inputs, links, tabs, and cards. `{shadows.ring-error}` is its red counterpart on invalid inputs. **Focus rings are never removed**, including on navy surfaces where the sky ring still reads clearly.

### Motion
120–320ms only. `{motion.ease-standard}` for state changes, `{motion.ease-out}` for entrances. Permitted: color transitions, opacity fades, short (≤8px) slides, the 3px card lift, the 1px button press. **Not permitted:** bounces, springs, infinite loops, parallax, scroll-jacking, decorative animation.

### Transparency & Blur
Sparing. `--overlay-scrim` (navy @55%) over photography; `--blur-panel` (`saturate(140%) blur(12px)`) optionally on sticky headers. **Patterson is not a glassmorphism brand** — frosted panels, translucent cards, and blurred backdrops beyond the sticky header are off-brand.

---

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.xs}` | 2px | Micro elements — chart bars, progress fills |
| `{rounded.sm}` | 4px | Checkboxes, small tags, table cell wells |
| `{rounded.md}` | 6px | Inputs, selects, textareas, code blocks |
| `{rounded.lg}` | 10px | **Cards** — the system's signature container radius |
| `{rounded.xl}` | 16px | Large media containers, image frames |
| `{rounded.2xl}` | 24px | Feature panels, oversized hero cards |
| `{rounded.pill}` | 999px | **Buttons, badges, switches, avatars, icon buttons** |

The rule: **interactive → pill; container → 10px; field → 6px.** No interactive element is ever square-cornered.

### Photography & Imagery
Warm, authentic, natural-light photography of practitioners at work, animals, and distribution operations. Real people, real practices — never abstract stock, never 3D render, never illustration. When text must sit on an image, apply the navy scrim at ~55% rather than darkening the photo or adding a gradient. Available brand imagery in [`assets/brand/`](assets/brand): `photo-markets.webp`, `value-prop.webp`, `wave-bg-navy.webp` (the wave watermark).

### Iconography
**Line icons, 2px stroke, rounded caps and joins, 16–24px, colored via `currentColor`.** No filled icons, no duotone, no gradient icons. **No emoji and no unicode glyph substitutes** — off-brand for a clinical B2B company, without exception.

**The official icon set is now bundled.** [`tokens/icons.css`](tokens/icons.css) registers **`patterson-icons`** — the real Patterson icon webfont lifted from the production storefront pattern library: **93 glyphs**, 1024 units-per-em, private-use codepoints from `U+E900`. This **replaces Lucide**. Because it is a font, glyphs inherit `color` and scale with `font-size` — there is no stroke to set.

Use it as `<i class="pat-i pat-i-cart">` or via the `Icon` component (`<Icon name="cart" size="sm" />`). The set covers navigation (chevrons and arrows in regular + `_light` weights), commerce (`cart`, `tag-price`, `tag-percentage`, `promotion`, `previouslypurchased`), veterinary and dental specifics (`pedigree`, `prescription`, `formulary-list`, `hazmat`, `shiponice`, `shipping`), documents (`pdf`, `excel`, `document`), account and UI (`user`/`user_alt`/`user_bold`, `gear`, `filter`, `toggle-gridview`, `toggle-listview`), and the full social set. Production renders inline glyphs at **0.875rem (14px)**, filled navy, white, or cool gray.

Pair every glyph with a text label or an `aria-label` — the codepoints are private-use and read as nothing to a screen reader.

**Spot illustrations are two-tone.** The production PNGs (`truck.png`, `veterinarian.png`, `tooth.png`) are **navy-and-sky two-tone line illustrations** — a navy primary contour with sky used for the interior highlight (the wave on the van, the animal outline, the tooth's smile). They are not single-color `currentColor` glyphs. Strokes are heavy (≈3–4px at ~100px), with rounded caps and joins, drawn as generous open shapes.

Two icon tiers therefore exist:
- **Spot illustrations** — 64–120px, navy + sky two-tone raster or SVG, used to head a card or capability block. Not covered by the icon font.
- **UI glyphs** — 14–24px, single-color, from the official `patterson-icons` font. This is the tier the font covers, and it is authoritative.

---

## Components

Available as React primitives on `window.PattersonCompaniesDesignSystem_3534f9`.

### Navigation

**`top-nav`** — White sticky header, 80px tall, `{shadows.sm}`. Patterson lockup at left, `{typography.nav-link}` items in navy center, right-side cluster ending in a `{component.button-primary}`. Optional `{component.utility-bar}` (navy, 40px, `{typography.body-sm}`) above it on storefront surfaces carrying account, locale, and support links.

**`tab` / `tab-active`** — Inactive: transparent, `{colors.body}` text. Active: `{colors.navy}` text with a **3px sky bottom border**. Padding 12px × 20px. The sky underline is the active signal — never a filled pill tab.

### Buttons

**`button-primary`** — The signature control. Solid `{colors.navy}` fill, white label, `{typography.button}`, **pill radius**, 0 × 28px padding, `{layout.control-h-md}` (44px) tall. `button-primary-active` **shifts the fill to `{colors.sky}`** and nudges 1px down. The navy→sky shift is the most recognizable Patterson interaction; do not replace it with a darken.

**`button-secondary`** — Transparent with a **2px navy outline** and navy label, same pill/padding/height. `button-secondary-active` fills solid navy with a white label.

**`button-ghost`** — Transparent, navy label, no border. `button-ghost-active` washes to `{colors.navy-10}`.

**`button-on-navy`** — The inversion used inside navy bands: white fill, navy label, pill. The only correct primary on a navy surface.

**`icon-button`** — 44 × 44px pill hit area, navy `currentColor` line icon, `{colors.navy-10}` wash on interaction. 44px is a floor, not a suggestion.

**`text-link`** — Inline links in `{colors.blue}`, moving to `{colors.navy}` on interaction. On navy surfaces links run `{colors.sky}` → white.

Buttons are **confident, never tiny** — 44px is the default height and the minimum hit target.

### Cards & Containers

**`card`** — White surface, 1px `{colors.hairline}` hairline, `{shadows.sm}`, `{rounded.lg}` (10px), `{spacing.6}` (32px) padding. The system's workhorse container.

**`card-interactive-active`** — Interactive cards **lift 3px to `{shadows.lg}`**. The whole card is the target.

**`card-accent-stripe`** — Same card with a **4px sky top stripe**. Used to mark a featured or categorized card without changing its fill.

**`card-on-navy`** — Inside navy bands, cards go `{colors.navy-80}` with white text and no shadow (shadow is invisible on navy — use the tint step instead).

### Bands

**`hero-band-navy`** — Full-bleed navy band, `{typography.display}` white headline, `{typography.lead}` sub-line, button row using `{component.button-on-navy}`. Often carries the `wave-bg-navy.webp` watermark at low contrast.

**`hero-band-photo`** — Full-bleed photography with the navy scrim at 55%, white display headline over it.

**`content-band`** / **`content-band-subtle`** — White and `{colors.surface-subtle}` content bands at `{spacing.11}` (96px) vertical padding. Alternate them for quiet rhythm.

**`cta-band-navy`** — Pre-footer navy CTA band, `{typography.h2}` white head, `{spacing.9}` (64px) padding, `{component.button-on-navy}` CTA.

**`footer`** — Navy footer closing every page. `{colors.navy-20}` body text, white column heads, 4-column link list at desktop, `{spacing.9}` padding. The footer never inverts to light.

### Data & Emphasis

**`stat`** — The signature device. An oversized numeral in `{typography.stat}` (40 → 64px, weight 800) colored `{colors.sky}`, with a `{component.stat-label}` caption in `{colors.body}` below. Used in 4-up rows. Numbers are proof — render them big.

**`eyebrow`** — UPPERCASE `{typography.eyebrow}` overline in `{colors.sky}` sitting above a section head. The standard way to label a band.

**`badge`** / **`badge-accent`** — Pill labels. Default: `{colors.navy-10}` fill with navy text. Accent: solid `{colors.sky}` with white text for "New" and featured markers. 4px × 12px padding.

### Inputs & Forms

**`input`** — White fill, 1px `{colors.hairline-strong}` border, `{rounded.md}` (6px), 44px tall, 0 × 14px padding, `{typography.body-md}` in `{colors.ink}`.

**`input-focused`** — Border shifts to `{colors.sky}` plus the `{shadows.ring-focus}` 3px sky ring.

**`input-error`** — Border `{colors.danger}` plus `{shadows.ring-error}`, with helper text in `{colors.danger}` below.

**`select`** — Matches input geometry with a 2px-stroke chevron in `{colors.body}`.

**`checkbox`** / **`checkbox-checked`** — 20px, `{rounded.sm}` (4px). Checked fills `{colors.navy}` with a white 2px check.

**`radio`** / **`radio-checked`** — 20px pill. Checked shows a navy border with a navy center dot.

**`switch`** / **`switch-checked`** — 44 × 24px pill track. Off: `{colors.gray-400}`. On: `{colors.sky}` — the one control where sky is the *resting* on-state fill.

Labels sit above fields at `{typography.body-sm}` weight 600 in `{colors.navy}`. Helper text below at `{typography.caption}` in `{colors.muted}`.

### Feedback

**`alert-info`** / **`alert-success`** / **`alert-warning`** / **`alert-danger`** — Tinted background from the matching `-bg` token, a left or full 1px border in the semantic hue, a 2px-stroke line icon, `{typography.body-sm}` body in `{colors.ink}`, `{rounded.md}`, `{spacing.4}` padding.

---

## Do's and Don'ts

Every rule below is tagged with its evidence level:
**[V]** verified in production (`theme-styles.min.css`, live sites, or supplied brand assets) · **[S]** a system convention this design system adds on top · **[C]** corrected — the earlier draft of this document had it wrong.

### Do
- **[V]** Anchor pages on **white**. White plus space is the brand; navy and sky are punctuation.
- **[V]** Use `{colors.navy}` for **all** headings and structure. Production sets `color: var(--color-primary-dark-blue)` on h1, h2, h3, h4, `.eyebrow` and `.caption` alike — headings are never gray, never black.
- **[V]** Set body copy in `{colors.body}` (#58585B) — confirmed as `--color-primary-cool-grey` on `body`.
- **[V]** Use a **single family**: `proxima-nova, sans-serif`. Production declares exactly one font variable and no second family.
- **[C]** Keep primary-button hover **inside navy** — #003767 → `--primary-hover` #315D83. The navy→sky flip is *not* the brand's interaction.
- **[C]** Make the **secondary button a filled light blue** (#6DCFF6) with a navy label, hovering to #96DBF6. Not a navy outline.
- **[C]** Use **small radii on interactive elements** — 5px buttons, 6px elevated buttons, 2px fields. Reserve larger radii for containers.
- **[V]** Drop to **weight 400 at h3 and below**. Only h1/h2 carry weight 800.
- **[V]** Keep uppercase for **small labels only** — 14px at weight 500, used on eyebrows, filter labels, pagination and card kickers.
- **[V]** Keep motion **fast and plain**: production uses 100–200ms with `ease-in-out`, `ease`, or `linear`, on `background-color`, `border-color`, `color`, `transform` and `height` only.
- **[V]** Cap content around **1240–1260px** (production `max-width: 1259px`).
- **[V]** Use warm, authentic photography of practitioners, animals, and operations.
- **[V]** Draw spot illustrations as **navy + sky two-tone line art** with heavy rounded strokes.
- **[V]** Take UI glyphs from the **official `patterson-icons` font** (93 glyphs) — `<i class="pat-i pat-i-cart">` or `<Icon name="cart" />`. Production renders them at 14px.
- **[V]** Set headings navy at **every** level, with **no letter-spacing**.
- **[V]** Use the **warm taupe #AFA593** for field borders. It is deliberate, not a mistake.
- **[V]** Render statistics oversized. Numbers are how this brand proves things.
- **[S]** Show a **3px sky focus ring** on everything focusable. Production has no branded focus style — this is an accessibility improvement worth keeping.
- **[S]** Tint shadows navy for cool consistency, keeping alpha very low.
- **[S]** Alternate white → subtle-gray → navy bands, ~96px apart, for pacing.

### Don't
- **[V]** Don't introduce a second typeface. Hierarchy comes from size and weight.
- **[V]** Don't use the **tertiary palette** (green #7BC24D / teal #00817D / purple #522E91) as page chrome. Production names them `--color-tertiary-*` and confines them to data and infographics.
- **[V]** Don't apply a **gradient**, texture, or pattern fill. The production stylesheet contains **zero** gradient declarations — this rule is absolute.
- **[C]** Don't make everything a **pill**. Production has no `border-radius: 999px` anywhere. If you want the pill look, own it as a house convention, not as Patterson brand.
- **[C]** Don't add **letter-spacing** — negative on display or positive on caps. Production declares none at all.
- **[C]** Don't set body copy at **1.6 line-height** if you're matching production; it ships 18px/24px (1.33).
- **[C]** Don't bold h3/h4. They are weight 400.
- **[V]** Don't build glassmorphic panels, translucent cards, or blurred backdrops — no `backdrop-filter` appears in production.
- **[V]** Don't use **emoji or unicode glyphs**. Icons come from the official `patterson-icons` font or as two-tone illustrations.
- **[C]** Don't reach for Lucide, Feather, or any third-party icon set — the official Patterson font is bundled and covers the UI tier.
- **[C]** Don't specify weight **800, 600, 500, 300 or 900** and assume a real face renders. Only **400 and 700** are licensed; everything else is faux bold.
- **[V]** Don't add bounce, spring, parallax, infinite loops, or decorative animation — production motion is confined to color, transform and height.
- **[V]** Don't crowd corporate or marketing surfaces. Density is permitted on storefront catalogs only.
- **[V]** Don't put sky-blue on large background fills. Sky is accent-scale; navy is surface-scale.
- **[S]** Don't scrim photography with black — use navy at ~55%.
- **[S]** Don't remove or restyle the focus ring.

### Voice — verified against live copy
Confirmed on pattersondental.com, pattersonveterinary.com and pattersoncompanies.com:

- **[V]** **The brand promise is used as section furniture.** "Trusted expertise" and "Unrivaled support" appear verbatim as section eyebrows above content blocks. Use them that way.
- **[V]** **"We" for Patterson, "you / your" for the customer**, partnership-framed: *"our trusted experts will guide and support you at every step"*; *"Together, we'll identify your needs."*
- **[V]** **Verb-first, specific CTAs**: "Explore solutions", "Learn about our support", "Discover practice management software", "Create my account". Never "Click here", never "Learn more" alone.
- **[V]** **Benefit bullets over paragraphs** in offer blocks — short, parallel, no terminal punctuation.
- **[V]** **Attributed testimonials** in the form *Name, Credential | City, State*.
- **[V]** **Title Case for product and program brands**: Advantage Rewards, Revolve Software, Eaglesoft, Dental Intelligence. Sentence case for everything else.
- **[C]** **Questions are allowed as headings.** The earlier "confident statements, not questions" rule is wrong — production leads with *"Need technical service or equipment repair?"* and *"Why not?"*. Rhetorical questions that set up an answer are on-brand; keep them short.
- **[V]** **No emoji, ever** — none appear on any Patterson surface.
- **[V]** Vocabulary confirmed in use: support, trusted, expertise, solutions, practice, grow, modernize, streamline, unwavering, responsive, partner.

---

## Verification against production

Checked on 2026-07-30 against the supplied production theme (`uploads/patterson-theme/styles/theme-styles.min.css`, `theme-scripts.min.js` v3.2.2, and the `tooth` / `truck` / `veterinarian` spot icons) plus live copy from pattersoncompanies.com, pattersondental.com, pattersonveterinary.com / pattersonvet.com, and pattersonfoundation.net.

### New evidence in this pass
Three further production artifacts were supplied and have now been folded into the system:

1. **The official Typekit kit** (`assets/fonts/typekit-rul6mjk.css`, kit `rul6mjk`, published 2024-08-01). This resolves the typeface question — Proxima Nova is licensed and the kit is in hand. It also surfaces a **new correction**: the kit serves exactly **four faces — 400, 400 italic, 700, 700 italic**. There is no 500, 600 or 800 face. The production theme nevertheless asks for `font-weight: 800` on h1/h2, `600` on `.btn` and `500` on `.eyebrow`, so **the live sites render synthesized (faux) bold** at those weights. Treat **700 as the real bold ceiling**.
2. **The official icon font** (`icons.woff` / `.ttf` / `.svg` — **93 glyphs**, PUA `U+E900`+), now bundled as [`tokens/icons.css`](tokens/icons.css) + the [`Icon`](components/core/Icon.jsx) component. This closes the icon-set gap and retires Lucide.
3. **Patterson Veterinary favicons** (`manifest.json` name `PVcom`) — the square navy lockup at 16px→192px, plus `safari-pinned-tab.svg`. Copied into [`assets/brand/`](assets/brand). Confirms the square navy mark is the correct small-format lockup.

Also confirmed from the full theme read: **h1 steps to 4rem/4.25rem and h2 to 2.75rem/3rem at desktop** (the values previously documented were the mobile step), h3 steps to 2.25rem/2.5rem while staying weight 400, `.eyebrow` is navy 0.875rem/500, `.caption` is navy 0.875rem/400, and the theme's only `border-radius` values are 5px, 6px, 3px and 2px.

### Confirmed exactly
The **entire color palette** matches token-for-token — `--color-primary-dark-blue: #003767`, `--color-primary-light-blue: #00a8e1`, `--color-primary-cool-grey: #58585b`, `--color-secondary-dark-blue: #147ec2`, `--color-secondary-light-blue: #6dcff6`, `--color-secondary-cool-grey: #ececec`, `--color-tertiary-green: #7bc24d`, `--color-tertiary-teal: #00817d`, `--color-tertiary-purple: #522e91`. Also confirmed: Proxima Nova as the sole family, navy on every heading level, no gradients, no backdrop blur, fast plain transitions, ~1259px container, SVG-only iconography, and the voice patterns above.

### Corrected in this document

| Claim (earlier draft) | Production truth |
|---|---|
| Everything interactive is a pill | `.btn` 5px · `.btn-download`/`.btn-external` 6px · inputs/selects 2px · **no pill radius exists** |
| Primary hover shifts navy → sky | `--primary-hover: #315D83` — a lighter navy |
| Secondary is a navy outline that fills | `.btn-secondary` is a **solid #6DCFF6 fill** with navy label, hover #96DBF6 |
| Shadows are navy-tinted | Neutral black at 4–12% alpha (`--download-shadow`) |
| Headlines are 700–800 throughout | h1/h2 = 800; **h3/h4 = 400** |
| Body is 16px at 1.6 | **18px at 24px line-height (1.33)** |
| Display is tracked −0.02em; caps +0.08em | **No `letter-spacing` in the stylesheet at all** |
| Eyebrow is sky, 12px, weight 700, letter-spaced | **Navy, 14px, weight 500, no tracking** |
| Buttons are 44px tall | 15px × 30px padding on 20px line-height ≈ **50px** |
| All grays are cool | `--color-medium-grey: #AFA593` is a **warm taupe** (input borders) |
| Icons are single-color `currentColor` | Spot illustrations are **navy + sky two-tone**; UI glyphs come from a 93-glyph **icon font** |
| Lucide is the working icon set | The **official 93-glyph Patterson icon font** is bundled; Lucide is retired |
| Weights 300–900 are all available | Kit `rul6mjk` ships **only 400 and 700** (+ italics); the rest are faux |
| h1 is 2.75rem, h3 is small | Those are the MOBILE step; desktop is h1 4rem, h2 2.75rem, h3 2.25rem |
| Eyebrow is sky and uppercase | `.eyebrow` is **navy, 0.875rem, weight 500, sentence case** |
| Confident statements, not questions | Questions are used as headings |

### Intentional divergences (kept)
These are this system's own conventions, not brand truth, and are marked **[S]** above: the pill radius token, navy-tinted shadows, the 3px sky focus ring, negative display tracking, the 4px spacing scale, the 44px control floor, and 1.6 body leading. They make the system more consistent and more accessible than production. **Decide explicitly whether to keep them** — if the goal is pixel-matching Patterson's live surfaces, the pill radius and the navy→sky button hover are the two that will read as off-brand, and `tokens/spacing.css` + `tokens/effects.css` would need updating to match.

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav, utility bar collapses; display 72→44px; hero stacks single-column (copy first, media below); card grids 1-up; stat rows 2-up; footer 4 cols → accordion; section padding 96→48px |
| Tablet | 768–1024px | Nav stays horizontal and tightens; card grids 2-up; stat rows 2-up; storefront product grid 3-up; section padding 96→64px |
| Desktop | 1024–1440px | Full nav with flyouts; card grids 3-up; stat rows 4-up; storefront grid 4–5-up |
| Wide | > 1440px | Same as desktop; content caps at `{layout.container-max}` (1240px), gutter opens to 64px |

### Touch Targets
- `{component.button-primary}` and all form controls at `{layout.control-h-md}` (44px) — the WCAG floor, and the default rather than a large variant.
- `{component.icon-button}` at exactly 44 × 44px. Compact controls use `{layout.control-h-sm}` (34px) **only** in dense table toolbars where a larger padded wrapper carries the real target.
- Entire cards are tappable when interactive.

### Collapsing Strategy
- Nav collapses to a hamburger below 768px, opening as a full-height white sheet; category flyouts become nested accordions.
- Hero splits collapse to single-column — headline, lead, buttons, then media.
- Card grids **reduce columns**; they never scale cards below their padding.
- Stat rows go 4-up → 2-up, never 1-up — the row reads as a set.
- Tables become stacked label/value cards below 768px rather than scrolling horizontally, except in storefront catalogs where horizontal scroll inside the card is correct.

### Image Behavior
- Hero photography crops taller on mobile (16:9 → 4:3) rather than shrinking; the navy scrim strengthens slightly to hold headline contrast.
- The wave watermark scales with the band and is dropped below 768px rather than cropped.
- Fluid type (`clamp()`) handles display / h1–h3 / stat automatically — do not add per-breakpoint font-size overrides for those tokens.

---

## Iteration Guide

1. Focus on ONE component at a time; reference its YAML key (`{component.card}`, `{component.button-primary}`).
2. State variants live as separate `components:` entries (`-active`, `-disabled`, `-focused`, `-checked`, `-error`).
3. Use `{token.refs}` everywhere — never inline a hex value.
4. Document Default and Active/Pressed only. Hover is not a documented state (touch surfaces have none).
5. Navy + sky + white is the trinity. Adding a fourth surface tone breaks the system.
6. When emphasis is needed: **bigger and bolder in navy, or sky-colored** — never both at once, and never a new color.
7. Every new interactive element inherits: pill radius, 44px minimum, the sky focus ring, a 120–320ms transition.
8. Machine-readable source of truth is [`theme.json`](theme.json); the CSS truth is [`tokens/`](tokens)`*.css`. **Edit both together** — the framework adapters in [`integrations/`](integrations) are generated from [`theme.json`](theme.json).

---

## Working with Google Stitch

[Google Stitch](https://stitch.withgoogle.com) is a Google Labs tool that generates UI from natural-language prompts and images. It generates HTML and CSS for the visual layout of a design — not a fully interactive prototype, but a solid starting point for development. It is a useful front-end to this design system: generate a screen in Stitch, then port it onto Patterson tokens.

**Documentation note:** `https://stitch.withgoogle.com/docs/llms.txt` currently serves **only page metadata** — front-matter (title, description, Open Graph and Twitter tags) with no body content. It is not a usable spec for agents. The substantive guidance lives in Google's community Stitch Prompt Guide. Recorded here so nobody re-fetches it expecting instructions.

### What the Stitch docs actually say

Choose to start with a broad concept or specific details; for complex apps, start high-level and then drill down screen by screen. The prompt guide calls this the "zoom-out-zoom-in" framework — start with broad context about your product and target user, then zoom in to screen-level details.

Google recommends making specific, incremental changes — one major change per prompt; instead of requesting five modifications together, write five separate prompts. Bundling many variables into one prompt is the documented failure mode.

Other documented behavior worth knowing:

- **Medium and model are choices.** You pick App or Web design, and an AI model. Thinking mode (Gemini 2.5 Pro) handles visual input at higher fidelity but consumes experimental model credits.
- **Image input works.** Stitch can take any image — a screenshot or a hand-drawn sketch — and generate a UI from it via the image upload icon next to the text input. Rough sketches are enough: boxes, arrows and labels; Stitch reads spatial relationships, not artistic quality.
- **Variants.** The Create Variant button generates alternative versions without losing the current design. Prompted Variants let you guide iterations with a custom prompt — specify UI changes or describe higher-level goals; leaving the prompt blank lets Stitch reimagine the screen on its own.
- **Be literal about color and screens.** Specify color values — "blue" is vague, "#3B82F6" gets exactly what you want. Use screen names rather than "the page." When changing colors, add "ensure all icons and images match this new color scheme" so the theme shifts globally.
- **Name dynamic content.** If a design depends on prices, status changes or avatars, say so explicitly — even dummy data helps.
- **Known limits.** Stitch generates static designs — no working hover states, no form validation, no animated transitions. It is a design tool, not a prototyping tool. Output defaults toward desktop; responsive behavior needs explicit prompting and results vary. Sessions can reset unexpectedly — save screenshots of successful generations.

### Patterson prompt preamble for Stitch

Paste this ahead of any screen prompt so Stitch generates on-brand output, then port the result onto real tokens.

```text
Brand: Patterson Companies — corporate B2B healthcare distribution (dental and
veterinary). Calm, clinical, trustworthy. Not flashy.

Colors — use these exact hex values and no others:
  navy #003767 (headings, nav, primary buttons, hero/footer bands)
  sky #00A8E1 (accent, focus, statistics, active tab underline, card top stripe)
  blue #147EC2 (inline links)
  body text #58585B   near-black headings #1d1d20
  page background #FFFFFF   subtle band #f6f7f8   hairline borders #e2e2e4

Type: one sans family only — Proxima Nova, fallback Figtree, fallback Arial.
Headlines bold 700-800, tightly tracked, navy. Body 400 at 1.6 line-height in
#58585B. Uppercase letter-spaced sky eyebrow labels above section headings.

Shape: all buttons and badges are fully rounded pills. Cards 10px radius with a
1px #e2e2e4 border and a soft navy-tinted shadow rgba(0,55,103,0.08). Inputs
6px radius, 44px tall.

Rules: primary buttons are navy and turn sky #00A8E1 on interaction. All
controls at least 44px tall. Backgrounds are white or navy — never gradients,
textures, or glass/blur effects. Line icons at 2px stroke with rounded caps —
absolutely no emoji. Statistics render as oversized sky-blue numbers with a
small gray caption beneath. Generous whitespace, 96px between sections,
content capped at 1240px wide. Ensure all icons and images match this scheme.
```

### Porting Stitch output back

1. Replace every literal hex with the matching `--pat-*` / semantic token from [`tokens/`](tokens).
2. Swap generated buttons, inputs, cards, tabs, badges and alerts for the real components on `window.PattersonCompaniesDesignSystem_3534f9`.
3. Re-apply the pieces Stitch cannot generate: focus rings (`--ring-focus`), the navy→sky button transition, the 3px card lift, and 120–320ms timings.
4. Strip any emoji, filled icons, gradients, or blur Stitch introduced.
5. Replace hard-coded spacing with the 4px `--space-*` scale and cap the container at `--container-max`.

---

## Known Gaps

- ~~Proxima Nova licensing~~ **RESOLVED** — the official kit is bundled ([`assets/fonts/`](assets/fonts)`/typekit-rul6mjk.css`, kit `rul6mjk`). The system self-hosts 400 / 700 / 400-italic from the licensed files and can load from Adobe instead by swapping one `@import` in [`tokens/fonts.css`](tokens/fonts.css). **New gap in its place:** the kit has no 500, 600 or 800 face, so the production theme's `font-weight: 800` headings are faux bold. To get real heavier weights, add Proxima Nova variations to the Typekit kit.
- **Patterson Dental / Patterson Veterinary horizontal lockups** (`logo-dental.svg`, `logo-vet.svg`) are still not bundled. The Patterson **Veterinary** favicon set now ships ([`assets/brand/`](assets/brand) — `favicon-*.png`, `apple-touch-icon-180x180.png`, `android-chrome-192x192.png`, `safari-pinned-tab.svg`, square navy mark), so small-format Veterinary branding is covered; the wide lockups are not.
- ~~Icon set unconfirmed~~ **RESOLVED** — the official 93-glyph `patterson-icons` font is bundled. **Remaining gap:** the font covers the UI-glyph tier only; the navy/sky two-tone **spot illustrations** are still loose PNGs with no documented library, and the font has no dental-specific tooth glyph (only `tooth.png`).
- **The Brand Guide 2025 PDF was not machine-readable** (>30 MB). Logo clear-space rules, co-branding rules, and detailed imagery direction are inferred from the production websites, the supplied color-palette page, and the official `PDCO_template.potx`.
- **Dark mode is not defined** for the design system proper. [`integrations/shadcn-theme.css`](integrations/shadcn-theme.css) carries a navy-ground `.dark` contract, and the [`patterson-docs`](templates/patterson-docs) template has a dark theme, but there is no canonical dark token set.
- **Data-visualization specifics** — chart type conventions, axis and gridline styling, series ordering within the tertiary palette — are not specified beyond "tertiary colors, infographics only."
- **Motion detail** beyond durations and easings (page transitions, skeleton loading, flyout choreography) is unspecified.
- **Storefront density rules** are described qualitatively; the [`templates/storefront/`](templates/storefront) template is the reference implementation rather than a documented sub-scale.
- **Token reconciliation is partial by design.** Production-accurate values are now first-class — `--radius-btn`/`--radius-field`, the `--pt-*` production type scale, the interaction-state and warm-gray colors, `--download-shadow`, the production aliases (`--color-primary-dark-blue` etc.), and the `.pat-production` opt-in class. The system's own conventions (`--radius-pill`, navy-tinted shadows, the fluid `--fs-*` scale, tracking tokens, 1.6 leading, the 44px floor) remain alongside them and are labelled. Headings and `.pat-eyebrow` defaults were switched to production truth (navy, no tracking, 14px/500 sentence-case eyebrow); `.pat-eyebrow--accent` preserves the old uppercase-sky treatment.
- **Only the corporate WordPress theme was inspected.** The storefront (pattern library v5.7.2) ships a separate stylesheet that was not supplied; storefront radii, densities and control heights may differ again from both this system and the corporate theme.
- **`theme-scripts.min.js` v3.2.2 was not audited** for interaction behavior (flyout choreography, carousel timing, accordion easing).
- **The icon font's own metrics are undocumented upstream.** Optical sizing, intended pairings, and which of the near-duplicate glyphs are canonical (`user` vs `user_alt` vs `user_bold`; `close` / `close_light` / `close_medium`; `chevron-*` vs `chevron-*_light`) are inferred from the names, not specified.

---

*Verified against production 2026-07-30 — theme CSS, Typekit kit `rul6mjk`, 93-glyph icon font, Veterinary favicons.* · *Namespace for components:* `window.PattersonCompaniesDesignSystem_3534f9` · *Token source:* [`tokens/`](tokens) · *Machine-readable theme:* [`theme.json`](theme.json) · *Full guide:* [`readme.md`](readme.md)