RIVANT

Identity design · Web design · Social media design

Tuney

A mark, three builds and a website for a Discord music bot

  • Production
  • Staging
  • Dev

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. Its icon comes in three builds, production, staging and dev; we read the last two as its test builds.

We had drawn its icon, a coral record with a note on it, a colour for each build, and two pictures for a site: bass boost and the reaction controls. This time we finished the job: redrew the mark, made the builds a system, and designed the type, colour, icons, illustrations, applications and a six-page website around it.

Tuney’s first icons: a coral ring round a disc with a note, the same in orange for staging, and in yellow with code brackets for dev
Where it started: the icon for production, staging and dev as we first drew them.

The mark

The same record, redrawn on a grid

The idea stayed: a ring of sound round a disc, a note playing on it, and two grooves that make it spin. What changed is the drawing.

The mark on its 256 grid: ring 24, gap 24, disc 80, grooves 6 wide on a 62 radius, the note's head circle and the diagonal it sits on, with the old and new marks side by side
  1. 01

    An even border

    The ring and the gap are both 24 on a 256 grid, so the disc sits in a border of equal steps.

  2. 02

    Grooves that survive

    They were 2.6 wide and vanished below 64 px. Now they are 6 wide with round ends, and below 24 px the small mark drops them.

  3. 03

    A note that balances

    Head and stem meet at a true tangent; the flag is squared off like the ring, and the note’s weight, not its box, sits on the centre.

Three builds

Told apart by colour, then by shape

The first staging icon differed from production only in colour; dev already swapped the note for code brackets. Now staging’s ring breaks into eight as well, so all three stay apart in grey, at avatar size and for anyone who can’t tell coral from tangerine.

  • production · Coral #FF444F

    Tuney

    The one servers add. Solid ring, the note.

  • staging · Tangerine #FF7A2E

    Tuney Staging

    For testing the next release. The ring breaks into eight, like a loading spinner.

  • dev · Yellow #FFC53D

    Tuney Dev

    For work in progress. Code brackets in place of the note, as in the first icon.

Profile cards for Tuney, Tuney Staging and Tuney Dev with their presence lines, and the production avatar at 200, 96 and 40 px, round and square
Avatars and presence lines for each build, and the production 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. Below that, the small mark drops the grooves and holds down to 16 px.
The lockup in colour on night and on paper, in one colour on paper, and in night on coral; below, four misuses: stretched wide, outlined, split into two colours and with the note turned
Colour on night is the default. On paper the name turns night; on coral the whole lockup is night. White, in one colour, is kept for photographs and print on dark. Never stretched, outlined, split into two colours or turned.

Colour

Night, and one light per build

Coral is the record playing. Tangerine and yellow only ever appear with their own builds. Coral buttons take night type: white on coral is 3.4:1, night is 5.6:1.

  • Coral#FF444FProduction, the mark, primary buttons
  • Tangerine#FF7A2EStaging
  • Yellow#FFC53DDev

  • 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 Staging and Tuney Dev, each with its own mark and colour

In use

From the app icon to a twelve-inch slipmat

The app icon and each build’s profile banner, post templates for new commands and tips, a story, and two things for the people who use it.

Tuney’s app icon: the coral mark on a night-coloured rounded square
The app icon
Three profile banners, each showing a cropped quarter of its build’s mark over faint rings: coral, tangerine 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 with a coral ring at the edge, two coral grooves and a coral label with the note round the spindle hole
The slipmat: the mark taken apart at record size, so the spindle comes through the label, not the note
A sticker sheet: round stickers of the production, staging and dev marks and the mark in night on coral, and the horizontal lockup
The sticker sheet: a sticker for each build

The website

Six pages that show the bot working

Home, Commands, Getting started, Builds, 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 builds, 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 builds 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 builds page: dev to staging to production, a card for each build, and a table of how to tell them apart

    Builds: what production, staging and dev are, 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
  • The mark redrawn on a grid, with a small version for 24 px and under
  • A mark for each build: production, staging and dev
  • Wordmark, horizontal and stacked lockups, one-colour and reversed versions
  • Colour, type and sixteen command icons
  • Six illustrations carrying on the original two
  • App icon, avatars and a profile banner for each build
  • Two post templates and a story
  • A slipmat and a sticker sheet
  • A six-page website at 1440 and 390
Notes
The icon, its build colours and the Bass boost and Reaction controls pictures were our earlier work for Tuney; 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 staging and dev builds run, are to be checked against the bot before anything ships.