---
version: alpha
name: "Work & Co"
description: "Two-typeface tension system — Helvetica Now Display headlines against Adobe Garamond body text, white canvas, and a single red accent for live navigation moments"

colors:
  background: "#ffffff"
  surface: "#f2f2f2"
  surface-dark: "#000000"
  ink: "#000000"
  ink-secondary: "#555555"
  on-primary: "#ffffff"
  primary: "#db2223"
  primary-hover: "#330808" # was rgb(51,8,8) — darkened red on hover
  primary-container: "#f2f2f2"
  on-surface: "#000000"
  link: "#db2223"
  link-hover: "#1883fd"
  border: "#dddddd"
  border-strong: "#ededed"
  focus-ring: "#004dff"
  shadow-soft: "#c7c5c7" # was rgb(199,197,199)
  text-hover: "#1883fd"

typography:
  display-hero:
    fontFamily: "HelveticaNowDisplay, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 100px
    fontWeight: 500
    lineHeight: 1.07
    letterSpacing: -2px
  display:
    fontFamily: "HelveticaNowDisplay, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 70px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -1.4px
  heading-section:
    fontFamily: "HelveticaNowDisplay, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 35px
    fontWeight: 500
    lineHeight: 1.34
    letterSpacing: -0.35px
  heading-sub:
    fontFamily: "HelveticaNowDisplay, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: -0.3px
  body-large:
    fontFamily: "adobe-garamond-pro, Georgia, Times New Roman, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.4px
  body:
    fontFamily: "adobe-garamond-pro, Georgia, Times New Roman, serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.3px
  nav-link:
    fontFamily: "HelveticaNowDisplay, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: -0.3px
  button-ui:
    fontFamily: "HelveticaNowDisplay, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label:
    fontFamily: "HelveticaNowDisplay, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.13px
  caption:
    fontFamily: "adobe-garamond-pro, Georgia, Times New Roman, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 10px
  md: 20px
  lg: 50px
  xl: 60px
  2xl: 90px
  3xl: 120px

rounded:
  none: 0px
  xs: 2px
  sm: 3px
  pill: 50px

components:
  button-primary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 40px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 40px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.focus-ring}"
    typography: "{typography.label}"
    rounded: "{rounded.xs}"
    padding: 12px 0px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.link-hover}"
    typography: "{typography.label}"
    rounded: "{rounded.xs}"
    padding: 12px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 0px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 0px
  link-default:
    textColor: "{colors.link}"
    textDecoration: underline 0.1px
  link-hover:
    textColor: "{colors.link-hover}"
    textDecoration: none
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 10px 0px
  nav-item-active:
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 10px 0px
---

# Work & Co Design System

## Overview

Work & Co's website is an object lesson in what a digital product studio looks like when it has total conviction in its own aesthetic. The canvas is pure white (`{colors.background}`) — no warm or cool tint, no surface shimmer, just the flat editorial confidence of a blank sheet. Against this, two typefaces operate in deliberate contrast: Helvetica Now Display at weight 500 handles every heading and navigational register, running large and tight with negative tracking as aggressive as `-2px` at 100px. Adobe Garamond Pro handles body copy, editorial prose, and supporting captions — a classical serif at sizes so large (30–40px) that the contrast with the grotesk display feels almost confrontational. This is not a hybrid system hedging its bets; it is a pairing made with the certainty of a studio that has shipped design decisions at that scale across hundreds of products.

The accent story is equally assured. `{colors.primary}` — a saturated, slightly warm red — appears on navigation links in their live/active state, on a sparse number of textual CTAs, and in the micro-underline (`0.1px`) that marks the default link treatment. When hovered, those red links shift to `{colors.link-hover}`, a cool electric blue, in a transition spanning just 250ms at ease. The hot-cold swap is immediately memorable and entirely unlike any warmed-down brand color methodology: it reads as a system decision rather than an oversight. Everywhere else, the site is black text on white — the work itself and the studio's case studies deliver all the visual richness the UI consciously withholds.

Structurally the layout is severe. Section headings in Helvetica Now Display at 35px hang at the left edge; they are separated from content by horizontal rules (`{colors.border}`, `{colors.border-strong}`) that reinforce the column grid. Cards have zero radius. Forms use bottom-border-only inputs, no surrounding container. The single rounded form is the CTA button — a perfect black pill at 50px radius that appears in the "Stay Informed" footer section and nowhere else. The pill lives in total isolation, which is what makes it land.

