Guidelines
Application guidelines for social media, web, print and layout.
Overlay System
Text over image needs a reading surface. The gradient is the standard tool — digital as a semi-transparent gradient, print as an opaque solid block.
Semi-transparent gradient from opaque to transparent. Three stops, one direction. The image remains visible.
Gradient as Reading Surface
HEADLINE TEXT
Subline directly on image
Color Logic
| Image character | Overlay color | Text color |
|---|---|---|
| Dark image | No overlay | White |
| Standard | #181818 → Transparent | White |
| Light image | #FFFFFF → Transparent | Black (#181818) |
Gradient (3 Stops)
Overlay Width
Fade Zones: No-Gos
Reels & Stories
Vertical video formats need their own rules for subtitles and CTAs — readable, quick to grasp, not cluttered.
Subtitles: Roboto Bold, mixed case - white on semi-transparent black (#000/70%)
Text CTA: Courtside Sans, uppercase - statement element for overlays and end cards
Button CTA: Roboto Bold, mixed case - black on TP Yellow (#FAF514)
No TP Yellow as subtitle color - yellow on moving image is too hard to read
Web / E-Commerce
The website is a sales floor, not a gallery. Brand serves the purchase, not the other way around.
| Type | Image:UI | Description |
|---|---|---|
| Homepage | 60:40 | Hero image, category teasers, product highlights |
| Category (PLP) | 40:60 | Cutouts in list, no context images |
| Product (PDP) | 50:50 | Large cutout + angles + context image |
| Campaign LP | 70:30 | Dominant hero, split modules |
Print & Packaging
Packaging is the most detached context: no profile picture, no header, no visual system around it. The brand must stand on its own through wordmark, typography and color system.
Information Hierarchy
Brand Identifier
Wordmark (mandatory) + Ball Icon (optional)
Product Name
Courtside Sans, uppercase - e.g. PREMIUM OVERGRIP
Subline / Features
Roboto - e.g. Tacky / Absorbent / Long-lasting
Technical Details
Dimensions, weight, material
Instructions
Step-by-step with numbered icons
Legal Information
Manufacturer, address, country of origin
Rules
Wordmark: Mandatory on every package (front AND back). Min. 35 mm width.
Ball Icon: Allowed as addition (closure, label, endcap) - does not replace the wordmark. Min. 8 mm diameter.
Clear visual separation between hierarchy levels. Max. 2 font sizes per packaging side.
Headlines (product name): Courtside Sans, uppercase - min. 14 pt / 5 mm cap height.
Body & instructions: Roboto, mixed case - min. 7 pt / 2.5 mm. Legal: min. 6 pt.
Body text under 12 pt always in pure K (no Rich Black) - prevents registration errors.
TP Yellow only as accent (keyword, icon highlight) - never as packaging background. Black on yellow is mandatory when type sits on yellow.
Matte preferred. Gloss only as targeted spot UV on logo or headline.
CMYK Reference
TP Yellow
C0 M0 Y100 K0
Neutral
K80 (text) · C40 M30 Y20 K80 (surface)
Black
K91 (text) · C60 M40 Y40 K91 (surface)
White
Paper white
The binding reference is the proof print against #FAF514. Grays via K channel only.
No TP Yellow as large background surface · No colorful gradients · No full-gloss finish · No foreign typefaces · No Courtside Sans in lowercase · No white on TP Yellow (contrast 1.2:1) · No ball icon as pattern or wallpaper
Layout & Grid Logic
Layout follows image attitude: closeness, directness, no overdesign.
Desktop (1440px): 12 columns, 24px gutter, 80px outer margin
Mobile (375px): 4 columns, 16px gutter, 20px outer margin
Image priority – images get space
Whitespace as design element – min. 80px between sections
Asymmetry allowed – left-aligned standard, centered only for hero headlines
No decorative elements – no lines, background shapes, non-functional shadows
Social Media
Social media shows tennis how it feels - not how it should look.
Format Logic
Content Categories
Play Content
Feed posts, Reels, hero content
Community Content
Stories, behind-the-scenes
Product Content
Stories, rarely feed
Platform Attitude
Instagram
Visually strong, curated but not sterile
Confident, not arrogant
TikTok
Rawer, more authentic, less polished
Playful, direct
LinkedIn
Business-relevant, not corporate
Professional, not boring
YouTube
Educational + emotional
Expertise + passion
Text Overlay Rules
Font: Courtside Sans, uppercase
Max. 5 words
Color: White or black on image