Skip to content
Enquire

Leapshot brand system

Version 1.0.0

The system behind the site.

Every page on leapshot.design is made from the tokens and components on this one. It is the same kind of system we build for clients, so it is published in full.

tokens.json tokens.css
Design tokens
235
One source file, three outputs.
Components
53
Every page is built from these alone.
Typefaces
3
Structure, voice and machine.
Surfaces
4
Every component works on all of them.

01Principles

Six calls, and why

Six decisions that make it Leapshot.

A brand system is a short list of decisions, applied everywhere. These are ours.

01

The mark is the layout

An arc and a dot: the leap and the shot. The same curve plots the five layers and sweeps the hero, so the logo is never just a logo.

02

One file, every format

Archivo is a variable font with a width axis. Headlines stretch from condensed to expanded, the way one idea is resized for every placement.

03

Print rules

Flat ink, flat colour, hairline rules, square corners. No gradients, no glows, no glass. Anything you can press is a pill.

04

Yellow is earned

Leap Yellow is a highlighter, not wallpaper. It marks the one thing that matters on a surface, and takes over a full band once or twice a page.

05

Three voices

Archivo is the system speaking. Newsreader is people speaking. Geist Mono is what machines read. Blue marks the machine layer.

06

Motion explains

Things move when a change travels: a headline widening, a record reaching five surfaces. Nothing fades in for decoration, and reduced motion is respected everywhere.

03Colour

Flat ink, flat colour

Paper, ink and one yellow.

Two neutrals do nearly all the work. Leap Yellow is used the way a highlighter is. Agent Blue appears only where a machine is reading.

Palette

Paper #FAF9F5
Token
--color-paper
On paper
1.0
On ink
18.3 AAA
Ink #0E0E0C
Token
--color-ink-950
On paper
18.3 AAA
On ink
1.0
Leap Yellow #FFDD21
Token
--color-leap-500
On paper
1.3
On ink
14.4 AAA

The page. A near-white with a little warmth, never cream.

Text, rules and the dark surface. A warm black, never pure #000.

Leap Yellow, the one signature colour. It is the dot at the top of the mark.

Ink ramp

950 #0E0E0C
Token
--color-ink-950
On paper
18.3 AAA
On ink
1.0
900 #181815
Token
--color-ink-900
On paper
16.9 AAA
On ink
1.1
800 #262622
Token
--color-ink-800
On paper
14.4 AAA
On ink
1.3
700 #3B3B35
Token
--color-ink-700
On paper
10.7 AAA
On ink
1.7
600 #55554D
Token
--color-ink-600
On paper
7.1 AAA
On ink
2.6
500 #6E6E64
Token
--color-ink-500
On paper
4.9 AA
On ink
3.8 AA Large
400 #97978B
Token
--color-ink-400
On paper
2.8
On ink
6.5 AA
300 #C2C2B7
Token
--color-ink-300
On paper
1.7
On ink
10.8 AAA
200 #DEDED5
Token
--color-ink-200
On paper
1.3
On ink
14.3 AAA

Support

Chalk #F1F0EA
Token
--color-chalk
On paper
1.1
On ink
16.9 AAA
Leap 100 #FFF8D0
Token
--color-leap-100
On paper
1.0
On ink
18.0 AAA
Leap 300 #FFEA75
Token
--color-leap-300
On paper
1.2
On ink
15.9 AAA
Leap 600 #E8C400
Token
--color-leap-600
On paper
1.6
On ink
11.3 AAA
Agent 100 #E4E7FF
Token
--color-agent-100
On paper
1.2
On ink
15.8 AAA
Agent 300 #A3AEFF
Token
--color-agent-300
On paper
2.0
On ink
9.3 AAA
Agent 500 #2A41F5
Token
--color-agent-500
On paper
6.3 AA
On ink
2.9
Positive #1B7F4B
Token
--color-positive
On paper
4.8 AA
On ink
3.8 AA Large
Critical #C5341F
Token
--color-critical
On paper
5.1 AA
On ink
3.6 AA Large

Agent Blue marks anything a machine reads: the agent view, data sources, code. Green and red are kept for confirmation and error states, where they colour the mark and never the words.

Surfaces

A surface is a background plus everything that sits on it. Components never name a colour; they ask the surface for a role such as text, rule or action. Put any component on any surface and it re-colours itself.

Paper data-surface="paper"

Default. Most of every page.

Your team, multiplied.

Secondary text sits one step back. Links underline, and highlight on hover.

