Brand kit

How myStriide looks and sounds

Everything needed to build an on-brand myStriide surface: logo files, the semantic colour system, typography, spacing, component vocabulary and imagery direction. There is also a machine-readable version so an AI agent can build to spec without guessing.

Open AGENT.MD Download wordmark

Identity

Name and lockups

Written myStriide — lowercase m, capital S, double i. The endorsement line “by Striide” always sits secondary to the wordmark. Never PlayerHub, My Striide or Mystriide.

myStriideby Striide

Inline — wordmark plus endorsement

myStriideby Striide

Stacked — hero and auth panels

myStriideby Striide

Invert — navy or photography

In code: <BrandLockup variant="inline" />

Assets

Logo files

All lettering is outlined to vector paths, so files render identically to the in-app lockup on any machine — no font install needed. Clear space equal to the cap height of the S on all sides. Minimum wordmark width 96px. Never stretch, rotate, recolour or add effects.

Wordmark

Default lockup on paper or white

SVG PNG

Wordmark, inverted

Navy sections and photography

SVG PNG

Mark, navy

Avatars, app icon, favicon source

SVG PNG

Mark, gold accent

Premium and verified contexts

SVG PNG

Colour

Semantic palette

Colour lives as shadcn semantic tokens plus a small set of brand status tokens. Never hardcode hex values or text-white in components — it breaks theming and dark mode.

#FBF8F2

Paper

--background

Warm paper canvas

#12172A

Ink

--foreground

Primary text

#1E2540

Striide navy

--primary

Primary actions, headers

#2F7D54

Pitch green

--brand-success

Growth, progress, focus

#D9A441

Signal gold

--brand-gold

Verification, premium only

#F1EEE8

Secondary

--secondary

Chips, quiet surfaces

#6B7280

Muted

--muted-foreground

Secondary text

#E1DCD3

Border

--border

Hairlines, inputs

#D03B2A

Destructive

--destructive

Errors, deletion

Brand status tokens

Use these instead of Tailwind colour names such as green-500 or red-600. Gold stays reserved for verification and premium — warnings use brand-warning.

#D03B2A

Error

--brand-error

Failures, blocked, form errors

#2F7D54

Success

--brand-success

Success, approved, progress

#C9842A

Warning

--brand-warning

Caution states. Not verification gold.

#3B5B8A

Info

--brand-info

Informational callouts

Gold is reserved

Verification, Pro and KYC only. Never a generic accent or CTA colour.

Green means progress

Development, positive outcomes, focus rings. Token: brand-success.

Navy is structure

Primary buttons, headers, dark sections and authority.

Typography

Fraunces and Manrope

Fraunces carries display and headings at weight 600 with tightened tracking. Manrope carries all body and interface text.

Display / Fraunces 600

Talent, everywhere it happens

Heading / Fraunces 600

Verified athlete profiles

Body / Manrope 400

Athletes build a verified profile once. Clubs and academies recruit from evidence rather than reputation. Experts reach both sides with credentials that have been checked.

Manrope RegularManrope MediumManrope SemiBold

Components

Interface vocabulary

shadcn (base-lyra) primitives with lucide icons. Radius base 0.5rem, hairline borders, restrained elevation, 150–250ms ease-out motion.

Buttons

Badges and status

VerifiedProPlayerOrganisationAdminScoutActiveBlocked

Verified and premium are gold. Active and progress are pitch green. Neutral states use secondary. Failures use destructive and brand-error.

Radius

rounded-md controls, rounded-xl cards, rounded-full chips and avatars.

Spacing

4px grid. Gutters px-4 → lg:px-8. Sections py-12 → lg:py-24. Max width 6xl.

Motion

Opacity and small translate, 150–250ms ease-out, reduced-motion respected.

Voice

How we write

British English, plain and concrete. Say what a thing does, then what to do next. No hype, no exclamation marks, no emoji in product copy.

Write this

“Your profile is verified. Clubs in your region can now find you.”
“Add two match clips to complete your evidence.”
“This plan includes 25 athlete contacts a month.”

Not this

“Congratulations!! You're now a superstar on our platform 🎉”
“Leverage AI-powered synergies to unlock your potential.”
“Unlimited everything, forever, guaranteed.”

Imagery

Photography direction

Real sport, natural light, candid over posed. Multi-sport and multi-national by default — never an all-football, all-male, all-one-region set.

Photographs use rounded-xl object-cover, with a navy scrim behind any overlaid text.

CricketAthleticsBasketballHockey

Marketing photography is centralised in src/lib/marketing-images.ts with alt text attached to every entry.
Sports are always shown with their logo via SportLogo and an initials fallback so layout never shifts.
Every image carries meaningful alt text; decorative images are hidden from assistive technology.

Accessibility

Non-negotiables

WCAG 2.2 AA is part of the brand, not a later pass.

Contrast 4.5:1 for body text, 3:1 for large text and interface boundaries.
Gold on paper fails for small text — put ink on a gold surface instead (text-brand-gold-foreground).
Visible focus ring on every interactive element. Outlines are never removed.
Touch targets at least 44×44px. Designs start at 375px wide and scale up.

For AI agents

AGENT.MD

A machine-readable version of this page, written so any AI agent can build an on-brand myStriide surface without further context.

Point your agent at /brand-kit/AGENT.MD — it contains the token table with hex fallbacks, component imports, naming rules, voice guidance and a pre-ship checklist.

View AGENT.MD Download