Case Study: Cookie Planning Studio
A Calculator for Cookie Artists
How I streamlined the cottage baking workflow into a web-based design tool, from visual design to actionable icing math using Figma Make and a design file.
The Problem
Three failure modes wreck home cookie decorating with such regularity that industry educators have built teaching businesses around workarounds. The tools bakers reach for today solve for one. Sometimes.
Failure 01
Thrown-away icing
A batch is dozens of small volume guesses, and the leftovers get tossed.
Failure 02
Wrong colors
Gel colors shift as they dry, and there is no way to predict the outcome at the shelf.
Failure 03
Decorated blind
Piping straight onto a cookie leaves the whole batch misaligned.
The Baker
Design decisions did not start with a mood board. They started with census data.
I don't just bake cookies. I design them.
Started decorating cookies for her kids' birthdays and never stopped. What began as a creative outlet quietly became a reputation, first with neighbors, then friends, then real orders. She's proud of what she's built, but her kitchen counter, and whatever happens to be on the shelf that week, is her biggest ceiling.
91.4%
Workforce Data
Cake decorators are mostly women, so the tone stayed neutral feminine.
Persona, voice, and stylization built for the real audience, not a neutral default.
38.3
Median Age
Vision changes hit at 40. Body copy is locked at 14px minimum.
Recipe card and spec sheet never sacrifice legibility for compact layout.
44px
Touch Target Floor
Carpal tunnel is common. Undo works at stroke level, not action.
Bakers arrive after hours of piping. Undo protects against tremor, not just intent.
The Build
The design file was not a mockup. It was a translation layer for the AI that would build the app.
Design Tokens
Variables named as CSS custom properties.
--color
--secondary
--surface
Every color, spacing, and radius named the way the app would consume it.
Components
Variants written as component props.
shape-swatch
Shape: Circle
State: Selected
What Figma called a variant property, React read straight through as a prop.
Layer Structure
Layer paths written as route paths.
screen/recipe-builder
recipe/builder/columns
recipe/builder/left
The layer tree read as the file tree. Make already knew where things belonged.
The Engine
Every gram in the spec sheet had to be calculated live, never hardcoded.
The Test Case
A fixed input the engine must solve on every build.
Round cookies
2 × 3"
Square cookies
2 × 2"
Coverage
Full flood
Buffers
15% · 10%
The Required Output
Anything else means a value got hardcoded.
Flood icing
70g
Outline icing
19g
Undecorated
0g
Formula source
Live math
The Formula
icingMath.ts
// Base rates from real recipe yield data
BASE_FLOOD_OZ_PER_SQIN = 0.088
BASE_OUTLINE_OZ_PER_LIN_IN = 0.015
// Buffers applied to every total
WASTAGE_MULTIPLIER = 1.15 // 15% waste
MISTAKE_BUFFER = 1.10 // 10% oops
// Per-cookie volume from what she drew
flood_oz = fill_area * BASE_FLOOD_OZ_PER_SQIN
outline_oz = line_length * BASE_OUTLINE_OZ_PER_LIN_IN
// Batch total, buffered, converted to grams
total_g = sum(flood_oz + outline_oz)
* WASTAGE_MULTIPLIER
* MISTAKE_BUFFER
* 28.35
Coverage based, not per cookie. Flood scales with filled area, outline scales with piped line length. Canvas pixels convert back to real inches through a per-cookie scale factor, so the number reflects what is drawn.
When Arihanna sees 70 grams, that number is directly tied to her design.
The Polish
Every keeper had a reason. So did every cut.
Rule Kept
Cap each brand's palette at 12 colors so the picker stays a clean 3×4 grid.
The limit forces contrast and stops choice paralysis. Twelve is the number that survives every screen size.
Rule Broken
White earns a 13th slot even though only one brand actually sells it.
A baker needs white for highlights, snow, teeth, eyes. The user's need beats the tidy grid.
The Cuts
Five features considered, five features cut.
-
Image upload
Would open a file handling and rendering problem inside Figma Make, cut for time and to preserve selected tooling.
-
Live color mixing UI
Adds reactive state complexity that destabilizes the hero interaction. The dye table already gives an actionable answer without it.
-
Buttercream piped flowers
A different medium, different physics, and a different user entirely. Belongs in a different tool.
-
Petal and specialty tips
Not used in royal icing work. Flood icing always uses a squeeze bottle with a round opening.
-
Multi-brand comparison view
Out of scope for a concept tool. Would need a real data layer and side-by-side product research to earn its place.
The build wasn't done when the list ran out. It was done when the list was ready, balanced and accessible.
The Credits
Designed, calculated, and spec'd for a home kitchen.
DesignedAIDirected and iterated by hand, generated between Figma Weave and Gemini with outputs fed back and forth until the mark held both the craft and the brand.
What's Next
What ships next is a feature list, not a rebuild.
Dye per color
Coverage already tracks each color's flood area, so the spec could show real dye per color, not just per 100 g.
Cloud design library
Her designs and random ideas, documented and never lost between sessions.
Mini and Gourmet sizes
An app layer addition now that size is data, not a redesign of the kit.
Custom shade ratios
So she can predict how a color shifts as it dries and hit the same result next time.
Embellishments
Sprinkles, sugar pearls, and royal icing charms with real scale ratios, once they feed the spec.
Storytelling tools
Narrative batches and dimensional Lambeth-style piping, matched to where the craft is heading.
Thank you for reading,baking is a passion of mine, a joy that helped get me where I am today. Without cottage baking I would have never started my own business or pushed myself through school. I loved every moment of creating this, and I have felt proud sharing it with my other cookie crazed creators.
DesignedEvery cookie made inside CookieDraft.