**Key Characteristics:**
- Dual-typeface system: Helvetica Now Display (grotesk) for all display/UI, Adobe Garamond Pro (serif) for all body/editorial — families never cross-pollinate
- `{typography.display-hero}` at 100px weight 500 with `-2px` letter-spacing — maximum compression at maximum scale
- `{colors.primary}` red active state on navigation links, contrasted by `{colors.link-hover}` cool blue on hover — a hot-cold swap unique in the design agency space
- `0.1px` underline as the default link treatment on red links — a deliberate, nearly invisible typographic mark
- 250ms ease transition on all link color and underline changes — fast enough to feel immediate, considered enough to feel intentional
- Adobe Garamond at 30–40px body sizes: the serif runs in a register that would be a headline size in most other systems
- One pill button, one place (`{rounded.pill}` at 50px) — the only curved element in the entire interface
- Bottom-border-only form inputs (`border-bottom: 1px solid {colors.ink}`) — no container, no background tint, no radius
- Top-rule-only card separators (`border-top: 1px solid {colors.border}`) — horizontal rhythm without enclosing boxes
- Shadow system used exclusively for inset underline effects via `box-shadow` — no traditional drop shadows on any surface
- 25 breakpoints from 400px to 1800px — reflects the precision demanded by the large typography and editorial grid

## Colors

### Canvas & Surface
- **Canvas White** (`{colors.background}`): The primary page background — pure, unmodified white. Every content panel, nav strip, and card sits directly on this surface. The whiteness is not softened or tinted.
- **Light Grey** (`{colors.surface}`): The secondary interactive surface — used for the "Cookies Settings" button background and the `{colors.primary-container}` behind interactive chips. At `#f2f2f2` it is barely distinguishable from white; its role is to mark interactivity, not create depth.
- **Pure Black** (`{colors.surface-dark}`): The dark surface — used exclusively for the pill CTA button. Not a near-black; pure `#000000`.

### Text / Ink
- **Primary Text** (`{colors.ink}`): All headings, navigation, body prose, and captions default to pure `#000000`. There is no softened near-black here; the contrast is total.
- **Secondary Text** (`{colors.ink-secondary}`): Muted label contexts — a medium grey used for de-emphasized UI chrome.

### Brand Accent
- **Work Red** (`{colors.primary}`): The singular accent — used for active navigation links, inline link defaults, and section highlights. A warm saturated red at LCH ~47% lightness. On hover, red links transition to `{colors.link-hover}`.
- **Link Blue** (`{colors.link-hover}`): The hover target for all red links. `#1883fd` — a bright, cool blue that creates the hot-cold color swap. Only appears in interactive hover states, never at rest.
- **Focus Blue** (`{colors.focus-ring}`): A deeper blue used for the cookies/settings UI button text — `#004dff`. Semantically distinct from the hover link blue.

### Borders
- **Soft Divider** (`{colors.border}`): `#dddddd` — card and section separators where the rule is meant to be felt but not seen.
- **Standard Rule** (`{colors.border-strong}`): `#ededed` — top-rule border on section headings and the content grid.

### Shadow & Depth
- **Inset Shadow Tint** (`{colors.shadow-soft}`): `#c7c5c7` — used only in the multi-layer `box-shadow` underline system (`rgb(255,255,255) 0px -1px 0px 0px inset, rgb(0,0,0) 0px -2px 0px 0px inset`). Not a drop shadow — an inset trick to render a custom underline separate from `text-decoration`.

## Typography

### Font Family
- **Display / UI**: `HelveticaNowDisplay`, fallbacks: `Helvetica Neue, Helvetica, Arial, sans-serif`
- **Body / Editorial**: `adobe-garamond-pro`, fallbacks: `Georgia, Times New Roman, serif`
- **No monospace**: Neither a code typeface nor a secondary sans appears anywhere in the extracted styles

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Primary homepage statement — 100px / 500 / -2px |
| `display` | Section intro copy and large project links — 70px / 500 / -1.4px |
| `heading-section` | Section titles, case study headers — 35px / 500 / -0.35px |
| `heading-sub` | Sub-section labels, filter headings — 30px Helvetica Now / 500 |
| `body-large` | Editorial prose, project descriptions — 40px Garamond / 400 |
| `body` | Standard body copy, footnotes — 30px Garamond / 400 |
| `nav-link` | Navigation links at rest and active state — 30px Helvetica Now / 500 |
| `button-ui` | CTA button label — 30px Helvetica Now / 500 |
| `label` | Functional UI chrome: cookie controls, tab labels — 13px Helvetica Now / 600 |
| `caption` | Supporting credits, metadata, fine print — 14px Garamond / 400 |

