Brand Guidelines
The visual identity system for Chattanooga Soccer Fans. Colors, type, spacing, and patterns that define the matchday electric aesthetic.
The wordmark pairs a soccer ball emoji with Bebas Neue uppercase lettering. Always display on dark backgrounds.
⚽Chattanooga Soccer Fans
⚽Chattanooga Soccer Fans
Do
Use on dark backgrounds only
Maintain clear space around the logo
Use the full wordmark or abbreviation "CSF"
Reference "World Cup 2026" in copy (no "FIFA" prefix in SEO/ads)
Don't
Place on light or white backgrounds
Use FIFA logos or official imagery
Imply affiliation with FIFA or official partnerships
Use "FIFA" in SEO meta, ads, or commercial copy
Stadium Matchday Electric. Dark navy foundations with high-energy accent colors that evoke stadium floodlights and electric atmosphere.
Core — Foundations
Navy Mid
#0c1b2e
--color-navy-mid
Navy Light
#12243d
--color-navy-light
Navy Lighter
#1a3050
--color-navy-lighter
Accent — Matchday Electric
Coral
#FF5733
--color-coral
Coral Bright
#FF6F47
--color-coral-bright
Coral Dark
#D94425
--color-coral-dark
Cyan Dim
#00B4CC
--color-cyan-dim
Yellow
#FFD23F
--color-yellow
Yellow Hot
#FFBA08
--color-yellow-hot
Green
#00E676
--color-green
Magenta
#FF2D87
--color-magenta
Neutrals
White
#F0F2F5
--color-white
White Pure
#FFFFFF
--color-white-pure
Gray 100
#C8D0DC
--color-gray-100
Gray 600
#5A6B82
--color-gray-600
Gray 800
#2A3A52
--color-gray-800
Used for buttons, badges, text highlights, and background accents. Always at 135° angle except Rainbow (90°).
Highlight
--gradient-highlight
Rainbow
--gradient-rainbow
Two fonts. Bebas Neue for display and headings — bold, uppercase, stadium-feel. DM Sans for body text — clean, readable, modern.
Bebas NeueDisplay · Headings · Uppercase
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
0123456789
DM SansBody · Labels · Captions
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789
Type Scale
--text-megaclamp(5rem, 12vw, 9rem)MEGA
--text-heroclamp(3.5rem, 8vw, 6rem)HERO
--text-5xl4remDISPLAY
--text-4xl2.75remHEADING 1
--text-3xl2remHEADING 2
--text-2xl1.5remHEADING 3
--text-xl1.25remLarge text
--text-lg1.125remBody large
--text-base1remBody text — the default size for paragraphs and content
--text-sm0.875remSmall text for captions and labels
--text-xs0.75remExtra small for fine print
A 4px base unit system. All spacing derives from these values to maintain consistent rhythm across the interface.
Frosted glass panels are the primary surface treatment for cards, modals, and elevated elements.
Glass Default
88% opacity, 20px blur
--glass-bg + --glass-blur
Glass Solid
94% opacity, 40px heavy blur
--glass-bg-solid + --glass-blur-heavy
Glass Gradient
Subtle white gradient overlay
--gradient-glass
We speak as fans, not officials. Excited, welcoming, and community-driven. Never corporate, never insider.
Our Voice
Fan-first perspective — "Watch with us" not "Attend our event"
Excited and welcoming — like inviting a friend to a watch party
Local pride — Chattanooga is home, Atlanta is the destination
Use hedging for FIFA info — "typically," "often," "may include"
Never
Claim insider knowledge of FIFA operations
Use corporate or formal language
Imply official partnership or endorsement
Position the site as an authority on FIFA regulations