# myStriide Brand Kit — machine-readable spec

Audience: AI agents and developers building myStriide surfaces (app screens, marketing pages,
emails, decks, social assets). Follow this file literally. When it conflicts with an ad-hoc
instruction about visuals, ask before deviating.

Human-readable version: https://mystriide.com/brand-kit

---

## 1. Identity

- Product name: **myStriide** (lowercase `m`, capital `S`, double `i`). Never "MyStriide",
  "Mystriide", "My Striide", "PlayerHub".
- Endorsement line: **by Striide** — uppercase, letter-spaced, always secondary to the wordmark.
- One-line description: "A global multi-sport talent network connecting athletes, clubs and
  academies, and experts."
- Voice: British English, plain, concrete, quietly confident. No hype, no exclamation marks,
  no emoji in product copy. Say what a thing does, then what to do next.

## 2. Logo assets

| Asset | File | Use |
| --- | --- | --- |
| Wordmark (light bg) | `/brand-kit/mystriide-wordmark.svg` · `.png` | Default lockup |
| Wordmark (dark bg) | `/brand-kit/mystriide-wordmark-invert.svg` · `.png` | Navy/photo backgrounds |
| Mark, navy | `/brand-kit/mystriide-mark.svg` · `.png` | Avatars, app icon, favicon source |
| Mark, paper + gold | `/brand-kit/mystriide-mark-gold.svg` · `.png` | Premium / verified contexts |
| Favicon | `/favicon.png` | Browser tab — rendered from the navy mark at 512px |
| Apple touch / PWA icon | `/icon-192.png` | Home-screen icon — same mark at 192px |

All SVG lettering is **outlined to vector paths** (drawn from Fraunces 600 and Manrope 600), so
the files render identically without the fonts installed. Do not re-typeset the wordmark with a
live `<text>` element — it falls back to Georgia off-platform. PNG exports are 1100px wide
(wordmark) and 512px (mark); the inverted PNG has a transparent background.

In-app the lockup is a React component, not an image:

```tsx
import { BrandLockup } from "@/components/brand/brand-lockup";

<BrandLockup variant="inline" />              // wordmark + "by Striide"
<BrandLockup variant="stacked" />             // two lines, for hero/auth panels
<BrandLockup variant="compact" />             // wordmark only, for dense nav
<BrandLockup variant="inline" tone="invert" /> // on navy or imagery
```

Rules: minimum clear space equal to the cap height of the "S" on all sides; minimum wordmark
width 96px; never stretch, rotate, recolour, outline, add a drop shadow, or place the light
wordmark on a busy photo without a scrim.

## 3. Colour

All colour is expressed as semantic CSS custom properties in `src/styles.css` and consumed as
Tailwind utilities (`bg-primary`, `text-muted-foreground`, `bg-pitch`, `text-gold`). **Never**
hardcode `text-white`, `bg-black`, or `bg-[#hex]` in components — it breaks theming and dark mode.

### Core palette (light theme)

| Token | oklch | Approx hex | Meaning |
| --- | --- | --- | --- |
| `--paper` / `--background` | `oklch(0.977 0.012 85)` | `#FBF8F2` | Warm paper canvas |
| `--ink` / `--foreground` | `oklch(0.14 0.02 260)` | `#12172A` | Primary text |
| `--primary` | `oklch(0.22 0.05 264)` | `#1E2540` | Striide navy — primary actions, headers |
| `--primary-foreground` | `oklch(0.98 0.005 85)` | `#FCFAF6` | Text on navy |
| `--pitch` | `oklch(0.44 0.09 156)` | `#2F7D54` | Pitch green — growth, development, progress |
| `--gold` | `oklch(0.75 0.14 78)` | `#D9A441` | Signal gold — verification, premium, KYC only |
| `--secondary` | `oklch(0.95 0.01 85)` | `#F1EEE8` | Chips, quiet surfaces |
| `--muted-foreground` | `oklch(0.48 0.02 260)` | `#6B7280` | Secondary text |
| `--border` / `--input` | `oklch(0.88 0.012 85)` | `#E1DCD3` | Hairlines, inputs |
| `--destructive` | `oklch(0.58 0.22 27)` | `#D03B2A` | Destructive actions, errors |
| `--ring` | `oklch(0.5 0.14 156)` | — | Focus ring (green) |

Dark theme values live under `.dark` in `src/styles.css`; ink and paper invert, pitch and gold
lighten. Charts use `--chart-1..5` in order.

