---
version: alpha
name: "Collins"
description: "Award-winning branding studio — deep-brown canvas, Portrait Text serif, warm cream surfaces, and a hidden-until-activated brand orange as the only chromatic rupture"

colors:
  # Deep almost-black warm brown — the dominant canvas
  background: "#140700"
  # Warm off-white cream — secondary surface for cards and content panels
  surface: "#f8f8f7"
  # Soft warm grey — primary text on dark; links, nav labels
  ink: "#d0d0c8"
  # Pure white — high-contrast text and wordmark on dark canvas
  on-background: "#ffffff"
  # Near-black for text on light cream surfaces
  on-surface: "#140700"
  # Pill button default — cream/off-white on dark canvas
  primary: "#f8f8f7"
  # Text on primary pill buttons
  on-primary: "#140700"
  # Warm-grey tint for secondary pill buttons
  primary-container: "#d0d0c8"
  # Mid-grey — reduced-emphasis text and captions
  ink-muted: "#7a7a7a"
  # Darker mid — secondary text on light surfaces
  ink-secondary: "#5e5855"
  # Hidden brand orange — CSS var(--color-brian-orange), used for chromatic rupture moments
  # was oklch / rgb(255,118,0) in source — converted to opaque hex
  accent: "#ff7600"
  # On orange — dark text for contrast on accent
  on-accent: "#140700"
  # Hover grey — all link and text hovers resolve to this via var(--color-grey-30)
  text-hover: "#4c4c4c"
  # Focus ring treatment
  focus-ring: "#d0d0c8"
  # Hairline border on cream surfaces
  border: "#d0d0c8"
  # Subtle shadow tint (unused — shadow array is empty; kept for completeness)
  shadow-soft: "#2a1800"

typography:
  display-hero:
    fontFamily: "Portrait Text, Georgia, Times New Roman, serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -1.44px
  display:
    fontFamily: "Portrait Text, Georgia, Times New Roman, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.96px
  heading-section:
    fontFamily: "Portrait Text, Georgia, Times New Roman, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.72px
  heading-sub:
    fontFamily: "Graphik, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0px
  body-large:
    fontFamily: "Graphik, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -0.64px
  body:
    fontFamily: "Graphik, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: -0.16px
  nav-link:
    fontFamily: "Graphik, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -0.16px
  button-ui:
    fontFamily: "Graphik, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -0.16px
  caption:
    fontFamily: "Graphik, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -0.16px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 64px
  3xl: 80px
  4xl: 96px
  5xl: 128px

rounded:
  none: 0px
  sm: 4px
  md: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.on-background}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.on-background}"
    # was oklab(0.999994 ... / 0.4) — semi-transparent white; flattened to near-transparent
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 32px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 32px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    padding: 24px 32px
---

# Collins Design System

## Overview

Collins opens on a canvas so dark it reads almost as negative space — the deep warm brown `{colors.background}` is not quite black, carrying just enough hue to feel rich rather than void. Against that darkness, the wordmark COLLINS and the hero headline "Rewrite your worth." appear in pure white and Portrait Text's most confident weight. There is no hero image to explain itself. No decorative border, no colour splash. Just a serif at 72px and a near-empty field, betting entirely on presence. It is the digital equivalent of walking into a dark room with one very well-lit painting.

Portrait Text is the system's emotional spine — a warm transitional serif whose wide ink traps and subtle bracketing read as both contemporary and settled. At `{typography.display-hero}` sizes, the tight line-height of 1.00 and the -1.44px letter-spacing collapse word-stacks into something monolithic. The awards marquee (AdAge Agency of the Year, eight times) runs below the hero as a quiet credential line, not a celebration. And then the page breaks — a warm cream card (`{colors.surface}`) slides in with rounded corners, carrying an illustrative world in a completely different register. The contrast between the dark atmospheric canvas and the lit-cream work-stage is the system's core gesture, repeated across every project presentation.

The hidden detail is `{colors.accent}` — CSS variable `--color-brian-orange`, `#ff7600`, an unambiguous brand orange that sits dormant in the stylesheet and erupts in specific brand moments. It is not used in the default homepage state; it is loaded and waiting, ready to take over when a project's identity demands a chromatic break from the warm-brown-and-cream base. This is a system designed to show other brands at their best, which means the house palette must know when to stand aside. Graphik, a geometric sans, handles all sub-heading and UI copy — a deliberate shift in register from display serif to neutral sans, keeping editorial moments expressive and utility moments legible.

