# Logo

> The Oztix logo, its primary and secondary lockups, colours, clear space, minimum sizes, and downloads.

![The blue logo with tagline on white](https://ticketsolutionsptyltd.github.io/roadie/brand/logo/primary-tagline.svg)

Brand, on white or light backgrounds. The first choice.

![The dark logo with tagline on white](https://ticketsolutionsptyltd.github.io/roadie/brand/logo/on-light-dark.svg)

Dark, for one colour print and beside other neutral logos.

![The light logo with tagline on black](https://ticketsolutionsptyltd.github.io/roadie/brand/logo/on-dark-light.svg)

Light, on dark backgrounds and photos.

![The light logo with tagline on Spotlight blue](https://ticketsolutionsptyltd.github.io/roadie/brand/logo/on-brand-light.svg)

Light, on Spotlight blue and other colour fills.

The logo is the most recognisable part of the brand. Using it the same way
every time keeps Oztix work professional and easy to recognise.

## Lockups

The logo is the logomark, a swirl, beside the wordmark, "oztix", with the
tagline Built on Partnerships wherever there's room. The tagline keeps its
title case.

![The primary logo, with the logomark to the left of the wordmark](https://ticketsolutionsptyltd.github.io/roadie/brand/logo/primary.svg)

Primary. The logo for most work.

![The secondary logo, with the logomark above the wordmark and the tagline below](https://ticketsolutionsptyltd.github.io/roadie/brand/logo/secondary-tagline.svg)

Secondary, stacked. For square or narrow spaces, such as a profile picture or an app icon.

## Choosing a logo

Start with the primary logo and tagline, in blue, on white or a transparent
background. Make sure it contrasts clearly with what's behind it, and once a
campaign has a logo, use the same one across all of it.

## Clear space and size

Leave clear space around the logo equal to the height of the x in "oztix", and
keep text, images, and edges out of it.

The minimums are the same with or without the tagline. Product interfaces can
set the primary logo at 20px tall; marketing and partner work keeps 24px.

| Logo      | Screen    | Print    |
| --------- | --------- | -------- |
| Primary   | 24px tall | 1cm tall |
| Secondary | 48px wide | 2cm wide |

## Special uses

A social profile uses the secondary logo in blue on a dark square, and a
favicon uses the logomark in white on blue.

![A social profile picture, the secondary logo in blue on a dark square](https://ticketsolutionsptyltd.github.io/roadie/brand/logo/social-profile.svg)

Social profile

![The favicon, the white logomark on a blue square](https://ticketsolutionsptyltd.github.io/roadie/brand/logo/favicon.svg)

Favicon

## Downloads

Both packs hold SVG files, which scale to any size, and EPS files of the
primary and secondary logos for print tools. The EPS files keep the screen
colours and are cropped to the artwork, so set print colours from
[Colour](https://ticketsolutionsptyltd.github.io/roadie/brand/colour.md) and leave the clear space yourself.

[Logo pack](https://ticketsolutionsptyltd.github.io/roadie/brand/logo/oztix-logo-pack.zip), SVG and EPS, 511 KB. Primary and secondary logos, each element, versions on light, dark, and brand backgrounds, and the social and favicon files.

[Partner logo pack](https://ticketsolutionsptyltd.github.io/roadie/brand/logo/oztix-partner-logo-pack.zip), SVG and EPS, 29 KB. Primary and secondary logos in brand, dark, and light, with clear space built into the SVG files. Send this one to partners.

Share the logo for co-branded promotion and to recognise a partnership. Always
send the partner logo pack, never a single file, an old version, or an edited
logo.

## Guidelines

Use the files as they are. Each pair shows the logo used well beside a common
mistake.

### Keep the brand colours

**Do**

Use the logo in Spotlight blue, or in dark or light where the background calls for it.

**Don’t**

Recolour the logo, even in another brand colour.

### Keep it flat

**Do**

Set the logo flat, with no effects.

**Don’t**

Add a shadow, glow, or any other effect.

### Give it a clear background

**Do**

Set the logo on a plain surface, or on the black strip that pairs with the pattern.

**Don’t**

Place the logo over the pattern or a busy photo, where it gets lost.

### Don't stretch it

**Do**

Scale the logo evenly, at its own proportions.

**Don’t**

Squash or stretch the logo in one direction.

### Keep it level

**Do**

Set the logo level with the layout.

**Don’t**

Tilt or rotate the logo.

### Keep the parts in order

**Do**

Set the logo, then the divider, then the tagline, as the files draw them.

**Don’t**

Move the tagline before the logo, or resize its parts.

### Keep the logomark

**Do**

Use the full logo, with the logomark.

**Don’t**

Use the wordmark on its own.

### Save the logomark for icons

**Do**

Use the logomark alone only as a favicon or app icon.

**Don’t**

Use the logomark alone as the logo in a layout.

## In code

The [Logo](https://ticketsolutionsptyltd.github.io/roadie/components/logo.md) component draws every lockup, so apps never need
the files. Its page has the full API.

```tsx
{/* Primary */}
<Logo />
{/* With the tagline */}
<Logo variant='tagline' size='sm' />
{/* Secondary, stacked */}
<Logo variant='tagline' direction='vertical' size='xl' />
```

`tone` picks the colour for the background: `brand`, `dark`, `light`, or
`neutral`, which follows the theme.

```tsx
{/* Brand */}
<Logo tone='brand' variant='tagline' size='sm' />
{/* Dark */}
<div className='rounded-lg bg-(--color-neutral-light-0) p-6'>
  <Logo tone='dark' variant='tagline' size='sm' />
</div>
{/* Light */}
<div className='rounded-lg bg-(--color-neutral-light-13) p-6'>
  <Logo tone='light' variant='tagline' size='sm' />
</div>
{/* Neutral */}
<Logo tone='neutral' variant='tagline' size='sm' />
```

Docs updated 15 Oct 2026.
