Demos

Everything the system can build.

Ten templates and twenty-three specimen cards. The templates are working starting points; the specimens are the reference for a single foundation.

Product surfaces

Recreations of live Patterson properties.

Use these as the starting shell for work on that surface — and as reference for how dense each surface is allowed to be.

Corporate Website

A working recreation of pattersoncompanies.com — navy hero with the wave watermark, four-pillar cards, the We-Are-Patterson statistics band, tabbed capabilities, newsroom and footer. Three linked screens.

Open demoREADMEtemplates/corporate-website

Storefront Dental ↔ Vet

The Patterson e-commerce shell on pattern library v5.7.2: navy utility bar, search, category nav with flyouts, hero, featured products, manufacturer rail, Advantage Rewards and account CTA. A single toggle switches the entire surface between Dental and Veterinary branding.

Open demoREADMEtemplates/storefront

Docs Site

A VitePress-style documentation site organised by Diátaxis — top nav, sidebar grouped into Tutorials / How-to / Reference / Explanation, article body with all five callout tones, and a prev/next pager. Body copy sits at the 720px readable measure.

Open demoREADMEtemplates/docs-site
Decks

Print-ready out of the box.

All three run on the same slide stage — keyboard nav, thumbnail rail, speaker notes and one-page-per-slide PDF export, with no extra print CSS.

Presentation Deck

The 16:9 company overview built on the corporate PowerPoint master — cover panel, section dividers, statistics band, comparison, pull quote, capabilities table, full-bleed photo band and closing. Slide text never drops below 24px.

Open demoREADMEtemplates/deck

Executive Deck

An editorial executive briefing: navy cover, key takeaways, breakdown matrix, requirements, build outputs and benefits. Denser and more structured than the company overview — built for a reading audience rather than a presenting one.

Open demoREADMEtemplates/executive-deck

Purpose, Vision & Values Corporate

A faithful reversal of the official Purpose·Vision·Values PowerPoint — icon-rail content slides, navy dividers, four-colour values columns, the PVV funnel and a word-cloud closer. The values columns are the one sanctioned use of the tertiary palette outside charts.

Open demoREADMEtemplates/purpose-vision-values
Shells & pages

Scaffolds to build on.

Two are Design Components with live tweak controls; two are plain page shells.

Canvas 3 tweaks

A full corporate page — nav, hero, proof band, capability cards, CTA and footer — wired to three expressive controls. Hero surface reskins the page navy, paper or soft blue; Density moves the whole type and spacing rhythm between editorial and compact; How we prove it swaps the statistics band for a statements band.

Open demotemplates/canvas

Patterson Docs Tweakable

The documentation shell as a Design Component, with light/dark theme, accent colour and content width exposed as props. Use this when you want a docs surface you can reskin; use Docs Site when you want the static VitePress recreation.

Open demoREADMEtemplates/patterson-docs

Skill Studio

A branded file-manager and studio app shell: sidebar file tree, tabbed editor panels, toolbar, reference cards and a composer. The densest template here — a working app surface, and the one place compact 34px controls are allowed.

Open demoREADMEtemplates/file-manager

Corporate Page

The single-page subset of the corporate site — sticky nav, navy hero with the wave watermark, content band and footer, composed from the design system's own components. Reach for it for any one-off marketing page.

Open demoREADMEtemplates/corporate-page
Specimens

One card per foundation.

These are the cards rendered in the Design System tab. Three of them document corrections against the live theme — worth reading before you build.

Brand

Colour

Type

Spacing & components