**Key Characteristics:**
- `{colors.background}` — near-black warm dark brown, the dominant atmospheric canvas; not pure black, the temperature is part of the identity
- Portrait Text serif at `{typography.display-hero}`: 72px, weight 400, line-height 1.00, letter-spacing -1.44px — display text stacked into near-solid blocks
- `{colors.surface}` warm off-white cream as the secondary stage for work presentation — sharp contrast with the dark canvas, no intermediate greys
- `{colors.accent}` CSS `--color-brian-orange` hidden brand orange — chromatic rupture color, not used in default UI chrome
- Two-typeface system: Portrait Text (serif) for display and editorial; Graphik (geometric sans) for body, captions, UI labels
- Pill-only buttons (`{rounded.pill}`) with 14px Graphik, cream on dark — the only consistently rounded element
- `{rounded.md}` 16px radius exclusively for content cards and media elements; `{rounded.none}` for all structural surfaces
- No shadows — the entire system is depth-free; elevation is achieved through surface contrast alone
- Motion system at 0.7–0.8s for card transitions using `cubic-bezier(0.215, 0.61, 0.355, 1)` — intentionally slow, cinematic
- Eight AdAge Agency of the Year awards — credentials carried as text, not as trophies; confidence through understatement

## Colors

### Primary Canvas & Surface
- **Deep Warm Brown** (`{colors.background}`): The dominant page canvas — every hero, nav strip, and default section. Not pure black; the `#14` red channel and `#07` green channel produce a barely-perceptible warm tint that reads as "studio dark" rather than "pitch black."
- **Warm Cream** (`{colors.surface}`): The work presentation surface — cards, project covers, featured content panels. The warmth of `#f8f8f7` (a fractional step off pure white) matches the warm canvas temperature, creating a unified palette even at maximum contrast.

### Text Hierarchy
- **Soft Warm Grey** (`{colors.ink}`): Primary text color on dark surfaces — nav labels, body copy, link text. The `#d0d0c8` value has a slight cool-warm off-white quality that avoids the harshness of pure white at reading sizes.
- **Pure White** (`{colors.on-background}`): Hero headlines, wordmark, high-contrast moments on dark canvas.
- **Deep Brown** (`{colors.on-surface}`): All text on cream surfaces — full contrast without the abruptness of pure black.
- **Mid-Grey** (`{colors.ink-muted}`): Reduced-emphasis captions, metadata, de-emphasized labels.
- **Dark Mid** (`{colors.ink-secondary}`): Secondary text on both surfaces — a warm grey with slight brown hue.

### Brand Accent
- **Brian Orange** (`{colors.accent}`): The signature rupture color — CSS variable `--color-brian-orange`. Never appears in navigation or standard UI chrome; reserved for brand moments where chromatic intensity is the message. On brand rollouts, illustrations, and identity reveal sections.

### Interaction States
- **Hover Grey** (`{colors.text-hover}`): All link hover states resolve to `var(--color-grey-30)` — a cool mid-grey that signals interactivity without introducing a new hue.
- **Focus Ring** (`{colors.focus-ring}`): Matching the ink color for subtle keyboard focus indicators.

### Border & Structure
- **Hairline** (`{colors.border}`): Light border treatment on cream surfaces — matching `{colors.ink}` for a unified grey-on-cream hairline.

## Typography

### Font Family
- **Display / Editorial**: Portrait Text, with fallbacks: `Georgia, Times New Roman, serif`. A contemporary transitional serif with warm ink traps; handles every display and section-heading role.
- **UI / Body**: Graphik, with fallbacks: `Inter, ui-sans-serif, system-ui, sans-serif`. A precise geometric sans; handles body copy, navigation, captions, and button labels.
- **OpenType Features**: `"kern", "liga"` enabled on all Portrait Text instances. Standard ligature and kerning pair rendering on Graphik.

