Living reference for sections, not just tokens

Build pages that feel like Tell Your Friends.

This page defines the visual language at section level: hierarchy, shadow behaviour, card construction, and persuasion patterns.

01Foundations

Colour, border and shadow rules

One-pixel borders for now. Shadow colour is selected to reinforce the foreground colour or interaction state, not added as a default decoration.

Token usage guide: Use canonical names. The --brutal-* and --pop-* aliases are legacy — they resolve to the same values but add confusion. The --font-body-brutal and --font-mono-brutal aliases both resolve to --font-sans.

Semantic token roles

Quick reference for what each approved token is for. Click to copy the token name.

Colour scales

Eight approved scales. Forest is intentionally inverted: 50 is the darkest brand anchor. Paper is not a brand scale.

Section accent rotation

Six slot colours keep section-level designs varied without ad-hoc palette choices.

--section-accent-1pop-red

--section-accent-2pop-blue

--section-accent-3pop-yellow

--section-accent-4pop-green

--section-accent-5pop-orange

--section-accent-6pop-pink

Corner radius

Compact corners for small objects, field radius for inputs, generous corners for cards, pills only for controls or short labels.

SmallCompact metadata, inset details.12px

FieldInputs, nested panels, blocks.18px

CardPrimary cards, substantial frames.24px

PillControls, status, labels only.999px

Shadow family

Forest

Neutral depth

Grounded structure without becoming playful.

4px 4px 0 var(--forest)

Green

Brand-led emphasis

Reinforces the lead colour.

4px 4px 0 var(--green)

Lime

Interactive lift

Hover/focus edge without changing shape.

4px 4px 0 var(--lime)

Sun

Warm punch

Promotional accents, metric highlights.

4px 4px 0 var(--sun)

Surface textures

Reusable corner and surface treatments for block-colour cards.

Halftone fade

Dots dissolving from a corner.

.tex-halftone

Stipple edge

Grain dissolving at the edge.

.tex-stipple-edge

Dot grid

Uniform quiet rhythm.

.tex-dotgrid

Editorial gradient

Bottom-darkening wash.

.tex-editorial-grad

02Typography

Choose one voice for the whole header.

Headers use either Instrument Sans or Instrument Serif. Do not switch typeface or introduce italic emphasis inside a heading. Bold is reserved for proof and emphasis.

Type role family

Display marquee

Artists, labels, managers.

Rare oversized moments that stop the scroll.

Hero heading

One partner for releases that need momentum.

Main page-entry heading. Instrument Sans, direct voice.

Display statement

Proof first. Philosophy second.

Oversized non-hero editorial moments.

Serif voice

All of this, under one roof.

Editorial or cultural warmth. Instrument Serif, regular.

Section heading

Turn work into a route.

Working titles that structure the page.

Heading hierarchy

The branded ladder is role-based, not just HTML-level-based.

D0

Artists, labels, managers.

display marquee · sans

D1

Page lead — one clear statement

hero heading · h1 · sans

D2

Proof first. Philosophy second.

display statement · sans

h1

Page heading — warm editorial voice

page heading · serif 400

h2

Section heading — structural title

section heading · serif 400

h3

Card heading — local hierarchy

component heading · serif 400

Heading hierarchy — sans voice

Apply .sans-heading when the same structural role needs the direct sans voice.

h1

Page lead — one clear statement

sans 400

h2

Section title — structural heading

sans 400

h3

Card heading — local hierarchy

sans 400

h4

Component label — sub-group title

sans 400

h5

Minor heading — tight context

sans 400

h6

Lowest-level — rare use

sans 400

Weight roles

--weight-displayCampaign momentum400 · large structural copy

--weight-headingComponent heading500 · local hierarchy

--weight-labelCampaign signal600 · labels & metadata

--weight-emphasis42x ROAS700 · proof & interruption

Letter-spacing roles

--tracking-displayCampaign momentum-0.055em · large sans

--tracking-headingMake it move-0.04em · structural headings

--tracking-serifWord of mouth-0.02em · full serif

--tracking-bodyReadable explanation0 · paragraphs & controls

--tracking-labelCampaign signal0.01em · compact labels

Text-flow spacing

Campaign signal

Make it move

label-heading · 16px

One connected system

Creative, media, data share the same signal.

heading-copy · 24px

Paragraph one establishes the point.

