Brixton Topcats — Design System
Style Guide
The single reference for colours, type, components and motion. Use these tokens and components for any new page or edit so the site stays consistent.
01 — Foundations
Colour
Four brand tokens. Recreate with these exact names as Webflow variables so Figma and Webflow stay 1:1.
Brixton Red
#E30000
Primary accent — headlines, buttons, tickers, dividers.
Ink / Black
#000000 → ~#0D0D0D
Dark section grounds. Pure black renders ~#0D0D0D over texture.
BG Grey
#EFEFEF
The light content sections (the site ‘white’ is this off-white).
White
#FFFFFF
Cards, text on dark grounds, button labels.
Hover / functional: dark-red #C20000 for red-button hover states. Not tokens: #EC2A27 / #5F1313 / mauve #955F5C seen in renders are photo & texture blends — never use them as brand colours.
01 — Foundations
Typography
Two live webfonts. The script wordmark is not a webfont — use the supplied SVG.
Bebas Neue
Display · 400
All-caps display — hero and every major heading. Free Google Font.
Inter
Body · 300 / 400 / 500 / 600
Body, nav, labels, eyebrows. Free Google Font.
Topcats
Straight Forward · script
The footer ‘Topcats’ wordmark only. Not a webfont — export as SVG (shown here in Bebas as a stand-in).
01 — Foundations
Spacing & Radius
Layout rhythm and corner radii. Provisional — confirm against build.
Container
Max width ##INLINE1## · gutter ##INLINE2##
Section rhythm
Vertical ##INLINE3##
sm · 6px
md · 12px
lg · 20px
pill · 999px
02 — Components
Buttons
Two components only. Use these for all new work — do not hand-build buttons.
8px radius · no arrow. Hover = lift (translateY −2px) + red drop shadow + text → black. Variants: Primary (red/white) · Secondary (white/red — use on red too) · Tertiary (red-outline ghost, light bg) · Tertiary Dark (white-outline ghost, dark bg) · Dark (ink/white). Props: Label, Link.
Page Button · Tertiary Dark — the white-outline ghost, shown on black so its contrast reads correctly (use it on dark grounds).
11px radius · two-layer text roll + up-arrow. Variants: Secondary (white/red) · Primary (red/white) · Tertiary (transparent / white outline). Hover = text rolls → black (Primary/Secondary) or red (Tertiary).
Deprecated — do not use for new work: .bt-subpage-button--red, .bt-don-cta, ad-hoc .red-cta-button overrides, and loose .button hovers. Replace with the Page / Hero Button components.
02 — Components
Cards
Hover the cards to see the motion. Captions name the production class.
News card
VS. Team Name
Support card
News .news-card — lift −4px + shadow, photo zoom 1.06, title → red. Fixture .fixture-card — lift −3px + shadow. Support .support-card — lift −4px, photo zoom + brighten. Also in production: Service/pathway item .service-item-wrapper, value tile .bt-why-value, resource card .bt-coach-rescard.
02 — Components
Tags, Chips & Eyebrows
Team chip .team-chip (hover → red bg). Fixture pill .fixture-pill. Date eyebrow .news-date-pill. Section kicker .bt-subpage-kicker. Breadcrumb .bt-breadcrumb.
02 — Components
Tickers & Disclosures
Ticker / marquee .ticker-track — CMS-driven (Ticker Items), 30s linear loop, pauses on hover, disabled under reduced-motion. Phrases & links are editable in the CMS — no code.
Disclosure / accordion
03 — Motion
Motion
All hover motion is gated to fine-pointer devices and disabled under prefers-reduced-motion.
| Token | Duration / easing | Use |
|---|---|---|
| Hover · colour | 0.2s ease | Nav, titles, tags — colour / background shifts |
| Hover · move | 0.22s cubic-bezier(.2,.6,.2,1) | Card & button lift + shadow |
| Image zoom | 0.3–0.35s cubic-bezier(.2,.6,.2,1) | Photo scale on card / pathway hover |
| Marquee | 30s linear infinite | Tickers (content tripled, seamless) |
| Hero entrance | 0.9s cubic-bezier(.2,.6,.2,1) | Homepage hero text load-in |
| Player reveal | 0.75s (delay 0.85s) cubic-bezier(.34,1.2,.5,1) | Homepage hero cutout reveal |
04 — Inventory
Components & CMS
What already exists — reuse before building new.
Layout
Navber · Footer
Global header (with Register CTA) and footer (STAY CONNECTED). One instance per page.
Buttons
Hero Button · Page Button
The two canonical CTA families. See the Buttons section above.
Conversion
CTA · Closing CTA Section (×2)
Closing conversion bands used at the foot of pages.
Content
Service Card · Tag
Homepage pathway cards and the reusable eyebrow / label chip.
News
‘What’s Happening’ articles — 69 items. Title, category, thumbnail, date, body, featured.
Fixtures
Match schedule & results. Teams, date/time, venue, competition, status.
Hero Cutouts
Homepage hero player images, shown at random per load.
Ticker Items
Editable marquee phrases — name, link, band, order, active.
05 — Brand
Logo
Primary — navbar mascot (black + orange), shown on light. logo-topcat.svg
Two marks: the Topcat mascot (cat + basketball) for header / footer / tickers, and the cursive ‘Topcats’ script wordmark for the footer moment. Master art: design/assets/hifi/images/logo_topcats.svg.
Do: keep clear space · use red, black or white only · use the supplied SVG. Don’t: recolour, stretch, add shadows or effects, or place on low-contrast photos.
05 — Brand
Voice
Community-first, empowering, gritty, Brixton-rooted. Character before trophies.
Positioning
More Than Basketball. It’s Community.
Tagline
Keeping it real!
Motto
Drive the body onwards and upwards