RIVANT

Identity design · Web design · Social media design

Tuney

A brand system and a website around a Discord music bot’s five icons

  • Tuney
  • Tuney 2
  • Tuney 3
  • Staging
  • Development

The product

A music bot that joins your Discord voice channel and plays what the server asks for.

You type t!play and a song. Tuney joins, plays it and posts a player message with eight reactions under it: like, shuffle, previous, pause, skip, loop, stop and leave. It runs as five bots: Tuney itself, Tuney 2 and Tuney 3 for servers with a large number of members, and Staging and Development, which are internal.

We had already drawn its icon, a coral record with a note on it, in a version for each bot, and two pictures for a site: bass boost and the reaction controls. The icons stay exactly as we drew them. This time we built what goes around them: lockups, colour, type, icons, illustrations, applications and a six-page website.

The mark

Our first drawing, kept as it is

We drew Tuney’s icon before this project: a ring of sound round a record, a note playing on it and two grooves that make it spin. It stays exactly as drawn; what’s new is everything around it.

Tuney’s original mark measured on its 1000 artboard: the ring 80 wide, the gap 92.5, the disc r 265, two quarter-arc grooves 9 wide on r 203 to 212 and the note’s head circle, with the mark at 170, 64, 40 and 24 px
  1. 01

    A ring of sound

    The ring is 80 wide and the gap inside it a little wider, 92.5, so the record floats in the ring.

  2. 02

    The record

    A disc 530 across, with two grooves cut into it: quarter arcs 9 wide, facing each other across the centre. On this page they turn as you scroll; nothing else moves.

  3. 03

    The note

    Cut out of the disc, its head below and left of the centre and its stem running up through the centre to a squared flag. Development has code brackets in its place.

Five versions

One icon, five bots

Tuney runs as five bots, and each has its own version of the icon: the same record and note in its own colour, with code brackets for Development. They are our earlier work, kept exactly as drawn.

  • Main · Coral #FF444F

    Tuney

    The main bot, the one servers add. Its coral is the brand colour and the mark on everything else here.

  • Premium · Blue #3585FF

    Tuney 2

    A premium bot: an extra Tuney for servers with a large number of members that need more than one.

  • Premium · Green #45CB85

    Tuney 3

    The other premium bot: a third Tuney for servers with a large number of members that need more than two.

  • Internal · Orange #F15A24

    Tuney Staging

    For internal staging, before a release reaches the others.

  • Internal · Yellow #FFBB25

    Tuney Development

    For internal development. Code brackets take the note’s place.

Profile cards for Tuney, Tuney 2, Tuney 3, Tuney Staging and Tuney Development with their presence lines, and Tuney’s avatar at 200, 96, 40 and 32 px, round and square
Profile cards for the five bots, and Tuney’s avatar from 200 px down to 32.

Lockups

A wordmark cut from Outfit Bold

Set in lowercase, kerned by hand, tracked in 3% and drawn as outlines. Horizontal, stacked and the mark alone, with clear space of one ring and gap on every side.

The horizontal lockup inside its clear space, the stacked lockup and the mark alone, and each at its minimum size
Minimum sizes: the horizontal lockup 96 px wide, the stacked lockup 40 px wide and the mark 24 px. The grooves are fine lines, so at the smallest sizes the ring, the disc and the note carry the mark.
The five versions, each with its role and colour: Tuney in coral, Tuney 2 in blue, Tuney 3 in green, Tuney Staging in orange and Tuney Development in yellow with code brackets; below, the lockup on night, on paper, in one colour and on coral
The five versions, each in its own colour. The lockup is Tuney’s: colour on night by default; on paper the name turns night; on coral the whole lockup is night. Never stretched, outlined, split into two colours or turned.

Colour

Night, and one colour per bot

Coral is Tuney’s and the brand’s: the record playing. Blue, green, orange and yellow belong to the other four versions and only appear with them. Coral buttons take night type: white on coral is 3.4:1, night is 5.6:1.

  • Coral#FF444FTuney, the mark, primary buttons
  • Blue#3585FFTuney 2, premium
  • Green#45CB85Tuney 3, premium
  • Orange#F15A24Tuney Staging, internal
  • Yellow#FFBB25Tuney Development, internal

  • Night

    #0E0F13

    The ground

  • Graphite

    #16171D

    Cards, panels

  • Slate

    #20222A

    Chat, inputs, code

  • Line

    #2C2E37

    Hairlines

  • Mist

    #A2A5B1

    Secondary text

  • Paper

    #F6F3EE

    Text on night

Type

Outfit to read, JetBrains Mono to type

Outfit’s round o and u are drawn from circles, like the mark. Tuney is used by typing, so commands are set in the mono you type them in, with the prefix in coral.

Outfit · 400 600 700

Aa

JetBrains Mono · 400 500

t!bb 20%

  • 72 · HeadlineMusic in your voice channel
  • 40 · SectionControls under every song
  • 22 · LeadTuney joins your voice channel and plays what you ask for.
  • 17 · BodyInvite it once. After that, anyone in the server can queue a song.
  • 15 · Commandt!play harbour lights

