LeagueUnion
brand kit

Football league and tournament management, connected from team entry to the final table. This kit holds the name, the mark, the palette, the type and every element the site draws, in the formats you need to use them.

The name

One word, two capitals: LeagueUnion.

Do

Write it LeagueUnion in body copy, headlines and legal text.
Use the mark on its own once the name is already on the page.
Say “LeagueUnion runs …”, not “The LeagueUnion platform runs …”.

Don't

League Union, Leagueunion, LEAGUE UNION or LU as a name in copy.
Possessive forms of the mark (“the LU’s”) or plurals.
Translating or abbreviating the name in other languages.

The mark

An L and a U cut from one shape and split on a halfway line, with a football above the short arm. The L has a square heel; the U sweeps out of it.

Primarymark.svg

One colourmark-ink.svg

On pitchmark-chalk.svg

On actionmark-ink.svg

Small sizesmark-small.svg

The ballball.svg

Size decides the ball

Above 64px: the full seam network (mark.svg).
20–64px: one panel (mark-small.svg). This is what the site header uses.
Below 20px: the panel closes up — use the tile icon (favicon.svg, app-icon.svg).

Clear space and misuse

Keep clear space equal to the width of the ball on every side.
Two colours or one, never three. On any surface that isn’t ink, use a single-colour file.
Don’t outline it, add a shadow, rotate it, recolour the U to orange, or rebuild the lockup by hand.

The lockup

Mark plus wordmark, for slides, decks and anyone outside the site. The site itself renders the mark plus live HTML text, so the name stays selectable and indexable.

lockup.svg · needs Barlow Condensed 700

Colour

Two halves of one world: night match by default, daylight when a visitor asks for it. Each swatch shows daylight on the left, night on the right. --lime and --orange are surfaces and always carry --on-accent text; --accent-ink and --orange-ink are the same signals used as a mark, and they deepen in daylight so a mark on paper keeps the contrast a mark on ink already had.

Surfaces

The planes the product sits on.

--inkThe page itself #f4f7efdaylight#06131dnight

--ink-raisedRaised controls, form fields, the phases band #e9efe0daylight#091c26night

--pitchThe operational green plane: boards, step rails, bands #dfe9d6daylight#0b3327night

--pitch-deepThe recessed tone inside a pitch plane #d2e0c7daylight#082920night

Content

Text and the rules that structure it.

--chalkPrimary text, and the inverse surface #08161edaylight#f0f3e9night

--chalk-mutedSecondary copy and navigation at rest #42534adaylight#b8c7bdnight

--chalk-dimMetadata and annotations #5b6b61daylight#8a9b92night

--lineDividers, field markings, container edges rgba(8, 22, 30, 0.2)daylightrgba(224, 239, 225, 0.24)night

--line-strongThe boundary of an operational panel rgba(8, 22, 30, 0.45)daylightrgba(240, 243, 233, 0.55)night

Signals

Action, outcome, and failure. Never decoration.

--limeThe action surface: buttons, active chips #c8f23adaylight#c8f23anight

--lime-hoverThat surface, hovered #b7e51fdaylight#dcff5dnight

--accent-inkThe same signal used as a mark: links, icons, focus, routes #3d5b07daylight#c8f23anight

--on-accentText on an action or result surface #06131ddaylight#06131dnight

--orangeThe scored-outcome surface #ff8a3ddaylight#ff8a3dnight

--orange-inkA scored outcome or material warning, as a mark #a3430adaylight#ff8a3dnight

--errorForm failure text #9c2c06daylight#ffb18bnight

On the inverse surface

For the featured plan and the dark/light flip.

--on-chalk-mutedSecondary copy on the inverse surface #b8c7bddaylight#4a5a53night

--on-chalk-linkA link on the inverse surface #c8f23adaylight#3d5700night

--on-chalk-lineA rule on the inverse surface rgba(240, 243, 233, 0.26)daylightrgba(6, 19, 29, 0.2)night

--disabled-surfaceAn unavailable action #d3dbcfdaylight#60725enight

--disabled-textIts label #4f5f55daylight#d5ddd2night

Typography

Barlow Condensed commands; Manrope explains. Both are open source and available from Google Fonts. Sizes are fluid: the value below is the live clamp.

DisplayBarlow Condensed · 700 · clamp(76px, 9vw, 144px) · line-height 0.8Hero command only

Every match. One system.

PageBarlow Condensed · 700 · clamp(52px, 6.6vw, 100px) · line-height 0.86Page titles

Every match. One system.

HeadlineBarlow Condensed · 600 · clamp(40px, 4.6vw, 68px) · line-height 0.95Section propositions

Every match. One system.

TitleBarlow Condensed · 600 · clamp(28px, 2.6vw, 38px) · line-height 1Capability rows and panels

Every match. One system.

SubtitleBarlow Condensed · 700 · 22px · line-height 1Plan names, small commands

Every match. One system.

LedeManrope · 400 · 20px · line-height 1.55Section openers

Fixtures, availability, referees, results and standings, connected.

BodyManrope · 400 · 17px · line-height 1.6Explanatory copy

Fixtures, availability, referees, results and standings, connected.

SmallManrope · 400 · 14px · line-height 1.45Supporting and operational text

Fixtures, availability, referees, results and standings, connected.

LabelManrope · 700 · 12px · line-height 1.55Form labels and metadata

Fixtures, availability, referees, results and standings, connected.

Icons

One family, 24px grid, 1.8px stroke, square ends, drawn in currentColor so they take the colour of the text around them.

arrow.svg

chevron.svg

close.svg

collapse.svg

expand.svg

menu.svg

theme.svg

tick.svg

whistle.svg

Elements

The operational graphics. The board is the signature: one fixture on a top-down pitch, with the ball’s route and the referee’s diamond.

What's in the kit

File	Use
mark.svg	Primary mark, two colour, full seams. Above 64px.
mark-small.svg	Primary mark, one panel. 20–64px, including the site header.
mark-ink.svg · mark-ink-small.svg	One colour ink, for paper, chalk and chartreuse surfaces.
mark-chalk.svg · mark-chalk-small.svg	One colour chalk, for ink, pitch green, photography and print.
lockup.svg	Mark plus wordmark, for slides and third parties.
ball.svg · ball-ink.svg	The football on its own, as a supporting graphic.
app-icon.svg · favicon.svg	Tile icons: stores and PWA, browser tabs.
icons/*.svg	The interface icon set, on a 24px grid.
pitch-board.svg · pitch-board-light.svg	The match board element, both themes.
ticket-shape.svg	The clipped action silhouette, for redrawing buttons elsewhere.
palette.svg	The palette as one sheet, to drop into any design tool.
tokens.css · tokens.scss · tokens.json	The same colours, type ramp and spacing for code.
brand-guide.html · LeagueUnion-Brand-Guide.pdf	This document, on screen and for print.
README.md	The short version of these rules.