Next paragraph develops it.

copy-copy · 12px

Give enough context for the next action.

copy-action · 24px

Section intro

Set up the idea

Main content begins after a structural pause.

intro-content · 32px

Spacing scale

A 12-step spacing scale from 2px to 192px. Use the semantic token, not the pixel value.

--space-02px

--space-14px

--space-28px

--space-312px

--space-416px

--space-524px

--space-632px

--space-748px

--space-864px

--space-996px

--space-10128px

--space-11192px

Text-size ramp

Fluid type scale for body copy and metadata. Each size uses clamp().

--text-size-tiny

Metadata, labels, footnotes.

--text-size-small

UI copy, description, secondary.

--text-size-regular

Body text, paragraph copy.

--text-size-medium

Emphasised copy, section intros.

--text-size-large

Leads, deck copy, editorial openers.

Semantic body sizes

Token-based sizes for running copy, ledes, metadata, and labels.

--text-lede

Lede — 1.125rem–1.375rem · line-height 1.5

--text-body

Body — 1rem–1.125rem · line-height 1.6

--text-small

Small — 0.875rem–0.9375rem · line-height 1.5

--text-label

Label — 0.8125rem–0.875rem · line-height 1.4

Motion tokens

Easing curves and animation timing used across the system.

--anim-easeStandardcubic-bezier(0.22, 1, 0.36, 1)

Primary easing for UI transitions and reveals.

--anim-ease-outOutcubic-bezier(0.33, 1, 0.68, 1)

Decelerating motion for exits.

--anim-ease-in-outIn-outcubic-bezier(0.65, 0, 0.35, 1)

Symmetric both-direction motion.

--anim-ease-bounceBouncecubic-bezier(0.34, 1.56, 0.64, 1)

Overshoot for proof metrics and reveals.

Duration tokens

Animation speed is tokenised. Use the semantic role, not a raw value.

--anim-duration-fastFast · 0.3s

Micro-interactions, hover states, immediate feedback.

--anim-duration-normalNormal · 0.6s

Card reveals, section transitions, standard UI motion.

--anim-duration-slowSlow · 1s

Hero animations, scroll-triggered reveals, atmospheric.

03Primitives

Buttons, inputs and chips should look related

The component family should read as one system: rounded, direct, lightly offset, and legible at a glance.

Button family

Book a call

Primary button

Main conversion action. Use once per section.

See the work

Secondary button

Supporting route beside a primary action.

Start a project

Inverse button

Dark or high-colour surface needs a separated action.

Utility button

Compact interface control that performs an action.

Button axes

Primary · Small · 32px

Primary · Default · 46px

Primary · Large · 56px

Ghost · Small · 32px

Ghost · Default · 46px

Ghost · Large · 56px

Input family

Text input

Short, single-line information.

Text area

Open context and rough briefs.

Select input

Focus state

Visible lime outline without changing border weight.

EmailEnter a complete email address

Validation state

Use message and colour shift together.

Selection controls

CampaignCheckbox · Default

CampaignCheckbox · Checked

Paid mediaRadio · Focus

Web & CRMRadio · Disabled

Chip family

In progress

Status chip

Single-dot state marker.

Choice chip

Interactive option for filters and forms.

42x ROAS

Proof stamp

Emphatic evidence marker.

Metadata chip

Non-interactive taxonomy inside cards.

04Components

Families, not a pile of snapshots

Colour, content, size, and state differences become explicit variant axes instead of separate component identities.

Site navigation

SiteHeader

One shared navigation family for the desktop header and open-menu state.

State: default / openViewport: desktop / mobile

Open menu

SiteMenu

Forest rounded card with cream link list and close button.

State: closed / open

Mobile header

SiteHeader

The header as it appears on mobile.

Viewport: mobile

Music player

MusicPlayer

Player controls and track context in one component.

State: paused / playingMode: compact / turntable

MF DOOM

Deep Fried Frenz

Service card

ServiceCard

One capability card with surface variants.

Surface: cream / green / sun / lime / forest

02 · Campaign

Make it move.

Creative, media, web connected.

CreamGreenSunLimeForest

Proof card

ProofCard

Metric and supporting line as content properties.

Content: metric / labelSurface: quiet / emphasis

£880k+Attributed sales · Marina Abramovic

42xROAS · paid media campaign

48Enquiries month one

