TorbatYar/frontend/docs/hospitality-design-guidelines.md
Mortezakoohjani 065c053c16 Add complete Torbat Food hospitality frontend connected to backend APIs.
Introduces modules/hospitality with 54 routes, BFF proxy, capability-gated nav, CRUD factory, and architecture validation docs.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-26 20:54:26 +03:30

1.6 KiB

Hospitality Design Guidelines

Color & theme

Use CSS variables from globals.css:

--hospitality-accent: #ea580c;       /* light */
--hospitality-accent-soft: rgba(234, 88, 12, 0.12);
--hospitality-warm: #f97316;

Dark mode equivalents use #fb923c accent.

Do not hardcode hex in components — reference var(--hospitality-accent).

Typography

  • Headings: inherit global text-secondary, semibold
  • Muted text: text-[var(--muted)]
  • Monospace for codes/tokens: font-mono text-sm

Spacing

  • Page padding: p-4 lg:p-6
  • Card gaps: gap-4
  • Form fields: space-y-3
  • Nav items: py-2.5 px-3, rounded-xl

Components

Pattern Guideline
Primary action Button default variant, hospitality accent via active nav
Destructive ConfirmDialog with danger
Status HospitalityStatusChip or Badge tones
Tables Always wrap with search in HospitalityTablePage
Empty states Action button when create is available

Navigation

  • Groups collapse on mobile drawer
  • Hide nav items when capability flag is false
  • Hub link at sidebar footer

Forms

  • react-hook-form + zod validation
  • Required fields marked in schema messages (Persian)
  • Select for enums; Input for text/number

Icons

Lucide icons in nav config (constants/portals.ts).

Motion

  • Sidebar chevron: transition-transform
  • Nav hover: transition-colors duration-200
  • Avoid heavy animations on data tables

RTL

  • Search icon: right-3, input pr-10
  • Sidebar border: border-l (RTL shell)
  • Breadcrumb chevron rotated for RTL flow