# Patterson Dental — Design System
> A leading distributor of dental supplies, equipment, software, and digital technology.
- **Canonical:** https://uiuxskills.com/library/patterson-dental
- **Source:** https://www.pattersondental.com/
- **Category:** E-commerce & Retail
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 81%
- **License:** MIT
- **Last updated:** 2026-09-30T05:05:16.437Z

---

---
version: alpha
name: Patterson Dental
tagline: Dental Supplies, Equipment, Service
description: >-
  A leading distributor of dental supplies, equipment, software, and digital technology for dentists
  and dental laboratories.
tone: Professional, clinical, trustworthy, and authoritative.
color-scheme: light
colors:
  primary: "#004B87"
  secondary: "#0072CE"
  tertiary: "#E02229"
  background: "#FFFFFF"
  surface: "#FFFFFF"
  surface-container: "#F3F4F6"
  surface-bright: "#FAFAFA"
  on-primary: "#FFFFFF"
  on-surface: "#111827"
  outline: "#D1D5DB"
  error: "#DC2626"
  success: "#16A34A"
typography:
  display-lg:
    fontFamily: Arial, sans-serif
    fontSize: 3rem
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: Arial, sans-serif
    fontSize: 2.25rem
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: Arial, sans-serif
    fontSize: 1.875rem
    fontWeight: 600
    lineHeight: "1.3"
  headline-md:
    fontFamily: Arial, sans-serif
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: "1.35"
  headline-sm:
    fontFamily: Arial, sans-serif
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: Arial, sans-serif
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.5"
  body-sm:
    fontFamily: Arial, sans-serif
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: "1.5"
  label-md:
    fontFamily: Arial, sans-serif
    fontSize: 0.875rem
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Arial, sans-serif
    fontSize: 0.75rem
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  page-container:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm} {spacing.md}"
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm} {spacing.md}"
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.secondary}"
    borderColor: "{colors.secondary}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
  input-field:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.primary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-promo:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-primary}"
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)
  lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)
---

## Overview

Patterson Dental's visual identity is built around a highly professional, clinical, and trustworthy corporate aesthetic. It utilizes a structured, high-density layout to organize an extensive catalog of medical and dental products, emphasizing reliability and ease of navigation for healthcare professionals. The overall design language projects sterile precision, operational efficiency, and industry authority.

## Colors

The color palette is anchored in clinical blues and clean neutrals to establish an authoritative and sterile corporate presence. Primary brand elements and key actions use deep blue, while secondary actions utilize a brighter blue, and energetic red is reserved strictly for promotional callouts or critical alerts.