### Principles
- **The serif does the reading work.** Adobe Garamond Pro at 30–40px handles all body copy — unusually large for a serif body face, which means each paragraph reads at headline scale. The choice signals editorial intent: content is meant to be experienced, not scanned.
- **Helvetica Now Display performs architecture.** Display headings at 100px with `-2px` tracking function as structural elements — they partition space rather than label it. The aggressive compression at large sizes is the typographic equivalent of tight column gutters.
- **Dual-family discipline is strict.** Helvetica Now Display handles every display, UI, nav, and button context. Adobe Garamond Pro handles every body, caption, and editorial context. There is no mixing within a typographic tier.
- **Negative tracking scales with Helvetica Now, not Garamond.** The grotesk runs from `-2px` at 100px down to `-0.35px` at 35px. The serif runs modestly at `-0.4px` at 40px and `-0.3px` at 30px — optical tracking for print-like legibility at large render sizes.
- **Weight 500 is Helvetica's only register.** Every instance of Helvetica Now Display in the extracted styles runs at weight 500 — the medium cut. Never 400, never 700. This locks in a consistent visual weight across the entire display and UI hierarchy.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 10px (the most frequently used value, count: 55).

Work & Co's spacing is deliberately generous at the macro level — 50px, 60px, 90px, and 120px govern section-level breathing — while being exact and restrained at the micro level (5px, 10px). There is no sentimental middle range at 24px or 32px; the scale leaps from 20px straight to 50px, reflecting a layout philosophy that alternates between tight typographic proximity and wide editorial air.

### Grid & Container
- Max content width: approximately 1400–1800px at the largest breakpoints
- Content is left-edge-anchored; headings hang to the column margin
- Section titles separated from content by top-rule borders at `{colors.border-strong}`
- Cards have zero containment — no background, no shadow, no box — only a top-rule creates separation
- The newsletter section is the only enclosed area: full-width background with centered pill CTA

### Whitespace Philosophy
- Sections breathe at 90–120px vertical padding — the work is given room to exist
- Typography does the containment work: large Garamond body paragraphs define their own columns without wrapper divs
- Horizontal rules replace margin as the primary section-break affordance

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Everything — cards, panels, navigation, inputs |
| Underline System (Level 1) | `box-shadow: rgb(255,255,255) 0px -1px 0px 0px inset, rgb(0,0,0) 0px -2px 0px 0px inset` | Custom link underlines — a 2px inset line rendered via box-shadow to control positioning relative to text baseline |
| Red Underline (Accent) | `box-shadow: rgb(255,255,255) 0px -1px 0px 0px inset, rgb(219,34,35) 0px -2px 0px 0px inset` | Active/hover link underlines in the red accent variant |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus state on interactive elements |

**Shadow Philosophy**: Work & Co uses box-shadows not for elevation but as a precision typographic tool — the inset underline technique renders link underlines as a 2px colored bar at a fixed offset below the text baseline, independent of the font's native `text-decoration` rendering. Every link that uses this technique gets a white 1px cover layer masking the font descenders, then the 2px colored line below it. This is the only "shadow" in the system. There are no ambient drop shadows on any surface, card, or navigation element.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All cards, inputs, panels, nav containers, images |
| `xs` | 2px | Cookie/consent UI buttons — imported third-party chrome |
| `sm` | 3px | Tab panel containers — imported third-party chrome |
| `pill` | 50px | The one primary CTA button ("Subscribe") — the sole curved form in the site |

The radius philosophy is near-total restraint with one deliberate exception. The `{rounded.pill}` button exists in stark contrast to the zero-radius environment around it; its curvature reads as intentional warmth precisely because nothing else curves. Every other radius in the extraction comes from third-party OneTrust cookie UI — not a design decision of Work & Co's own system.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — Black pill CTA (`{colors.surface-dark}` fill, `{colors.on-primary}` text, `{rounded.pill}` at 50px, `{typography.button-ui}` at 30px weight 500, padding 16px 40px). Used for the newsletter subscribe action. The only pill-radius element on the site.
- **`button-secondary`** — Ghost utility button (`{colors.surface}` fill, `{colors.focus-ring}` text, `{rounded.xs}`, `{typography.label}` at 13px weight 600). Used for consent/settings controls. A low-hierarchy functional button with no visual prominence.

### Cards

**Project / Work Card** — Zero border, zero radius, zero shadow. Top-rule separator at `{colors.border}` and `{colors.border-strong}`. Heading in `{typography.heading-section}` (Helvetica Now 35px), supporting text in `{typography.body}` (Garamond 30px). The card is defined by its typography and horizontal rule alone.

### Inputs & Forms

