Trusted expertise. Unrivaled support.

The design system behind Patterson's oral health and animal health surfaces.

Every token, component and template verified line-by-line against the live production theme — so what you build here matches what ships.

Get started Browse demos
Proxima NovaLicensed kit bundled
93 glyphsOfficial icon font
4 adaptersTailwind · Uno · shadcn · Theme UI
Since 1877Saint Paul, Minnesota
211

Design tokens across colour, type, spacing and effects

13

React components on one global namespace

11

Templates — product surfaces, decks and app shells

93

Glyphs in the official Patterson icon font

What's inside

Four ways in.

Link one stylesheet and you have the whole brand. Everything below builds on that.

Docs

Install, tokens, components, brand rules and the gotchas that bite.

Demos

All ten templates — corporate site, storefront, decks, docs, app shells.

Kitchen sink

Every component in every variant and state, on one page.

The spec

Every rule tagged verified, system convention, or corrected.
Foundations

Navy and sky on generous white.

Navy carries structure, sky carries accent, and white does most of the work. The tertiary set is reserved for charts — it never becomes page chrome.

#003767
#00A8E1
#147EC2
#6DCFF6
#58585B
#ECECEC

Type — one family, hard weight drop

Trusted expertiseh1 · 800
Unrivaled supporth2 · 800
We strengthen the peopleh3 · 400
Bold solutions and a personal touch.body · 400

Only 400 and 700 are licensed faces. The theme asks for 800 on h1/h2, so production renders synthesized bold.

Shape — restrained, not round

field · 2px
button · 5px
card · 10px

The production stylesheet contains no pill radius anywhere. Buttons are 5px and fields are 2px — the pill token exists, but it is a house convention rather than brand truth.

Icons — the official font

Verified, not inferred

Twelve things everyone gets wrong.

This system was checked against the production theme stylesheet, the licensed Typekit kit and the real icon font. Several intuitive-seeming rules turned out to be false — they are corrected here and tagged in the spec.

Read the full spec
Everything is a pillButtons 5px, fields 2px
Primary hovers to skyHovers to #315D83, a lighter navy
Secondary is an outlineFilled #6DCFF6, navy label
Headlines 700 throughout800 at h1/h2, then 400
Body 16px at 1.618px at 1.33
Display is tracked tightNo letter-spacing anywhere
All greys are cool#AFA593 — a warm taupe
Lucide for iconsThe official 93-glyph font
Templates

Start from something real.

Ten starting points — recreations of live Patterson surfaces alongside decks and app shells. Copy a folder, replace the content, ship.

Corporate Website

pattersoncompanies.com — hero, stats, capability tabs, newsroom.
Storefront

E-commerce shell, switchable Dental ↔ Veterinary.
Docs Site

VitePress-style documentation organised by Diátaxis.
Presentation Deck

16:9 company overview — stats, comparison, photo bands.
Skill Studio

File-manager app shell — sidebar tree, tabbed panels.
All ten →

Executive deck, PVV deck, corporate page, canvas, patterson-docs.
Install

One stylesheet, one bundle.

Tokens arrive as CSS custom properties; components arrive on a single global. No build step, no package manager.

Read the docs 
<!-- tokens, fonts, icon font -->
<link rel="stylesheet" href="styles.css">

<!-- React components -->
<script src="_ds_bundle.js"></script>

const { Button, Card, Stat, Icon } =
  window.PattersonCompaniesDesignSystem_3534f9;