Ticket Tonic
Design system Version 1.0

The official Ticket Tonic system

Small nights.
Big energy.
Zero fuss.

A playful and reliable 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

Foundation

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

Colour

Built for the lights to go down.

Punch

#FF4D3D Highlight

Tonic

#DFFF31 Primary action

Ink

#17130F Primary surface

Paper

#F4F0E6 Light surface

Smoke

#2D2821 Raised surface

Mist

#D9D2C2 Quiet detail

Usage rule

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

03

Typography

Say it like you mean it.

Bebas Neue

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.

DM Sans

Body and interface

A small room can hold a very big night.

DM 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

Shape

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

Buttons

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

Controls

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

Components

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

Voice

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

Access

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-punch: #ff4d3d;
  --tt-tonic: #dfff31;
  --tt-ink: #17130f;
  --tt-paper: #f4f0e6;
  --tt-smoke: #2d2821;
  --tt-mist: #d9d2c2;
  --tt-action-radius: 999px;
  --tt-surface-radius: 12px;
}