Internal Style Guide

Reps & Sets Performance Labs — brand tokens & usage notes

1) Colors

Primary background: #000000 (Black)

Primary text: #FFFFFF (White)

Accent / brand yellow: #fcdd3e

2) Fonts

Headlines/Nav/Buttons: Teko — bold, athletic.

Body: Montserrat — clean, readable.

Letter-spacing for headline elements: ~0.5px. Uppercase okay for buttons/short headings.

3) Buttons

Use the .boxed-btn3 class. Accent outline by default; invert on hover.

Sample Button Filled (Variant)

4) Links

Links use accent yellow. Hover can invert or underline minimally.

5) Images & Sizes

Logo: Transparent PNG/SVG. Recommended export sizes: 256x154 (header), 512x308 (retina). File: img/logo.png
Trainer cards: 362x422 PNG/JPG. Files: img/placeholders/trainer-side-362x422.png, trainer-middle-362x422.png
Hero/Backgrounds: Prefer 1920x1080 or 1920x1200 JPG/WEBP, compressed < 300KB. Place under img/

Keep file names descriptive and sized: e.g., hero-lab-1920x1080.webp

6) Content Voice

Confident, science-forward, and no‑nonsense. Avoid fluff. Microcopy should motivate action: “Earn every rep.”

7) Social

Keep YouTube/Instagram/TikTok/Etsy references consistent. Use the floating bar (desktop vertical / mobile dock).

8) Components

Service cards: 3-up or 6-up grid; short headline + 1‑line proof.

Band banner: Full‑width accent yellow with white text for announcements (e.g., “COMING SOON”).

Pricing cards: Titles: Source / IFbb / Trainer. Price text: “coming soon”. CTA: “Shop Now” → Etsy.

9) Legal

REPS & SETS®, REPS & SETS PERFORMANCE LABS®, and associated marks and graphics are trademarks of REPS & SETS PERFORMANCE LABS. All rights reserved. Unauthorized reproduction, distribution, or derivative use of our brand names, logos, artwork, or designs is strictly prohibited.

Address: Somewhere between a squat rack and a dream. Southland — COMING SOON

10) Social Icons (Replace Images)

The floating social bar uses image files so you can brand them. Replace the files below with your own PNG/SVG while keeping the same filenames and sizes.

img/icons/social-youtube-48.png — 48x48 PNG
img/icons/social-instagram-48.png — 48x48 PNG
img/icons/social-tiktok-48.png — 48x48 PNG
img/icons/social-etsy-48.png — 48x48 PNG

Where to place: Put replacement images in img/icons/. Keep file names identical so the site swaps automatically.

Tip: Use transparent PNG or SVG and test on desktop (left bar) and mobile (bottom dock).