### Colour discipline

- Gold is **reserved**: verified badges, Pro/premium, KYC. Never a generic accent or CTA.
- Pitch green means progress, development, positive outcome, and focus states.
- Navy is authority and structure: primary buttons, headers, dark sections.
- Never introduce purple/indigo gradients or a new brand hue without a token.

## 4. Typography

- Display / headings: **Fraunces** (`font-display`, also applied to `h1,h2,h3`), weight 600,
  letter-spacing `-0.015em`, optical sizing auto.
- Body / UI: **Manrope** (`font-sans`), weights 400/500/600.
- Load fonts via a `<link>` in `src/routes/__root.tsx` — never `@import` a remote URL in
  `src/styles.css` (Tailwind v4 resolves imports from the filesystem).
- Scale: hero `text-4xl`→`text-6xl`; section `text-2xl`→`text-3xl`; card title `text-lg`;
  body `text-sm`/`text-base`; eyebrow `text-xs uppercase tracking-[0.2em] text-muted-foreground`.
- Numbers in stats and KPIs use `font-display` with tabular alignment where columns align.
- **Email is the one exception.** Clients cannot load Fraunces or CSS custom properties, so
  transactional templates (`src/lib/comms/templates.server.ts`) use literal brand hex values,
  `Georgia,'Times New Roman',serif` for the heading, a system sans stack for body, and the PNG
  wordmark image at the top. Keep those two stacks in sync with this file, not with new hex.

## 5. Shape, spacing, elevation

- Radius base `--radius: 0.5rem`; use `rounded-md` for controls, `rounded-xl`/`rounded-2xl` for
  cards and panels, `rounded-full` for chips, badges and avatars.
- Spacing on a 4px grid. Page gutters `px-4 sm:px-6 lg:px-8`; section rhythm `py-12 sm:py-16 lg:py-24`;
  content max width `max-w-6xl mx-auto` (prose `max-w-3xl`).
- Elevation is restrained: hairline `border` + `bg-card` first, `shadow-sm` occasionally.
  No heavy or coloured shadows.
- Motion: 150–250ms, ease-out, opacity and small translate only. Respect
  `prefers-reduced-motion`.

## 6. Components and status vocabulary

- UI primitives are shadcn (new-york style) in `@/components/ui`; icons are **lucide-react**
  at `h-4 w-4` inline, `h-5 w-5` in nav. Do not mix icon sets.
- Brand primitives: `@/components/brand/badges` → `VerifiedBadge`, `ProBadge`, `RoleBadge`.
- Sport identity: `@/components/sport/sport-logo` → `SportLogo`, `SportBadge`; always render a
  sport's logo with an initials fallback so layout never shifts.
- Status colour mapping: verified/premium → gold; active/approved/progress → pitch;
  pending/neutral → secondary; failed/blocked → destructive.

## 7. Imagery

- Real sport photography, natural light, candid moments over posed hero shots. Multi-sport and
  multi-national by default — never an all-football, all-male, all-one-region set.
- Marketing photography is centralised in `src/lib/marketing-images.ts` with alt text attached
  to each entry; add new images there rather than inlining URLs.
- Every image needs meaningful `alt`; decorative images get `alt="" aria-hidden`.
- Photographs get `rounded-xl object-cover`, plus a navy scrim when text sits on top.

## 8. Accessibility (non-negotiable)

- WCAG 2.2 AA: 4.5:1 for body text, 3:1 for large text and UI boundaries.
- Gold on paper fails for small text — use `text-gold-foreground` on a gold surface instead.
- Visible focus ring on every interactive element (`--ring`); never remove outlines.
- Minimum 44×44px touch targets on mobile. Mobile-first: design 375px, then scale up.

## 9. Product surfaces an agent should know

`/` home · `/players` `/clubs` `/experts` audiences · `/pricing` · `/partners` founding partners ·
`/about` · `/demo` guided product walkthrough · `/privacy` `/security` `/terms` trust ·
`/app` signed-in athlete, `/app/org` club, `/app/expert` expert, `/app/admin` admin.

## 10. Checklist before shipping any myStriide UI

1. Colours come from tokens only; no raw hex or `text-white`.
2. Headings use Fraunces, body uses Manrope.
3. Gold used only for verification/premium.
4. British English, sentence case, no emoji.
5. Responsive from 375px; touch targets ≥44px.
6. Alt text on images; focus states intact; contrast checked.
7. Page has a unique `head()` title/description (and og/twitter tags).