Accent Machine
Chalk data-surface="chalk"

Quiet alternate band.

Your team, multiplied.

Secondary text sits one step back. Links underline, and highlight on hover.

Accent Machine
Ink data-surface="ink"

The machine room: demos, data, the agent layer.

Your team, multiplied.

Secondary text sits one step back. Links underline, and highlight on hover.

Accent Machine
Leap data-surface="leap"

Full-bleed yellow. One or two moments per page, never more.

Your team, multiplied.

Secondary text sits one step back. Links underline, and highlight on hover.

Accent Machine

Contrast

Every text and background pair the system allows, measured against WCAG 2 at build time. If a token change drops any pair below AA, the build fails.

paper
Sample Pair Ratio
Body text text on surface 18.3 AAA
Secondary text text-muted on surface 7.1 AAA
Labels and captions text-subtle on surface 4.9 AA
Button label on-action on action 18.3 AAA
Button label, hover on-action-hover on action-hover 14.4 AAA
Text on accent on-accent on accent 14.4 AAA
Highlighted text on-highlight on highlight 15.9 AAA
Machine-layer text machine on surface 6.3 AA
Focus ring focus on surface 18.3 AAA
Confirmation mark positive on surface 4.8 AA
Error mark critical on surface 5.1 AA
chalk
Sample Pair Ratio
Body text text on surface 16.9 AAA
Secondary text text-muted on surface 6.6 AA
Labels and captions text-subtle on surface 6.6 AA
Button label on-action on action 18.3 AAA
Button label, hover on-action-hover on action-hover 14.4 AAA
Text on accent on-accent on accent 14.4 AAA
Highlighted text on-highlight on highlight 15.9 AAA
Machine-layer text machine on surface 5.8 AA
Focus ring focus on surface 16.9 AAA
Confirmation mark positive on surface 4.4 AA Large
Error mark critical on surface 4.7 AA
ink
Sample Pair Ratio
Body text text on surface 18.3 AAA
Secondary text text-muted on surface 10.8 AAA
Labels and captions text-subtle on surface 6.5 AA
Button label on-action on action 14.4 AAA
Button label, hover on-action-hover on action-hover 18.3 AAA
Text on accent on-accent on accent 14.4 AAA
Highlighted text on-highlight on highlight 14.4 AAA
Machine-layer text machine on surface 9.3 AAA
Focus ring focus on surface 14.4 AAA
Confirmation mark positive on surface 18.3 AAA
Error mark critical on surface 18.3 AAA
leap
Sample Pair Ratio
Body text text on surface 14.4 AAA
Secondary text text-muted on surface 11.3 AAA
Labels and captions text-subtle on surface 8.4 AAA
Button label on-action on action 18.3 AAA
Button label, hover on-action-hover on action-hover 18.3 AAA
Text on accent on-accent on accent 14.4 AAA
Highlighted text on-highlight on highlight 18.3 AAA
Machine-layer text machine on surface 14.4 AAA
Focus ring focus on surface 14.4 AAA
Confirmation mark positive on surface 14.4 AAA
Error mark critical on surface 14.4 AAA

04Typography

Three voices, self-hosted

One file, every format.

Archivo is a variable font with a width axis. The same file sets a condensed story and an expanded billboard, which is exactly what the studio does with a brand.

Width axis font-stretch: var(--width-*)
125%
Structure wdth 62 to 125, wght 100 to 900

Archivo

Headlines, interface and body copy. The system speaking.

Voice wght 200 to 800, italic

Newsreader

Ledes, quotes and answers. People speaking.

Machine wght 100 to 900

Geist Mono

Labels, data and code. What agents read.

Scale

Twelve fluid steps. Each one interpolates between a phone size and a desktop size, so there are no type breakpoints.

Type scale
Token Value Preview Use
--text-7xl clamp(3.25rem, 0.5rem + 12.2222vw, 11.5rem) 52px on a phone, 184px on a desktop
--text-6xl clamp(2.875rem, 1.0833rem + 7.963vw, 8.25rem) 46px on a phone, 132px on a desktop
--text-5xl clamp(2.5rem, 1.3333rem + 5.1852vw, 6rem) 40px on a phone, 96px on a desktop
--text-4xl clamp(2.125rem, 1.4167rem + 3.1481vw, 4.25rem) 34px on a phone, 68px on a desktop
--text-3xl clamp(1.75rem, 1.3333rem + 1.8519vw, 3rem) 28px on a phone, 48px on a desktop
--text-2xl clamp(1.5rem, 1.25rem + 1.1111vw, 2.25rem) 24px on a phone, 36px on a desktop
--text-xl clamp(1.3125rem, 1.1667rem + 0.6481vw, 1.75rem) 21px on a phone, 28px on a desktop
--text-lg clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem) 18px on a phone, 22px on a desktop
--text-md clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem) 16px on a phone, 18px on a desktop
--text-sm clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem) 14px on a phone, 15px on a desktop
--text-xs clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem) 12px on a phone, 13px on a desktop
--text-2xs 0.6875rem 11px
Weights --weight-*

