Docs / brand.md · mirrored from the repo

Namaste Ji — Master Brand & Design System Specification

Status: Active & Locked (v1.1) This document serves as the absolute source of truth for the Namaste Ji brand system. It is written as a rigorous specification to be consumed by human designers, front-end engineers, and autonomous AI agents.

Machine-Readable Tokens: See brand-tokens.json for the strict JSON manifestation of these rules.

1. Brand Philosophy & Positioning

Governing Principle: Festive, never gaudy. Ornate, but crafted. The Namaste Ji brand lives at the intersection of high-utility modern digital products (e.g., Zomato, Blinkit) and deep cultural reverence. We express premium quality through rich, authentic detailing paired with extreme cleanliness and ample negative space.

Positioning: For the 400M+ Indians who share daily greetings, Namaste Ji is the definitive vernacular platform that treats every greeting as a small act of love worth crafting well—a daily micro-festival (roz ka utsav).

1.1 Tagline / Descriptor

A plain category descriptor (the “what it is”), in the spirit of Blinkit’s “India’s Last Minute App”. It states the product instantly — critical for app-store discovery (ASO) and a low-literacy, next-billion audience. Maintained in three registers:

शुभकामना = secular, pan-faith “good wishes” — it carries the festival + devotional weight, not just Good-Mornings. The festive line “Har din, ek chhota tyohaar” (every day, a little festival) is retained as an optional seasonal/campaign line, distinct from this descriptor.

2. Visual Identity & Design Tokens

2.1 Color System

The palette is built on high contrast. A single, highly vibrant primary color is paired with crisp white and deep charcoal to ensure WCAG 2.1 AA accessibility across all UI elements.

2.2 Typographic Hierarchy

The typographic stack relies on open-source, highly legible web fonts optimized for mobile screens.

• Primary Display & Headings: Poppins (Geometric, friendly but structured)
• UI & Body Copy: Inter (Maximal legibility at small sizes)
• Vernacular Fallback: Noto Sans Devanagari (Utilitarian, clean rendering)

Scale Specification (Mobile First):

• Display 1: Poppins Bold (700), 32px / 1.2 line-height. Tracking: -0.02em.
• Heading 1: Poppins SemiBold (600), 24px / 1.3 line-height. Tracking: -0.01em.
• Heading 2: Poppins Medium (500), 20px / 1.3 line-height.
• Body Large (Primary UI): Inter Regular (400) / Medium (500), 16px / 1.5 line-height.
• Body Small (Metadata): Inter Regular (400), 14px / 1.5 line-height. Color: #665E55.

2.3 The Logo Lockup

The finalized primary logo is the “Folded Hands (Anjali) + Sunrise” mark.

• The Mark: A geometric sun featuring 8 radiating lines and a central folded hands (Namaste) shape, anchored by a red Kumkum dot at the base.
• The Wordmark: Set in Poppins, aligned to the vertical center of the sun mark.
• Clear Space: The minimum clear space around the logo must be equal to the height of the ‘N’ in the wordmark.
• Logo Usage: The logo must never be distorted. In solid dark contexts, the hands must be inverted to #FFFFFF to maintain visibility.

3. UI Components & Interaction Physics

3.1 Materiality (Glassmorphism & Elevation)

To elevate the app from flat design to a premium, tactile experience, we utilize frosted glass effects specifically over immersive imagery.

• Glass Panel Token: background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
• Borders: All glass panels must feature a subtle inner border: border: 1px solid rgba(255, 255, 255, 0.2);
• Corner Radii: Buttons (border-radius: 100px for pill shape), Cards (border-radius: 24px).

3.2 Motion Physics

Animations must feel responsive, organic, and slightly bouncy—never linear or sluggish.

• Button Active State: transform: scale(0.96); transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
• Reel Snapping: Scroll containers must use strict CSS scroll-snapping (scroll-snap-type: y mandatory) to mimic native reel physics.
• Page Transitions: Content fading must utilize a fast, subtle ease-up: animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);

4. Verbal Identity & Voice

Persona: The beloved host at a festival (Caregiver × Jester). Warm, generous, and devout-but-inclusive.

• Tone: Affectionate, uplifting, respectful. We say “Aapka din shubh ho” (May your day be auspicious), never “Good Morning! Download now!”
• Messaging Pillars:
  1. Effortless & Kind: Do the heavy lifting for the user.
  2. Sammaan (Respect): Always use honorifics (ji, aap).
  3. Utsav (Joy): Treat interactions as celebrations.

5. Explicit Directives for AI Agents

[!IMPORTANT] CRITICAL CONSTRAINTS FOR AGENTIC WORKFLOWS:

1. Content Generation: Agents generating devotional copy MUST pass the Cultural-Correctness Veto. Do not mix deities, mantras, or regional festivals inaccurately.
2. Image Generation: AI-generated visuals must adhere to the “Ornate, but crafted” principle. Images must be high-resolution, photorealistic or high-end 3D, and AVOID overly saturated, cheap plastic “clipart” aesthetics.
3. UI Code Generation: Agents writing UI code must strictly import the Inter and Poppins fonts, use the exact hex codes defined in section 2.1, and apply the exact glassmorphism CSS values defined in section 3.1. Do not introduce ad-hoc colors or system fonts.