04 Design Principles

Design Principles

These six principles define how Mealchemy should feel and behave across every screen.

Every screen feels authored by the same hand. Design tokens and reusable components prevent one-off colour, spacing, and interaction decisions.

The user sees only what they need for the current task. The interface reduces decision fatigue instead of presenting every option at once.

Every interaction communicates a result. Loading, pressed, saved, and error states are visible so the app never feels silent.

Text is readable from a countertop distance, touch targets support imprecise taps, and colour is never the only indicator of state.

Warm surfaces, refined spacing, serif headings, rich food photography, and gold accents create a modern, luxurious kitchen experience.

Match percentages, pantry indicators, and suggestion cards explain why the system recommends something.

Voice & Tone

UI copy rules

Mealchemy should feel helpful, calm, and direct. It should guide the user through cooking and planning without sounding technical or vague.

Voice Warm and useful

Use friendly language that helps the user take the next step.

Clarity Plain action words

Prefer short labels like Save recipe, Add item, Update pantry, and View recipes.

Errors Specific recovery

Explain what happened and how to fix it. Avoid blame or vague alerts.

Empty states Reassuring next step

Say what is missing, then offer the clearest action to continue.

Use

Avoid

Buttons should describe the result of the action.

UseServingsAdd the number of servings before saving.

AvoidServingsError occurred.

Error copy should be specific and fixable.

Use

No recipes saved yet.

Add one to start your vault.

Avoid

No data.

Empty states should explain the state and the next action.

UseIngredientsChoose ingredients you already have.

AvoidIngredientsInput valid values.

Helper text should make forms easier before an error happens.