MiseLegacy format
Mise is a design system for recipe apps, cooking platforms, and food storytelling. The aesthetic borrows from contemporary cookbook publishing: cream paper surfaces, paprika and olive accents, large photography, and an ingredient-list typography rhythm that mimics a well-set kitchen mise en place. The system serves two reading modes equally — leisurely browsing of a recipe magazine on a tablet, and hands-on cooking on a phone propped against a backsplash where step-by-step instructions need to read large and timers must hold attention. Mise leans editorial in browse contexts (serif headlines, generous gutters, big food photography) and shifts to functional in cook mode (single-step focus, large numerals, hold-screen-awake). Designed for cooks who follow recipes, not just admire them.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxMise is a design system for recipe apps, cooking platforms, and food storytelling. The aesthetic borrows from contemporary cookbook publishing: cream paper surfaces, paprika and olive accents, large photography, and an ingredient-list typography rhythm that mimics a well-set kitchen mise en place. The system serves two reading modes equally — leisurely browsing of a recipe magazine on a tablet, and hands-on cooking on a phone propped against a backsplash where step-by-step instructions need to read large and timers must hold attention. Mise leans editorial in browse contexts (serif headlines, generous gutters, big food photography) and shifts to functional in cook mode (single-step focus, large numerals, hold-screen-awake). Designed for cooks who follow recipes, not just admire them.
Components
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Ingredient List
default
selected
default
Buttons
Chips
Elevation & Depth
Do's & Don'ts
Do
Don't
Icons
Font AwesomeLibrary: Font Awesome · Style: outline · Size: 20px
Motion
Motion in Mise is warm and unhurried. Standard duration is 240ms with cubic-bezier(0.4, 0, 0.2, 1) easing. Cards lift on hover over 240ms. The timer ring sweeps continuously at the rate of remaining seconds — never lurching. Ingredient checkboxes fill with olive over 200ms with a soft scale (0.95 → 1.0) bounce. Adding to the shopping list triggers a 280ms olive flash on the button before reverting. Step transitions in cook mode use a horizontal slide of 280ms. No motion during the cook process aside from active timers — visual stillness reduces distraction.
Photography Guidance
Photography is the dominant visual element in browse contexts. Hero shots use overhead or 3/4 angles at golden-hour-equivalent warm light. Cookbook-style props (linen napkins, ceramic plates, raw ingredients in frame) are encouraged. Crops: 16:9 hero, 3:2 card thumbnail, 1:1 step photography in cook mode (optional). Never use stock food photography with flash, garnish-heavy plating, or restaurant-pass aesthetics. Mise photography reads as a home kitchen, not a studio.
Voice and Tone
• Personal and specific. Headnotes read like a friend explaining why this recipe is worth your time.
• Use cookbook idiom: "Heat the oil until it shimmers," "Salt to taste," "Let it rest, uncovered, for ten minutes."
• Avoid generic food-blog filler ("This recipe is sure to be a hit!" — no).
• Cook-mode instructions are imperative and short. "Add the garlic. Stir for thirty seconds."
• Substitutions are encouraged: "No buttermilk? Use whole milk with a teaspoon of lemon juice."
• Empty states use kitchen idiom: "Your shopping list is empty," "Nothing on the stove right now."
Use with MCP
Don't have the MCP? Install it here