**Newsletter Email Input** — Bottom-border-only treatment: `border-bottom: 1px solid {colors.ink}`, no container, no background tint, radius `{rounded.none}`. Placeholder rendered in Garamond. On focus, the border animates to full ink presence. The input is flush to the layout — the border is the only form affordance.

### Navigation

**Primary Horizontal Nav** — White background `{colors.background}`, no border, no shadow. Navigation links in `{typography.nav-link}` (Helvetica Now 30px / 500). Default link color `{colors.ink}` for most items; the active/live section link renders in `{colors.primary}` red. Hover color transitions to `{colors.link-hover}` blue over 250ms ease. The logo wordmark is an SVG at approximately 250×62px.

### Links

**Default Link** — `{colors.primary}` red, `text-decoration: underline 0.1px`, box-shadow underline system active. Hover: `{colors.link-hover}` blue, underline removed.
**Navigation Link** — `{colors.ink}` black at rest, `{colors.primary}` red when section is active. Hover shifts to `{colors.text-hover}` blue.
**Utility Link** — `{colors.focus-ring}` blue, `text-decoration: underline`, used in consent/legal contexts.

## Do's and Don'ts

### Do
- Use `{typography.display-hero}` at 100px / weight 500 / `-2px` letter-spacing for all primary display headlines — never reduce the weight or loosen the tracking
- Apply Adobe Garamond Pro (`{typography.body-large}`, `{typography.body}`) for all body and editorial prose — let the serif work at scale
- Use `{colors.primary}` red only on links and navigation active states — this is not a background fill or a CTA button color
- Implement the inset box-shadow underline technique on red links: `box-shadow: rgb(255,255,255) 0px -1px 0px 0px inset, rgb(219,34,35) 0px -2px 0px 0px inset`
- Apply the 250ms ease transition to all link color and text-decoration-color changes — the hot-cold swap earns its effect only at that speed
- Use top-rule-only borders (`border-top: 1px solid {colors.border}`) as card separators — never a full enclosing box border
- Reserve `{rounded.pill}` exclusively for the primary CTA button — isolation is what makes the pill legible as a decision
- Apply `{colors.link-hover}` blue exclusively in hover states — it should never appear at rest anywhere in the interface

### Don't
- Don't mix typeface families within a typographic tier — Garamond is body, Helvetica Now Display is display/UI; never reverse them
- Don't soften `{colors.ink}` to a near-black — Work & Co uses pure `#000000` for all primary text
- Don't add drop shadows to cards, navigation, or panels — the box-shadow underline is the only shadow construct in the system
- Don't apply `{rounded.pill}` to filter chips, navigation items, or secondary buttons — the pill is a singleton
- Don't reduce Helvetica Now Display weight below 500 — the medium cut is the system's sole display weight
- Don't introduce a secondary sans-serif alongside Helvetica Now Display — the grotesk/serif pairing is the complete typographic system
- Don't use `{colors.link-hover}` blue at rest on any element — it exists only as a hover destination
- Don't underline navigation links by default — navigation hover uses color change, not decoration change
- Don't use `{colors.primary}` red as a background fill or button color — it lives only in type contexts

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <400px | Single column, display type scales down, nav collapses |
| Mobile | 400–530px | Single column, abbreviated nav, 40px headings |
| Mobile Wide | 530–640px | Transitional — wider single column |
| Tablet Small | 640–768px | 2-column grid begins, nav partially visible |
| Tablet | 768–896px | Standard 2-column, typography steps up |
| Tablet Large | 896–1024px | Wider 2-column, nav fully expanded |
| Desktop Small | 1024–1100px | 2–3 column work grid, full nav |
| Desktop | 1100–1280px | Standard desktop — full typographic scale, 3-column grid |
| Desktop Wide | 1280–1800px | Full editorial scale, 100px display type |
| Large Desktop | 1800px+ | Maximum content width, cinematic display treatment |

### Touch Targets
- Navigation links: 30px text with surrounding padding — estimated 48px tap height at mobile breakpoints
- CTA pill button: 16px 40px padding provides generous touch area
- Form inputs: bottom-border-only inputs expand to minimum 44px height at mobile

### Collapsing Strategy
- **Navigation**: Horizontal links at 30px collapse to hamburger/icon strip below ~768px
- **Display type**: 100px display-hero → approximately 40–50px at tablet → ~28px at mobile; weight 500 and negative tracking maintained proportionally
- **Body type**: Garamond body at 40px → ~24px at tablet → ~18px at mobile — the relative scale contrast between Garamond and Helvetica Now preserves even at smaller sizes
- **Section spacing**: 120px → 60px → 30px across breakpoints; generous air collapses but is never eliminated entirely
- **Cards**: Single column at mobile; two columns at tablet; three-plus at desktop

