# Twenty One Run Brand Guide

AI-friendly summary for using Twenty One Run brand resources. For direct file URLs, fetch `/brand-assets.json`.

## Quick links

- Asset manifest: https://twentyonerunbrandhub.lovable.app/brand-assets.json
- Inline (base64) manifest for blocked sandboxes: https://twentyonerunbrandhub.lovable.app/brand-assets-inline.json
- Full asset ZIP bundle: https://twentyonerunbrandhub.lovable.app/__l5e/assets-v1/43619e93-f4ab-4f53-9be8-a37f907fccca/brand-assets-bundle.zip
- Human assets page: https://twentyonerunbrandhub.lovable.app/assets
- Human brand guide: https://twentyonerunbrandhub.lovable.app/brand-guide
- Custom domain: https://brandhub.twentyonerun.com


## Brand foundation

- Brand name: Twenty One Run. Do not shorten to TOR or 21 Run in customer-facing copy.
- Purpose: Twenty One Run is a haven for runners who want to elevate their running experience.
- Vision: Redefine running as more than a sport — a catalyst for transformation and a path to the extraordinary.
- Archetype: The Trailblazer.
- Values: Tenacity, Vitality, Freedom, Endurance, Joyful Mastery, Day One.

## Voice and writing

- Tone: bold, energetic, warm, direct, and human.
- Have an edge, but don't cut. Never be mean, exclusionary, or robotic.
- Keep headlines short and punchy; if over 10 words, use a subheadline.
- Use sentence case. Use Oxford commas.
- Spell out months and days. Avoid ordinal suffixes like 1st/2nd/3rd.
- Use ampersands only in headlines when space is tight; never in body copy.
- Prefer clear, concise AP-style writing, with purposeful fragments allowed.

## Logo usage

- Primary logo: full lockup with XXI mark, wordmark, and K element.
- Use black logos on light backgrounds and white logos on dark backgrounds.
- Standalone XXI mark is for tight spaces, avatars, and brand patterns.
- Clearspace: maintain at least 0.5× X-height around the mark and full lockup; wordmark uses 1× X-height above/below and 0.5× left/right.
- Do not add drop shadows, rotate, stretch, recolor, outline, or place logos on busy backgrounds.

## Typography

- Primary type family: Söhne by Klim Type Foundry.
- Söhne Breit Kräftig: headlines, hero text, display.
- Söhne Schmal Fett: condensed headlines and large-format signage.
- Söhne Buch / Halbfett: body copy, UI text, captions.
- Söhne Mono Kräftig: labels, buttons, metadata.
- H1 guidance: Söhne Breit Kräftig, tight leading around 95–100%.
- Body guidance: Söhne Buch, 140–160% line height.
- Buttons: Söhne Mono, sentence case.

## Color

Primary palette:

- Asphalt: #000000, RGB 0 0 0, CMYK C0 M0 Y0 K100.
- Dirt: #E1CCB6, RGB 225 204 182, CMYK C0 M9 Y19 K12.
- Stone: #C8D8E4, RGB 200 216 228, CMYK C12 M5 Y0 K11.
- Snow: #FFFFFF, RGB 255 255 255, CMYK C0 M0 Y0 K0.

Secondary palette, use sparingly:

- Red: #FF0000, RGB 255 0 0, CMYK C0 M100 Y100 K0.
- Green: #4ABF33, RGB 74 191 51, CMYK C61 M0 Y73 K25.
- Blue: #0066EF, RGB 0 102 239, CMYK C100 M57 Y0 K6.
- Yellow: #FFB000, RGB 255 176 0, CMYK C0 M31 Y100 K0.

Approved pairings include black/white, white/black, Dirt/black, black/Dirt, Red/black, Green/black, Yellow/black, black/Red, black/Green, white/Red, white/Green, white/Yellow, and black/Yellow.

Avoid low-contrast secondary-on-secondary pairings such as Blue/black, Green/Red, Red/Yellow, Green/Yellow, Blue/Red, Green/Blue, Yellow/Red, Red/Green, Red/Blue, Blue/Green, Dirt/Yellow, and Dirt/Stone.

## Layout and UI

- Use a Swiss-inspired 12-column grid.
- Use generous whitespace and concise messaging.
- Spacing is based on a 4px grid: 4, 8, 12, 16, 24, 32, 48, 64, 96px.
- Corners: precise, not overly soft. Use 0px for editorial/form fields, 8px for buttons/cards, full radius for avatars and icon-only controls.
- Shadows: hard-offset monochrome only; no soft blur or colored shadows.
- Buttons: 8px radius, Söhne Mono, sentence case. One primary CTA per view. Red signal buttons are rare/high-attention only.
- Outline CTAs may use the » suffix. Do not use generic arrow glyphs for this brand motion cue.
- Inputs/selects use sharp corners and labels above the field.

## Photography

- Use authentic, action-oriented photography showing real running, coaching, training, and community.
- Prefer natural light, real moments, and diverse representation.
- Coach photos are available in original, square, and circle variants in `/brand-assets.json`.
- Event photography (e.g. In-House Ultra 2025) is available under `events[]` in `/brand-assets.json`.
- Email campaign photography (e.g. 4th of July storefront, DES News, Long Run Edge) is available under `email[]` in `/brand-assets.json`.

## Illustration

- Style: hand-drawn, imperfect, gestural, human-centered running figures.
- Use brand colors only, primarily black on light backgrounds.
- Runner is the hero; do not replace people with abstract blobs.

## AI implementation notes

1. Fetch `https://twentyonerunbrandhub.lovable.app/brand-assets.json` first.
2. Use `coaches[].images.circle` for round avatars; it is already a transparent PNG circle.
3. Use `coaches[].images.square` for grid cards and social/email crops.
4. Use `coaches[].images.original` only when a full uncropped source is needed.
5. Use logo URLs from `logos[]`; do not screenshot logos from the page.
6. If the custom domain is blocked, use the same paths on `https://twentyonerunbrandhub.lovable.app`.