Ticket Tonic
Design system Version 1.0

Small nights.
Big energy.
Zero fuss.

The official Ticket Tonic visual language for local music. It helps organisers sell out and gets fans through the door without the usual ticketing drama.

Explore the system

01

The crowd moves fast.
The interface should too.

1

Be loud with purpose

Tonic lime marks the next move. Big type creates energy. Use both to guide attention rather than fill space.

2

Keep money honest

Show the ticket price, payment fee and organiser payout before anyone has to ask.

3

Make the door easy

Ticket status should be obvious in any light. Every valid code can be scanned once.

02

Built for the lights to go down.

Tonic blue

#476CFF Highlight

Tonic

#CAFF39 Primary action

Ink

#11110F Primary surface

Paper

#F0EDE4 Light surface

Smoke

#191916 Raised surface

Mist

#D5D0C3 Quiet detail

Colour balance

Let ink and paper do most of the work. Use tonic for the next action and blue for moments that need clarity.

03

Say it like you mean it.

Bricolage Grotesque

Display

TONIGHT
IS THE NIGHT

Use display type for short statements, event names and section titles. Keep it uppercase and give it room to breathe.

Instrument Sans

Body and interface

A small room can hold a very big night.

Instrument Sans carries every detail that helps a fan decide with confidence. Use regular weight for reading and semibold weight for actions, labels and useful emphasis.

04

Soft actions.
Sharp layouts.

999

Pills for every action

Buttons use a full radius so they feel touchable and distinct from content containers.

1:1

Circles for icon actions

Use a circle when an icon can explain the action without a text label.

12

Small radius for surfaces

Cards, fields and panels use a restrained radius so controls always look different.

Spacing rhythm

4
8
16
24
40
64

05

Solid. Rounded. Obvious.

One permanent rule. Every button has a solid fill. Buttons are pills or circles. Never rectangles.

PrimaryTonic fill
SecondaryInk fill
On darkPaper fill
On punchTonic fill

Sizes

56 px
48 px
40 px

Icon actions

Use an accessible label even when the visible control only contains an icon.

States

Default
Hover
Focus
Disabled

06

Ask only what matters.

Control rules

  1. 01

    Labels stay visible. Placeholders are examples rather than instructions.

  2. 02

    Fields use plain language and a minimum height of 48 pixels.

  3. 03

    Errors explain what happened and how to fix it in one sentence.

07

Show the details.
Sell the feeling.

Local signal 003 AFTER
HOURS Hot event

Sat, Oct 17 10:00 PM

After Hours

The Cause, London

From£12
Confirmed Order TT2408

AFTER
HOURS

DateOct 17
Doors10:00 PM
EntryGeneral
OrderTT2408
2 tickets
Event card

Lead with the artist. Keep date, place and price easy to scan.

Digital ticket

Treat the ticket like a receipt and a keepsake. Status always comes first.

08

Talk like a great host.

“See you down the front.”

Ticket Tonic sounds confident because the details are handled. The voice is playful, practical and never pushy.

Say this

Sell 100 tickets. Pay no platform fee.

Not this

Unlock best in class event monetisation with our end to end platform.

Say this

Your ticket is in. Show this code at the door.

Not this

Your request has been successfully processed by our system.

09

Everyone gets through the door.

AA

Contrast that holds up

Body text and important controls meet WCAG AA contrast. Never rely on colour alone.

Keyboard by default

Every action works by keyboard. Focus uses a visible paper and ink ring.

Motion with consent

Motion supports meaning and stops when reduced motion is requested.

Core tokens 
:root {
  --tt-blue: #476cff;
  --tt-tonic: #caff39;
  --tt-ink: #11110f;
  --tt-paper: #f0ede4;
  --tt-smoke: #191916;
  --tt-mist: #d5d0c3;
  --tt-action-radius: 999px;
  --tt-surface-radius: 12px;
}