Brand Standards

Push Further Fitness

The visual and verbal identity for the movement. Built on discipline, grit, and community.

Palette

Brand Colors

Five core colors. No gradients outside of hero overlays.

Charcoal

#1C1C1C

Base dark background, hero base

Ash

#2A2A2A

Cards, secondary surfaces, dividers

Bone

#F3F3F3

Primary text, high-contrast elements

Gold

#C9A227

CTAs, primary accents, headings, glow effects

Red

#C53030

Destructive states, high difficulty badges

Tokens

Semantic Colors

CSS variable values mapped to the shadcn/ui system.

Background

hsl(0 0% 10%)

Charcoal base

Foreground

hsl(0 0% 95%)

Bone text

Primary

hsl(44 68% 47%)

Brand gold

Primary Foreground

hsl(0 0% 10%)

Charcoal on gold

Secondary

hsl(0 0% 20%)

Ash surfaces

Muted

hsl(0 0% 25%)

Subtle backgrounds

Muted Foreground

hsl(0 0% 65%)

Secondary text

Accent

hsl(0 0% 20%)

Hover/active states

Destructive

hsl(0 61% 48%)

Brand red

Border

hsl(0 0% 22%)

Hairline divisions

Ring

hsl(44 68% 47%)

Focus rings, gold

Type

Typography

Two fonts. One voice. Uppercase discipline.

Headings

Font: Oswald

Style: Uppercase, tracking-[0.08em]–[0.3em]

Sizes: text-xs / text-lg / text-xl / text-2xl / text-3xl / text-4xl / text-5xl

Body & UI

Font: Inter

Style: Regular, antialiased

Sizes: text-xs / text-sm / text-base / text-lg

Heading Sample

Discipline Over Motivation

Oswald, uppercase, tracking 0.25em, text-4xl/5xl

Body text in Inter. Regular weight, antialiased. Used for descriptions, rules, and long-form content.

Inter, regular, text-base, muted-foreground for secondary.

Voice

Voice & Tone

How we speak. Direct. Gritty. No fluff.

Writing Rules

01
Lead with action, not adjectives—discipline over motivation.
02
Uppercase headings with wide tracking (0.2em–0.4em).
03
Replace soft language with direct commands: show up, hold the line, earn it.
04
Assume the reader is capable but unproven. Invite them to prove it.
05
Avoid corporate buzzwords. No 'synergy,' 'holistic,' or 'optimize your journey.'
06
Use short sentences. One idea per line where possible.
07
Celebrate effort over identity—what you do, not who you claim to be.

Approved Language

Discipline

Grit

Resilience

Earn it

Hold the line

Show up

Accountability

Hardship

Stack wins

Before sunrise

Slogans & Headlines

“Go Further Than Most.”

“Discipline Over Motivation.”

“Earn Every Mile.”

“Hardship-Based Training Chapters”

“Your effort is the entry fee.”

Signature Tagline

Earn Every Mile. Discipline Over Motivation.

Structure

Spacing & Layout

Consistent rhythm keeps the site readable and bold.

container

max-w-[1280px]

Centered with 1.5rem padding

section padding

py-12 to py-24

Generous vertical rhythm

grid gap

gap-6 to gap-10

Consistent card/grid spacing

card padding

p-6

Internal card padding

border radius

0.5rem (8px)

Cards, buttons, inputs

headline tracking

0.12em–0.3em

Oswald uppercase only

Visuals

Imagery Guidelines

What to shoot. What to avoid.

01
Dark-first photography with low opacity overlays (30%).
02
Action-oriented: climbing, rucking, group training, flags.
03
Gritty, unpolished, authentic moments over stock perfection.
04
Warm desaturation—avoid neon or overly bright palettes.
05
Circular logo container with thin border and inner padding.

Climbers

Ruckers

Stadium group

Farm flag

Component Patterns

Reusable building blocks used across the site.

Buttons

Uppercase + wide tracking (0.2em–0.3em)
Rounded-md (8px) corners
Variants: default (gold), outline (border), ghost (subtle), link (underlined)
Sizes: default (36px), sm (32px), lg (40px)

Cards

Rounded-xl (12px) corners
Border: border-border/60 (subtle hairline)
Background: bg-secondary/20 (ash tint)
Header + Content + optional Footer

Badges

Uppercase with heavy tracking (0.2em–0.25em)
Variants: default (gold), secondary (ash), outline (text)
Use for tags, status, regions, chapter IDs

Dialogs

Bordered with backdrop blur (backdrop-blur-lg)
Background/95 opacity for readability
Uppercase heading with wide tracking

Icons

Iconography

Lucide React. Clean, geometric, consistent.

We use Lucide React for all UI icons. Icons are sized at 16px (h-4 w-4) or 20px (h-5 w-5) consistently. Never use emojis. Icons should reinforce actions or labels, not replace them.

Logo