---
version: alpha
name: "Waterloo"
description: "Token-first design system reference for Waterloo Sparkling Water."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#004464"
  surface-elevated: "#f5f5f5"

  # Text / ink
  ink: "#004464"
  ink-muted: "#5a7a8a"
  on-background: "#004464"
  on-surface: "#ffffff"

  # Brand accent
  primary: "#004464"
  on-primary: "#ffffff"
  primary-container: "#d6e8f0"

  # Interaction states
  text-hover: "#501474"  # was rgb(80, 20, 116) — link hover color extracted by dembrandt
  focus-ring: "#1032cf"  # was rgb(16, 50, 207) — extracted focus outline
  focus-tint: "#004464"

  # Semantic
  success: "#22c55e"
  warning: "#f59e0b"
  error: "#ef4444"
  info: "#007cba"  # --wp-admin-theme-color CSS variable

  # Borders
  border: "#eeeeee"  # was rgb(238, 238, 238) — dominant border color, 46 instances
  border-strong: "#004464"  # brand-tinted border for interactive elements

  # Shadow tints
  shadow-soft: "#000000"  # was rgba(0,0,0,0.3) — flattened for token; actual shadow uses opacity in elevation table

typography:
  display-hero:
    fontFamily: "P22 Mackinac Pro, Georgia, 'Times New Roman', serif"
    fontSize: 96px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -1px
  display:
    fontFamily: "P22 Mackinac Pro, Georgia, 'Times New Roman', serif"
    fontSize: 74px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "P22 Mackinac Pro, Georgia, 'Times New Roman', serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "Halis R, 'Gill Sans', Calibri, sans-serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: 0px
  body-large:
    fontFamily: "Halis R, 'Gill Sans', Calibri, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.78
    letterSpacing: 0px
  body:
    fontFamily: "Halis R, 'Gill Sans', Calibri, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0.5px
  body-caps:
    fontFamily: "Halis R, 'Gill Sans', Calibri, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.78
    letterSpacing: 3.8px
  nav-link:
    fontFamily: "Halis R, 'Gill Sans', Calibri, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.78
    letterSpacing: 1.6px
  button-ui:
    fontFamily: "Halis R, 'Gill Sans', Calibri, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 1px
  caption:
    fontFamily: "Halis R, 'Gill Sans', Calibri, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.78
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 10px
  md: 20px
  lg: 30px
  xl: 40px
  2xl: 60px
  3xl: 75px
  4xl: 100px

rounded:
  none: 0px
  sm: 5px
  md: 10px
  lg: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 42px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 42px
  button-outline:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    borderColor: "{colors.border-strong}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 42px
  button-outline-hover:
    backgroundColor: "transparent"
    textColor: "{colors.text-hover}"
    borderColor: "{colors.text-hover}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 42px
  button-ghost-light:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 5px 14px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 30px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.on-surface}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 1px 15px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 1px 15px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Waterloo Design System

## Overview

Waterloo Sparkling Water's website is a love letter to the American outdoors, translated into a deep-ocean design system. The default canvas is crisp white, but the true brand soul is `{colors.surface}` — a rich, sunlit-water navy that saturates hero sections, footers, and callout panels with the feeling of a Texas lake at dusk. Against this blue, everything reads in white: serif headlines, sparkling water photography, and outline CTAs that feel etched rather than built. It's a Texan sparkling water brand that wears its natural-and-refreshing story honestly, without resorting to green minimalism or kraft-paper wholesomeness.

The typographic split is the system's defining tension: P22 Mackinac Pro, a chunky humanist serif at 96px, carries all the brand's warmth and heritage energy — it's a label font, a can font, a "hand me a cold one" font — while Halis R, a clean geometric sans, handles everything functional: body copy, navigation, button labels, and all-caps utility text at wide `3.8px` letter-spacing. The serif announces; the sans delivers. Together they keep the brand from reading as either stuffy or generic. Hero text at `{typography.display-hero}` has the weight of a camping-trip postcard; the nav links and captions in `{typography.nav-link}` have the precision of a sparkling water ingredient list.

The visual attitude is cool-water restrained. Buttons are slim outlines with `{rounded.md}` radius — not pill-soft, not sharp-aggressive, but quietly confident. Borders sit at `{colors.border}`, a near-invisible hairline. The one moment of drama is the link hover: links shift from `{colors.primary}` deep blue to `{colors.text-hover}` plum-purple, an unexpected chromatic left-turn that feels like finding a twist flavor in a 12-pack. No gradients, no box-shadow stacks — just clean white space, serene deep blue, and the product photography of fruit-forward cans doing all the color work.

