Installing the Patterson theme

assets/theme.css is a Tailwind CSS v4 theme. It is plain CSS: no build plugin, no tailwind.config.js, no JS import.

1. Vite (React, Vue, Svelte, Solid)

npm install tailwindcss @tailwindcss/vite

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({ plugins: [tailwindcss()] });

Copy theme.css to src/styles/patterson-theme.css, then in src/index.css:

@import "tailwindcss";
@import "./styles/patterson-theme.css";

2. Next.js (App Router, PostCSS)

npm install tailwindcss @tailwindcss/postcss postcss

export default { plugins: { "@tailwindcss/postcss": {} } };

Copy theme.css to app/patterson-theme.css, then in app/globals.css:

@import "tailwindcss";
@import "./patterson-theme.css";

app/layout.tsx imports ./globals.css as usual. Add the Adobe Fonts kit in the layout <head>:

<link rel="stylesheet" href="https://use.typekit.net/uth1qfm.css" />

3. Astro

npm install tailwindcss @tailwindcss/vite

Add the Vite plugin in astro.config.mjs, copy theme.css to src/styles/patterson-theme.css, and import both from a layout:

---
import "../styles/global.css"; // which itself imports tailwindcss then patterson-theme.css
---

4. Plain CSS, no Tailwind

You still get most of the value. The :root, .dark, .patterson-a11y, @layer base and @layer components blocks are ordinary CSS and work standalone.

5. Verifying the install

Check	Expected
`<div class="bg-pat-navy h-10">`	Solid `#003767`
`<button class="bg-primary text-primary-foreground">`	Sky `#00A8E1`, white label
`<h1>Hello</h1>`	36px, weight 800, navy, letter-spacing `-0.01em`
`<body>` computed style	18px / 1.5, color `#58585B`, `proxima-nova, Arial, sans-serif`
`<div class="p-6">`	30px padding (not 24px) — confirms the 5px grid took effect
`<a href="#">link</a>`	`#147CBD`
`.pat-button`	46px tall, 30px side padding, 5px radius, sentence case

6. Troubleshooting

Symptom	Cause and fix
`bg-primary` produces no style	The `@theme inline` block did not load. Check that `@import "tailwindcss"` comes before the Patterson import, and that both live in a stylesheet the bundler actually processes.
Everything is 4px-gridded	`--spacing` was overridden by a later `@theme` block. The Patterson import must be last.
Type renders in Arial	The Adobe Fonts kit is not loaded, or the kit does not cover the domain. Adobe Fonts kits are domain-locked — a kit registered for `pattersoncompanies.com` will not serve `localhost` unless localhost was added to the kit’s domain list. Arial is the sanctioned fallback, so this is a cosmetic failure, not a brand violation.
`npx shadcn init` overwrote the colors	shadcn writes its own `:root` and `.dark` blocks. Delete them and re-add the Patterson import as the last import.

7. Consuming `tokens.json` directly

The token file is W3C Design Tokens Community Group format (draft). Aliases use the reference syntax and resolve transitively:

{ "$value": "{color.brand.sky}" }

Every token carries $extensions."com.patterson.source" naming the document and page it came from, and some carry com.patterson.conflict where two Patterson sources disagree — read those before consuming a value programmatically.

Style Dictionary, Terrazzo and similar tools can read it. scripts/build-theme.ts shows a minimal resolver (~40 lines) if you would rather not add a dependency.

Source of truth: plugins/patterson-brand/skills/design-tokens/references/installation.md in the patterson-corp repository.