*Note: Portrait Text is a commercial typeface by Production Type. For unlicensed implementations, Freight Display Pro or Canela Text are close warm-transitional substitutes. Graphik's nearest Google Fonts approximation is Inter with slight tracking adjustments.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero headlines, opening statements — 72px, tight line-height 1.00 |
| `display` | Project cover headlines, feature section titles |
| `heading-section` | Section anchors, case study headers — Portrait Text at 36px |
| `heading-sub` | Sub-section intros in Graphik — tonal shift from editorial to practical |
| `body-large` | Lead paragraphs, feature introductions — Graphik 21px |
| `body` | Standard body copy, descriptions, metadata |
| `nav-link` | Navigation and button labels — Graphik 14px |
| `button-ui` | Pill button text — Graphik 14px, identical to nav-link |
| `caption` | Image credits, awards, fine print |

### Principles
- **Weight 400 across both faces**: Neither Portrait Text nor Graphik uses bold at any scale. Hierarchy is achieved through size, not mass — the serif does its work through its inherent optical weight.
- **Tight negative tracking at display**: The -1.44px spacing at 72px turns the headline into a compact, almost logotype-like statement. At 36px it relaxes to -0.72px; below 28px Graphik runs at -0.16px or 0px.
- **Serif for emotional register, sans for operational register**: Portrait Text carries meaning; Graphik delivers information. The split is consistent throughout.
- **Font features "kern" and "liga" on all Portrait Text**: Subtle precision detail that separates professional typesetting from default browser rendering at large sizes.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. The system operates in two modes: tight micro-spacing (8–16px internal component gaps) and generous macro-spacing (80–128px for section-to-section breathing room). The 32px midpoint is the heaviest-use horizontal padding value.

### Grid & Container
- Max content width: approximately 1600px at the widest breakpoint
- Content at standard desktop: centred within ~1280px
- Hero sections: full-bleed, edge-to-edge, zero padding on the media element
- Work grid: variable-column responsive grid (approximately 3–4 columns at desktop)
- Cards break from the dark canvas with `{rounded.md}` 16px corners — the rounded card on a sharp-edged canvas creates a contained, gallery-like presentation

### Whitespace Philosophy
- **Breathing room at heroic scale**: Section spacing at 80–128px vertical keeps the page unhurried — the work is allowed to settle before the next section arrives.
- **Generous horizontal margins**: Navigation sits at 32px horizontal padding; content rarely runs to the edge — the dark canvas frames everything.
- **No decoration to fill space**: There are no dividers, horizontal rules, or decorative separators. Empty dark canvas IS the section break.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All canvas sections, navigation, buttons |
| Card Lift (Level 1) | Surface contrast only: dark canvas `{colors.background}` → cream card `{colors.surface}` | Work cards, project panels — depth through hue shift |
| Dialog (Level 2) | `{rounded.md}` with surface shift | Modals, dialogs — extracted as `dialog` element with 16px radius |
| Focus Ring | `outline: {colors.focus-ring} solid 3px` | Keyboard focus |

**Shadow Philosophy**: Collins uses no drop shadows. The extracted shadow array is empty. All elevation is communicated through the dramatic surface contrast between the near-black `{colors.background}` and the warm cream `{colors.surface}`. When a card appears, it does not lift — it simply is lighter, and that difference is enough. The system's motion compensates for the absence of shadow: the 0.8s card clip-path animations create perceived depth through time rather than through spatial layers.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Navigation, canvas sections, all structural surfaces, input fields |
| `sm` | 4px | Small UI details, select overlay containers |
| `md` | 16px | Content cards, media embeds, project covers, dialog modals |
| `pill` | 9999px | All buttons — the only consistently pill-shaped element |

The radius vocabulary is binary with a practical exception: everything is either sharp (`{rounded.none}`) or rounded as a card container (`{rounded.md}`) or a fully-capped pill (`{rounded.pill}`). The 4px value appears on small structural divs and is not a primary design token. No mid-range 8–12px radius exists anywhere in the system.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — cream `{colors.primary}` background on dark canvas, deep brown text `{colors.on-primary}`, 14px Graphik, 96px radius (pill). The lightest element in the dark environment; reads as a surfaced action within the atmospheric page.
- **`button-primary-hover`** — ink grey `{colors.ink}` background transition via `color` and `transform` properties over 0.7–0.8s, maintaining pill geometry.
- **`button-secondary`** — transparent background with hairline border, white `{colors.on-background}` text — used for secondary CTAs overlaid on the dark canvas or light card surfaces.
- **`button-ghost`** — transparent, used on hero overlays where the button must not compete with imagery.

