06 Layout & Spacing

Layout and Spacing

The layout system uses compact spacing, rounded surfaces, and flexible sections that stack cleanly from desktop-width previews down to mobile screens.

4px

xs

8px

sm

16px

md

24px

lg

32px

xl

The screens uses 4, 8, 16, 24, and 32px. Component-specific values add 6, 10, 14, and 20px where tighter controls need them.

Responsive Layout

How screens adapt

Mealchemy is mobile-first. Larger screens add columns and wider content areas, while mobile screens stack sections into one readable column.

DesktopTwo-column content

Wide screens can show main content, supporting panels, and card rows side by side.

TabletReduced columns

Medium screens keep two-card groupings but reduce extra side content.

MobileSingle column

Small screens stack all cards, keep 20px page gutters, and keep navigation fixed at the bottom.

Desktop24 to 32px section spacing

More breathing room around grouped content.

Tablet16 to 24px gaps

Sections stay grouped while preserving scanability.

Mobile12 to 20px gutters

Content stacks vertically with full-width controls.

Design Tokens

Spacing tokens

These values describe the spacing, radius, shadow, motion, and layout rules used across the interface.

Token type	Values	Usage
Spacing scale	4, 8, 16, 24, 32px	Base page, section gaps, and grouped content spacing.
Component spacing	6, 10, 14, 20px	Compact gaps inside chips, buttons, fields, rows, and cards.
Button height	36px small, 48px medium, 56px large	Action hierarchy and touch targets.
Button padding	20px horizontal, 8px vertical small, 14px vertical medium/large	Consistent action sizing.
Text field padding	16px horizontal, 14px vertical	Readable form fields with clear focus states.
Chip padding	14px left/right, 10px top/bottom, 8px icon gap	Filter chips and removable tags.
Card padding	16px default	Recipe cards, panels, and grouped content.
Navbar padding	10px horizontal, 8px vertical, 6px item vertical	Bottom navigation spacing.
Motion	180ms transition	Selected navigation and small interactive changes.
Shadow	Primary at 6% opacity, 12px blur, 4px y-offset	Light and accent card elevation.
Responsive behaviour	Flexible rows, columns, scroll areas, and stacked content	Layouts adapt without fixed desktop-only breakpoints.

Radius Scale

Radius values are deliberately small and repeatable. Buttons and inputs use 12px, cards use 16px, chips use 8px, selected nav pills use 14px, and fully rounded buttons use 100px.

chip 8px

button/input 12px

nav pill 14px

card 16px

+ Save recipe

⌕ Search recipes

Input / Button · 12px

Used for form fields and standard action buttons.

92% MatchRoasted tomato pasta35 min · pantry friendly

Card · 16px

Used for recipe cards, panels, and grouped content.

DinnerQuickHigh protein

Chip · 8px

Used for selectable and removable filter chips.

✓ Rounded primary

Rounded Action · 100px

Used when a button is intentionally pill-shaped.