A geometric leaf as the starting point of the system.
← Back to projects01 / ContextGenerative design
A flexible identity for a brand that did not need to repeat the same composition every time.
Soap Lavender Up starts from a line of handmade soaps and proposes an adaptable visual language: recognisable as a whole, variable in every medium.
- My role
- Coded the generative pattern in p5.js
- Defined the system's rules: unit, grid and palette
- Applied the pattern to the packaging, tote bag and pouch
- Built an animated web cover with mouse and keyboard interaction
- Context
- Academic project · Programming for the Arts and Design
- Tools
- p5.js, Illustrator, Photoshop
- Result
- Generative identity applied to packaging
Coherence
without repetition.
This was the final challenge of my Programming for the Arts and Design course: build, with nested loops and randomness in p5.js, a generative pattern applied to the packaging of a product of my own choosing. I picked a handmade soap as a real-world application.
I decided not to design a single fixed graphic, but a system: I wanted to test how the same visual logic could produce different compositions without losing a recognisable direction.
I built that logic on three decisions of my own: a base unit (a plant-like leaf), a fixed grid to order the composition, and a limited palette to keep variations coherent.
A fixed grid that organises the compositions.
Colour, opacity and orientation within the same visual logic.
03 / Visual system
One rule.
One rule.
A variable system.
The base module is combined within a fixed grid. The code changes orientation, colour and opacity to generate new compositions without losing structure.
04 / Controlled variables
Lavender
Lavender
sage
cream
The palette keeps variation within a soft, natural and recognisable visual territory.
LavenderCalm#B6A0DC
Sage greenNaturalness#A0AFA0
Earth creamSoftness#FFDFD3
The system
sets the rhythm.
I used the grid to bring order, the leaf to introduce an organic gesture, and limited the palette to reduce visual noise.
I designed variation as part of the system, not as an extra: each application changes, but still responds to the same code logic.
Code as a design tool.
This animated cover was the course's second assignment: I reused the same visual system to build a web interaction with animation, mouse and keyboard, instead of starting from scratch.
square()Builds the leaf from a simple geometric shape.
random()Introduces variation in colour, opacity and orientation.
rotate()Allows the module to change without losing its structure.
Soap
Lavender
Up
Lavender
Up
Natural care inspired by geometry, calmness and handcrafted design.
Click to change the format
A pattern
that changes
with each format.
The brief asked for the pattern to be applied to the soap packaging. I went further and extended it to the tote bag and the pouch, to test the system across more formats.
08 / Looking back
“Design the rule, not only the result.”
This project helped me understand visual identity as a system: a clear structure that can adapt without losing intention.
Back to projects ↗