Regular 400

Medium 500

Semibold 600

Bold 700

Heavy 800

Typesetting typeset()

No widows. No orphans. No stranded words.

Headings use text-wrap: balance and running text uses text-wrap: pretty. On top of that, Heading, Text, Lede and Quote run their content through typeset(), which binds the last two words of a block and ties short words such as a, to and of to the word that follows.

Emphasis switches to the serif voice: like this, never a slanted sans.

05Spacing

4px base

Generous, and counted.

A fixed scale for the inside of components, and a fluid one for the page, so whitespace grows with the screen.

Scale

Spacing scale
Token Value Preview Use
--space-0 0px None
--space-1 4px 1 x the 4px base
--space-2 8px 2 x the 4px base
--space-3 12px 3 x the 4px base
--space-4 16px 4 x the 4px base
--space-5 24px 6 x the 4px base
--space-6 32px 8 x the 4px base
--space-7 48px 12 x the 4px base
--space-8 64px 16 x the 4px base
--space-9 96px 24 x the 4px base
--space-10 128px 32 x the 4px base
--space-11 160px 40 x the 4px base

Fluid layout spacing

Fluid layout spacing
Token Value Preview Use
--space-margin 20 to 72px Page margin, left and right of every container.
--space-gutter 16 to 24px Gap between grid columns.
--space-section 72 to 152px Vertical padding of a full section.
--space-section-sm 48 to 96px Vertical padding of a compact section.
--space-block 32 to 64px Gap between a section header and its content.

06Shape

Radius, rules, elevation

Square containers. Round controls.

Containers are square, like print. Anything you can press is a pill. Shadows are kept for things that float.

Radius

Radius
Token Value Preview Use
--radius-none 0 Sections, cards, frames. Containers are square, like print.
--radius-xs 2px Inputs, code blocks, swatches.
--radius-sm 6px Small media and thumbnails.
--radius-md 12px Chat bubbles only.
--radius-pill 999px Anything you press: buttons, chips, badges, toggles.

Rules

Border widths
Token Value Preview Use
--border-hairline 1px Dividers and outlines.
--border-rule 2px Section rules, buttons, focus rings.
--border-heavy 4px The accent bar on cards.

Elevation

Elevation
Token Value Preview Use
--shadow-0 none Default. Hierarchy comes from rules and surfaces, not shadows.
--shadow-1 0 1px 0 rgb(14 14 12 / 0.06), 0 2px 6px -2px rgb(14 14 12 / 0.12) Sticky bars once content scrolls beneath them.
--shadow-2 0 2px 4px -2px rgb(14 14 12 / 0.12), 0 12px 28px -12px rgb(14 14 12 / 0.28) Raised cards and menus.
--shadow-3 0 4px 8px -4px rgb(14 14 12 / 0.16), 0 32px 72px -24px rgb(14 14 12 / 0.45) Floating panels: the agent view.

07Motion

Respects prefers-reduced-motion

Motion explains.

Things move when a change travels: a headline widening, a record reaching five surfaces, a dot landing. With reduced motion switched on, everything simply arrives.

Easing

  • --ease-standard bezier(0.2, 0, 0, 1)

    Things that move from A to B.

  • --ease-enter bezier(0.16, 1, 0.3, 1)

    Things arriving. Fast start, long settle.

  • --ease-exit bezier(0.4, 0, 1, 1)

    Things leaving. Slow start, fast finish.

  • --ease-leap bezier(0.34, 1.56, 0.64, 1)

    The signature. A small overshoot, like landing a jump.

  • --ease-linear linear

    Continuous loops and progress only.

Duration

  • --duration-instant 80ms

    Colour and opacity feedback on press.

  • --duration-fast 160ms

    Hover states.

  • --duration-base 280ms

    Most transitions: reveals, toggles, accordions.

  • --duration-slow 520ms

    Panels and anything that crosses the page.

  • --duration-slower 900ms

    Signature moments only: the headline widening, the curve drawing.