**Key Characteristics:**
- Deep ocean blue `{colors.surface}` as the hero and section canvas — not a background, a destination
- P22 Mackinac Pro serif at 96px for display — warm, label-style, distinctly Texan
- Halis R geometric sans for all UI and body — clean contrast to the display serif
- Slim outline buttons with `{rounded.md}` radius — neither pill nor sharp, quietly confident
- Link hover shifts from `{colors.primary}` to `{colors.text-hover}` plum — the system's chromatic surprise
- `{typography.body-caps}` at 24px, weight 700, 3.8px tracking — uppercase sans used for category labels and utility markers
- Dominant 10px and 20px border radii across UI elements — consistent, friendly, not trendy-round
- Sparse single-shadow system: one depth level at `rgba(0,0,0,0.3) 0 30px 70px` for modals
- White-on-navy `{colors.on-surface}` treatment for all reversed sections — no mid-contrast stops
- Flavor photography (orange Grapefruit, pink Strawberry, citrus Lemon-Lime) supplies all chromatic energy; the chrome stays blue-and-white

## Colors

### Primary
- **Ocean Navy** (`{colors.primary}`): The brand's signature blue. Default ink color, CTA borders, button fills. Every interactive element references this tone as its base.
- **Page White** (`{colors.background}`): Default page canvas. All light-mode sections build on this white with `{colors.border}` hairlines for quiet structure.
- **Reversed Surface** (`{colors.surface}`): Hero sections, feature callout panels, and footer. When Waterloo wants presence, it fills the canvas with this deep navy.

### Brand Accent
- **Plum Hover** (`{colors.text-hover}`): The surprise. Links transition from Ocean Navy to this plum-purple on hover — extracted directly from dembrandt's link state capture. Adds personality without adding another brand hue.
- **Sky Tint** (`{colors.primary-container}`): A pale desaturated blue for badges, highlights, and chip backgrounds. Keeps the brand family coherent on white surfaces.

### Interaction States
- **Focus Cobalt** (`{colors.focus-ring}`): A deep cobalt used as a 2px solid focus outline on interactive elements. High contrast against both the navy surface and white canvas.

### Text & Muted
- **Ink Muted** (`{colors.ink-muted}`): Secondary body text, captions, and metadata on white surfaces. A desaturated blue-gray that stays within the ocean-palette family.

### Borders & Surfaces
- **Border Hairline** (`{colors.border}`): 1px hairlines separating list items, section dividers, and tab underlines. Near-invisible on white.
- **Border Strong** (`{colors.border-strong}`): Ocean Navy used as a visible border on interactive elements — button outlines, input strokes, active tab underlines.

### Functional Colors
- **Admin Blue** (`{colors.info}`): A brighter sky blue surfaced via WordPress admin CSS variables — appears in editor UI, not brand surfaces.

## Typography

### Font Family
- **Display/Editorial**: `P22 Mackinac Pro`, self-hosted as `P22MackinacPro-Bold.woff2`. Humanist serif with inkwell-style stroke contrast. No Google Fonts equivalent — closest substitutes are `Playfair Display Bold` or `Lora Bold`. For external implementations, use `Playfair Display, Georgia, serif`.
- **UI/Body**: `Halis R`, self-hosted in Regular, Medium, Bold, Black, and Light weights as `.woff2`. A clean geometric sans with slightly rounded terminals. Closest Google Fonts match: `Nunito` or `DM Sans`. For external implementations, use `Nunito, 'Gill Sans', system-ui, sans-serif`.
- **Letter Spacing Signature**: Halis R at uppercase with `3.8px` wide tracking — the brand's utility label register, used for category markers, benefit callouts, and section labels.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero headlines — product launches, homepage H1, 96px P22 Mackinac Pro weight 700 |
| `display` | Section hero headlines — flavor feature sections, campaign banners, 74px serif |
| `heading-section` | Mid-page section titles — "Our Flavors," "How We Do It," 48px serif |
| `heading-sub` | Sub-section heads and card titles — 30px Halis R weight 700 |
| `body-large` | Introductory paragraph copy, feature descriptions — 24px Halis R weight 400 |
| `body` | Standard reading text and list items — 20px Halis R, `0.5px` tracking |
| `body-caps` | Uppercase utility labels and category markers — 24px Halis R weight 700, `3.8px` tracking |
| `nav-link` | Navigation items, footer links — 16px Halis R weight 700, `1.6px` tracking uppercase |
| `button-ui` | All CTA labels — 16px Halis R weight 700, `1px` tracking |
| `caption` | Metadata, legal text, secondary annotations — 14px Halis R weight 400 |