### Cards

**Work / Project Card** — cream `{colors.surface}` background, `{rounded.md}` 16px corners, generous 32px internal padding. The card appears as a lit stage on the dark canvas. Motion: `clip-path` transition at 0.8s with `cubic-bezier(0.215, 0.61, 0.355, 1)` on reveal — cards arrive, they do not snap.

**Media Embed** — `mux-player` and `img` elements carry the same `{rounded.md}` 16px radius, unifying video and image presentation.

### Inputs

**Newsletter Email Input** — transparent background on dark, `{colors.ink}` text, borderless default state, no radius. Focus state: `0 0 0 30px var(--color-grey-10) inset` box-shadow (a large inset shadow creates a soft inner glow rather than an outline). The stripped-back input matches the atmospheric canvas — no box, no chrome, just the typed value.

### Navigation

Sticky top bar on `{colors.background}` — wordmark COLLINS left-aligned in white SVG, hamburger/menu icon right (`{colors.on-background}`). 14px Graphik, no underline default, hover transitions to `var(--color-grey-30)` `{colors.text-hover}` over 0.5–0.8s. No border or shadow on the nav strip itself.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the atmospheric canvas for all hero and section backgrounds — never substitute a lighter dark
- Set Portrait Text display headlines at line-height 1.00 and letter-spacing -1.44px at 72px — the tight block-stack is the brand's visual voice
- Reserve `{colors.accent}` (brand orange) for chromatic rupture moments only — project reveals, identity work, never UI chrome
- Use Graphik for all UI text, navigation, captions, and buttons; reserve Portrait Text for display and editorial headings
- Apply `{rounded.pill}` exclusively on buttons — this is the only pill-shaped element in the system
- Use `{rounded.md}` 16px only for cards, media embeds, and dialogs — never for sections or navigation containers
- Present project work on `{colors.surface}` cream cards against the dark canvas — the contrast IS the presentation format
- Allow generous vertical spacing (80–128px) between major sections; the dark canvas absorbs negative space elegantly
- Use 0.7–0.8s motion with `cubic-bezier(0.215, 0.61, 0.355, 1)` for card and hero transitions — the slowness is intentional

### Don't
- Don't introduce pure black (`#000000`) as a canvas — the warmth of `{colors.background}` is a deliberate temperature decision
- Don't use Portrait Text below heading-sub sizes — Graphik handles all body and UI registers
- Don't apply box shadows to cards or buttons — shadow arrays are empty by design; depth is surface-contrast only
- Don't use `{colors.accent}` orange as a hover state, link color, or navigation accent — it is a brand-moment color, not a UI state
- Don't add mid-range border-radius (6–12px) — the system is three-value: none, 16px card, pill button
- Don't tighten letter-spacing on Graphik body text below -0.16px — the sans registers best at near-zero tracking
- Don't add borders or dividers between sections — the dark canvas provides all the separation the system needs
- Don't use the cream surface `{colors.surface}` as a default page background — it is the work-stage, not the atmospheric ground

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <494px | Single column, 36–40px display headlines, stacked nav |
| Mobile | 494–767px | Single column, full nav collapses to hamburger |
| Tablet | 768–959px | 2-column work grid, mid-size headlines (~48px) |
| Desktop Small | 960–1023px | 3-column grid begins, full display sizes |
| Desktop | 1024–1279px | Standard desktop, full hero typography |
| Wide Desktop | 1280–1599px | Full layout, generous horizontal margins |
| Large Desktop | ≥1600px | Maximum container, hero at cinematic scale |

### Touch Targets
- Pill buttons: 96px radius pill with 10px vertical padding — adequate touch target with the pill geometry
- Navigation hamburger: SVG icon with surrounding padding — estimated 44px tap area
- Work cards: full-tile tappable area

### Collapsing Strategy
- **Navigation**: Full horizontal collapse to hamburger on mobile; menu icon visible at all breakpoints
- **Hero headline**: 72px → approximately 36–40px on mobile; Portrait Text at weight 400 maintained throughout
- **Work grid**: 3–4 columns → 2 columns → 1 column; card cream surfaces maintained at every breakpoint
- **Section spacing**: 128px → 80px → 32px vertical rhythm through breakpoints
- **Dark canvas**: Maintained at all breakpoints — the atmospheric ground never becomes lighter on mobile

