Top Gun National Walker
Brand Guidelines & Design System
Based on the Top Gun logo and topgunfastpitch.com (TODO: replace with Design Desk spec)
Color Palette
Primary Colors
Top Gun Navy
#2C3669
RGB: 44, 54, 105
Primary brand color. Use for headers, navigation, buttons, and key UI elements. Token: tg-navy.
Top Gun Blue
#3D5A9E
RGB: 61, 90, 158
Secondary text and links. Token: tg-blue.
Top Gun Orange
#DE5E2F
RGB: 222, 94, 47
Active-nav underline, eyebrow label, and link hover only. Token: tg-orange.
Top Gun Sky
#EEF2FA
RGB: 238, 242, 250
Alternate sections and table stripes. Token: tg-sky.
Gray Scale
White
#ffffff
Backgrounds, cards
Gray Light
#D9DEE8
Borders, dividers
Gray Blue
#5B6478
Section backgrounds
Gray Dark
#1A1F2E
Body text
Typography
Primary Font
Inter
Used for all body text, headings, and UI elements
Heading 1 - 48px Bold
Top Gun National Walker
Heading 2 - 36px Bold
Elite Softball Recruiting
Heading 3 - 30px Semibold
Player Profiles
Body Text - 16px Regular
The quick brown fox jumps over the lazy dog. Top Gun National Walker is committed to helping every player reach their potential and achieve their dreams of playing college softball.
Small Text - 14px Regular
Additional details and supporting information in a smaller size for hierarchy.
Buttons
Primary Button (.btn-primary)
bg-stars-navy hover:bg-stars-blue
Secondary Button (.btn-secondary)
border-stars-navy hover:bg-stars-navy
Accent Button (.btn-accent)
bg-stars-blue hover:opacity-90
Spacing Scale
Usage: Use Tailwind's spacing scale (e.g., p-4, mb-8).
Component padding should be 16px (4) minimum. Section padding should be 64px (16) on desktop, 48px (12) on mobile.
Cards & Components
Standard Card
White background with rounded corners, shadow, and padding.
.card (bg-white rounded-xl shadow-lg)
Player Name
SS • Class of 2027
Brief player bio highlighting key achievements and position...
Logo Usage
Light Backgrounds
TOP GUN NATIONAL WALKER
16U Fastpitch
Dark Backgrounds
TOP GUN NATIONAL WALKER
16U Fastpitch
Clear Space: Maintain minimum spacing of 16px around logo on all sides.
Minimum Size: Logo should never be smaller than 120px wide.
Don't: Distort, rotate, or change logo colors.
Accessibility Guidelines
Color Contrast
Interactive Elements
- All buttons must have 44x44px minimum touch target
- Links must be underlined or clearly distinguished
- Form inputs must have visible labels
- Focus states must be visible (outline or shadow)
Images
- All images must have descriptive alt text
- Decorative images should have empty alt ("")
- Player headshots: "Headshot of [Player Name]"
Design Principles
Player-First
Every design decision should make players look their best and coaches' jobs easier.
Mobile-Optimized
Coaches browse on phones. Mobile experience must be flawless.
Fast & Focused
Load quickly, remove distractions, make the content shine.