Brand

Wordmark

The Coach wordmark, drawn in currentColor so it takes the colour of wherever it sits. Size it by height.

components/coach/wordmark.tsx

Examples

Ink on white
White on ink
Header, 16px
Store tab, 10px

Anatomy

  1. 01One path, 252 by 28
  2. 02fill: currentColor

Usage

components/coach/wordmark.tsx
import { Wordmark } from "@/components/coach/wordmark";

<Wordmark className="h-4" />               // header, labelled "Coach"
<Wordmark className="h-3" title="" />      // decorative, beside a text label

Props

PropTypeDefaultDescription
titlestring"Coach"The accessible name. Pass an empty string when the mark sits next to visible text, and it is hidden from screen readers.
classNamestring—Set the height here (h-4, h-2.5). Width follows the 252:28 proportion.
...propsSVGProps<SVGSVGElement>—Any other SVG attribute.

Guidance

Do

  • Size by height only; the width follows.
  • Let it inherit colour: ink on white, white on photography.

Don't

  • Stretch, outline, or set it in a colour outside the palette.
  • Rebuild it from type. The letterforms are drawn.

Where it's used