08Grid

12 columns, fluid margins

Twelve columns.

One grid, with a gutter and a margin that grow with the viewport. Layouts change at four breakpoints and nowhere else.

12 col
7 col 5 col
4 col 4 col 4 col
3 col 3 col 3 col 3 col
Grid tokens
Token Value Use
--grid-columns 12 12 columns from the lg breakpoint; content stacks below it.
--container-prose 40rem Long-form reading.
--container-narrow 64rem Focused pages.
--container-wide 90rem The default page width.
--container-full 100% Edge to edge.
breakpoint sm 30rem Written literally in media queries.
breakpoint md 48rem Written literally in media queries.
breakpoint lg 64rem Written literally in media queries.
breakpoint xl 80rem Written literally in media queries.

09Components

Button, Link, Chip, Badge, Switch, Icon

Actions.

Anything you can press, and the small signals that sit beside it.

Button variant: primary, secondary, ghost 
<Button href="/enquire" icon="arrow-up-right">Enquire</Button>
<Button variant="secondary">See the system</Button>
Button sizes size: sm, md, lg
Button on ink
Link variant: inline, arrow, quiet

An inline link sits in running text.

An arrow link stands alone A quiet link underlines on hover /content.json 
<Link href="/system/" variant="arrow">Design system</Link>
Chip ask: sends a question to ChatPanel
A link chip 
<Chip ask="How is it priced?">How is it priced?</Chip>
Badge variant: outline, solid, accent, machine
Outline Solid Live Machine 
<Badge variant="accent" live>Live</Badge>
Switch role="switch"

This one is live: it opens the agent view.

<Switch label="Agent view" data-agent-toggle />
Icon 10 icons, 24px grid, 2px stroke
arrow-up-right
arrow-right
arrow-down
plus
close
menu
check
mic
mail
code 
<Icon name="arrow-up-right" />

10Components

Heading, Lede, Text, Eyebrow, Quote, List, Rule

Text.

The three voices, as components. Level and size are separate, so the outline stays right whatever the look.

Heading sizes size: display to 2xs

Display

Extra large

Large heading

Medium heading

Small heading

Extra small heading

Smallest heading

<Heading level={2} size="xl">One source of truth.</Heading>
Heading widths width: condensed to expanded

Condensed, for tall formats

Narrow, for tight columns

Normal, for most things

Wide, for emphasis

Expanded

<Heading width="expanded">multiplied.</Heading>
Lede size: md, lg, xl

We build creative automation systems that let your team do the work of a much bigger one.

A muted lede, for a quieter opening line.

<Lede size="lg">We build creative automation systems.</Lede>
Text voice: sans, serif, mono

Sans is the system speaking: interface and body copy.

Serif is people speaking: ledes, quotes and answers.

Mono is what machines read: labels, data, code.

Muted, for secondary information.

<Text voice="serif" tone="muted" measure>…</Text>
Eyebrow

A plain label

01With an index

With the dot 

<Eyebrow index="01">The studio</Eyebrow>
List marker: plus, check, dot, number
  • Structured content
  • Schema across the site
  • Approved
  • Published
  • Brand system
  • Content engine
  1. Map your tools
  2. Pick a layer
<List marker="plus" items={pkg.includes} />
Quote size: md, lg

Own the layer that is hard to copy, rent everything else.

The Wildfield principle
<Quote attribution="The Wildfield principle">Own the layer that is hard to copy.</Quote>
Rule weight: hairline, rule, heavy 
<Rule weight="rule" />

11Components

Card, PackageCard, Stat, Accordion, Field, EnquiryForm, CodeBlock

Content.

Containers for the things the studio actually has to say: packages, facts, answers and data.

Card variant: outline, raised, sunken, plain. surface: any

Outline

The default. A hairline, square corners.

Raised, linked

Hover to draw the yellow bar.

Sunken

Drops into the page.

On a surface

Pass surface to flip the colours.

<Card variant="raised" href="/system/">…</Card>
PackageCard
01 Setup fee + monthly retainer

Agent-ready site

A lean, fast site that people and AI agents can both read and act on.

  • Structured content in a headless CMS
  • Schema (JSON-LD) across the site
  • llms.txt
  • An /ask or MCP endpoint for agents
Enquire 
<PackageCard index="01" name={pkg.name} summary={pkg.summary}
  includes={pkg.includes} pricing={pkg.pricing}
  cta={{ label: 'Enquire', href }} />