39%CPA improvement 72h

Campaign artefacts

ProofReceipt

The proof receipt as an implemented evidence component.

Receipt: implementedSurface: paper / sun / lime

Campaign proof

Unconditional Love at Piccadilly Circus

42x return on ad spend

Attributed sales: £880k+
Markets reached: 22
Evidence type: Platform data

A production-ready evidence recipe.

Project card

ProjectCard

Project-entry component with taxonomy and client context.

Media: image / videoState: default / hover

42x

Paid media · CRM

Marina Abramovic x CIRCA

Music & culture · 2024

Signal ticker

SignalTicker

A repeated editorial line with surface variants.

Surface: lime / sunMotion: moving / paused

Connected capabilities

Trust wall

TrustWall

Name-led credibility section for broad client recognition.

Trusted by

Artists, labels, managers, institutions.

New OrderMarina AbramovicPlaceboLaurie Anderson

Mute RecordsBaby SmithIE EntertainmentSlawn

ATrust introductionBForward trackCReverse track

05Section components

Proven layouts, not one-off arrangements

These section-level components follow the same hierarchy rules and token constraints as the rest of the system.

Process explainer

How it works

Three layers. One system.

World, flagship, and system accelerate together.

No agency relay
No translation loss
No account managers

Capability wall

What we do

World. Flagship. System.

Three connected layers.

Strategy

Timelines, budgets.

Creative

Art direction, content.

Web

Sites, stores, journeys.

Media

Paid, CRM, reporting.

Proof monument

Proof

42x return on ad spend

Commercial proof

Unconditional Love at Piccadilly Circus.

Marina Abramović × CIRCA. 42x ROAS.

Read the case study

Sales £880k+

ROAS 42x

Countries 22

Rough brief form

Start with the rough version

Send the messy version.

You do not need a finished scope. Tell us what is moving, what feels stuck, and what a useful outcome would look like.

What are you making, launching, or trying to move?
Who is it for and what matters most right now?
What feels unclear, stuck, or underperforming?
What would a good outcome look like in six weeks?

Useful frictionGive structure, but keep the tone human.

06Layout patterns

Reusable grids and page structures

Structural components that give consistent shape to editorial pages, campaign decks, and data-heavy sections.

Editorial Dossier

[slug].astro

Project detail page — sticky case-file rail + 720px reading column for long-form case studies. Used on all /projects/[slug] pages.

Zones: rail / readingProof band: graduated / hiddenResponsive: column → stack

£880k+

ClientCIRCA

SectorArts & Culture

Reading5 min

Overview → Challenge → Approach →

Tell us about your project

Hero figure

Brief / intro

£880k+attributed sales 42xROAS 5M+paid impressions 2.4Mpeople reached

<Content /> — full case study prose

Pull-quote from testimonial

Sign-off + CTAs

Editorial lead

Single-column serif-led hero + body. Used for liner notes, about pages, written editorial.

Serif display heading

Lede — one or two sentence intro

Body prose — continuous reading column at 720px

Split argument

Two-column: narrative left, supporting evidence or data right. Used for culture page, process sections.

Narrative column

Evidence / support column

Proof ledger

Full-width metrics band with supporting detail. Used for proof pages, deck metric sections.

£880k+sales 42xROAS 22countries

Supporting detail rows

Campaign matrix

Grid of capability or service cards with section accent rotation. Used for What We Do, service grids.

01 02 03 04

Case study feature

Image-led hero + pull-quote + narrative. Used for deck case studies, hero proof sections.

Feature image

Pull-quote

Narrative

Index listing

Filterable grid of entry cards with taxonomy. Used for projects index, events, liner notes, gallery.

Filters / taxonomy bar

Card Card Card

Full documentation in tyf-web-patterns skill under Project Detail: Editorial Dossier Layout, and DESIGN.md Components section. Additional layout patterns (editorial page, deck page, proof page, portal) described in the project README.

07Usage guide

Principles that keep the system coherent

These guidelines apply regardless of which component, token, or layout is in use.

One voice per heading

Don't mix serif emphasis inside a sans heading. Change the whole heading's voice.

Proof before philosophy

Lead with the measurable outcome. Context comes after the number.

One border style

1px solid var(--line). No 2px, no dashed except in the rough-brief form.

No inline styles in production

Every visual property maps to a token or Tailwind class.