TorbatYar/docs/frontend/design-system.md
Mortezakoohjani 5c6a2e78cf feat(platform): seed service registry, deploy all modules, and fix homepage catalog.
Register all active platform services and base features in core DB so admin can manage them, add delivery/hospitality/sports-center backend phases, update apps catalog and production deploy tooling.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-27 12:39:51 +03:30

1.4 KiB

Design System

Principles

Modern enterprise SaaS: minimal, premium, large whitespace, soft elevation, rounded surfaces, RTL-native Persian typography (Yekan Bakh FaNum).

Tokens (styles/globals.css)

Token Role
--canvas Page background
--surface Cards / panels
--surface-muted Subtle fills
--border Hairlines
--muted Secondary text
--shadow-sm/md/lg Elevation
--radius-sm/md/lg Corner radius
--color-primary Brand (white-label)
--color-secondary Primary text

.dark overrides the same tokens. Toggle via ColorModeProvider (class strategy).

Typography

  • Font: Yekan Bakh FaNum
  • Page title: text-2xl font-bold
  • Body: text-sm
  • Muted helpers: text-[var(--muted)]

Spacing

Prefer Tailwind scale with consistent page padding (px-4 py-6, max-w-7xl). Section gaps gap-4 / mb-6.

States

Every data view must support: loading (LoadingState), empty (EmptyState), error (ErrorState), success toasts (Sonner).

Dates (Accounting)

All date pickers are Jalali/Shamsi via DatePicker. Native Gregorian browser pickers are forbidden. API still receives Gregorian ISO.

Money (Accounting)

All price/amount fields use MoneyInput with live thousand separators. Stored/submitted values are plain numeric strings without separators. Tables/readouts use formatMoney.