*   `{colors.primary}` (inferred) (#004B87): The signature Patterson corporate blue, conveying trust, clinical professionalism, and reliability. Used for primary actions and headers.
*   `{colors.secondary}` (inferred) (#0072CE): A brighter accent blue used for secondary actions, interactive hover states, and highlights.
*   `{colors.tertiary}` (inferred) (#E02229): An energetic red used selectively for deals, promotions, and urgent alerts.
*   `{colors.background}` (inferred) (#FFFFFF): Clean white background to maintain a sterile, clinical, and highly readable presentation.
*   `{colors.surface}` (inferred) (#FFFFFF): Default surface color for cards, product listings, and content containers.
*   `{colors.surface-container}` (inferred) (#F3F4F6): A light gray background used to group related categories and form inputs.
*   `{colors.surface-bright}` (inferred) (#FAFAFA): Slightly off-white surface used to give subtle depth to interactive cards.
*   `{colors.on-primary}` (inferred) (#FFFFFF): High-contrast white text for primary buttons and dark blue headers.
*   `{colors.on-surface}` (inferred) (#111827): Dark charcoal text ensuring optimal readability across all light surfaces.
*   `{colors.outline}` (inferred) (#D1D5DB): Subtle gray borders to define structure without adding visual noise.
*   `{colors.error}` (inferred) (#DC2626): Standard red for error states, validation, and critical alerts.
*   `{colors.success}` (inferred) (#16A34A): Green color used to denote in-stock status and successful actions.

## Typography

The typography system relies entirely on Arial or fallback sans-serif typefaces to ensure maximum cross-platform compatibility and clean, clinical legibility. The type scale is structured to handle dense information hierarchies, using clear weight contrasts to guide the user's eye.

*   `{typography.display-lg}`: Arial, sans-serif. Used for major marketing campaigns and hero announcements.
*   `{typography.display-md}`: Arial, sans-serif. Used for secondary hero sections and landing page headers.
*   `{typography.headline-lg}`: Arial, sans-serif. Used for main category titles and major section headers.
*   `{typography.headline-md}`: Arial, sans-serif. Used for product group titles and mid-level section headers.
*   `{typography.headline-sm}`: Arial, sans-serif. Used for sidebar headings and small content group titles.
*   `{typography.body-md}`: Arial, sans-serif. The default body text size for product descriptions and general copy.
*   `{typography.body-sm}`: Arial, sans-serif. Used for secondary details, specifications, and metadata.
*   `{typography.label-md}`: Arial, sans-serif. Used for navigation items, form labels, and button text.
*   `{typography.label-sm}`: Arial, sans-serif. Used for badges, micro-labels, and table headers.

## Layout

*   The layout relies on a highly structured multi-column grid system designed to organize dense product catalogs, using `{spacing.md}` and `{spacing.lg}` for consistent alignment.
*   The observed top-to-bottom section order is: `nav`, `category-menu`, `hero`, `promotions`, `product-grid`, and `footer`.
*   The hero composition pattern consists of a wide promotional banner featuring dental equipment or seasonal deals with a clear headline and a primary call-to-action button.
*   Desktop-first navigation features multi-level mega menus that collapse into a simplified accordion drawer on mobile viewports.
*   Content sections are separated by clean horizontal dividers using `{colors.outline}` to maintain readability and structural integrity.

## Elevation & Depth

Subtle single-layer and multi-layer shadows are used sparingly to maintain a clean, clinical aesthetic without adding visual clutter.

*   `elevation.sm`: Used for subtle card lift and default product listings to separate them from the flat background grid.
*   `elevation.md`: Applied to dropdown menus, search inputs on focus, and interactive elements.
*   `elevation.lg`: Reserved for modals, drawer overlays, and prominent popovers.

*Note:* The elevation values in this specification were inferred from the platform's visual hierarchy.

## Shapes

The brand utilizes a conservative, sharp-to-semi-rounded shape language to project a precise, professional, and corporate appearance. Rounded corners are kept minimal to reinforce the clinical and technical nature of the dental industry.

Standard interactive elements like buttons and input fields utilize `{rounded.md}` to soften edges slightly while maintaining a structured look. Smaller elements like badges use `{rounded.sm}` or `{rounded.full}` for pill-shaped tags, while larger containers or cards can scale up to `{rounded.lg}` or `{rounded.xl}` to group content cleanly.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### page-container
The main layout wrapper. It uses `{colors.background}` as its base fill and ensures all nested text elements default to `{colors.on-surface}` for high contrast and readability.

### button-primary
The primary call-to-action button. It features `{colors.primary}` background with `{colors.on-primary}` text, styled with `{typography.label-md}`, `{rounded.md}`, and padded with `{spacing.sm}` vertically and `{spacing.md}` horizontally.

### button-primary-hover
The hover state for primary buttons. It transitions the background to `{colors.secondary}` while keeping `{colors.on-primary}` text to signal interactivity.

### button-secondary
An outlined button used for secondary actions. It features a `{colors.background}` fill, `{colors.secondary}` text, and a border matching `{colors.secondary}`.

### button-secondary-hover
The hover state for secondary buttons. It shifts the background to `{colors.surface-bright}`, and changes the text and border color to `{colors.primary}`.

### card
The default container for products and categories. It uses `{colors.surface}` background, `{colors.on-surface}` text, and a subtle border defined by `{colors.outline}`.

### card-elevated
An interactive card variant. It utilizes `{colors.surface-bright}` to draw attention and is typically paired with `{elevation.sm}` to lift it off the page grid.

### input-field
Standard form and search inputs. Styled with `{colors.surface-container}` background, `{colors.on-surface}` text, and a `{colors.outline}` border.

### input-field-focus
The active state for input fields. It shifts to a `{colors.surface}` background and highlights the border with `{colors.primary}` to indicate focus.

### divider
A structural line used to separate dense content. It has a height of 1px and uses `{colors.outline}` to remain subtle.

### badge-promo
A small tag used to highlight discounts and offers. It features `{colors.tertiary}` background with `{colors.on-primary}` text.

### badge-error
A notification badge for critical alerts or out-of-stock items. It uses `{colors.error}` background and `{colors.on-primary}` text.

### badge-success
A badge indicating positive status, such as in-stock items. It uses `{colors.success}` background and `{colors.on-primary}` text.

### link
Standard inline text links. They utilize `{colors.primary}` to stand out from body text.

### link-hover
The interactive state for links, transitioning to `{colors.secondary}` on hover.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-actions and brand headers. | Do not use `{colors.tertiary}` for standard navigation or non-promotional buttons. |
| Apply `{colors.tertiary}` exclusively for promotional badges, deals, and urgent alerts. | Do not use `{colors.primary}` or `{colors.secondary}` for discount labels as it dilutes their urgency. |
| Ensure all body copy uses `{typography.body-md}` or `{typography.body-sm}` for optimal readability. | Do not mix Arial with decorative or playful fonts; stick strictly to the clean sans-serif scale. |
| Use `{colors.outline}` for dividers to cleanly separate dense product categories. | Do not use heavy borders or dark lines that disrupt the clean, clinical aesthetic. |
| Apply `{rounded.md}` to standard buttons and input fields to maintain a consistent, professional shape language. | Avoid using large border radii like `{rounded.xl}` on standard form inputs or product cards. |
| Use `{colors.success}` to denote in-stock items or successful user actions. | Do not use `{colors.success}` for standard navigation links or branding elements. |
| Apply `{elevation.sm}` to standard product grid items to give them a subtle lift. | Do not apply heavy elevation effects like `{elevation.lg}` to standard product grid items; keep them flat or lightly elevated. |
| Pair `{colors.on-primary}` with `{colors.primary}` or `{colors.secondary}` backgrounds to ensure high contrast. | Never display `{typography.body-sm}` text on `{colors.surface-container}` without verifying contrast requirements. |

## Content Style

*   **CTA Style:** Call-to-actions must be action-oriented, clear, and professional. Use direct, high-intent verbs such as "Shop Now", "View Details", "Log In", or "Add to Cart" to guide healthcare professionals efficiently.
*   **Heading Tone:** Headlines must remain informative, clinical, and corporate. Focus strictly on product categories, manufacturers, and business solutions, avoiding conversational or overly casual phrasing.
*   **Copy Density:** Layouts require high information density. Content should be structured with extensive category lists, detailed product specifications, and manufacturer directories, utilizing clear typographic hierarchy to prevent visual fatigue.

## Imagery & Icons

Visual assets must consist of high-quality, clean product photography of dental equipment and supplies. All imagery should feature neutral, clinical white, or light gray backgrounds to maintain a sterile, professional look. Avoid busy lifestyle photography; instead, focus on clear, well-lit, and isolated product shots that emphasize technical details and build trust with dental professionals. Iconography must remain minimal, using clean lines and consistent stroke weights to support navigation without adding decorative clutter.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Patterson Dental, a professional enterprise dental supply brand with a clinical, authoritative tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference all values by token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, font sizes, or pixel radii.
2. Build only the components listed under `components:` — `button-primary`, `card`, `input-field`, `badge-promo`, etc. Do not invent variants the spec does not define.
3. Follow the Layout notes when structuring pages: multi-column grid, top utility bar, secondary mega-menu, horizontal dividers between sections using `{colors.outline}`.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts — for example, using `{colors.tertiary}` on a nav element or applying `{rounded.xl}` to a form input — surface the conflict before proceeding.
5. Apply the Shape notes: sharp-to-semi-rounded language throughout. `{rounded.md}` on buttons and inputs; `{rounded.lg}` only where the spec explicitly supports it.

## Output contract

**Must:**
- Use tokens by name for every color, type, spacing, and radius decision.
- Cover hover, focus, and disabled states for all interactive components when the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Apply `{colors.success}` for in-stock indicators and `{colors.error}` for validation errors exclusively.
- Match CTA copy style — "Shop Now", "Add to Cart", "View Details" — per the Voice and Content section.

**Must NOT:**
- Invent colors, fonts, or radii outside the spec.
- Use generic utility defaults when a brand token exists.
- Apply `{colors.tertiary}` to anything other than promotional badges, deals, or urgent alerts.
- Add emoji, filler text, or decorative fonts alongside Arial.
- Rewrite, replace, or restructure page copy, navigation items, or content hierarchy as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- For ambiguous backgrounds, default to `{colors.surface-container}` for grouped sections and `{colors.surface}` for product cards.
- For unspecified breakpoints, use mobile-first with one breakpoint at 768px.
- Tokens marked "(inferred)" in spec prose are approximations; defer to any authoritative theme file if available.
- Prefer composing existing spec components over introducing new tokens or variants.