Brand guidelines

PLAY LIKE
BOSS

Poster-first football identity. Condensed type, wine maroon on cream paper, grain, jagged frames, black-and-white photography. Built so any new page (news, player profile, ticket, shop) can be assembled from the same parts.

Colour

Maroon is the voice. Cream is the paper. Ink is photography and night results. Gold is reserved for Fitbar Boss and captain marks.

Maroon

#6F1E32 · bg-boss-maroon

Deep

#3D101C · bg-boss-deep

Wine

#8B2842 · bg-boss-wine

Cream

#F1ECE5 · bg-boss-cream

Paper

#E5DDD3 · bg-boss-paper

Ink

#160E11 · bg-boss-ink

Muted

#7A6E71 · text-boss-muted

Gold

#C4A574 · text-boss-gold

colors: {
  maroon: '#6F1E32',
  deep: '#3D101C',
  wine: '#8B2842',
  cream: '#F1ECE5',
  paper: '#E5DDD3',
  ink: '#160E11',
  muted: '#7A6E71',
  gold: '#C4A574'
}

Typography

Display · Bebas Neue · font-display

MATCHDAY

Hero titles, scores, player surnames. Always uppercase. Tracking tight. Line-height 0.8.

Condensed · Oswald · font-condensed

Gloria Per Il Capo

Labels, nav, meta, kickoff times. Uppercase with 0.2–0.4em tracking.

Body · Barlow · font-body

BOSS Sports Club was founded in 2023. We play for the badge, the captain, and the people who show up.

H1

text-6xl to text-[12vw] · leading-[0.8]

H2

Section titles · text-6xl md:text-8xl

Texture & photography

Every large surface gets grain. Photography is always greyscale, multiplied onto maroon.

.grain
.slash-bg
.halftone
.photo-treat on maroon

Buttons

No rounded pills. Square corners. Condensed uppercase labels.

<a class="bg-boss-maroon text-boss-cream font-condensed tracking-[0.22em] uppercase text-xs px-6 py-3.5 hover:bg-boss-deep">Full-Time</a>

Badges

Win Loss Draw Home Away C Captain #9

Match card

Use maroon header for wins, ink for losses, wine + ring for the latest fixture.

Gameweek 4 · Home 5–1

AMIGOS FC

02 Aug 2026 · 7:50 PM

Win 
Header: GW + venue + score
Body: opponent (font-display) + datetime (font-condensed)
Status: Win / Loss / Draw badge

Starting XI

Two-column poster: treated photo left, numbered list right. Numbers in Bebas maroon, names in Oswald.

  1. 1 Azli GK
  2. 6 Ammar C

Fitbar Boss card

GW5

AQIL F.

#9 · Brace vs KXU

Surname only, huge. Week label in gold. Ring the latest winner in gold.

Full-time lockup

Gameweek 6 · Full-Time

FULL-TIME

BOSS SC 1 1 BRG FC

Adam Haris (Hussein)

Forms

Build rules

Do

  • Set page ground to cream or paper.
  • Use maroon for one dominant word per viewport.
  • Keep buttons square. Keep photos greyscale.
  • Put kickoff meta in Oswald, scores in Bebas.
  • Add grain on maroon and ink fields.
  • Reuse match card + XI + Fitbar as page modules.

Don’t

  • Don’t use rounded cards or drop shadows like SaaS UI.
  • Don’t set body copy in Bebas Neue.
  • Don’t use bright red, neon, or pure white #fff.
  • Don’t colourise match photography.
  • Don’t mix a second display font.
  • Don’t gold-wash the whole UI — gold is awards only.

Page recipes

  • News / recap — cream ground, FULL-TIME lockup, then 3-column Fitbar + XI.
  • Player profile — maroon grain hero, huge surname, number in gold, career stats as 4 ink tiles.
  • Tickets — MATCHDAY split (maroon photo rail + cream type), square primary CTA.
  • Shop — paper slash background, product on cream card, no rounded corners.
  • About — reuse #club maroon block + founder quote in Barlow.

Layout recipe

Every new page is a stack of these bands. Swap content, keep the sequence.

  1. 01

    Nav

    Fixed, cream on scroll, Oswald links.

  2. 02

    Hero

    38% maroon photo rail + MATCHDAY type.

  3. 03

    Ticker

    Maroon bar, condensed uppercase, marquee.

  4. 04

    Ink band

    Results, quotes, night-mode content.

  5. 05

    Paper band

    Fixtures, XI, lists. Slash texture optional.

  6. 06

    Footer

    Ink ground, maroon wordmark, partner row above.

Spacing

Page

max-w-6xl / max-w-7xl · px-6 md:px-8

Sections

py-20 md:py-28

Eyebrow → title

mt-2 / mt-3 · title leading-[0.8]

Cards

gap-4 / gap-5 · no rounded-*

Tailwind tokens

Paste into every new page. Same config as the landing.

tailwind.config = {
  theme: {
    extend: {
      colors: {
        boss: {
          maroon: '#6F1E32',
          deep: '#3D101C',
          wine: '#8B2842',
          blush: '#A33A55',
          cream: '#F1ECE5',
          paper: '#E5DDD3',
          ink: '#160E11',
          muted: '#7A6E71',
          gold: '#C4A574'
        }
      },
      fontFamily: {
        display: ['"Bebas Neue"', 'sans-serif'],
        condensed: ['Oswald', 'sans-serif'],
        body: ['Barlow', 'sans-serif']
      }
    }
  }
}

Class cheat sheet

Role Classes
Hero title font-display text-boss-maroon leading-[0.78] text-[22vw] lg:text-[11vw]
Eyebrow font-condensed text-boss-maroon text-xs tracking-[0.4em] uppercase
Section H2 font-display text-6xl md:text-8xl text-boss-maroon leading-none
Primary btn bg-boss-maroon text-boss-cream font-condensed tracking-[0.22em] uppercase text-xs px-6 py-3.5
Shirt number font-display text-2xl text-boss-maroon w-8
Score font-display text-8xl md:text-9xl leading-none