### Image Behavior
- Media embeds and project covers maintain `{rounded.md}` 16px radius at all breakpoints
- Images use `object-fit: cover` within their card containers
- No full-bleed breakout on content images — the cream card boundary frames all media
- Hero: full-bleed within the dark canvas, no border-radius on the atmospheric background itself

---

## Agent Prompt Guide

### Quick Color Reference
- Background (canvas): `{colors.background}`
- Primary Text (on dark): `{colors.on-background}`
- Body Text (on dark): `{colors.ink}`
- Work Surface: `{colors.surface}`
- Text on Surface: `{colors.on-surface}`
- Muted Text: `{colors.ink-muted}`
- Brand Orange (rupture): `{colors.accent}`
- Hover State: `{colors.text-hover}`
- Border: `{colors.border}`
- CTA background: `{colors.primary}`

### Example Component Prompts

- "Build a hero section for Collins on deep warm brown `{colors.background}`. Full-bleed canvas, no padding. Center-aligned headline: Portrait Text 72px weight 400, color `{colors.on-background}`, line-height 1.00, letter-spacing -1.44px, font-feature-settings: 'kern' 'liga'. Below: small awards marquee in Graphik 14px `{colors.ink}`, horizontally scrolling, centered. CTA pill button: `{colors.primary}` background, `{colors.on-primary}` text, 14px Graphik weight 400, border-radius 9999px, padding 10px 24px. No shadows anywhere."

- "Create a work card for Collins: background `{colors.surface}` warm cream, border-radius 16px, padding 32px. Project image fills full card width at top (border-radius 16px to match card). Below image: project name in Portrait Text 36px weight 400 `{colors.on-surface}`, letter-spacing -0.72px; client/category label below in Graphik 14px `{colors.ink-muted}`. No shadow, no border. The card sits on `{colors.background}` dark canvas — the surface contrast is the only elevation."

- "Design a navigation bar: background `{colors.background}`, no border, no shadow. Left: COLLINS wordmark SVG in white `{colors.on-background}`. Right: hamburger menu icon in `{colors.on-background}`. Sticky, full viewport width, 24px vertical 32px horizontal padding. All elements 14px Graphik weight 400."

- "Build a project detail heading section on dark canvas `{colors.background}`: eyebrow label in Graphik 14px `{colors.ink}` with 0.5px letter-spacing; primary headline in Portrait Text 48px weight 400 `{colors.on-background}`, letter-spacing -0.96px, line-height 1.05; body paragraph in Graphik 16px `{colors.ink}`, line-height 1.30, letter-spacing -0.16px; then a cream card `{colors.surface}` with 16px radius containing the project imagery."

- "Create a brand-orange accent moment: section background stays `{colors.background}` deep brown; a contained panel uses `{colors.accent}` (#ff7600) as background with `{colors.on-accent}` text in Portrait Text 48px; pill CTA in `{colors.background}` background with `{colors.on-background}` text. This is the rupture state — use only when the project identity demands chromatic intensity."

### Iteration Guide

1. Start from `{colors.background}` — every layout decision is a calculation against the deep warm brown canvas; lighter elements are foreground, the darkness is the page.
2. Use Portrait Text for any text above 24px; switch to Graphik for everything at body scale and below — the typeface boundary is a register change, not an aesthetic choice.
3. Letter-spacing at display: -1.44px at 72px, -0.72px at 36px, near-zero at Graphik body. Negative tracking is mandatory on Portrait Text; Graphik runs at -0.16px only.
4. No shadows anywhere — when an element needs depth, use `{colors.surface}` cream against `{colors.background}` dark. The contrast ratio between these two surfaces does the entire job.
5. Cards use `{rounded.md}` 16px. Buttons use `{rounded.pill}`. Everything else uses `{rounded.none}`. Resist any in-between values.
6. The only color break allowed in default UI is cream (`{colors.surface}`) on dark (`{colors.background}`). Brand orange (`{colors.accent}`) is a narrative device, not a UI pattern — ask "is this a brand-moment reveal?" before applying it.
7. Motion is slow and deliberate: 0.7–0.8s card transitions with `cubic-bezier(0.215, 0.61, 0.355, 1)`. Fast transitions are not Collins — the brand moves with the weight of a considered agency.

---

## 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 Collins. Brand names and trademarks belong to their respective owners.