← Accio brand kit
AccioStudio
Appearance
Tokens
Appearance

Tokens

Every value in data/tokens.json, named as the brand book names it. Press a value to copy it.

Primary

Black, white, parchment and madder. Grounds carry the page; madder is the one accent.

  • Oxide

    Oxide

    The one black. Blackened alloy; the dark ground.

    oxide ground

  • White

    White

    The one white. Paper, screens, the studio.

  • Parchment

    Parchment khadi

    Undyed cloth; the warm light ground.

    parchment ground

  • Madder

    Madder

    The signature. Actions and the live badge.

    parchment accent

Oxide 46%White 22%Parchment 24%Madder 8%

Secondary

Indigo is thread, rust is the one warning. Silver and rose brass are metals: the material engine renders them, never a flat fill.

  • inlay, never flat

    Silver

    Metal. Inlay only.

    oxide ink · oxide focus · oxide alert

  • inlay, never flat

    Rose brass brass

    Metal. Inlay only.

    oxide accent

  • Indigo

    Thread. Links and focus.

    parchment line · parchment focus

  • Rust

    Errors. Never the accent.

    parchment alert

Image world

Illustration and imagery only. Never a button, never a ground.

  • Oxblood

    Lacquer and leather bindings.

  • Ochre

    Earth pigment.

  • Verdigris

    Patina on old metal.

  • Stone

    Plaster and undyed wool.

Tints

Mixed from the grounds, for panels and lines. Not colours of their own.

  • AshRaised panel on oxide
  • Parchment deepRecessed panel on parchment
  • ChromiumSilver inlay in shadow
  • GraphiteInk on cloth

Ramps

Eleven shades per hue for interfaces. The brand colour sits on its own step, marked •. Shades are even in OKLCH lightness.

inkmadderindigorustochreverdigrisstone50
100
200
300
400
500
•
600
•
700
800
•
•
•
900
•
950
•

Themes

Each role points at a token. Contrast is measured on the theme's ground.

ParchmentLight: parchment cloth. Thread, upcoming.
groundParchment
panelParchment deep
inkGraphite15.8:1
lineIndigo11.3:1
accentMadder11.2:1
focusIndigo11.3:1
alertRust8.8:1
OxideDark: blackened alloy, inspired by Bidri. Metal, past. Its own palette, not an inversion.
groundOxide
panelAsh
inkSilver14.5:1
lineChromium10.4:1
accentRose brass5.1:1
focusSilver14.5:1
alertSilver14.5:1

Typeawaiting sign-off

Human-written text is proportional, machine-written text is mono (Geist Mono). Averia Serif Libre sets the headlines (roles with family "display": hero and display), at -0.11em, used unmodified under its own name. Accio Sans sets everything else: subheadings, body, captions and labels, at wdth 105. The wordmark is the logo artwork in data/logo/variations/ (the drawn wordmark and its icon mark), never set from type; type.wordmark awaits the owner's decision. No italic: emphasis is weight. Sizes sit on the 4px grid. Geist Mono runs large beside the sans, so mono is set at monoRatio of the size it sits with.

  • wordmarkArtwork, not type. Use the files in the brand book. The type.wordmark token (Accio Sans caps) is out of date and waits on the owner.
  • heroAveria Serif Libre · 64px / 400 · -0.11em
    Sell the next event
  • displayAveria Serif Libre · 44px / 400 · -0.11em
    Sell the next event
  • sectionAccio Sans · 32px / 400 · -0.01em
    Sell the next event
  • titleAccio Sans · 24px / 300 · -0.005em
    Sell the next event
  • leadAccio Sans · 20px / 350 · 0.025em
    Sell the next event
  • bodyAccio Sans · 16px / 350 · 0.025em
    Sell the next event
  • captionAccio Sans · 12px / 450 · 0.03em
    Sell the next event
  • labelAccio Sans · 12px / 480 · 0.05em · caps
    Sell the next event
  • machineGeist Mono · 12px / 400
    ACC·7F3·2608 · seed accio · n 8
  • microGeist Mono · 11px / 400 · 0.01em
    Sell the next event

Spaceawaiting sign-off

  • 0px
  • 4px
  • 8px
  • 12px
  • 16px
  • 24px
  • 32px
  • 48px
  • 64px
  • 96px

Motionawaiting sign-off

Reduced motion: respect.

  • 120ms
  • 200ms
  • 320ms
  • cubic-bezier(0.2, 0, 0, 1)
  • cubic-bezier(0.4, 0, 0.2, 1)

Texture

One seeded recipe per material, so the book, the site and Figma draw the same grain. Every tile is seamless.

  • paper

    The sheet itself: parchment tooth and a faint laid line.

    seed accio·paper

  • pigment

    Dry pigment on paper: fibrous grain, soft mottling, light flecks, a ragged edge.

    seed accio·pigment

  • alloy

    Blackened zinc alloy, oiled and matte: a fine even grain.

    seed accio·alloy

  • cloth

    Handspun khadi: the weave in one direction, with slubs.

    seed accio·cloth