Docs / design-system/readme.md · mirrored from the repo

Namaste Ji — Design System

The canonical, previewable design system for every Namaste Ji surface, managed with Claude Design (claude.ai/design, project “Namaste Ji Design System”) and mirrored here so it versions with the repo.

Source-of-truth chain

docs/brand-tokens.json  (brand — locked)
  → docs/design-system/tokens.css + tokens.json   (this dir — canonical UI tokens)
      → apps/consumer/src/theme.ts                (consumer app theme module)
      → apps/console/src/styles/theme.css         (BO console CSS variables)

Change tokens here first, then propagate to the app theme modules, then re-sync to Claude Design (DesignSync tool / /design-sync). Never introduce ad-hoc hex values in components (BRAND.md §5.3).

What’s in here

Path	Contents
`PHILOSOPHY.md`	Read first — design philosophies, decision rules, and the maintenance playbook
`tokens.css`	Every design token as CSS custom properties (`--nj-*`), both zones
`tokens.json`	The same tokens machine-readable, for agents/generators
`previews/*.html`	Self-contained preview cards, one per system area. First line of each carries the `@dsCard` marker Claude Design uses to build its card index

The two-zone model (the one big idea)

Feed zone (immersive): charcoal #1C1A18 theatre, edge-to-edge imagery, glass overlays, white text. The greeting image IS the product.
Chrome zone (festival morning): Warm Paper #F9F7F4 / Crisp White cards, Charcoal ink, Sunrise Orange actions. Login, settings, sheets — and the whole BO console.

Governing principle: festive, never gaudy; ornate, but crafted.

Card index

Foundations: brand · colors · typography · spacing-effects · motion Components: buttons · forms · chips-tabs Console: badges · console-patterns Consumer: feed-card · chrome-login · navigation

Docs this codifies

BRAND.md + brand-tokens.json — the locked brand
consumer/STYLE-GUIDE.md — two-zone model, feed anatomy
console/DESIGN-PATTERNS.md — BO object-presentation patterns