Anthony Nehra Fitness

Brand
Style Guide

A comprehensive reference for color, typography, and visual system decisions — for both web editorial and content/social contexts. Final web specifications subject to Anthony's review.

Version 1.1 — May 2026
Slate & Ember
Titling Gothic +
Inter system
01

Color System

Palette

Slate Black
#1C1F24
Primary
Warm White
#F6F5F2
Background
Ember
#D44D1A
Accent
Graphite
#3A3F47
Supporting
Cool Grey
#9EA4AD
Secondary Text
Ember Wash
#FAF0EB
Accent Tint

Usage Rules

Color Use for Never use for
Slate Black Headlines, body text, dark backgrounds, borders, logotype Large background areas in digital (use Graphite instead)
Warm White Page backgrounds, cards, light surfaces, reverse text on dark Text on light backgrounds
Ember CTAs, accent bars, category tags, single highlight words, links Body copy, large background fills, more than 20% of any composition
Graphite Dark mode backgrounds, panels, reel cover backgrounds (alt) Text (too low contrast on dark backgrounds)
Cool Grey Captions, metadata, dividers, supporting labels Headlines, CTAs, anything that needs to command attention
Ember Wash Callout boxes, pull quote backgrounds, subtle section highlights Large backgrounds, dark mode contexts
02

Typography

Font Files

RoleTypeface
Logotype Titling Gothic Compressed Medium
Display / Hero Titling Gothic Compressed Bold
Headlines H1–H2 Titling Gothic Condensed Medium
H3 / Subheads Inter Display 500
Body Copy Inter 400
Labels / Tags / UI Inter Display 500

Inter Display is measurably tighter than standard Inter at optical sizes. Always use the Display cut for H3, labels, and UI text — never substitute standard Inter at these roles.

Type Scale & Specimens

Note: Titling Gothic is rendered here via system condensed weight proxy. The visual weight and character spacing will differ from the actual font files.

Logotype Titling Gothic Compressed Medium
All caps · No tracking

Web + Social

ANF wordmark only. Always all-caps. Occasional editorial override where context earns it — never a substitute for Display or headline roles.

ANTHONY NEHRA FITNESS
Display / Hero Titling Gothic Compressed Bold
Title case · No tracking
Web: 48–72px
Social: Any size

Social

Campaign headlines, hero sections, book covers, major typographic moments. Never used in blog or standard editorial contexts.

Built
Different
H1 — Article Title Titling Gothic Condensed Medium
Title case · Tracking -1
Web: 36–48px
Mobile: 28–36px

Web

One H1 per page. Long-form articles, landing page heroes. Never all-caps at this role.

Why Strength Training
Is the Only Strategy
That Works After 40
H2 — Section Head Titling Gothic Condensed Medium
Title case · Tracking -1
Web: 26–32px
Mobile: 22–26px

Web

Primary section dividers within long-form content. Preceded by generous whitespace above — minimum 2× the H2 size.

The Problem With
High-Volume Training
H3 — Subhead Inter Display 500
Sentence case · No tracking
Web: 18–22px
Mobile: 16–18px

Web

Used sparingly — only when content requires specific delineation within a section. Never decorative. Sentence case only.

How recovery actually works
after your mid-40s
Body Copy Inter 400
Sentence case · Line height 1.7
Web: 15–17px
Mobile: 15–16px

Web + Social

Default reading text. Never below 15px. Max line length 65–70 characters for editorial comfort.

Most guys over 40 train like they're still 25. The volume is wrong, the recovery is wrong, and the approach to nutrition doesn't match how their body actually works now. The result isn't just slow progress — it's an injury waiting to happen.
Blockquote Inter 300 Italic
Ember left border · 2px rule
Web: 18–22px
Left padding: 24px

Web

Pull quotes, client testimonials, key statements. Attribution in Inter Display 500 all-caps, Cool Grey, below quote. Ember rule is the only decorative element.

The basics work. Stop trying to figure out the next trick. Get strong at basic movements, and practice them relentlessly.

Anthony Nehra
Caption Inter Display 400
Sentence case · Line height 1.5
Web: 11–13px
Color: Cool Grey

Web

Below images and figures in long-form content. Never bold. Optional: precede with a short Ember-colored label in Inter Display 500 all-caps.

Progressive overload in action — adding load weekly over a 12-week strength block.
Labels / Tags / UI Inter Display 500
All caps · Tracking +0.15em
Size: 9–11px
Color: Cool Grey or Ember

Web + Social

Category tags, metadata, navigation items, section eyebrows. Ember when active or highlighted; Cool Grey when passive.

Strength Training
Nutrition · Recovery · Mindset
Strength Nutrition Mindset

Typography Rules

✓ Do

  • Use Titling Gothic for all display and H1/H2 — no exceptions
  • Use Inter Display (not regular Inter) for H3 and labels
  • Maintain 1.7 line height on all body copy
  • Keep body text max ~65 characters per line
  • Precede H2 with generous space — minimum 2× the font size
  • Attribution in blockquotes: Inter Display 500, all-caps, Cool Grey

✗ Don't

  • Never use Titling Gothic in sentence case at Display role
  • Never substitute regular Inter for Inter Display at H3/label roles
  • Never bold body copy for emphasis — use a new H3 instead
  • Never stack H1 + H2 without body copy between them
  • Never use more than three type sizes in a single composition
  • Never track Titling Gothic positively — only neutral or negative
03

Approved Pairings

Slate Black
Warm White

