OG FITBrand Board
Everything needed to design, film, or build anything carrying the OG Fit name. Colors, type, logo rules, components, voice, and asset specs.
What OG Fit
actually is
A free gym workout tracker. Log each day as Rest, Gym, or Cardio. On gym days, pick muscle groups and log sets in two taps. Streaks, a monthly heatmap, and honest charts do the rest. 138 exercises with full form guides are built in.
OG Fit — default, always with the space.
OGFit — handles, domains, hashtags.
OG FIT — display type and mono labels only.
Never: Og Fit · OG-Fit · O.G. Fit
Log Every Rep — primary, hero H1.
Strength In Every Rep — logo lockup.
Alternates: Train like a legend · Every rep counts · No zero days
Blunt · Confident · Dry-funny · Anti-corporate · Gym-floor honest.
Sounds like a strong training partner who does not waste your time. Not a wellness brand.
The mark
An "OG" lettermark built as a dumbbell. The O and G form the plates, with plate stacks and a bar running through. Geometric, cut-corner, heavy stroke. Two constructions exist and both are correct.
Clear space = height of the letter O on all four sides.
Minimum 24px digital / 10mm print.
App icon radius = 22% of the square.
Do
- Positive lime logo on black, white, or a dark-overlaid photo
- Negative logo on #0C0C10, #0E0E12, or #131318
- Keep it perfectly square with its native radius
- Use the supplied SVG or PNG files, always
Don't
- Recolor outside the two official limes
- Add gradients, bevels, strokes, or drop shadows
- Rotate, skew, stretch, or squash
- Retype "OG" in a font to rebuild the mark
- Add a second tagline under the mark
Lime is the
only bright color
Grayscale carries the layout. Lime is punctuation — it always means "act here" or "this is your data." One lime CTA per viewport. Never a second accent hue.
The logo and banners use #C6FA05; the website and app CSS use #BEF500. Small difference, but real. Use #C6FA05 for anything printed, filmed, or designed as artwork. Use #BEF500 inside the product so it matches the codebase. Unify later — #BEF500 is the easier change since it lives in one CSS variable.
:root {
--bg: #0C0C10;
--panel: #131318;
--panel2: #0F0F14;
--line: #26262E;
--lime: #BEF500;
--lime-dim: rgba(190,245,0,.14);
--white: #FFFFFF;
--text: #EDEDF2;
--muted: #8F8F9C;
--faint: #55555F;
--red: #FF5C5C;
}
| Pair | Ratio | Use |
|---|---|---|
| #BEF500 on #0C0C10 | 15.9:1 | Anything |
| #131212 on #C6FA05 | 14.7:1 | Anything |
| #EDEDF2 on #0C0C10 | 16.4:1 | Anything |
| #8F8F9C on #0C0C10 | 7.0:1 | Body ≥14px |
| #55555F on #0C0C10 | 2.6:1 | Decorative only |
Focus state everywhere: outline: 2px solid #BEF500; outline-offset: 3px
Color law — do
- One lime CTA per viewport
- Black text on lime, always
- Full lime fields in artwork (banners, thumbnails, merch)
- Lime for the user's own data — charts, heatmap, streak
Color law — don't
- White text on lime
- Large lime background fills inside the product UI
- A second accent hue — no orange, blue, purple
- Gradients between two colors
- #55555F for anything a person needs to read
Three fonts.
No exceptions.
Sora carries every headline and number. Inter carries every sentence. JetBrains Mono carries every label and readout. All three are free Google Fonts.
Weights 700, 800. All H1–H3, buttons, big stat numbers, wordmark. Approved substitute: Manrope.
Weights 400, 500, 600. Paragraphs, labels, form fields, everything else. No substitute.
Weights 400, 500, 700. Eyebrows, tags, chips, tickers, stat captions, timers. No substitute.
done properly
Type law — do
- Headlines: uppercase Sora 800, negative tracking
- Scale tracking with size: −.04em huge → 0 small
- Mono always uppercase with .18em+ tracking
- Split a headline into a white line and a lime line
- Make numbers the second-biggest thing on screen
Type law — don't
- Body copy in Sora, or headlines in Inter
- More than one lime word per headline
- Body text under 14px
- Hand-set mobile sizes — every heading uses clamp()
- Mono in sentence case or for paragraphs
8px grid.
Hard edges.
| Grid base | 8px |
| Container | max 1200px |
| Side padding | 24px desktop · 20px mobile |
| Section padding | 96–140px · 64–80px mobile |
| Card padding | 34–40px · 24px mobile |
| Nav height | ~72px |
| Border | 1px solid #26262E |
| Mobile | ≤ 640px |
| Large mobile | ≤ 820px — grain & blur drop |
| Tablet | ≤ 1024px — grids collapse to 1 col |
| Desktop | > 1024px |
The v2 "gym poster" style uses hard edges with offset lime shadows, not soft blur. Glow is allowed only as an ambient background effect at low opacity, never on an interactive element.
The kit
Live examples. Hover the lime button — it presses into its own shadow. That press is a signature interaction, keep it everywhere.
Sora 700 · 15px · padding 14px 26px · min-height 46px · radius 12px · box-shadow: 5px 5px 0 #3D4E00
Copy: always an action plus ↗ when it leaves the page. Never "Click here", "Learn more", "Submit".
Mono uppercase · .18em tracking · radius 999px · border #26262E. Active: lime text on rgba(190,245,0,.14).
Background #131318 · border 1px #26262E · radius 16–20px · padding 34–40px. May carry a mono index chip: №01, 01 / LOG, PAGE 03.
Lucide only, stroke width 2. Never mix another icon family. Common: Dumbbell, Flame, TrendingUp, Calendar, User, BookOpen, BarChart3.
Top bar: circular logo + lime italic wordmark, streak pill right. Bottom tab bar: floating dark pill — Home · Log · Library · Stats · Profile. Active tab turns lime.
Nothing spins.
Nothing bounces.
| Standard ease | cubic-bezier(.22,.61,.36,1) |
| Snap ease | cubic-bezier(.34,1.4,.44,1) |
| Micro transition | 180ms |
| Standard reveal | 500ms — fade + 26px rise |
| Hero letter rise | 700ms, 80ms stagger |
| Count-up | 1400ms, cubic ease-out |
Boot logo stamp (~0.8s) → hero lines rising from masks → universal scroll reveal → word-by-word heading reveals → count-up numbers → heatmap cells lighting up → self-drawing line chart → growing bars → running rest-timer bar → pulsing streak flame → dual tilted marquee tickers → magnetic press-down buttons → parallax ghost outline text → custom lime cursor → nav blur on scroll → top scroll-progress bar.
Every animation respects prefers-reduced-motion. Mobile runs a lighter budget automatically.
How OG Fit talks
Short declarative sentences. Second person. Specific numbers instead of adjectives. Dry humor welcome. Confidence without hype.
Do
- Sentences under 25 words
- Real numbers: 138 exercises, 2 taps, 90 seconds
- Headings as two short uppercase lines, one idea each
- Name things plainly: Rest timer, Streak, Volume
Don't
- No em dashes. Use a period or comma
- No journey, elevate, unleash, transform, beast mode
- No seamless, robust, leverage, empower, cutting-edge
- No emojis in body copy (🔥 streak flame is the exception)
- No fabricated stats, fake testimonials, invented user counts
- No exclamation marks
The no-em-dash rule governs public-facing copy: website, app, social, video, exercise descriptions. This reference document uses em dashes as spec separators in tables and headings, which is fine internally.
| Say | Not |
|---|---|
| Log a set | Record an entry |
| Streak | Consistency score |
| Volume | Total workload |
| Gym day / Rest day / Cardio day | Activity type |
| Exercise library | Exercise database |
| Get the app | Download now |
| Free · your data stays yours | Freemium |
Dark, single
subject, lime rim
Pure black or #0C0C10 background so the subject blends into the page. Lime highlights the working muscle. No stock-photo gym smiles, no group shots, no lifestyle clutter.
Flat minimal vector illustration of a person performing [EXERCISE], side view, clean shapes, [MUSCLE] highlighted in lime green, dark charcoal background #0E0E12, lime green #BEF500 accent, thin consistent line style, centered, no text, square 1:1.
Reuse this exact string for every exercise. Change only the bracketed values. Generate 1024×1024, export WebP.
| Asset | Size | Format | Max |
|---|---|---|---|
| Hero render | 1600×1600 | WebP | 400KB |
| Exercise art | 1024×1024 | WebP | 120KB |
| App screenshot | native | WebP/PNG | 300KB |
| Social share | 1200×630 | PNG | 500KB |
| App icon | 512×512 | PNG + SVG | — |
| Favicon | 32 / 180 | PNG/ICO | — |
For editors and
thumbnail designers
| Instagram square | 1080×1080 |
| Instagram portrait | 1080×1350 |
| Reels / Shorts / TikTok | 1080×1920 |
| YouTube thumbnail | 1280×720 |
| YouTube video | 1920×1080 / 4K |
| OG link preview | 1200×630 |
| Profile avatar | 512×512 (LOGO.png) |
1. Maximum 4 words, uppercase Sora 800.
2. One lime element only — text or highlight, never both.
3. Readable at 320px wide.
4. Background dark #0C0C10 or full lime #C6FA05 with black type. Never mid-gray.
5. Logo watermark bottom-right, icon only, 6–8% of canvas width.
6. 80px safe margin on a 1280×720 canvas.
7. No arrows, no red circles, no shocked faces, no drop shadows on type.
| Element | Spec |
|---|---|
| Captions | Inter or Sora 600–800, white #EDEDF2, keyword highlighted in #BEF500 |
| Caption position | Centered lower third, keep 250px clear at the bottom of a 9:16 frame |
| Lower thirds / titles | Sora 800 uppercase, −.03em tracking, on a #131318 panel with a 1px #26262E border |
| Data callouts | JetBrains Mono uppercase, .2em tracking, lime |
| Transitions | Hard cuts. One whip-pan max per video. No zoom-blur spam, no glitch effects |
| Logo sting | Icon stamps in over ~0.8s with a slight scale-down. No spin, no bounce |
| End card | Dark background, lime CTA "Get the app ↗", ogfit.pro in mono, hold 3s |
| Counters / bars | Lime fill, count up with ease-out, never linear |
| Grade | Crushed blacks, high contrast, desaturated except the lime. No orange-teal |
| Music | Percussive, no lyrics over voiceover, cut on the beat at section changes |
Caption formula for social: hook line → one specific detail → CTA. Under 3 short lines before the fold. Hashtags lowercase: #ogfit #gymtracker #workoutlog #progressiveoverload
For developers
| Frontend | React + Vite + Tailwind + shadcn/ui, Lucide icons |
| Backend | Supabase — Postgres, Auth, RLS, Storage |
| Auth | Supabase Auth + Google OAuth |
| Website | Static HTML/CSS/JS, zero deps (live on WordPress + Elementor) |
| Contact form | n8n webhook → validate → data table → SMTP |
1. Row-Level Security ON for every table (auth.uid() = user_id).
2. No demo or seed data, ever. New users start at 0.
3. Two taps per set. A third tap means the flow is wrong.
4. Rest timer defaults to 90s, ±15s, sound + vibration.
5. Exercise catalog in JSON, user data in Supabase. Logs store the id slug.
| Region | Muscle groups | Count |
|---|---|---|
| Chest | Chest | 19 |
| Back | Upper Back, Lower Back | 23 |
| Shoulders | Shoulders | 14 |
| Arms | Biceps, Triceps, Forearms | 26 |
| Legs | Quads, Hamstrings, Glutes, Calves | 30 |
| Core | Abs | 18 |
| Cardio | Cardio | 8 |
Where everything
lives
| Asset | Path |
|---|---|
| Master logo PNG 512 | BRANDING/LOGO/LOGO.png |
| Master logo vector | BRANDING/LOGO/LOGO.svg |
| Photoshop source | BRANDING/LOGO/LOGO.psd |
| Affinity source | BRANDING/LOGO/LOGO.af |
| Dark icon (glow) | ogfit-icon.svg |
| Dark icon (flat) | ogfit-icon-flat.svg |
| Transparent mark | ogfit-mark.svg |
| Social banner | BRANDING/banner/social-share.png |
| Social banner v2 | BRANDING/banner/social-share-v2.png |
| Asset | Path |
|---|---|
| App screenshots | IMAGES/SCREENSHOTS/ |
| Login design PSD | IMAGES/login page design.psd |
| AI hero renders | AI IMAGES/ |
| Website v2 source | _WEBSITE/index-v2.html |
| App page | _WEBSITE/app-v2.html |
| Contact page | _WEBSITE/contact-v3.html |
| Site edit guide | _WEBSITE/OG-Fit-Site-Guide.md |
| Exercise catalog | exercises.json · og-fit-exercises.csv |
| Project context | OG-Fit-CONTEXT.md |
Branding folder rule: never overwrite a file in BRANDING/. Always save a new version — social-share-v3.png, and so on.
Ten-second
version
BRAND OG Fit · ogfit.pro · @ogfit.pro TAGLINE Log Every Rep / Strength In Every Rep LIME (brand) #C6FA05 LIME (UI) #BEF500 BLACK #131212 BG #0C0C10 PANEL #131318 BORDER #26262E TEXT #EDEDF2 MUTED #8F8F9C DISPLAY Sora 800, UPPERCASE, tracking -0.03em BODY Inter 400/500/600, 16px, line-height 1.6 LABELS JetBrains Mono, UPPERCASE, tracking .22em RADIUS buttons 12px · cards 16-20px · pills 999px BUTTON lime fill, #0C0C10 text, 5px 5px 0 #3D4E00 shadow ICONS Lucide, stroke 2 RULES Lime is the only bright color and always means "act here." No em dashes. No hype words. No fake numbers. No emojis (except 🔥). One lime CTA per screen. Black text on lime, never white.