Guidelines

Color

The interface is black, white and six greys. The photography carries the colour, so nothing in the frame competes with it.

Palette

Each colour is a Tailwind token in @theme, sampled from coach.com: the store bar is #333333, the listing background #f0f0f0, rules #e1e1e1.

Ink

#000000

--color-coach-ink

Text, the solid button, the wordmark. Pure black, as coach.com sets it.

Charcoal

#333333

--color-coach-charcoal

The store bar above the header, and nothing else.

Graphite

#545454

--color-coach-graphite

Excerpts, secondary text and counts.

Stone

#8c8c8c

--color-coach-stone

Inactive categories, captions and placeholders.

Line

#e1e1e1

--color-coach-line

Rules between rows, field borders, dividers in the footer.

Mist

#e8e8e8

--color-coach-mist

The space a photograph holds while it loads; hover on paper.

Paper

#f0f0f0

--color-coach-paper

Bands that break the grid, the footer, product listing backgrounds.

White

#ffffff

--color-coach-white

The page. Most of every screen.

The photograph is the colour

Colour comes from the pictures. A Coach page is mostly white, and the photographs are what make it look like Coach this season.

Semantic tokens

The shadcn variables the UI primitives read, mapped onto the palette in :root. Radius is 0rem: every corner is square.

Variable	Maps to
`--background`	`var(--color-coach-white)`
`--foreground`	`var(--color-coach-ink)`
`--primary`	`var(--color-coach-ink)`
`--primary-foreground`	`var(--color-coach-white)`
`--secondary`	`var(--color-coach-paper)`
`--muted`	`var(--color-coach-paper)`
`--muted-foreground`	`var(--color-coach-graphite)`
`--accent`	`var(--color-coach-paper)`
`--border`	`var(--color-coach-line)`
`--input`	`var(--color-coach-line)`
`--ring`	`var(--color-coach-stone)`
`--destructive`	`#b3261e`

Contrast

WCAG 2 contrast for every text pair in use, computed from the token values. Stone is kept for labels that are not the only way to tell state (the active category is also bold).

Aa21.00:1

Titles and body on the page

ink on white

AAA

Aa18.43:1

Titles in bands and the footer

ink on paper

AAA

Aa7.57:1

Excerpts

graphite on white

AAA

Aa6.65:1

Footer links

graphite on paper

Aa3.36:1

Inactive categories

stone on white

AA large

Aa12.63:1

The store bar

white on charcoal

AAA

Aa21.00:1

The solid button

white on ink

AAA

Rules

No brand accent colour in the interface. Emphasis comes from weight, size and space.
Paper marks a change of subject: a partnership band, the footer. Never a card background in the grid.
Charcoal belongs to the store bar. Headers, buttons and overlays use ink.
Text on a photograph is white, over an ink gradient from the edge it sits on.
--destructive exists for form errors only.