Token reference

Grouped as they appear in assets/tokens.json. Source keys: [BG25 p.N] Brand Guide 2025 (authoritative) · [DS20 p.N] DesignSystem_042120 · [DPL] Digital Pattern Library v5.7.2 · [IMG20 p.N] ImageSpecs_042120.

`color.brand` `[BG25 p.24]`

Token	Tailwind utility	Value
`navy`	`pat-navy`	`#003767`
`sky`	`pat-sky`	`#00A8E1`
`gray`	`pat-gray`	`#58585B`
`white`	`pat-white`	`#FFFFFF`
`blue`	`pat-blue`	`#147EC2`
`blueLight`	`pat-blue-light`	`#6DCFF6`
`grayLight`	`pat-gray-light`	`#ECECEC`
`green`	`pat-green`	`#7BC24D`
`teal`	`pat-teal`	`#00817D`
`purple`	`pat-purple`	`#522E91`

`color.tint` `[BG25 p.24]`, sampled — 75 / 50 / 25 over white

Base	75%	50%	25%
`navy`	`#40698D`	`#809BB3`	`#BFCDD9`
`sky`	`#40BEE8`	`#80D4F0`	`#BFE9F8`
`gray`	`#828284`	`#ACACAD`	`#D5D5D6`
`blue`	`#4F9ED1`	`#8ABEE0`	`#C4DFF0`
`blueLight`	`#92DBF8`	`#B6E7FA`	`#DAF3FD`
`green`	`#9CD17A`	`#BDE0A6`	`#DEF0D2`
`teal`	`#40A09E`	`#80C0BE`	`#BFE0DE`
`purple`	`#7D62AC`	`#A896C8`	`#D4CBE4`

Utilities are pat-navy-75, pat-sky-25, etc.

`color.digital` `[DS20 p.7–8]`, shipped in `[DPL]`

Token	Utility	Value	Use
`sky`	`pat-digital-sky`	`#269BCB`	Interactive blue on screen (WCAG-adjusted)
`link`	`pat-digital-link`	`#147CBD`	Links on white/light gray
`greyMedium`	`pat-digital-grey-medium`	`#9B9B9B`	Secondary text
`greyLight`	`pat-digital-grey-light`	`#F8F8F8`	Section backgrounds
`green`	`pat-digital-green`	`#0CA50F`	Accent + success
`teal`	`pat-digital-teal`	`#008E8B`	Accent
`purpleOnLight`	`pat-digital-purple`	`#512E91`	Accent on light
`purpleOnDark`	`pat-digital-purple-dark`	`#9660F3`	Accent on navy
`navyDeep`	`pat-navy-deep`	`#001C34`	Navy pressed/hover
`rule`	`pat-rule`	`#D8D8D8`	Dividers
`fieldBorder`	`pat-field-border`	`#A8A9AC`	Input border, disabled
`disabledBg`	`pat-disabled-bg`	`#F0F0F0`	Disabled field background

`color.status` `[DPL]`, states named at `[DS20 p.37]`

Token	Value	Utility
`error`	`#D0021B`	`pat-error`, `--destructive`
`success`	`#0CA50F`	`pat-success`, `--success`
`urgent`	`#003767` (white text)	`pat-urgent`, `--urgent`
`warning`	`#F5A623`	`pat-warning`, `--warning`

`color.semantic` — the shadcn/ui contract (`:root` in `theme.css`)

Variable	Resolves to	Source
`--background`	`#FFFFFF`	`[BG25 p.24]`
`--foreground`	`#58585B`	`[BG25 p.24]` body copy
`--card`, `--popover`	`#FFFFFF`	`[BG25 p.24]`
`--primary`	`#00A8E1`	`[BG25 p.57]` default button — conflict, DPL ships `#269BCB`
`--primary-foreground`	`#FFFFFF`	`[BG25 p.57]`
`--secondary` / `--secondary-foreground`	`#FFFFFF` / `#003767`	`[DS20 p.15]` navy outline button
`--muted` / `--muted-foreground`	`#F8F8F8` / `#9B9B9B`	`[DS20 p.7]`
`--accent` / `--accent-foreground`	`#BFE9F8` / `#003767`	sky 25% tint `[BG25 p.24]`
`--destructive`	`#D0021B`	`[DPL]`
`--border` / `--input` / `--ring`	`#D8D8D8` / `#A8A9AC` / `#00A8E1`	`[DPL]`, `[BG25 p.24]`
`--chart-1..5`	navy, sky, green, teal, purple	`[BG25 p.24]` tertiary palette is designated for infographics
`--sidebar*`	navy ground, sky primary, navy-75 accent	`[BG25 p.52]`, `[BG25 p.24]`
`--radius`	`5px`	`[BG25 p.57]`