Icons and illustration

Drawn from the mark’s parts

Sixteen icons for the commands on a 24 px grid, with 2 px strokes and quarter arcs like the grooves. The original Bass boost and Reaction controls pictures became a set of six: one moment in a chat each, flat, with coral for whatever is playing.

  • play
  • pause
  • skip
  • previous
  • shuffle
  • loop
  • like
  • stop
  • leave
  • queue
  • bassboost
  • volume
  • nowplaying
  • search
  • voice
  • code
  • styxo types t!play harbour lights and Tuney answers with the player: Now playing, Harbour Lights by Maya Rune, a record, the progress bar
  • The player with its eight reactions underneath; the pointer is on Skip and a Skip tooltip shows
  • styxo types t!bb 20% and Tuney answers: bass boost set to 20%, with the low bands lifted in coral
  • mira types t!queue and Tuney lists five songs, the first one playing
  • styxo types t!loop queue and Tuney answers: looping the queue, with Off, Track and Queue and Queue selected
  • A member list with Tuney, Tuney 2, Tuney 3, Tuney Staging and Tuney Development, each with its own icon, marked main, premium or internal

In use

From the app icon to a twelve-inch slipmat

The app icon and each version’s profile banner, post templates for new commands and tips, a story, the listing a server adds the bot from, and a slipmat.

Tuney’s app icon: the coral mark on a night-coloured rounded square
The app icon
Five profile banners, each cropping its version’s icon at record size over faint rings: coral Tuney large, then blue, green, orange and yellow
  • A post template for a new command: Bass boost, t!bb 20%, and coral bars lifting the low end
  • A tip post on coral: t!loop queue, Play the whole queue, then start it again
  • A story: the mark on rings, Music in your voice channel, t!play a song, and Add Tuney to your server
The slipmat artwork: black felt printed with the coral mark at record size, the ring near the edge and the disc with the note and two grooves cut out
The slipmat: the whole mark at record size; the note’s stem crosses the centre, so the spindle comes up through it
Tuney’s App Directory listing: the banner cropping the mark, the app icon, the name with its APP tag, Music in your voice channel, the Music, Utility and Free categories, a coral Add to Server button, what the bot does, and six commands with their icons
The App Directory listing: the banner, the icon, what the bot does and the first six commands, over Add to Server

The website

Six pages that show the bot working

Home, Commands, Getting started, Versions, Support and a 404, designed at 1440 and 390. The product is drawn in the page as a real chat, player and reactions included, not as a screenshot.

Our design; the site isn’t live. The songs, people and servers in it are placeholders.

Tuney’s home page as designed: Music in your voice channel beside a chat where Tuney plays a song, then three steps, the reaction controls, bass boost, queue and loop, the commands, the five versions, questions and a coral closing band
The home page, top to bottom: the chat with the player, three steps, the controls, bass boost, queue and loop, the commands, the five versions and questions.
  • The home page on a phone: the headline, both buttons, the chat with the player, the three steps and the controls

    Home at 390

  • The commands page on a phone, the groups stacked, each command with its example and short form

    Commands at 390

  • The getting started page on a phone: the steps one under another, the invite screen and the player

    Getting started at 390

  • The commands page: a search box, a table of contents, and every command grouped under Playback, Queue, Sound and Help

    Commands: every one, grouped, with what it takes and a short form

  • The getting started page: five steps, with the invite screen, a voice channel, the first song and the controls

    Getting started: from the invite to the first song, in five steps

  • The versions page: a card for each of the five Tuneys, the three for your server and the two internal ones, and a table of how to tell them apart

    Versions: the five Tuneys, who each one is for, and how to tell them apart

  • The support page: four problems with their fixes, questions, and a card pointing to the support server

    Support: fixes for the usual problems, then questions

The 404 page: the mark in grey on rings, Nothing is playing here, and two buttons
The 404 page on a phone

The 404: nothing is playing here, with the mark in grey.

Credits

Client
Tuney
Services
Identity design, Web design, Social media design
What we made
  • Wordmark, horizontal and stacked lockups round the original icon, one-colour and reversed
  • Colour: night and the neutrals, with the five versions’ colours set in the system
  • Type and sixteen command icons
  • Six illustrations carrying on the original two
  • App icon, and an avatar and a profile banner for each of the five versions
  • Two post templates and a story
  • The App Directory listing, and a slipmat
  • A six-page website at 1440 and 390
Notes
Tuney’s icon and its five versions (Tuney, Tuney 2, Tuney 3, Staging and Development) with their colours, and the Bass boost and Reaction controls pictures, were our earlier work for Tuney; the icons are shown exactly as drawn. Everything else here is new design and not live. The commands on the site follow the bot as those pictures show it (the t! prefix, bass boost, the reactions under the player); they, and how the premium and internal versions run, are to be checked against the bot before anything ships.