Back to the fryer
BrainFry Studio Brand guidelines v1.0 — Oct 2026

BrainFry Studio brand guidelines

A brain. A basket. Hot oil. That's the whole idea.

  • Hover to dunk
  • Click to melt
01 / Mark

Brain, basket, hot oil.

Two lumpy hemispheres, one wiggly fissure, five folds, one stroke weight. Drawn on a 120 grid so it holds from a 16 px browser tab to a billboard. Under the oil line everything turns gold. That's the joke, and the system.

Grid
120 × 120
Stroke
5u round caps, round joins
Brain
57 × 52 axis x52
Rim
y46
Oil line
y74 wordmark baseline
Floor
y105 "Studio" baseline
Knock-outs
Transparent works on photos too
A

Brain

Raw-brain pink. Folds are cut out, never drawn on. Staggered left to right so it reads as a brain, not a face.

B

Basket

Tapered wire basket, rim at y46. The long handle is what makes it a fryer and not a cupcake.

C

Oil line

One gentle wave, wider than the basket so you know it's a vat. It wobbles forever, slowly.

D

Bubbles

Three at rest. In motion they rise, pop and leave a ring. The "i" in the wordmark is one of them.

02 / Motion

It's never off. It simmers.

Six states, one API. Idle is pure CSS and cheap enough to live in the nav forever. The rest is GSAP, timed like a cartoon: anticipation, overshoot, follow-through.

02.1 Idlestate: 'idle'

Always on. Nav, footer, lobby. Bubbles pop on staggered loops, the oil wobbles, the brain gets nervous now and then.

02.2 SizzlesetState('sizzle')

Hype moments and hovers. Twice the bubbles, oil spatter, steam, and a brain that can't sit still.

02.3 LoadersetHeat(0..1)
20°C
02.4 Dunkdunk()

One-shot for hovers and clicks. Lift, plunge, splash, spring back.

02.5 Meltmelt()

Easter eggs only. Brain turns to acid slime, drips through the basket, pulls itself together.

02.6 Staticstate: 'static'

Print, PDFs and prefers-reduced-motion. Three bubbles, mid-rise, forever.

03 / Colour

Three colours do the cooking.

Raw-brain pink, hot-oil gold, batter cream, on fryer black. The studio frame stays dark so the games glow. Heat colours are seasoning, not the meal.

On fryer inkdefault
On battertone: 'light'
On hot oiltone: 'oil'
On raw braintone: 'brain'

Monochrome

One ink, any colour. Every fold, gap and bubble is cut out, so a single colour still reads. tone: 'mono' draws in currentColor.

Palette

  • Raw brainThe mark
  • Hot oilHeat, bubbles, the "i"
  • BatterType, basket
  • Fryer inkEvery background
  • Soot
  • Smoke
  • Ash
  • Crisp
  • Scorch
  • Brain deep
  • Acid slime
  • Ultra
  • Cyan
04 / Lockups

Give it one hemisphere.

BRAINFRY is a custom wordmark. The fryer's oil line runs on through the letters, and everything under it turns gold. The I keeps its bubble, which rises and pops. Keep clear space of one hemisphere on every side.

Horizontal · variant: 'lockup'
Stacked · layout: 'stacked'
One colour · tone: 'mono'

Clear space

One hemisphere (28u) on every side. Nothing goes in there, not even steam.

64
40
24 min
Favicon at 32 pixels32 fav
Favicon at 16 pixels16 fav

Minimum size

Mark 24 px, lockup 96 px wide. Below that the favicon cut takes over: fewer folds, chunkier strokes, its own ink tile.

05 / Type

Loud, legible, labelled.

Four faces, each with one job. Display shouts, body explains, mono labels things, and Bangers only shows up when something goes POP.

Bricolage Grotesque

Display · 800 · wdth 75–100

We fry brains for a living.

Geist

Body · 400 / 600

Original slot games that are too loud, too weird and way too polished. Inked by hand, animated to the frame, served piping hot.

Geist Mono

Labels · 500 · tracked 0.14em

Preheating oil… 180°C · Greasing the reels · Hot.

Bangers

Accent · stickers and sound effects only

Sizzle! Pop! Splosh!
06 / Rules

Please don't.

It took a lot of oil to get this right. Six rules keep it crispy.

07 / Files

To go.

Vector, transparent, no fonts required. The animated file runs on CSS alone, no JavaScript.