Each card below is a real, self-contained HTML file from the patterson-brand
plugin’s ds/guidelines/ folder. Open one and you’re looking at the same
markup a plugin ships — no build step, no screenshot standing in for the real
thing.
| Card |
What it shows |
| Brand palette |
The primary palette — navy, sky, gray, white — with hex, PMS, and role. |
| Primary colors |
Navy #003767 and sky #00A8E1 in their headline and CTA roles. |
| Secondary colors |
Blue, light blue, and light gray — for depth, never dominant. |
| Tertiary colors |
Green, teal, and purple — reserved for infographics and decks. |
| Neutral ramp |
The published gray steps used for body copy, borders, and surfaces. |
| Semantic colors |
Success, info, warning, and danger — the shipped Digital Pattern Library states. |
| Tints |
The 75/50/25 tint ramp over white for every palette color. |
| Card |
What it shows |
| Type family |
Proxima Nova, the Adobe Fonts kit, and the Arial fallback. |
| Type weights |
Light through Extrabold, and which role each weight carries. |
| Display type |
Headline and title scale, tracking, and leading. |
| Body type |
Body copy size, leading, and color at long-form scale. |
| Eyebrow and stat type |
The teal sentence-case eyebrow and the large sky-blue stat numeral. |
| Card |
What it shows |
| Radii |
The 5px control radius and where the unsourced steps diverge from it. |
| Shadows |
Navy-tinted elevation — there is no published Patterson elevation scale, so these are presentation scaffolding, tinted to brand navy rather than an invented hue. |
| Spacing scale |
The sourced 5px grid alongside the layout convenience scale the templates use. |
| Card |
What it shows |
| Logo |
The four marks, approved colorways, clear space, and placement rules. |
| Voice |
Confident, warm, plain-spoken — the “we/you” rule and sentence-case mandate. |
| Card |
What it shows |
| Integrations |
The token adapters — Tailwind v3/v4, UnoCSS, Theme UI, and shadcn/ui. |
