Color Palette
Primary Colors
Stars Navy
#062a4b
RGB: 6, 42, 75
Primary brand color. Use for headers, navigation, buttons, and key UI elements.
Stars Blue
#2E91FC
RGB: 46, 145, 252
Accent color. Use for links, interactive elements, and hover states.
Gray Scale
White
#ffffff
Backgrounds, cards
Gray Light
#c8ccd1
Borders, dividers
Gray Blue
#737e94
Section backgrounds
Gray Dark
#555655
Body text
Typography
Primary Font
Inter
Used for all body text, headings, and UI elements
Heading 1 - 48px Bold
Stars 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. Stars 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
STARS NATIONAL WALKER
16U Fastpitch
Dark Backgrounds
STARS 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.