Skip to main content

Design Review Checklist — Ghasi Melmastoon

Status: draft (P0)

Owner: Design Guild

Applies to: every design (Figma frame, prototype, video) before it leaves design review and moves to engineering refinement; and every PR adding or significantly modifying a UI surface.

Two passes:

  1. Designer self-review before requesting sign-off.
  2. Reviewer pass by another designer (and an FE engineer if visual is novel).

A. Brand and tokens​

  • All colours come from semantic tokens (no raw hex).
  • All spacing uses the spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 40 / 48).
  • All radii / shadows / borders come from the design system tokens.
  • All typography uses defined type-scale steps and weights.
  • Iconography uses @ghasi/icons set; any custom icon is added to the set, not the design.
  • Imagery follows the photography style guide (composition, contrast, faces-toward-content rule).

B. Layout and grid​

  • Layout adheres to the platform grid (12-col web, 4-col mobile portrait, 8-col tablet portrait).
  • Density mode is correct for the surface (cozy for guest, comfortable for operator default, compact for power users).
  • Safe areas honoured (mobile notch / home indicator; tablet keyboard).
  • Responsive behaviour designed for: mobile portrait, mobile landscape, tablet portrait, tablet landscape, desktop.
  • Long-content cases sketched (long property names, long localisations, large numbers).

C. Internationalisation​

  • RTL frame designed for at least one Pashto locale screen per major flow.
  • Mixed-direction strings shown correctly (Latin numerals embedded in Pashto sentences).
  • Number formatting shown for at least one currency in Intl.NumberFormat style.
  • Calendar variants considered (Hijri / Solar Hijri shown in mocks for tenants who request them).
  • Microcopy in en + at least one regional locale for the new flow.

D. Accessibility​

  • Contrast meets WCAG 2.2 AA on every surface (text 4.5:1, large text 3:1, non-text 3:1).
  • Touch targets >= 44x44 pt mobile, >= 32x32 px web.
  • Focus state designed for every interactive element; not just :hover.
  • Error / success / warning / info states designed (no colour-only encoding; pair with icon or text).
  • Modal trap, focus return, and aria-live announcements thought through.
  • Reduced-motion alternative shown.
  • High-contrast theme variant rendered (token-based).

E. Loading / empty / error / offline states​

  • Skeleton state designed for any data-fetching flow (matches final layout, not generic spinner).
  • Empty state designed (data-shape-aware; with action).
  • Error state designed for the relevant errorCode family (named pattern from C2 error-to-UI matrix when present).
  • Offline state designed (banner + disabled CTA, not silent failure).
  • Loading-with-stale-data state shown (stale data visible + "refreshing" indicator).

F. Multi-tenant theming​

  • Design renders correctly with default platform tokens and with at least one tenant theme (e.g. kabul-grand-hotel Pashto-RTL).
  • Logo / hero / brand mark render correctly in both LTR and RTL.
  • No tenant-specific layout assumptions (e.g. "logo is always wider than tall").

G. Motion​

  • Motion uses tokens (named easings + durations) from the motion catalog.
  • Drag / drop / reorder behaviours have clear affordance + reduced-motion fallback.
  • Page transitions consistent with the runtime shell.
  • No motion that exceeds 480 ms duration (longer needs justification).

H. Microcopy / voice​

  • Voice and tone match the persona (concise + warm for guest; precise + dense for operator).
  • No dark patterns (no fake scarcity, no pre-checked subscribe boxes, no "no I don't want a discount" cancel labels).
  • Button labels are verbs (Hold this room, Cancel reservation).
  • Error messages explain what happened + what to do next.

I. Telemetry / instrumentation hooks​

  • Designer named the events the screen will emit (designer doesn't write code, but identifies the moments).
  • AI provenance card rendered for any AI-generated content.
  • No PII visible in screenshots / mocks shared in tickets.

J. Hospitality rigour (this domain specifically)​

  • Cash-on-arrival rendered identically to other payment radios (not de-emphasised, not hidden behind "more options").
  • Hold-expiry countdown designed (warn at T-60 s; surface re-quote at T-0).
  • Walk-in flow considered for front-desk surfaces (no preceding online booking).
  • Multi-night / multi-guest / multi-room edge cases shown.
  • Operator override paths designed (manager discount, comp room, force assign).

K. Approval​

  • Designer self-review signed off: ____________ (date)
  • Peer designer review signed off: ____________ (date)
  • FE engineer signed off (visual novelty / feasibility): ____________ (date)
  • PM signed off (scope / outcome): ____________ (date)

References​