Primary pairing — maximum contrast, editorial foundation

Slate Black
Ember

High-impact pairing — CTAs, cover accents, campaign moments

Graphite
Warm White

Supporting pairing — dark panels, secondary surfaces

Ember Wash
Ember
Slate Black

Callout combination — pull quotes, highlights, featured content

04

CTAs & Buttons

Button Variants

Start Here Learn More Apply Now
Start Here Learn More
VariantBackgroundTextUse for
Primary Slate Black Warm White Default CTA on light backgrounds. Most used.
Secondary Transparent Slate Black + border Secondary actions alongside a primary CTA. Never the only button on a page.
Ember Ember Warm White Highest-priority conversion moments only — hero CTA, coaching application. Max one per page.
Ghost Transparent Warm White + border CTAs on dark backgrounds (Slate Black or Graphite sections).

Button Specifications

PropertyValue
FontInter Display 500, all-caps, tracking +0.15em
Font size11px
Padding14px 28px
Border radius0 — always square corners
Border width1.5px on outlined variants
HoverOpacity 0.85 — never change color on hover
05

Spacing & Layout

Core Principle

White space is not empty space — it's a design element. The brand aesthetic is clean and editorial. When in doubt, add more space rather than less. Crowded layouts contradict the brand.

Spacing Scale

TokenValueUse
xs4pxInternal element gaps — icon to label, tag padding
sm8pxTight related elements — label above headline
md16pxComponent internal padding, button padding
lg32pxBetween distinct elements on page, card padding
xl64pxSection breaks, above H2 headings
2xl96–120pxMajor page sections, hero vertical padding

Layout Rules

✓ Do

  • Maximize white space — it signals premium
  • Give H2 headings at least 64px space above
  • Keep max content width ~860px for editorial comfort
  • Use generous padding inside cards and panels
  • Let the Ember accent bar or rule do decorative work — space does the rest

✗ Don't

  • Never crowd multiple CTAs together
  • Never stack H1 + H2 without breathing room
  • Never use borders as space-fillers — add actual space instead
  • Never reduce body font below 15px to fit more content
  • Never full-bleed text to viewport edges — always maintain margins
06

Image Treatment

Aspect Ratios

9:16 — Reels / Stories

1:1 — Grid / Cards

4:3 — Editorial / Blog

Photography Direction

ElementGuidance
Subject Direct eye contact preferred. Confident, not aggressive. Approachable authority.
Environment Clean backgrounds — solid walls, minimal clutter. Gym context when relevant but not required. Travel/lifestyle imagery welcomed for audience resonance.
Tone Natural light preferred. Avoid heavy filters or dramatic color grading. Color should feel real, not Instagram-processed.
Color fit Cooler, neutral backgrounds (blues, greys, whites) pair best with the Slate & Ember palette. Avoid warm orange/yellow backgrounds that clash with Ember.
Filters None. Slight exposure/contrast correction acceptable. No presets, no grain effects, no desaturation.
07

AI Design Prompt

Copy and paste the block below when starting any new design session in Claude Design, or when briefing any AI tool on brand visuals. This is the single-source prompt that encodes the full system.

Claude Design / AI onboarding prompt — copy verbatim

// BRAND: Anthony Nehra Fitness // AESTHETIC: Clean editorial. High white space. Flat — no gradients, no drop shadows, no textures. COLORS: — Slate Black #1C1F24 (primary text, dark panels, borders) — Warm White #F6F5F2 (backgrounds, light surfaces — never pure #FFF) — Ember #D44D1A (accent only — CTAs, bars, rules, tags — max 20% of any composition) — Graphite #3A3F47 (secondary dark surfaces) — Cool Grey #9EA4AD (captions, metadata, labels) — Ember Wash #FAF0EB (callout backgrounds) TYPOGRAPHY: — Logotype : Titling Gothic Compressed Medium — all caps, no tracking — ANF wordmark only — Display / Hero : Titling Gothic Compressed Bold — title case, no tracking — campaigns, hero moments; never editorial/blog — H1, H2 : Titling Gothic Condensed Medium — title case, tracking -1 — H3 : Inter Display 500 — sentence case, no tracking — Body : Inter 400 — sentence case, line height 1.7 — Labels/Tags/UI : Inter Display 500 — all caps, tracking +0.15em TYPE SCALE (web): — Display : 48–72px — H1 : 36–48px (mobile 28–36px) — H2 : 26–32px (mobile 22–26px) — H3 : 18–22px (mobile 16–18px) — Body : 15–17px — Caption : 11–13px, Cool Grey — Labels : 9–11px BLOCKQUOTES: Inter 300 italic, 18–22px, 2px Ember left border, 24px left padding. Attribution: Inter Display 500 all-caps, Cool Grey, below quote. BUTTONS: Square corners (border-radius: 0). Inter Display 500, all-caps, tracking +0.15em, 11px, padding 14px 28px. — Primary : Slate Black bg, Warm White text — Secondary : Transparent, Slate Black border 1.5px — Ember : Ember bg, Warm White text — max one per page, highest-priority CTA only — Ghost : Transparent, Warm White border — on dark backgrounds only SPACING: Generous. When in doubt, add more space. Min 64px above H2 headings. White space is a design element — never crowd. NEVER: — Use pure #000 or pure #FFF — Use gradients, drop shadows, or textures — Use Ember as a background on large areas — Stack two dark cover variants back-to-back in a grid — Use more than 3 type sizes in a single composition — Use regular Inter where Inter Display is specified