Role
Concept and art direction
Company
Fussy
Timeline
October 2026
Platforms
Web, Social, Out of home
Tools
Blender, three.js

The brief

Fussy makes a refillable deodorant in eight great-looking case colours. But the colour is the only thing to go on. Nothing tells you who each one is for, so picking feels like a detail instead of a decision.

“Fussy” usually sounds like a complaint. But being fussy just means you care about the small things. That is worth being proud of.

The ideaTurn fussy into a point of pride.

Campaign line

be fussy.

Life’s better when you know what you like.

You’re allowed to care. About what touches your skin. About what you smell like. About what you throw away. About what colour you pick.

“Be fussy” is an attitude, not a product claim. The deodorant is the proof of it.

The workA product page that behaves like the product.

The live site

Built and working. The case is a Blender model, rendered live in the browser. Scroll and it lifts, comes apart, turns in space and closes again. Pick a colour and it opens on its new personality.

One full scroll, in Hot Pink
Stone Grey case closed on its surface
Stone Grey, closed
Orange case drifting apart with be fussy behind it
Orange, coming apart
Open the live site

Best on a laptop, in Chrome.

Under the hood

The same moment three ways. The code that turns scroll into the loop, the case taken apart in Blender, and what you see in the browser.

Code from the Fussy site: the eight chapters of the loop, the rule that the lid lands last, and the function that turns a scroll position into a pose.
The code. Scroll in, pose out.
The Fussy case in Blender, its parts pulled apart in a studio scene.
The model, in Blender.
The live site in Stone Grey: the case opened into its parts, with The Minimalist behind it.
The live result.

Every colour is a character

The colour is the most visible choice a customer makes. So each one gets a personality and a line. Four of the eight.

Orange case, opened, with The Instigator behind it
Orange · The Instigator. Not here to blend in.
Lilac case, opened, with The Dreamer behind it
Lilac · The Dreamer. Soft, but never boring.
Midnight case, opened, with The Night Owl behind it
Midnight · The Night Owl. Low-key. High standards.
Hot Pink case, opened, with The Main Character behind it
Hot Pink · The Main Character. Fresh, but make it iconic.

How it flexes

One line that works everywhere the brand shows up, set on the case colours. Campaign layouts and a motion post.

  • be fussy about ingredients.
  • be fussy about plastic.
  • be fussy about design.
  • be fussy about what touches your skin.
  • be fussy about what sits on your bathroom shelf.
  • be fussy about smelling really fucking good.

Where it goes next

Proposed extensions. Not built.

  • Proposed

    Product page

    The colour picker becomes a personality picker. Every swatch shows who it is before you buy.

  • Proposed

    Packaging

    Each case ships with a card for its persona. Something to keep, not throw away.

  • Proposed

    Social

    “Which Fussy are you?” A short quiz that ends on a colour and a case.

  • Proposed

    Out of home

    One line per poster. “Be fussy about plastic.” Next to a refill.

My partIdea to live site.

  • The campaign idea and the line, “Be fussy.”
  • Eight colour personalities, each with its own line
  • Art direction for the case renders and the campaign layouts
  • The 3D case, from a Blender model to a live three.js scene
  • The interactive product site and its scroll sequence
  • The motion post and stills

An unsolicited, independent concept by Joey Tadiar. Not commissioned or endorsed by Fussy. Product names and marks belong to their owners.

Design system · joeytadiar.com

Colour

Colour.

Palette balanced 60 · 20 · 15 · 5 · background, container, text, accent.

60%

Background

#F4F5F8

20%

Container

#FFFFFF

15%

Text

#182131

5%

Accent

#FF383A

Secondary #5B6472
Rule #DDE1E8
Dark #10161F

Typography.

Satoshi for display and body. JetBrains Mono for labels and metadata.

Display

Satoshi Medium · 500

clamp 48–96

The quick brown fox jumps over the lazy dog

Body

Satoshi Regular · 400

18px

The quick brown fox jumps over the lazy dog

0123456789

Labels

JetBrains Mono · 500

13px · 0.08em

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

Components.

Core UI patterns, tool pills, corner radii and the spacing scale.

Buttons & status

Get in touch See my work About me OPEN TO CREATIVE OPPORTUNITIES

Radius & spacing

16
24
pill
4
8
16
24
32
48

Pills · default

  • Claude
  • Figma
  • Premiere Pro
  • Cursor
  • ChatGPT

Pills · hover

  • Claude
  • Figma
  • Premiere Pro
  • Cursor
  • ChatGPT