### Image Behavior
- Project imagery maintains aspect ratio within column constraints
- No full-bleed hero — images are contained within the grid
- No art direction swaps detected across breakpoints

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (`#ffffff`)
- Primary text: `{colors.ink}` (`#000000`)
- Brand accent / links: `{colors.primary}` (`#db2223`)
- Link hover: `{colors.link-hover}` (`#1883fd`)
- Divider: `{colors.border}` (`#dddddd`)
- CTA button: `{colors.surface-dark}` (`#000000`) fill, `{colors.on-primary}` (`#ffffff`) text
- Focus ring: `{colors.focus-ring}` (`#004dff`)

### Example Component Prompts

- "Create a hero section for a digital product agency using the Work & Co system. Canvas: `{colors.background}`. Headline: Helvetica Now Display `{typography.display-hero}` (100px / 500 / -2px letter-spacing), color `{colors.ink}`. Below it, a body paragraph in Adobe Garamond Pro `{typography.body-large}` (40px / 400 / -0.4px), color `{colors.ink}`. No background decoration, no imagery behind the type, no radius on any container — pure white surface with oversized editorial type."

- "Build a project card grid using the Work & Co system. Cards: no background, no shadow, no border-radius (`{rounded.none}`). Each card separated by a top-rule: `border-top: 1px solid {colors.border}`. Card title in `{typography.heading-section}` (Helvetica Now 35px / 500 / -0.35px), `{colors.ink}`. Supporting label in `{typography.caption}` (Garamond 14px / 400), `{colors.ink-secondary}`. Padding: `{spacing.sm}` top, `{spacing.lg}` bottom. No hover background change — the link color shift handles interaction."

- "Design a primary newsletter CTA section. Background: `{colors.background}`. Heading: `{typography.heading-section}` (Helvetica Now 35px / 500), `{colors.ink}`. Body copy: `{typography.body}` (Garamond 30px / 400), `{colors.ink}`. Email input: bottom-border-only (`border-bottom: 1px solid {colors.ink}`), no container, no radius (`{rounded.none}`), Garamond placeholder. Submit button: `{components.button-primary}` — `{colors.surface-dark}` fill, `{colors.on-primary}` text, `{rounded.pill}` (50px radius), `{typography.button-ui}` (30px / 500), padding 16px 40px."

- "Implement the Work & Co navigation bar. Background: `{colors.background}`, no shadow, no border. Left: wordmark SVG in `{colors.ink}`. Right: horizontal links using `{typography.nav-link}` (Helvetica Now 30px / 500), default color `{colors.ink}`, active section color `{colors.primary}`. On hover: color transitions to `{colors.link-hover}` over 250ms ease. Transition property: `color, text-decoration-color, border-bottom-color`. No underline in nav links at rest."

- "Create an editorial inline link using the Work & Co box-shadow underline technique. Link color: `{colors.primary}` (`#db2223`). Text decoration: `underline 0.1px`. Custom underline box-shadow: `rgb(255,255,255) 0px -1px 0px 0px inset, rgb(219,34,35) 0px -2px 0px 0px inset`. Transition on hover: color shifts to `{colors.link-hover}` (`#1883fd`) and text-decoration-color shifts to `rgb(24,131,253)` over 250ms ease. The hover state removes the box-shadow or updates the second layer to the blue value."

### Iteration Guide

1. Start with the two-typeface architecture: Helvetica Now Display for anything that structures space (headings, nav, buttons); Adobe Garamond Pro for anything that carries meaning (body, captions, editorial). Decide which register you are working in before choosing a font.
2. Apply `{colors.primary}` red only to textual link contexts and active navigation states — the rest of the UI is `{colors.ink}` black on `{colors.background}` white.
3. Build negative tracking into every Helvetica Now Display headline: `-2px` at 100px, `-1.4px` at 70px, `-0.35px` at 35px. The compression is structural.
4. Use no drop shadows anywhere. If depth is needed, use surface color change (`{colors.surface}` vs `{colors.background}`) or a top-rule border.
5. Apply `{rounded.none}` as the default radius to every content element. Only introduce `{rounded.pill}` (50px) for the single primary CTA button.
6. The underline trick: `box-shadow` inset system with a white -1px cover layer above the colored -2px underline gives precise control over link underline position independent of font metrics.
7. Reserve `{colors.link-hover}` blue entirely for hover states. It should never appear at rest in any context — it is the "destination" color in the hot-cold transition.

---

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