Guidelines
Logo
The wordmark is the only logo Coach's pages use. It is drawn, not typeset: never retype it in a font, and never rebuild it from the letters.
The wordmark
One colour at a time, ink or white, whichever the surface needs. The component draws in currentColor, so it inherits its context.
import { Wordmark } from "@/components/coach/wordmark";
// Size by height; width follows the 252:28 ratio.
<Wordmark className="h-4" /> // header, 16px tall
<Wordmark className="h-2.5" title="" /> // decorative, inside a labelled linkClear space
Keep the wordmark's own height clear on every side. Nothing, not even a rule, crosses the dashed line.
xxxx
x is the height of the wordmark, which is the height of its tallest letter, the O.
Minimum size
Below these sizes the serifs close up and the C and O begin to merge.
| Where | Minimum | In use |
|---|---|---|
| Screen | 72px wide, 8px tall | |
| Store tab | 90px wide, 10px tall | |
| Header | 144px wide, 16px tall | |
| 20mm wide | Not shown |
Store tabs
Coach and Coach Outlet are two stores under one wordmark. The current one is the white tab that joins the page below; the other sits on the charcoal bar.
Co-branding
Coach first, a thin multiplication sign, then the partner. The partner's mark is set at the wordmark's height, never larger, and both take the same colour.
In running text a partnership is written with a lower-case x: Coach x Spotify. The drawn lockup uses the multiplication sign.
Misuse
The wordmark only ever changes size and colour.
COACH