color.semanticDark mirrors this for the .dark selector using only documented on-navy values.

`font`

Family:

{
  "brand":  ["proxima-nova", "Arial", "sans-serif"],
  "office": ["Arial", "Helvetica", "sans-serif"]
}

[BG25 p.25], [DPL].

Weight [BG25 p.25, p.27]:

Token	Value	Role
`light`	300	Body alternative
`regular`	400	Body
`semibold`	600	Subheads, CTA text
`bold`	700	CTA, shipped h2/h3, eyebrow
`extrabold`	800	Titles, headlines

Size [DPL]:

Token	Value
`h1`	36px
`h1Mobile`	24px
`h2`	24px
`h3`	18px
`body`	18px
`eyebrow`	15px
`cta`	15px `[BG25 p.57]`
`textlink`	18px
`small`	13px

Line height [DPL]: h1 1.25 · h1Mobile 1.15 · h2 1.3 · h3 1.3 · body 1.5 · cta 1.15.

Tailwind exposes these as text-pat-h1, text-pat-body, text-pat-cta, etc., each carrying its line height and weight.

`typography`

Leading [BG25 p.27] — headline 0.75 (75% of size), bodyMin 1.25, bodyMax 1.5.

Tracking [BG25 p.27], InDesign units are 1/1000 em:

Token	Value	Utility
`default`	`-0.01em` (tracking −10)	`tracking-pat-snug`
`largeScale`	`-0.025em` (−25)	`tracking-pat-tight`
`bodyMax`	`0`	`tracking-pat-none`

Case — default, headline, subhead, button, eyebrow, textlink, caption are all sentence. titlePrint and emailSignaturePromise are upper and are the only exceptions [BG25 p.25, p.27, p.28, p.57, p.59], [DS20 p.10].

`dimension`

Spacing — 5px base grid; steps 5/10/15/20/25/30/50/60/80 [DPL], [BG25 p.57]. theme.css sets --spacing: 0.3125rem, so p-1 = 5px, p-2 = 10px, p-6 = 30px.

Radius — default 5px [BG25 p.57] · pill 30px [DPL] toggle track · circle 50% [DPL].

Control:

Token	Value	Source
`buttonHeight`	46px	`[BG25 p.57]` (conflict: `buttonHeightDpl` 45px)
`buttonPaddingX`	30px	`[BG25 p.57]`
`buttonMinWidth`	100px	`[DPL]`
`buttonMaxWidth`	600px	`[DPL]`
`inputPaddingY`	10px	`[DPL]`
`inputPaddingX`	12px	`[DPL]`
`iconSize`	80px	`[IMG20 p.2]`

Layout [DPL] — containerMax 1300px · breakpointMobile 600px · breakpointTablet 900px · breakpointDesktop 1300px. Utilities are namespaced pat-mobile, pat-tablet, pat-desktop so stock Tailwind sm/md/lg/xl are left intact.

`asset`

imageSize carries the documented pixel dimensions (marquee 675×330, banner ads 970×150 and 350×100, social 1200×628 and 1080×1080, video canvas 1920×1080, pattern image sizes from [DS20]). characterLimit carries the marquee copy limits (headline 50, body 150, button 20) [BG25 p.60]. fileWeight carries the 200KB export guidance [IMG20].

Component primitives in `theme.css`

@layer components defines .pat-button, .pat-button--secondary, .pat-textlink and .pat-eyebrow — the two elements the Brand Guide specifies pixel-exactly, plus the eyebrow, which is the most frequently mis-styled element.

`_tbd` — do not fill these in

tintStepPercentages · namedSpacingScale · elevationScale · motionTokens · statusColorsInBrandGuide · onDarkErrorColor · proximaHeavyWeight · typekitWeightCoverage · wcagTarget · imageSpecsPixelLabels · iconLibraryContents.

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

Token reference

color.brand [BG25 p.24]

color.tint [BG25 p.24], sampled — 75 / 50 / 25 over white

color.digital [DS20 p.7–8], shipped in [DPL]

color.status [DPL], states named at [DS20 p.37]

color.semantic — the shadcn/ui contract (:root in theme.css)

font

typography

dimension

asset

Component primitives in theme.css

_tbd — do not fill these in