Design language — culturally rich UI

North star

• Dignity first — UI supports devotion and planning; it never trivialises ritual language or imagery.
• Clarity under stress — many users are on mid-range phones, bright sun, or patchy networks; hierarchy and tap targets beat decoration.
• One soul, two surfaces — web and Expo share tokens, type scale, colour roles, and motion rhythm so the brand feels continuous from marketing to checkout to “my bookings”.
• Authenticity over cliché — avoid stock “spiritual” gradients and random Om patterns; use real photography, verified copy, and stakeholder-reviewed motifs where sacred symbols appear.

Implementation approach (no shadcn)

Build a custom component library in packages/ui (web) and apps/mobile/components (native), driven by shared design tokens. Use headless primitives only where they earn their keep (e.g. Radix for accessible dialogs/comboboxes on web) — without adopting a pre-styled kit as the visual source of truth.

• Web: Next.js + Tailwind v4 with a theme extension (semantic colours, type scale, radii, shadows). React components composed in-house: buttons, fields, cards, steppers for booking, ritual-specific layouts.
• Mobile: StyleSheet / styled patterns or a thin theming layer (e.g. Restyle or Tamagui tokens only) that consumes the same numeric tokens as web — not Material defaults as the face of the brand.
• Optional package packages/design-tokens — export JSON or TS constants (spacing, colour ramps, font roles) consumed by Tailwind preset and a small RN theme object.

Colour & light

Define semantic roles (not only hex names): e.g. river-deep, ghat-stone, lamp-glow, kesari (saffron accent, used sparingly), monsoon-green for positive states, ashrose for surfaces. Support light and dark modes that both feel “warm paper / night ghat” rather than cold tech grey.

Typography & languages

Pair a distinctive Latin display (editorial serif or refined humanist sans) with a high-quality Devanagari family for Hindi or mixed copy — e.g. Noto Serif Devanagari, Tiro Devanagari Hindi, or similar, loaded with subsetting for performance. Establish a clear scale for mantras, dates (tithi), and legal text without shrinking below readable minimums.

Layout & patterns

• Marketing: generous vertical rhythm, full-bleed photography from real Kumbh/Haridwar context (rights-cleared), section breaks that echo ghat steps or horizontal bands rather than generic bento grids.
• Booking: stepwise flows with explicit progress; pilgrim and ancestor forms use respectful labelling and helper copy in plain language + Hindi where scoped.
• Cards for packages: typographic hierarchy + one strong visual anchor per card (image or symbolic icon system designed for this product — not generic Lucide-only pages).

Motion

Framer Motion on web for page transitions, staggered reveals on hero content, and micro-feedback on booking actions — always sub-300ms for functional motion, respect prefers-reduced-motion. On Expo, use Reanimated sparingly for the same rhythm; avoid playful bounces on solemn flows (e.g. ancestor details).

Imagery & iconography

Commission or license specific imagery; maintain an art direction doc (palette, crop ratios, treatment). Icons: a small custom set for domain nouns (snan, aarti, diya, stall) plus a minimal neutral set for system actions — coherence over quantity.

Accessibility & trust

• WCAG-oriented contrast for body text in both themes.
• Large touch targets on mobile; thumb reach for primary actions.
• Clear error and payment states; never hide critical ritual fields behind progressive disclosure without confirmation.