Namaste Ji by Ayushman Dash

Docs / consumer/style-guide.md · mirrored from the repo

Consumer App — UI Style Guide (v1 proposal)

Status: PROPOSED — awaiting founder validation. The application of the locked brand (BRAND.md v1.1 + brand-tokens.json) to the consumer app’s TikTok-class immersive feed UI. Visual reference: mockups/app-style.html (open in a browser). Once validated, this guide is the styling contract for apps/consumer — agents must not introduce ad-hoc colors/fonts (BRAND.md §5.3).

1. The two-zone model (resolves feed-dark vs brand-light)

The brand is bright (“extreme cleanliness”, Warm Paper/Crisp White). A TikTok-class feed is dark. Both are right — in different zones:

ZoneSurfacesGroundRationale
Feed (immersive)The vertical swipe feed onlyCharcoal #1C1A18, edge-to-edge imagery, glass overlays, white textThe image IS the product; a darkened “theatre” makes every greeting glow. TikTok/Reels convention the audience already knows.
Chrome (festival morning)Login, onboarding, settings, sheets, dialogsWarm Paper #F9F7F4 / Crisp White cards, Charcoal ink, Sunrise Orange actionsThe brand’s own light, clean, festive-not-gaudy language (matches the BO console + app-flow mock).

No user-facing dark/light theme toggle at v1 — the zones are fixed by design. (System dark-mode support: revisit post-launch.)

2. Color

Exactly the six brand tokens — plus two functional colors:

TokenHexApp usage
Sunrise Orange (primary)#FF5A00Primary buttons, active tab, focus states, links
Kumkum Red#E62E41Destructive, error text, badge accents
Sona Gold#FFB800One precious accent: one-time-password banner, VIP badge, festival highlights — sparingly
Charcoal Ink#1C1A18Text on light; the feed ground
Warm Paper#F9F7F4Chrome canvas
Crisp White#FFFFFFCards, inputs, sheets
WhatsApp Green#25D366ONLY the “Share on WhatsApp” CTA — a functional affordance (recognition > brand purity for the 35+ audience; the ShareChat-proven pattern). ⚠ Deliberate exception to the single-primary discipline — validate.
Success Green#16A34ASuccess states/toasts only

Glass tokens (BRAND.md §3.1, verbatim): light glass rgba(255,255,255,0.15) + blur(16px), dark glass rgba(28,26,24,0.6) + blur(10px); all glass gets 1px solid rgba(255,255,255,0.2) border.

3. Typography

  • Display/headings: Poppins (600/700) — covers Devanagari natively.
  • UI/body: Inter (400/500) Latin + Noto Sans Devanagari fallback chain.
  • Loaded via expo-font (bundled subsets, no network fetch — low-end constraint).
  • Scale (from BRAND.md §2.2): Display 32/1.2 · H1 24/1.3 · H2 20/1.3 · Body 16/1.5 · Small 14/1.5 (muted #665E55).
  • Feed caption hero: Poppins 600, 30–34px, white, text-shadow 0 2px 10px rgba(0,0,0,0.5), over the bottom gradient. Indic set optically larger (+1–2px vs Latin).
  • Elder-legibility rules: min body 16px in chrome, sentence case, generous line-height, never light-gray-on-white below 4.5:1.

4. Feed anatomy (the immersive zone)

Top → bottom on every card (see mockup frame 2/3):

  1. Top bar (overlay, fades on scroll idle): brand wordmark left (white sun-face mark
    • “Namaste Ji”), category chip right (dark glass pill, e.g. “शुभ प्रभात”).
  2. Tabs (below top bar): horizontally scrollable glass pills — For you · Good morning · your deity · Festival · Fresh. Active = white pill, charcoal text.
  3. The image: full-bleed, cover, BlurHash placeholder underneath (no layout shift).
  4. Bottom gradient: linear-gradient(to top, rgba(0,0,0,.8), transparent) over the lower 45%.
  5. Caption hero bottom-left: the vernacular caption (user’s language) + small metadata line (festival/date when time-bound).
  6. Action rail bottom-right, vertical, 48px glass circles: Save (bookmark) · Download · (later: more). Icon + 11px label under each (low-literacy rule: never icon-only).
  7. Share CTA: full-width-ish pill bottom-center-left, WhatsApp green, white glyph + “WhatsApp पर भेजें” (localized) — THE dominant action on screen, 52px tall. Secondary system-share icon lives in the rail (Download ▸ share-sheet fallback).
  8. Snap physics: scroll-snap-type: y mandatory, one card per viewport (100dvh).

5. Chrome anatomy

  • Login (mock frame 1): centered logo lockup (sun + bilingual wordmark), Warm Paper ground, white card with username/password fields (16px, 12px radius), Sunrise Orange pill button (“Namaste 🙏 / साइन इन”), kind error copy (voice: never blame the user).
  • Settings (mock frame 4): white list-cards on Warm Paper — language picker (hi/en/hi-Latn as chips), change password, sign out (Kumkum red text). Section headers Poppins 600 20px.
  • Buttons: pill (radius 100px), 52px height primary, scale(0.96) press (BRAND §3.2).
  • Cards: radius 24px; inputs/small elements: radius 12–16px.

6. Motion

From BRAND.md §3.2, verbatim: press = scale(0.96) 0.1s cubic-bezier(0.4,0,0.2,1); content entry = fadeUp 0.4s cubic-bezier(0.16,1,0.3,1); feed snap = mandatory. Respect prefers-reduced-motion.

7. Accessibility & low-literacy (P-6/P-7)

48px min touch targets · icon+label everywhere · WCAG AA contrast (the gradient guarantees caption contrast on any image) · UI strings via i18n only (FE-5 lint) · voice/audio affordances reserved for a later pass.

8. Implementation mapping (apps/consumer)

  • src/theme.ts — single token module (colors, type scale, radii, glass, motion durations) generated FROM this guide; components import tokens, never hex literals.
  • Fonts via expo-font + @expo-google-fonts/poppins, @expo-google-fonts/inter, Noto Sans Devanagari subset.
  • Feed = FeedList.web.tsx (CSS snap) / native FlashList later — same FeedCard.
  • The logo: docs/brand/logo.svg mark, exported as a component (BrandMark) — hands invert to white in the feed zone (BRAND §2.3); favicon = monochrome sun variant.

9. Open for validation (answer these)

  1. Two-zone model — immersive-dark feed + light chrome: OK?
  2. WhatsApp-green share CTA — accept the functional-color exception (recommended)?
  3. Action rail — Save + Download at v1 (share is the CTA), or add more?
  4. Caption language — show only the user’s language (current) vs stacked bilingual?