Angrious was designed like a song. The colours come from a guitar scale, the animations follow a tempo of 120 beats per minute, the grid is counted in bars and even the spacing between elements is measured in notes. This applies to everything the brand touches: the site, the posts, the videos and the photos. B-Sides is the space for behind the scenes, and I am starting with the brand's own.
The idea
It all began with one question: if the rules that make a song work also applied to colours, shapes and motion, would the result be as coherent? The bet is that it would: a brand built this way is more fun to make and easier to recognise.
The first model was the instrument itself. Angrious has six channels (Music, Shows, Games, Tech, B-Sides and About), and they are laid out like the six strings of a guitar seen from the front.
The key: blues-rock in E
For the colours, the idea was to read the colour wheel as the circle of fifths, the wheel musicians use to see which notes and chords go together. The scale chosen was the E minor pentatonic, the most played in rock. But on the circle of fifths each note takes up 30 degrees, and the five notes of the pentatonic sit next to one another: the colours would come out too similar. The solution was to spread them over a pentagon, 72 degrees apart, with the E on the logo's red.
Each note is a scale degree, and each degree is a channel, in string order. The low E, degree I, is Music. The A, degree IV, is Shows. The D, degree ♭VII, is Games. The G, degree ♭III, is Tech. The B, degree V, is B-Sides. And the high E is the logo's own red, which goes to About. That is why the palette has no names like "red" or "blue": each colour is called by its degree.
The harmony underneath is E Mixolydian, the mode of rock, where degrees I, IV and ♭VII come from. The ♭III sits outside that key on purpose: it is the blue note, the note that gives the blues its flavour, and it is the colour of Tech.
Then comes the timbre. Each colour is pulled 18% towards the logo's red and gains 30% saturation. Finally, all of them receive a red light, like a stage lit through a gel, which adds another 12% of red to each. That is what makes five very different colours look like the same family. Some also got hand adjustments to sit closer to the spirit of the brand, but the main idea comes from here.
The rhythm: 120 BPM
The brand's tempo is 120 beats per minute. Each animation lasts one musical note value, and the motion curves are named after sound envelopes, such as attack, sustain and release.
Because everything derives from the tempo, changing the BPM rescales the whole brand. That is how a sub-brand, such as Noel O' Rand or Impermanentes, can have its own rhythm without leaving the family.
The time signature: grid and spacing
The grid follows the metre too. On phones, four columns, a 4/4. On tablets, eight, the quavers. On desktop, twelve, a 12/8, the time signature of the shuffle. And the spacing scale turned out to match exactly the straight and dotted durations of a 4-pixel unit: 4, 8, 16, 32 and 64 on one side; 12, 24, 48 and 96 on the other.
Live, not studio
The brand's texture comes from printed rock: cards with paper and torn edges, photos with halftone, duotone and a photocopied look. Not everything passed the test: the tear was applied to the buttons at one point, but it was dropped, because there it looked like a defect.
On social media, the rule is that of a live recording, not a studio one. The content leads and the design follows, with a single rough gesture per piece. The animated logo opening, of course, also runs at 120 BPM.
The music is not only in what Angrious publishes, it is in the way the brand was made. To follow the behind the scenes and the news, follow Angrious on Instagram, @angrio.us.