HomeDesign system

Design system

The tokens, components and motion that make Brand Up There. Use these values and nothing else, so every page reads as one publication.

Principles

Four rules every page follows.

  1. Black and white carry the frame.Soft everyday tones mark the three programmes. Photography supplies the colour.
  2. One family at its own spacing.DM Sans in every size and weight. Letter-spacing always stays at the font default.
  3. Newest first.Every index shows what changed most recently at the top, with a time on it.
  4. Motion with a job.Every animation shows where something came from or what can be done. Viewers who prefer less motion, or press Pause animation, get a still site.

Colour

Neutrals switch with the viewer's light or dark setting. Tones stay soft in both.

Paper--bg · #FFFFFF / #0F0E0EPage background
Ink--fg · #141213 / #F4F3F1Text, rules, primary buttons
Surface--surface · #F5F4F1 / #191818Quiet bands, form panels
Line--line · #E6E3DE / #2B2929Dividers and outlines
Muted--muted · #6A6667 / #A29E9FSecondary text
Slot--slot · #EFEDE9 / #1C1B1BEmpty image frames

Programme tones

Mist--mist · #E4E9EDBrand Up Connect
Sand--sand · #F0E9DDBrand Up Talk, newsletters
Sage--sage · #E3E8E0Brand Up Club
Stone--stone · #EEEBE6Directory, Publications, Showcase

Type

DM Sans, weights 400 to 700. Fifteen steps, three of them fluid with the screen width.

--fs-mega48 to 112px · Section namesBrand Up There
--fs-display38 to 72px · Page headlinesBrand Up There
--fs-headline26 to 38px · Sub-headlinesBrand Up There
--fs-h232px · Large titlesBrand Up There
--fs-h328px · Panel titlesBrand Up There
--fs-h424px · River headlinesBrand Up There
--fs-h522px · Large card titlesBrand Up There
--fs-title20px · Card titlesBrand Up There
--fs-lead19px · Decks and standfirstsBrand Up There
--fs-body18px · Body textBrand Up There
--fs-md17px · Compact titlesBrand Up There
--fs-base16px · Interface textBrand Up There
--fs-small15px · Buttons, notesBrand Up There
--fs-label13px · Labels and metaBrand Up There
--fs-xs12px · Badges and tagsBrand Up There

Space and shape

A ten-step spacing scale, a 24px gutter, a 1440px page and six corner shapes. The U shape comes from the logo.

--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-5 · 24px
--space-6 · 32px
--space-7 · 48px
--space-8 · 64px
--space-9 · 80px
--space-10 · 120px
--r-sm · 4px
--r-md · 6px
--r-lg · 12px
--r-xl · 20px
--r-pill · 999px
--r-u · the U

Motion

Four durations and two easings. Hover a card to play it.

Quick--dur-1 · --ease-out · hovers and presses
Settle--dur-2 · --ease-out · menus and toggles
Glide--dur-3 · --ease-out · cards and feed changes
Reveal--dur-4 · --ease-in-out · image wipes and headlines

Patterns

Page enterThe page fades in over 0.6s.
Reveal on scrollBlocks rise 28px and fade in, 70ms apart among siblings.
Image wipeFrames open upward while the photo settles from 112% to 100%.
Headline riseBig headlines rise word by word, 55ms apart.
Live tickerThe hero stamp cycles through what is new every four seconds.
Feed shuffleFiltering the Latest feed deals the cards again with a short stagger.
Before and afterThe slider sweeps once to show it can be dragged.
Count upMasthead numbers count up when they appear.
ParallaxFull-width photos drift slightly against the scroll.
Cursor labelA round label reads View, Read or Profile over clickable imagery.
MenusMega menus drop in and their links follow one by one.
LikeThe heart pops once when a post is liked.
Rule drawThe black rule under Latest draws from left to right.

Components

Live examples. Each one is used across the site.

PrimaryGhostText link

Buttons: one primary per view, a ghost for the second action, text links for navigation.

RebrandAccraVerifiedPartnerFeature

Chips filter, tags label, badges certify. The bars beside a label show how deep a piece goes.

AnalysisWhy airlines are trading pattern for a single line
Analysis

Why airlines are trading pattern for a single line

Liveries are getting simpler. The reasons are paint, distance and the phone screen, in that order.

Ama Owusu28 Oct 20267 min read00
AviationVolta Lines by Studio Odo

Volta Lines

A West African carrier trades its full-body pattern for one gold line.

Studio Odo, Accra202600
Work by Studio Odo
Work by Studio Odo
Work by Studio Odo

Studio Odo

Accra, Ghana11-25 people
Verified

Identity and wayfinding for transport and property.

IdentityStrategySpatialFrom $15,000

Cards: article, project (likes and comments under every card) and agency (work strip first). Showcase grids mix sizes in a numbered collage.

Before and after example, after
Before and after example, before
BeforeAfter

Before and after: for every rebrand on the Wire and in the Showcase.

Forms: one field and one button wherever possible.

Images

Every image frame on the site is a named slot. Save a photo under the slot name (for example project-volta-lines.jpg) in the images folder and rebuild: it replaces the grey frame everywhere that slot appears. The full list of frame names comes with each update.

21:9Full-width heroes on projects and articles
16:10Showcase features
4:5Project cards, portraits, interview images
4:3Article cards, agency work, the Latest feed
3:2Archive, in-article images, editions
16:9Replays and wide in-story images
1:1Thumbnails and details
3:4Book covers and before and after pairs

Audit

What changed when the system was tidied for this version.

15font sizes now sit on one scale, with no stray values left in components
5corner radii replace nine different values
4durations and 2 easings replace eight separate timings
0bright colours left: blue, gold and pink became mist, sand and sage