All work
Soulet

Product design + prototype

One meal, hundreds of portions, one time to serve it.

I interviewed the staff, defined the product, designed the interface, and built the prototype.

Role

Product designer + builder
Research, UX/UI, system, implementation

Team

Research: executive chef + two line cooks

A friend had started at a school cafeteria and found the planning disorganized. I designed for that kitchen’s repeating schedule.

The kitchen cadence

Planning backward from lunch.

I read the menus, recipes, inventory sheets, and purchasing documents they already used.

“We plan backward from service. We need to plan multiple meals at once, at scale.”
From a cafeteria chef interview
Monthly
Menus arrive and meals are planned.
Weekly
Inventory is counted and purchasing adjusts.
Twice weekly
Orders are divided around delivery cycles.
Daily
Teams prepare toward one fixed service time.

From menu to order

Menu to a purchasing plan

The problem was turning a monthly menu into a purchasing plan. A manager can upload a menu, paste it, or enter meals before anything downstream changes.

  1. 01 / Input

    Upload, paste, or enter the monthly menu.

  2. 02 / Review

    Confirm imported meals and serving counts.

  3. 03 / Match

    Connect each meal to its recipes and ingredients.

  4. 04 / Order

    Subtract inventory and prepare the purchasing draft.

Menu to order
Recipe scaling, ingredient requirements, and purchasing in Soulet
Scaling and shortages
Soulet weekly inventory count interface
A weekly count, not live inventory

Product system

Shared rules

Planning, recipes, inventory, ordering, staffing, calendars, and budgets share one visual language. Shells, rows, tables, and control states live in the build, so a new page starts there.

Foundations

Color is semantic, never decorative

  • Sage 3
    Primary

  • Sage 2
    Support

  • Sage 1
    Positive

  • Slate 4
    Dark

  • Slate 1
    Canvas

  • Terra 1
    Attention

  • Flax 2
    Progress

Type roles
Type roles separate task, context, and supporting detail.
Spacing
A 4px spacing scale keeps screens consistent.
Icon grammar
Icons share an 18–20px optical box, 1.75px stroke, and rounded joins. Filled geometry is reserved for active or semantic states.
Geometry
Control heights follow 36, 42, 44, and 48px steps. Radii are limited to 9, 12, 15, or a full pill.

Components

Component levels, building blocks, and rules
LevelBuilding blocksRules
01 / AtomsTokens, type, icons, controls44px targets, visible focus, semantic labels, and four defined press states.
02 / MoleculesRows, cards, fields, statusRepeated rows keep fixed lanes for icon, content, quantity, status, and action.
03 / OrganismsShells, tables, workflowsPages share navigation, context, one primary action, one dominant state, and a flexible working surface.
Composition rule
No more than one dark anchor and one attention surface appear above the fold. Hierarchy comes from state and structure, not added decoration.

Outcome

A working prototype

Soulet runs in TypeScript and CSS, with data in Supabase and hosting on Vercel. It is not in a cafeteria yet.