Pixney
← All work
Case study — Brand guideline platforms

Brand guidelines, as a product.

A new brand only works if everyone can find the rules. We built the online brand guidelines for four brands — Sweat, Shoplazza, TapTap and Prospa — three of them together with DesignStudio.

Brands
Sweat, Shoplazza, TapTap, Prospa
Our role
Development, hosting
Years
2020–2023
Stack
Statamic, Laravel, Tailwind
Access
Password-protected for brand teams
Shoplazza — the animated brand introduction that opens the guidelines

The idea

A PDF goes out of date the day it is sent. A site can be updated, searched and downloaded from — by everyone who touches the brand.

It began in October 2020, when DesignStudio asked us to build the Sweat platform after Universal Favourite recommended us. Sweat and DesignStudio were both happy, DesignStudio came back with Shoplazza, TapTap and Prospa, and later we built DesignStudio’s own website.

The four sites

01 · 2020–21

Sweat

The new Sweat brand online: strategy, a liquid visual language, motion and a resources library for the fitness app’s teams. Built for desktop first, with a notice on phones.

  • Strategy
  • Logo
  • Colour
  • Typography
  • Liquid language
  • Layout
  • Iconography
  • Art direction
  • Tone of voice
  • Downloads
Development, hosting, with DesignStudio
02 · 2022

Shoplazza

An e-commerce platform going global. The guidelines open with an animated introduction of the new mark, then twelve chapters with motion examples throughout.

  • Strategy
  • Logo
  • Colour
  • Typography
  • Illustration
  • Graphic assets
  • Layout
  • Motion
  • Art direction
  • Tone of voice
  • Applications
Development, hosting · with DesignStudio
03 · 2022–23

TapTap

A gaming platform with a cast of 3D characters. The site carries their motion, imagery and a colour section where every code copies with one click.

  • Strategy
  • Logo
  • Color
  • Typography
  • Character
  • Icons
  • Imagery
  • Layout
  • Motion
  • Tone of voice
  • In use
Development, hosting · with DesignStudio
04 · 2022–23

Prospa

A small-business lender with four brand principles — clean, optimistic, modern, simple. Thirteen chapters, down to micro illustrations and sound design.

  • Strategy
  • Logo
  • Colour
  • Typography
  • Iconography
  • Micro illustrations
  • Motion
  • Photography
  • Sound design
  • Tone of voice
  • System
  • In use
Development, hosting · with DesignStudio

What every site does

01

Chapters, not pages

Each part of the brand gets its own chapter with sub-sections and an always-visible index, so people jump straight to what they need.

02

Download where you read

Logos, fonts and asset packs sit next to the guidance for them — “Download logo”, “Download brand assets”.

03

Motion as video

Animation rules are shown as video, not described, so motion designers see exactly how the brand moves.

04

One-click colour codes

Colour values copy to the clipboard with a click. Small, but it is what people use most.

05

Edited by the brand team

Everything lives in Statamic. The brand team adds and changes content without us.

Sweat brand guide welcome section
Shoplazza chapter overview
TapTap characters
Prospa chapter cards for logo, colour and typography
4Brands
42Guideline pages
1Platform behind them

In their words

“Pixney have been a pleasure to work with from start to finish. They were so helpful in responding to client questions and requests throughout, and their regular communication with our team meant that the build process was much smoother than we’ve experienced working with other developers. They have great attention to detail and craft, so the final site looked brilliant and all stakeholders were really happy with it.”
Hatty Middleton, Senior Client Manager, DesignStudio Sydney — on the Sweat brand platform
Contact

Tell us what you’re building.

We reply within one working day.

Start a projecthello@pixney.com