### Principles
- **Serif announces, sans delivers**: P22 Mackinac Pro is exclusively a display and headline face — never used below 48px. Halis R handles all functional text. Never mix roles.
- **Tracking is the sans's voice**: Halis R earns its character through letter-spacing — the `3.8px` utility register reads as confident label copy, the `1.6px` nav-link register reads as measured and clean. Proportional tracking, not zero.
- **Serif weight is single**: P22 Mackinac Pro appears only in weight 700. No light or book cuts. The headline is always assertive.
- **Uppercase for utility, title-case for editorial**: `body-caps` and `nav-link` tokens are uppercase registers. All serif headlines and body paragraphs are sentence or title case — uppercase is a utility signal, not an editorial one.
- **Line-height 1.10 for display**: Both `display-hero` and `display` tokens run at 1.10 line-height — snug enough to feel intentional, open enough for multi-line legibility at large sizes.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 10px (confirmed by dembrandt's dominant spacing value with 198 instances).

The scale steps evenly: 5 → 10 → 20 → 30 → 40 → 60 → 75 → 100px. The `{spacing.sm}` 10px unit is the atomic building block — component padding, icon gaps, tight list spacing. `{spacing.lg}` 30px and `{spacing.xl}` 40px appear as the most common section-internal padding values.

### Grid & Container
- Max content width: approximately 1440px (based on dembrandt breakpoint cluster at 1440px)
- Hero: full-bleed `{colors.surface}` navy with centered or two-column content, can photography at right
- Flavor grid: typically 3–4 columns on desktop with product can imagery as the primary visual
- Content sections: white canvas with `{colors.border}` hairline dividers and generous vertical padding
- Footer: full `{colors.surface}` navy, multi-column link grid, newsletter input row

### Whitespace Philosophy
- **Blue-and-white alternation**: Hero → white body → blue CTA band → white → blue footer. The navy surfaces are chapter breaks — the page doesn't meander in neutral gray.
- **Generous section padding**: `{spacing.3xl}` 75px to `{spacing.4xl}` 100px between major sections — Waterloo is not tight or rushed.
- **Compact can-grid**: Product flavor tiles use `{spacing.md}` 20px gaps — enough to breathe, tight enough to read as a collection.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default page surface, text, navigation |
| Hairline (Level 1) | `1px solid {colors.border}` | List dividers, section separators, tab underlines |
| Outline (Level 2) | `2px solid {colors.border-strong}` or `{colors.on-surface}` | Button outlines, input borders — the interactive tier |
| Dialog (Level 3) | `rgba(0,0,0,0.3) 0px 30px 70px 0px` | Modals and overlays — the only CSS shadow in the system |
| Focus Ring | `{colors.focus-ring} solid 2px` | Keyboard focus — cobalt outline on all interactive elements |

**Shadow Philosophy**: Waterloo's depth system is almost entirely border-based, not shadow-based. The dembrandt audit extracted a single shadow value (`rgba(0,0,0,0.3) 0px 30px 70px`) with low confidence — one instance, likely a modal. Every other depth signal in the system is a line: `{colors.border}` hairlines, `{colors.border-strong}` outlines, `{colors.on-surface}` reversed borders. This is a brand that trusts color contrast over atmospheric shadow. Navy on white is a 12:1 contrast ratio — no shadow stack needed.

## Shapes

The complete radius scale is declared in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed section bands, tab underline borders |
| `sm` | 5px | Smallest UI details — inline chips, micro tags |
| `md` | 10px | Primary interactive radius — buttons (54 instances), inputs, navigation pills |
| `lg` | 20px | Cards, modal containers, larger UI panels (39 instances) |
| `pill` | 9999px | Circle avatars, round icon buttons only |

The system is confidently `{rounded.md}` territory. Not sharp-edged like Liquid Death, not pill-soft like Olipop. The 10px radius on buttons and inputs reads as approachable and clean — label-like, the way can artwork rounded rectangles read. The 20px `{rounded.lg}` on modal containers adds warmth to larger surfaces. Sharp corners and full pills are edge cases.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button variants

- **`button-primary`** — Deep navy fill, white text, `{rounded.md}`, generous horizontal padding (`7px 42px`). The primary action on white canvases: "Find Now," "Add to Cart."
- **`button-outline`** — Transparent background, `{colors.border-strong}` 2px outline, navy text. The standard secondary CTA and the most-used variant on white sections: "How We Do It," "Learn More."
- **`button-ghost-light`** — Transparent background with white border and white text — for reversed navy sections where the surface is `{colors.surface}`. "Find Now" on the homepage hero.
- **`button-primary-hover`** and **`button-outline-hover`** — Both shift text and border to `{colors.text-hover}` plum on hover. A unified hover language: the brand's only moment of chromatic departure.

### Cards

`{components.card}` uses `{colors.background}` white, `{rounded.lg}` 20px radius, and `{spacing.lg}` 30px padding. Product flavor cards center the can photography, with flavor name in `{typography.heading-sub}` and supporting copy in `{typography.body}`. No card border by default — white-on-white cards use spacing for separation; cards on navy surfaces get a subtle `{colors.on-surface}` border.

### Inputs

`{components.input}` is transparent with a white border (`{colors.on-surface}`) for reversed/navy contexts. `{components.input-focus}` fills with `{colors.surface}` navy and adds the cobalt `{colors.focus-ring}` 2px outline — the focus state is a brand moment. On white contexts, the input uses `{colors.border-strong}` for the default border. `{rounded.md}` 10px radius matches button radius for visual consistency.

### Badges / Tags

`{components.badge}` uses `{colors.primary-container}` sky tint, `{colors.primary}` navy text, `{rounded.pill}` radius, and `{typography.caption}`. Appears on flavor cards for dietary claims ("0 calories," "sparkling") and on promo messaging.

### Navigation

Top nav: white surface on light pages, `{colors.surface}` navy on dark sections. Waterloo wordmark logo (white SVG on dark, navy on white) left or center-aligned. Links in `{typography.nav-link}` — 16px Halis R weight 700, uppercase, `1.6px` tracking. Sticky behavior with solid background (no blur). Mobile: hamburger collapse with full-screen overlay.

## Do's and Don'ts

### Do
- Use `{colors.surface}` ocean navy for all hero sections and footer — the brand's strongest visual signal
- Apply `{typography.display-hero}` P22 Mackinac Pro at 96px for homepage heroes — the serif is the brand's warmth
- Use `{typography.body-caps}` at `3.8px` letter-spacing for uppercase utility labels and benefit callouts
- Keep all button radii at `{rounded.md}` 10px — neither pill nor sharp, the brand's settled geometry
- Let hover shift to `{colors.text-hover}` plum — it's the system's signature surprise, preserve it
- Use `{colors.on-surface}` white borders and text on all `{colors.surface}` reversed panels
- Apply `{colors.border}` hairlines (1px) for all structural dividers — never heavier on light surfaces
- Let product can photography (grapefruit orange, strawberry pink, lemon citrus) carry all chromatic energy
- Pair P22 Mackinac Pro display type with Halis R sans at every scale — never use them for each other's roles

### Don't
- Don't use P22 Mackinac Pro below 48px — it's a display face, not a UI face
- Don't introduce mid-range or pill border radii on buttons — 10px is the system, not negotiable
- Don't add gradients to brand surfaces — the system is flat; the only "gradient" is the photography
- Don't use pure black for ink — text on white pages uses `{colors.ink}` ocean navy, not `#000000`
- Don't use the plum `{colors.text-hover}` as a standalone accent color — it's a hover register only
- Don't add multiple shadow levels — the system has one shadow moment (the modal lift); add no others
- Don't introduce a third typeface family — P22 Mackinac Pro + Halis R is the complete system
- Don't use uppercase on serif headlines — uppercase is a Halis R signal, not a Mackinac register
- Don't stretch `{colors.primary-container}` sky tint into full-section backgrounds — it's a badge/chip tone

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column, display-hero drops to 44px, stacked CTAs |
| Mobile | 375–600px | Single-column, serif hero at 56px, nav hamburger |
| Tablet | 600–1024px | 2-column product grid, serif hero at 72px, side-by-side hero |
| Desktop | 1024–1440px | 3–4 column flavor grid, 96px hero, full nav visible |
| Large Desktop | ≥1440px | Max container, 96px hero maintained, generous side margins |

*Source: dembrandt extracted 38 breakpoints — major clusters at 600px, 768px, 992px, 1024px, 1170px, 1200px, 1300px, 1440px.*

### Touch Targets
- Outline buttons: min 44px tap height — padding of `7px 42px` meets this at 16px line-height
- Flavor can cards: full tile is the tap target
- Navigation links: 44px minimum tap height with generous vertical padding on mobile

### Collapsing Strategy
- **Nav**: Full horizontal nav collapses to hamburger below 992px; overlay menu on dark navy
- **Hero**: Two-column (text + can photography) stacks to single column on mobile; image may move above or below
- **Product grid**: 3–4 columns desktop → 2 columns tablet → 1–2 columns mobile; can imagery preserved
- **Serif display**: 96px desktop → 72px tablet → 44–56px mobile; weight 700 maintained throughout
- **Section padding**: `{spacing.4xl}` 100px desktop → `{spacing.lg}` 30–40px mobile
- **Footer**: Multi-column link grid collapses to stacked single column; newsletter row stays as a row

### Image Behavior
- Product can photography is the hero image — scales fluidly, always edge-to-edge in its container
- Cans never get rounded corners — `{rounded.none}` for all product imagery
- Waterloo logo (SVG wordmark) scales down proportionally; no monogram fallback

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Text / Ink: `{colors.ink}` (#004464)
- Brand Surface: `{colors.surface}` (#004464)
- On-Surface Text: `{colors.on-surface}` (#ffffff)
- CTA Border/Fill: `{colors.primary}` (#004464)
- Link Hover: `{colors.text-hover}` (#501474)
- Border Hairline: `{colors.border}` (#eeeeee)
- Focus Ring: `{colors.focus-ring}` (#1032cf)

### Example Component Prompts

- "Build a hero section on `{colors.surface}` (#004464). Headline at 96px P22 Mackinac Pro weight 700, line-height 1.10, letter-spacing -1px, color `{colors.on-surface}` (#ffffff). Place a ghost CTA below: transparent background, white border `{colors.on-surface}`, white text, `{rounded.md}` 10px radius, `{typography.button-ui}` 16px Halis R weight 700, padding 5px 14px. On hover, border and text shift to `{colors.text-hover}` (#501474)."
- "Design a flavor product card on `{colors.background}` (#ffffff). Can photography fills card width, `{rounded.none}` corners on the image. Flavor name below in `{typography.heading-sub}` 30px Halis R weight 700, color `{colors.ink}`. Flavor descriptor in `{typography.body}` 20px weight 400. Add a benefit label in `{typography.body-caps}` uppercase with 3.8px tracking. Card has `{rounded.lg}` 20px radius, `{spacing.lg}` 30px padding, no border on white."
- "Create an email newsletter input row for a `{colors.surface}` navy section. Input: transparent background, 2px solid white border `{colors.on-surface}`, white placeholder text `{typography.body}` 20px Halis R, `{rounded.md}` 10px radius, padding 1px 15px. On focus, fill transitions to `{colors.surface}` with a 2px `{colors.focus-ring}` cobalt outline. Submit button: `{components.button-ghost-light}` style, white text, white border, same radius."
- "Build a top navigation bar for a white-background page. Left: Waterloo wordmark SVG. Right: nav links in `{typography.nav-link}` 16px Halis R weight 700 uppercase, color `{colors.ink}`, `1.6px` letter-spacing. On hover, links shift to `{colors.text-hover}` plum with underline decoration. Sticky at top with solid white background."
- "Design a benefit callout badge for a flavor card. Background: `{colors.primary-container}` (#d6e8f0). Text: `{colors.primary}` (#004464) in `{typography.caption}` 14px Halis R weight 400. `{rounded.pill}` 9999px radius, padding 4px 10px. Use for '0 Calories,' 'Naturally Flavored,' 'Sparkling.'"

### Iteration Guide

1. Start with `{colors.surface}` ocean navy for hero, feature panels, and footer — white sections in between are the breathing room, not the destination
2. Apply P22 Mackinac Pro only at 48px and above — below that, hand off to Halis R weight 700
3. Default button radius is `{rounded.md}` 10px — resist the pill instinct and the sharp-corner instinct equally
4. Every hover state uses `{colors.text-hover}` plum — keep this consistent; it's the system's only chromatic hop
5. Borders before shadows — use `{colors.border}` hairlines for structure and `{colors.border-strong}` for interactive chrome; add no box-shadow outside of modal dialogs
6. Halis R at uppercase + `3.8px` tracking = utility register; at lowercase + `0.5px` tracking = editorial register — match context
7. Can photography is the brand's color engine — frame it cleanly against white or navy, never compete with busy backgrounds
8. Focus ring is `{colors.focus-ring}` cobalt 2px solid — always present, never suppressed

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Waterloo. Brand names and trademarks belong to their respective owners.