Stat
Layers, built in order
5
Facts only. Never decoration.
Hours sold
0
<Stat value="5" label="Layers, built in order" />
Field input, multiline or options 
<Field label="Your name" name="name" required />
<Field label="What is it about?" name="package" options={options} />
Accordion native details
How is Leapshot priced?

A setup fee to build the system, then a monthly retainer to run and improve it. We do not sell hours. Every build is scoped to your tools and data, so enquire and we will come back with a custom quote.

Is this about replacing my team?

No. The point is your team, multiplied. We build the system, then train your people to run it, approve it and extend it.

What does agent-ready actually mean?

Your content is structured so AI assistants can read it and act on it: schema (JSON-LD) on every page, an llms.txt file, and an /ask or MCP endpoint. This site is a small example. Switch on Agent view in the menu to see what an agent reads.

<Accordion items={faqs} />
CodeBlock
tokens.css
:root {
  --color-ink-950: #0E0E0C;
  --color-leap-500: #FFDD21;
  --font-sans: "Archivo", sans-serif;
  --ease-leap: cubic-bezier(0.34, 1.56, 0.64, 1);
}
<CodeBlock label="tokens.css" code={css} />
EnquiryForm A demo: nothing is sent

Or email fagan@popcandi.tv

<EnquiryForm options={enquiryOptions} email={contactEmail} />
EnquiryForm, not sent state="error"

Or email fagan@popcandi.tv

EnquiryForm, sent state="success"

Enquiry sent.

Thanks. Your enquiry is on its way to us, and we reply by email with next steps and a custom quote.

EnquiryDialog Any link to /enquire/ opens it

The same form in a modal. The link chooses what the enquiry is about, and still goes to the enquiry page when there is no JavaScript.

Enquire Custom quote 
<EnquiryDialog options={enquiryOptions} email={contactEmail} />
<Button href="/enquire/?package=agent-ready-site">Enquire</Button>

12Components

Section, Container, Grid, Split, Stack, Cluster

Layout.

Pages never write CSS. They arrange content with these six primitives, which carry the grid and spacing tokens.

Grid cols by breakpoint; ruled shares hairlines
Cell 1
Cell 2
Cell 3
Cell 4 
<Grid cols={{ base: 1, md: 2, xl: 4 }} ruled>…</Grid>
Split ratio: 8/4, 7/5, 6/6, 5/7, 4/8
Main, 7 columns
Aside, 5 columns 
<Split ratio="7/5">
  <Lede>…</Lede>
  <Stack slot="aside">…</Stack>
</Split>
Stack gap: one step of the spacing scale
Item 1
Item 2
Item 3 
<Stack gap="5">…</Stack>
Cluster wraps
Brand system Content engine Site Agent layer Chatbot Ops Training 
<Cluster gap="3">…</Cluster>
Section and Container

Section is a full-width band: it sets the surface, the vertical rhythm and a Container. Container centres content, applies the page margin and caps the width at wide, narrow or prose. Every page on this site is a stack of Sections. 

<Section surface="ink" id="system" aria-labelledby="system-title">
  <SectionHeader id="system-title" index="02" eyebrow="The system">One source of truth.</SectionHeader>
</Section>

13Components

The big pieces, all live

Patterns.

The larger compositions the homepage is made of. Each one here is the real component, running.

Nav and Footer

Nav is the bar at the top of this page: logo, links, the agent-view switch and one call to action. Below the lg breakpoint the links move into a menu opened by a real button. Footer is shown below, at the size of its frame. 

<Nav links={nav} cta={{ label: 'Enquire', href }} agentSwitch="Agent view" />
SectionHeader

03How it gets built

Built in order

Five layers, built in order.

The running head that opens every section: a rule, an indexed label, a heading and a lede.

<SectionHeader index="03" eyebrow="How it gets built" meta="Built in order">
  Five layers, built in order.
  <Lede slot="lede">…</Lede>
</SectionHeader>
Hero Sized in container units

Creative automation systems

The headline widens on load

Your team, multiplied.

The first line is condensed, the last is expanded. Same font file.

Enquire

The slot on this side holds the ChatPanel on the homepage.

<Hero lines={['Your team,', 'multiplied.']} eyebrow="Creative automation systems">…</Hero>
SystemMap Edit a field, or push a change

Source of truth content.json

Record 1 of 4

