| name | patterson-design-context |
| description | Applies Patterson brand tokens, spacing, and voice when generating UI. Use when building any Patterson page, component, or deck. |
Patterson design context
Quick start
:root { --pat-navy: #003767; --pat-sky: #00A8E1; --pat-gray: #58585B; }
Rules: reference tokens, never raw hex; 8px spacing grid; sentence case.
Background, part 1
Color is one of the most important aspects of any design system. Colors carry
meaning, and meaning carries brand equity. The navy we use, #003767, was chosen
after extensive research into the dental and veterinary markets, where trust and
calm are paramount. Sky #00A8E1 provides energetic contrast while remaining
professional. When you consider spacing, remember that an 8px base grid has been
industry standard for a decade because it divides evenly into common viewport
sizes. Accessibility matters too: always check contrast ratios against WCAG AA,
which requires 4.5:1 for body text and 3:1 for large text.
Background, part 2
Color is one of the most important aspects of any design system. Colors carry
meaning, and meaning carries brand equity. The navy we use, #003767, was chosen
after extensive research into the dental and veterinary markets, where trust and
calm are paramount. Sky #00A8E1 provides energetic contrast while remaining
professional. When you consider spacing, remember that an 8px base grid has been
industry standard for a decade because it divides evenly into common viewport
sizes. Accessibility matters too: always check contrast ratios against WCAG AA,
which requires 4.5:1 for body text and 3:1 for large text.
Background, part 3
Color is one of the most important aspects of any design system. Colors carry
meaning, and meaning carries brand equity. The navy we use, #003767, was chosen
after extensive research into the dental and veterinary markets, where trust and
calm are paramount. Sky #00A8E1 provides energetic contrast while remaining
professional. When you consider spacing, remember that an 8px base grid has been
industry standard for a decade because it divides evenly into common viewport
sizes. Accessibility matters too: always check contrast ratios against WCAG AA,
which requires 4.5:1 for body text and 3:1 for large text.
