Brand Guidelines
Unifying every department, every report, and every person into one intelligent management platform.
1Logo
Our logo consists of the TSH monogram mark and the wordmark "Total Sports Hub". The mark should always be used with adequate clear space around it — equal to the height of the "T" in the wordmark.
Logo Variants
Usage Guidelines
Maintain clear space around logo
Use the correct variant for background
Scale proportionally
Stretch or warp the logo
Change the colors
Add drop shadows or effects
Place on low-contrast backgrounds
2Color Palette
Our brand colors are anchored by a bold red and dark, modern neutrals. The red (#BF262B) represents energy, passion, and the competitive spirit of sports.
Primary Colors
Secondary Colors
Usage
| Element | Color | Usage |
|---|---|---|
| Primary accents | #BF262B | Buttons, links, highlights, CTAs |
| Background (dark) | #0A0A0F | Dark mode, presentation backgrounds |
| Surface (dark) | #211F1F | Dark cards, panels, nav |
| Body text | #888888 / #1A1A1A | Paragraphs (gray), headings (near-black) |
| Light background | #F5F5F5 | Light mode, print materials, card backgrounds |
3Accessibility
WCAG 2.1 AA compliance is the minimum standard for all digital brand applications. Below are the contrast ratios for common color combinations.
Color Contrast Validation
| Foreground | Background | Ratio | WCAG AA (4.5:1) | WCAG AAA (7:1) |
|---|---|---|---|---|
| #BF262B (Red) | #FFFFFF (White) | 4.1:1 | Large text only | Fail |
| #BF262B (Red) | #0A0A0F (Black) | 2.4:1 | Fail | Fail |
| #0A0A0F (Black) | #FFFFFF (White) | 18.5:1 | Pass | Pass |
| #1A1A1A (Near-black) | #FFFFFF (White) | 14.8:1 | Pass | Pass |
| #666666 | #FFFFFF (White) | 5.7:1 | Pass | Large text only |
| #888888 | #FFFFFF (White) | 4.4:1 | Large text only | Fail |
| #888888 | #F5F5F5 (Off-white) | 3.7:1 | Fail | Fail |
| #FFFFFF (White) | #0A0A0F (Black) | 18.5:1 | Pass | Pass |
| rgba(255,255,255,0.5) | #0A0A0F (Black) | 9.2:1 | Pass | Pass |
Recommendations
Body text on white: Use #666666 or darker. #888888 fails AA for text under 18px.
Red accents: Red #BF262B is only suitable for large headings (24px+) and decorative elements on white — do not use for body text or small UI labels.
Dark backgrounds: White text at any opacity passes AA on #0A0A0F. Use rgba(255,255,255,0.65) minimum for readable body text.
Off-white backgrounds: Avoid #888888 text on #F5F5F5 surfaces — use #666666 or darker instead.
Touch targets: Minimum 44×44px for all interactive elements (buttons, links, icons).
4Typography
We use Saira — a clean, geometric sans-serif typeface that conveys modernity, strength, and clarity. Available in 5 weights from Google Fonts.
Type Scale
| Element | Size | Weight | Usage |
|---|---|---|---|
| H1 | 44px / 2.75rem | Bold 700 | Hero headlines, page titles |
| H2 | 26px / 1.625rem | SemiBold 600 | Section headings |
| H3 | 19px / 1.1875rem | Medium 500 | Subsection headings, card titles |
| Body | 15px / 0.9375rem | Light 300 | Paragraph text |
| Small | 13px / 0.8125rem | Medium 500 | Nav links, captions |
| Micro | 11px / 0.6875rem | SemiBold 600 | Badges, tags, legal |
5Voice & Tone
Total Sports Hub speaks with authority, clarity, and confidence. We are a B2B platform, so our tone is professional yet approachable.
Use industry terminology correctly. Respect the audience's intelligence. Avoid hype and exaggeration.
Write simply and directly. Short sentences. Explain technical concepts when needed.
State facts with conviction. Use active voice. Avoid weak qualifiers.
From the groundskeeper to the chairman — everyone belongs. Use language that respects all roles.
6Iconography & Imagery
Icon style: Outlined, stroke-width 2px, rounded caps/joins, 24x24px base size.
Photography: High contrast, slightly desaturated, warm tone. Stadiums, training grounds, front offices.
Illustrations: Minimal and geometric, using brand colors. Abstract shapes suggesting movement and connection.
7Application Examples
Website (Digital)
Dark mode by default (#0A0A0F). Red accents (#BF262B) for CTAs. Saira throughout. Light mode available via toggle.
Print Materials
White background (#FFFFFF). Red accents. Saira for headlines, body in Saira Light.
Presentations
Dark slides (#0A0A0F) with red accent lines. White headings, gray body text. Logo in top corner.
8Merch & Swag
Logo placement and color guidelines for apparel, banners, and event signage.
Apparel
| Position | Logo Variant | Size | Colors |
|---|---|---|---|
| Left chest (polos, tees) | TSHUB Icon Red.svg or Favicon Black.svg | 8–10cm wide | Max 2: red + white, or red + black |
| Center front (hoodies) | TSHUB Short.svg | 12–15cm wide | White on dark fabric, black on light |
| Center back (jackets) | TSHUB Black.svg / TSHUB White.svg | 20–25cm wide | Full wordmark, single colour |
| Sleeve (subtle) | TSHUB Icon Red.svg | 3–4cm | Red only, small placement |
Embroidery: Limit to 2 colours. Simplify the TSHUB Icon to solid shapes — omit fine detail below 4mm. Use 60/40 polyester thread for colour accuracy on dark fabrics.
Event Banners & Signage
| Type | Dimensions | Logo Placement |
|---|---|---|
| Roll-up banner | 85 × 200 cm | Top centre — TSHUB Black.svg + tagline |
| Pull-up banner | 80 × 200 cm | Top centre — TSHUB Black.svg + tagline |
| Table throw / cloth | 180 × 75 cm | Centred — TSHUB Icon Red.svg (large, 40cm) |
| Pop-up backdrop | 300 × 250 cm | Full wordmark centred, red accent bar below |
| Flag / feather | 300 × 85 cm | Vertical — TSHUB Short.svg rotated 90° |
Print: CMYK process. Use PMS 186 C for spot red. Matte laminate for indoor, anti-glare for outdoor.