Brand system tokens + components

  • Website01

    Agent-ready site A site people and AI agents can both read Enquire

  • Chatbot02

    What is new?

    Agent-ready site. A site people and AI agents can both read. Enquire

  • Ads03

    Sponsored Agent-ready site A site people and AI agents can both read Enquire

  • Email04

    Subject Agent-ready site: A site people and AI agents can both read Preview Enquire at leapshot.design

  • AI agents05

    {
 "@type": "Service",
 "name": "Agent-ready site",
 "description": "A site people and AI agents can both read",
 "provider": "Leapshot",
 "potentialAction": "Enquire"
}
<SystemMap records={records} />
LayerCurve y = (1 - t) squared
  1. Layer 01

    Brand system

    Tokens, logo, type, motion recipes and rules, built so AI tools can read and follow them.

    • Design tokens
    • Logo and type
    • Motion recipes
    • Rules AI tools can follow
  2. Layer 02

    Content and ad engine

    Motion ads, social creative and AI UGC produced from the brand system, with approvals built in.

    • Motion ads
    • Social creative
    • AI UGC
    • Approvals
  3. Layer 03

    Site and agent layer

    Structured content that feeds your site, ads, email and AI assistants from one place.

    • Structured content
    • Schema and llms.txt
    • An /ask or MCP endpoint
  4. Layer 04

    Chatbot and ops

    A conversational front door wired to live data, plus the automations behind it.

    • Chatbot on live data
    • Escalation rules
    • Ops automations
  5. Layer 05

    Team training

    Your people learn to run, approve and extend the system. The system multiplies them; it does not replace them.

    • Workshops
    • Approval gates
    • An operating model
<LayerCurve layers={content.process} />
ChatPanel Runs in the browser, reads /content.json
Ask Leapshot Answers from /content.json

No model, no black box. Every answer names the content key it came from.

<ChatPanel suggestions={['How is it priced?']} />
AgentPanel Opened by any data-agent-toggle

The agent view shows what an AI agent reads: the page's JSON-LD, content.json, llms.txt and tokens.json. While it is open, every element with a data-source attribute is outlined with its content key. 

<AgentPanel sources={sources} />
<Switch label="Agent view" data-agent-toggle />
HairlineFigure hub, on paper
One record at the centre. Every surface linked to it.
<HairlineFigure figure="hub"
  caption="One record at the centre."
  label="A hub with eight tiles…" />
HairlineFigure stack, on ink
Five layers. Each one feeds the next.
<HairlineFigure figure="stack"
  caption="Five layers."
  label="A stack of five frames…" />
NotFound SlotMachine, the 404 figure, on ink

Page not found

The page you are looking for does not exist or has moved.

Back to home 
<Section surface="ink">
  <NotFound />
</Section>

HairlineFigure draws an isometric line figure from @lucasmarkes/hairline that answers the pointer, with a one-line caption. It fills its column at 5:4 and, with play on, walks through its motion until someone points at it. Its colours are surface roles, so the plate always matches the band it sits on.

Figure tokens
Token Value Use
--hairline-stroke 1px Stroke width of the line figures, in CSS pixels at any size. Matches --border-hairline.
--hairline-plate surface The plate fill. Always the surface the figure sits on.
--hairline-hi ink, or yellow on ink What the figure lights.
--hairline-edge ink 700, or paper on ink Silhouettes.
--hairline-mid ink 400 Every other stroke.
--hairline-lo one step from the surface What recedes.
FormatFrames One lockup, five placements
9:16 Story
4:5 Feed
1:1 Square
16:9 Video
8:1 Banner 
<FormatFrames lines={['Your team,', 'multiplied.']} />
IndexList

  1. Brand identity and design systems

    Positioning, naming and the system that AI tools consume.

  2. Motion graphics and multi-format ads

    Brand motion language and ads resized and versioned for every placement.

  3. Social creative at volume

    Content systems with strategy, approvals and community voice baked in.

  4. AI UGC ads

    Offer, angle and test discipline, with disclosure and compliance handled.

<IndexList items={content.services} />
CTABand

Enquire

One line, one ask.

Enquire 
<CTABand title="Ready to multiply your team?">
  <Button href={href} size="lg">Enquire</Button>
</CTABand>
Footer 
<Footer tagline="Your team, multiplied." groups={groups} legal={legal} />

For your brand

Want a system like this one?

This is layer one of five. We build the same thing for your brand, then everything that runs on top of it.

Enquire See the studio

Enquire

Start an enquiry.

Tell us about the business and what you would like to multiply. We reply with next steps and a custom quote.

Or email fagan@popcandi.tv