Brand identity
Contents
The idea
One drawing, and everything else falls out of it.
The wordmark is drawn to bounce. The letters are inflated and slightly off the line, so the word carries movement and energy before it says anything, the way the music does.
That bounce is doing real work. The U and the N are joined, so the word closes into a loop rather than ending: union means connection, and the letterforms hold hands to say it. The Ó steps out of the word, puts on headphones and becomes a character, so the name and the figure dancing next to it are the same drawing. And when the U and the N are split apart, turned on their ends and set either side of the I, the three shapes make the soundwave. One piece of lettering gives the name, the character and the icon.
The U and the N are joined. The wordmark is drawn as one continuous inflated stroke, so the first and last letters close the word into a loop rather than ending it.
The Ó is a character. The accented O steps out of the word, puts on headphones and dances. It is the only figure in the system.
The U, the I and the N, cut from the wordmark and stacked, make the soundwave. It is drawn from the same letterforms as everything else, so it is the icon, and it also works as a meter, a pin, a bullet and an equaliser.
The marks
Every mark is drawn. None of them is type with a filter on it, so none of them can be reset in a font.
The wordmark is the identity. Everything else in this section is that same drawing, arranged for a surface it has to fit.
Every real mark, on the ground it is drawn for
Clear space , one cap height of the Ó on every side, and nothing inside it
Minimum sizes, shown at their real size
Sticker, 150px. Below this LONDON closes up.
Hierarchy and grounds
Which mark goes where, and which colour it sits on.
Four lockups, in order. Reach for the first one that fits the space; only move down the list when the one above genuinely will not work.
-
01 , Primary, horizontal
The default, and the one to use unless there is a reason not to. Wide surfaces: a site header, a poster, an email, a banner across a stage.
-
02 , Portrait stack
For a tall or square space where the horizontal mark would shrink to nothing: a flag, a story, a pass, a tote.
-
03 , The icon alone
Only where the name is already present or already known: a profile picture, a favicon, a pin on a map, a stamp on a cup.
-
04 , The sticker
A treatment, not the mark. It carries the name plus a place, so it belongs on physical things and never in a header.
Which ground takes which mark
| Ground | Mark | Why |
|---|---|---|
| Cream | Black wordmark | The everyday pairing. Maximum contrast, and the one to default to. |
| Black | Cream wordmark, never black | Reversed out. The night surfaces: the lineup, after dark, a stage screen. The black is a warm brown, so a black mark on it all but disappears and the whole surface goes muddy. |
| Pink | Cream or black wordmark | Cream on pink is a display pairing and carries the mark well. Black also works. |
| Coral | Cream or black wordmark | Cream on coral is the softest pairing in the set. Marks and large type only. |
| Yellow | Black wordmark | Black only. A cream mark on yellow does not hold its edge. |
| A photograph | Cream wordmark, or black | Pick the one the image can carry, and keep the mark clear of busy detail. |
The one that catches everybody
On the black, the mark is always cream. It can also be yellow, coral or pink: all four read clearly.
The brand's black is a warm brown, not a true black, so a black mark sitting on it is barely a shade apart and the surface goes muddy. Measured, it is the weakest pairing in the palette by a distance.
Clear space around the mark is at least the height of its own Ó on every side. Nothing crosses it.
The drawing has a fixed proportion. If it does not fit, use the portrait stack or the icon, never a squashed wordmark.
The icon
Three drawn strokes, taken straight out of the wordmark.
Split the U and the N off the wordmark, stand them on their ends either side of the I, and the three shapes read as a soundwave. The icon is not a separate drawing: it is the name rearranged.
Three paths, three bars. The system's only icon, because it is the only one the identity actually draws. Never stretched to fit a space: it repeats at its native proportion instead.
The four supplied colourways
The icon, moving
The mark animates in four ways and no others. Each one means something specific, so the movement always tells you what the thing is doing.
The soundwave's animation is part of the
identity, not a decoration applied to it. The icon is three drawn paths, the U, the I and
the N cut and set side by side at three different heights, so each is a squiggle rather
than a bar. Measured off the artwork: the strokes sit at x 0, 110 and 168 in a 327 by 198
box, which is why each one pivots on its OWN CENTRE and not on a common floor. Scaling
them from the bottom flattens the drawing into a smear. The glyph's overall box is never
scaled, X is left alone, and the amplitudes stay small, so it breathes rather than
stretches. Five modes, one API: UNION.wave(el, mode).
The three bars stand up one after another, on the bounce ease. The logo's load animation.
A continuous equaliser. Each bar scales on Y from its own baseline at its own tempo, squashy rather than linear, so the three never lock into one pulse. Runs only while something is genuinely playing.
A slow live-light breath, for an alert bar. Says "this is live" without asking to be watched.
The bars fill to a value from 0 to 1 and hold, reading at slightly different heights
the way a real level meter does. UNION.wave(el, 'meter', {value:.7})
Everything stops at a readable level, never flat: a flat wave reads as broken. This
is also what every mode becomes under prefers-reduced-motion.
The 40px floor still holds when it moves. Below it the three bars merge and the motion reads as a flicker.
The character
The Ó off the end of the wordmark, wearing headphones.
He is the accented O, lifted straight out of the name and given a body. Set him beside the wordmark and the two read as figures dancing together, which is the festival in one image.
Large or not at all
It is a character with a body and a gesture, not a glyph. At icon size the headphones close up and the accent reads as a smudge, so the system gives it a floor of 150px and no ceiling. One per surface.
Colour
Five colours. No tints, no shades, and nothing outside this list.
--pinkThe primary. The call to action, the label bar, Main Stage.--coralThe Grove. The second accent, never the CTA.--yellowThe Corner, and every welfare and safety surface.--creamThe ground. Never white.--blackThe ink and the slab. Never #000; it is a warm brown-black.The stage system.
[data-stage] sets --stage for everything inside it.
--stage-main--stage-grove--stage-cornerMeasured contrast, computed in the browser from the tokens. Three verdicts: any text, display only, never. Only the never pairs are struck through.
| Text on ground | Sample | Ratio | Body 17px | Display 44px+ | Verdict |
|---|
Type
One family, set narrow and heavy. The drawn marks supply the personality; the type stays out of their way.
Archivo variable, one family, two axes.
Width is an axis (font-stretch), never a separate family: there is no
"Archivo Expanded" in this system. Latin-ext is loaded so the Ó is real.
Together.
A festival in south London parkland, ninety-six acres of it, for 11,500 people across three stages. Doors 2:30pm, curfew 10:30pm. Lineup to confirm.
The Ó, at every weight the system uses
The 10x ratio. Display to body, at the same scale the posters run it.
Beckenham Place Park, London. Doors 2:30pm, curfew 10:30pm. 11,500 capacity. Three stages.
Space and shape
Square corners almost everywhere, and a visible focus ring on everything you can reach with a keyboard.
Space , nine steps. Nothing between them.
Shape , three radii, and each one belongs to a named kind of object.
Rules and hairlines
Focus , 3px solid, offset 3px. Yellow on a dark ground.
Pattern
Drawn artwork, used as a band or a zone, and held back further than feels natural.
The pattern is the same hand as the wordmark: the same strokes, repeated into an all-over field. The artwork is transparent, so it takes the colour of whatever it is laid over, and one drawing serves every ground in the palette.
Because it is a field rather than a motif, it is always used through an opening: a band across the page, a zone behind one block, or the skin of an object. The opening is what gives it a shape.
The three drawings, as bands
A band sits between two sections and bleeds off both edges. It is short, ruled top and bottom, and never tall enough to become a field.
The dense lattice, on cream. The busiest of the three, and the one to keep shallow. It reads best where it is passed rather than studied.
The open lattice, on yellow. More ground shows through between the strokes, so it can carry a little more height without the page going heavy.
The upright motif, on black. The strokes stand rather than lean, which suits a vertical edge or the side of a tall object.
The window that fades
The preferred treatment: the pattern seen through an opening that fades at its edges, so it never ends on a hard cut in mid air.
How much, and where
- A band or a zone. Never a full field behind a whole page, and never a small square swatch of it.
- Roughly a tenth to a fifth of any one composition. Past that it stops being a texture and starts being the subject.
- Never behind a word. If type has to sit near it, the pattern stops and the type gets clear ground.
- It bleeds off an edge, or it fades. It does not stop on a straight cut in the middle of a surface.
- All over is allowed on a physical object: a cup, a wristband, a lanyard, a flag. That is the one exception.
- The artwork is an all-over field. It is used by cutting a window into it, not by tiling it: place one piece, size it to the opening, and let it bleed off both edges.
- The strokes are drawn in pink, so the pattern never goes on a pink ground. Close to half the ink in the densest drawing is pink: on pink it disappears and only the black strokes survive, which reads as a different, broken pattern. Cream, yellow, black or coral underneath it.
The taller cut of each drawing, for a zone behind one block of content, a column, or the side of a pass.
The seven devices
Every screen and every printed piece is built from these. Nothing else gets invented.
These are the identity's working parts. A new page is a new arrangement of them, which is why the festival stays recognisable across surfaces nobody has designed yet.
The wayfinding totem from the park: a stack of full-width colour bars, one destination each, each with its arrow. It is the system's answer to a list, a menu and an accordion, because the festival already builds all three out of the same object.
Doors 2:30pm, curfew 10:30pm. Last entry to confirm.
An empty refillable bottle, yes. Free refill points at all three stages.
Beckenham Hill and Beckenham Junction, both a walk from the park.
Anatomy
- 1The bar.
.d-totem__bar, a real button or link, square, full width, its own ground colour. - 2The soundwave at the head of the bar, levelling out as it opens.
.d-totem__wave - 3The number, a micro label.
.d-totem__no - 4The arrow, a SOLID filled shape that turns down on open.
.d-totem__arrow - 5The black face underneath, closed by visibility AND height so its
text is never live behind the bar.
.d-totem__face
Verb Drop
The same device as a phone menu and as a live alert bar. One object, three jobs.
The alert variant: the soundwave pulses as a live light at one end, the message runs as a slow marquee, and the stage colour says which stage before a word is read.
The printed ticket: a body, a chunky punched perforation, a coloured stub with a barcode. Square, like everything else in the identity. The ticket carries a heavy black border, not a radius. It makes an irreversible action feel irreversible, which is the whole point.
Anatomy
- 1The body, carrying the decision.
.d-stub__body - 2The perforation: a chunky punched dash, drawn as a repeating
gradient over the stub's own colour.
.d-stub__perf - 3The stub, in the device colour, which is what tears off.
.d-stub__tab - 4The barcode, built from the brand's own stroke weights rather than
an image.
.d-stub__code - 5
.is-torn: the stub leaves along the perforation and the body turns yellow, the system's "done" colour.
Verb Tear
The chip variant: the stepper stamps another stub into the row, so a quantity is SEEN, not counted.
Six per order
The poster's pink tag bar set inside a black field. The most-used device in the identity, and its workhorse for anything that is an ANNOUNCEMENT rather than a destination. The label is the only coloured thing at rest; on hover the colour floods the slab out from the label.
Anatomy
- 1The slab: a black field, square corners.
.d-slab - 2The label, the only colour at rest, and the thing the flood comes
OUT of.
.d-label - 3The meta line, a micro label.
.d-slab__meta - 4The flood layer, clipped to nothing at rest.
.d-slab__flood - 5The arrow, which travels right as the colour arrives.
.d-slab__arrow
Verb Flood
The toast variant: the same tag-in-slab, slammed up from the bottom edge, gone again on its own.
Saved
The label on its own. A tag, never a pill: square corners, one colour, caps.
Three bars. The most flexible device in the system because it already looks like five different instruments: a level meter, a live equaliser, a map pin, a list bullet and a progress track. Never stretched, never below 40px: it repeats at native proportion instead.
Pins on a stage line. The count is read by looking, and the stage colour lives in the RULE, not in a filled block behind them, because a cut-off block of colour is a swatch.
One drawn stroke. It bleeds off an edge or
ends in its own round cap; never a flat cut in mid air, never behind a word. A single
placed stroke is .d-ribbon; a whole river is
UNION.river(host, opts), because a river is generated by rule and cannot be
pasted in as decoration.
At control scale: the river is what the button is made of underneath.
As a bar: a fat round-ended stroke, for a lane, a skeleton or a progress track. Both ends are caps.
The ink budget, which is the rule that actually matters: 7 to 20% of any composition. The full pattern law, with DO and DO NOT pairs built live, is on 01 Foundations.
A river is 12 to 28 strokes, each 9 to 14% of its HOST's width, stepped tight down one diagonal so neighbours overlap and ground breaks through. Five big spaced strokes are blobs. Many tiny spaced ones are confetti. Neither is the brand.
The die-cut sticker from the sheet. A printed object with its own cut edge, so it is a PNG and never an SVG or a drawn bubble. Minor device: it appears where the brand is being playful about a physical thing, and nowhere else.
The switch variant: the sticker's fat rounded outline as a track. The knob presses across and the chosen label squashes, the way the bubble lettering does.
Music, people, together
Large or not at all
The accented O steps out of the word, puts on headphones and dances. It is the one place the brand is allowed to be charming, which is exactly why it is rationed: one per surface, at scale, or not there. Its grounds are pink, coral and cream; never black (its body) and never yellow (its headphones).
Interface and motion
Live. Press anything on this page.
The controls are built from the same devices as everything else, so a button is a slab and a confirmation is a ticket being torn.
Set-time alerts
Torn. You are in. Your stub is in your email.
Music, people, together
English · Friday 9 July 2027Saved
Until doors · Friday 9 July 2027 · Beckenham Place Park
Why things move
Eight movements, each named after what the object actually does. One per component, chosen because that is the thing it is.
One verb per component, chosen because the object DOES that. A stub tears because a stub tears. Bars bounce because they are a meter. Nothing fades in on scroll just to arrive. Press Replay on any of them.
The object arrives and settles on its own springiness.
--dur-bounce 420ms · --ease-bounce
The bubble lettering's own compression, scaleY .6 to 1. The
brand's core gesture. --dur-squash 360ms
Rotate and translate ALONG the perforation, the way a stub
comes off. --dur-tear 520ms
Scale 1.6 to 1 with a rotation and an overshoot, like a rubber
stamp landing. --dur-stamp 260ms
Reveal ALONG the length, the way a stroke is drawn.
--dur-draw 700ms · --ease-out
Colour spreads OUT from the tag that names it, by clip-path.
--dur-flood 380ms
From above, on a bounce, the way the signage flags fall in.
--dur-drop 480ms
Rotate on a FIXING, elastic, the way a fingerpost blade hangs.
--dur-swing 900ms
In use
The identity doing its job across print, social and the things people hold.
The original design studies the whole identity is drawn from. Where the system and a study disagree, the study wins. Each sits at its own ratio and is never cropped. Note where the pattern runs all over: it is always the skin of a physical object.
FRIDAY
9 JULY
2027
LINEUP
ANNOUNCEMENT
MORE THAN A FESTIVAL
ARTIST NAME
ARTIST NAME
ARTIST NAME
ARTIST NAME HERE · ARTIST NAME HERE · ARTIST NAME HERE
ARTIST NAME HERE · ARTIST NAME HERE · ARTIST NAME HERE
ARTIST NAME HERE · ARTIST NAME HERE · ARTIST NAME HERE
ARTIST NAME HERE · ARTIST NAME HERE · ARTIST NAME HERE
MANY MORE TO BE ANNOUNCED
BECKENHAM PLACE PARK · LONDON · 11,500 CAPACITY
A1, 594 × 841 mm (shown 1684 × 2384 px at 72dpi) · 3 mm bleed · cream ground · primary logo cut · no pattern
MUSIC
PEOPLE
TOGETHER
TICKETS
ON SALE
NOW
FRIDAY 9 JULY 2027
BECKENHAM PLACE PARK
LONDON
11,500 CAPACITY
GOOD MUSIC
BRIGHTER PEOPLE
Six-sheet, 1200 × 1800 mm (shown 1080 × 2880 px) · 5 mm bleed · black ground · cream mark · pattern slot reserved at the foot for a drawn band
FRI 9 JUL 2027
BECKENHAM
PLACE PARK
ARTIST NAME
ARTIST NAME ARTIST NAME HERE · ARTIST NAME HERE · ARTIST NAME HERE
ARTIST NAME HERE · ARTIST NAME HERE · ARTIST NAME HERE
MANY MORE TO BE ANNOUNCED
THREE STAGES
ONE COMMUNITY
1080 × 1080, 1:1 · feed announcement · black slab with a pink label bar, the one pill, no pattern
TICKETS
ON SALE
NOW
FRIDAY 9 JULY 2027
BECKENHAM PLACE PARK, LONDON
£ to confirm
MUSIC
PEOPLE
TOGETHER
1080 × 1350, 4:5 · portrait feed · coral ground, mascot and sticker PNG at 260px with room around it, no pattern
WOVEN WRISTBAND · 15 MM WEBBING · PATTERN IS THE WEAVE
350 × 15 mm woven strip (shown 1400 × 520 px, three tiers) · all-over pattern permitted: it is the printed cloth, not a layout
VIP
ALL ACCESS
FRIDAY 9 JULY 2027
BECKENHAM PLACE PARK · LONDON
NAME TO CONFIRM
Lanyard pass, 85 × 135 mm (shown 1012 × 1587 px) · 3 mm bleed · cream card, printed tape · mascot on pink: never on black (its body) or yellow (its headphones)
UNIÓN LONDON
ENTRY
UNIÓN LONDON
BAR
UNIÓN LONDON
MAIN
STAGE
Stage flag, 800 × 3000 mm (shown three at 1200 × 1600 px) · no bleed, 60 mm pole sleeve · three cloth lengths, never three equal blocks · flat cloth, no pattern
MUSIC PEOPLE TOGETHER
Totem sign, 900 × 2400 mm (shown 1200 × 1600 px) · no bleed, 5 mm foamex · yellow cap, stacked bars, black foot slab · no pattern
On a phone
The same identity at 390 pixels, which is where most of it will actually be seen.
Nothing is dropped on a small screen and no type shrinks below its smallest set size. The layout changes; the identity does not.
Social profiles
Twelve square assets, drawn for the two places a profile actually shows a mark.
A profile picture is cropped to a circle and shown at about fifty pixels. The wordmark set reads as the festival; the icon set reads as a shape, which is what a highlight cover needs.
At the size the platform shows them
The icon set , for highlight covers
A row of these reads as a set of shapes rather than a row of tiny names. Use one colour per highlight, or the same colour across all of them.
The wordmark set , for the profile picture
The name, cream, on each of the four grounds. All four survive the circular crop.
The wordmark on cream
The reverse: a cream ground carrying a coloured name. These sit quietly beside a dark profile row.