/* ========================================================================= VIRASAT DESIGN TOKENS Version: 1.0 — 15 Aug 2026 Owner: Design (Sam's team) Two surfaces consume this single token file: - NARRATOR surface (grandparent, voice-first, one-button web app) - SPONSOR surface (diaspora adult child/grandchild, fuller PWA dashboard) Read STYLE_GUIDE.md alongside this file for rationale, dos/don'ts, and accessibility justification. Do not hand-pick colors/sizes outside this token set — if something is missing, add a token here, don't invent a one-off value in a component file. ========================================================================= */ :root { /* ====================================================================== 1. COLOR Warm, trustworthy, "Indian without being kitschy" — inspired by turmeric, marigold, terracotta, and dusk-sky tones rather than the literal tricolor or paisley/ethnic-print cliches. Neutrals are warm (slightly brown/grey, never cold blue-grey) so backgrounds feel like home, not software. Contrast notes (WCAG 2.1, verified against the paired background): - --color-text-primary on --color-bg-canvas / --color-bg-surface meets AAA (>= 7:1) for normal text — required for the Narrator surface given older-user vision considerations. - --color-text-secondary on those same backgrounds meets AA (>= 4.5:1) for normal text. - --color-primary on white meets AA for large text / UI components (>=3:1) and is always paired with white label text at large sizes (see button spec) which itself hits AA/AAA depending on size. - Status colors are DELIBERATELY not traffic-light red/amber/green. See "gentle status" block and STYLE_GUIDE.md — this is a direct requirement from the UX spec's anti-clinical-monitoring principle. ====================================================================== */ /* --- Brand / primary --- */ --color-primary: #075E54; /* deep green (matches the Narrator app, 3 Oct 2026) — primary brand color, CTAs, active states */ --color-primary-dark: #054A42; /* pressed/hover state, and for text-on-light use needing more contrast */ --color-primary-light: #A8D5C8; /* tints, subtle fills, disabled-but-visible states */ --color-primary-tint-bg: #E7F3EF; /* very light wash for selected rows/cards on Sponsor surface */ --color-warm-accent: #C9A227; /* marigold/turmeric accent — secondary accent, highlights, badges (large text/UI only, see contrast note) */ --color-warm-accent-dark: #7A5F12; /* text-safe darker variant of the accent — 6.02:1 on white, use for any small accent-colored text/links */ --color-warm-accent-tint-bg: #FBF5DF; /* light marigold wash for highlight cards, "new" markers (non-alarming) */ --color-dusk: #4B5566; /* dusky indigo-grey — used sparingly for Sponsor-only structural UI (nav, icons) */ --color-dusk-tint-bg: #EEF0F3; /* light neutral-cool wash, Sponsor surface only, for secondary panels */ /* --- Neutrals (warm-toned, not cold blue-grey) --- */ --color-bg-canvas: #F6F3EE; /* page background — warm off-white, both surfaces */ --color-bg-surface: #FFFFFF; /* cards, sheets, elevated surfaces */ --color-bg-muted: #EEEAE3; /* subtle section backgrounds, input fields at rest */ --color-border: #DDD8CF; /* default hairline border, warm taupe not grey */ --color-border-strong: #CBB9A3; /* emphasized borders, e.g. focus-adjacent dividers */ --color-text-primary: #2B2420; /* near-black warm brown — AAA on bg-canvas & bg-surface */ --color-text-secondary: #5B5048; /* warm grey-brown — AA on bg-canvas & bg-surface */ --color-text-muted: #8A7E72; /* placeholder / least-important text — decorative use only, do not use for body copy */ --color-text-on-primary: #FFFFFF; /* text/icons placed on --color-primary or --color-primary-dark fills */ --color-text-on-accent: #2B2420; /* text placed on --color-warm-accent fills (accent is light enough to need dark text) */ /* --- Gentle status colors --- Explicitly NOT red/amber/green "health monitoring" semantics. These describe warmth/recency, not clinical severity. Never pair these with words like "critical," "declining," or "alert" — see STYLE_GUIDE.md for approved copy patterns. */ --color-status-warm: #0B6B5F; /* "active / recently in touch" — warm terracotta-marigold, calm. 4.76:1 on its bg, AA-safe for text */ --color-status-warm-bg: #E7F3EF; --color-status-quiet: #5B6350; /* "a little quiet lately" — muted sage, NOT amber/yellow-warning. 5.49:1 on its bg */ --color-status-quiet-bg: #EEF1E8; --color-status-gentle-note: #4C5D70; /* factual/neutral note (e.g. digest gap notice) — dusty blue-grey, not red. 5.89:1 on its bg */ --color-status-gentle-note-bg: #EBF0F4; /* --- Feedback (form validation only — kept minimal and low-alarm) --- */ --color-feedback-error: #A8412E; /* used only for actual input errors (e.g. invalid OTP), never for narrator status. 5.21:1 on error-bg */ --color-feedback-error-bg: #FBEAE6; --color-feedback-success: #356048; /* confirmation only (e.g. "saved"), muted forest, not neon green. 6.31:1 on success-bg */ --color-feedback-success-bg: #EAF2EC; /* --- Focus ring (accessibility — visible on both surfaces) --- */ --color-focus-ring: #2B6CB0; /* distinct blue, high contrast, never reused elsewhere so focus is unambiguous */ /* --- Narrator-surface specific --- */ --color-narrator-button-fill: #075E54; /* = --color-primary, aliased for clarity in Narrator components */ --color-narrator-button-listening: #D98E2B; /* = --color-warm-accent, button shifts warmer while actively listening */ --color-narrator-waveform: #F4C98A; /* soft light gold waveform/pulse ring against button fill */ --color-narrator-bg: #FFF7ED; /* slightly warmer canvas specifically for the Narrator single-screen surface */ /* ====================================================================== 2. TYPOGRAPHY Font: "Noto Sans Devanagari" (Hindi/Devanagari glyphs) paired with "Noto Sans" (Latin glyphs) as a single logical stack, both free Google Fonts from the same Noto family (metric-compatible, designed to mix). Verified: Noto Sans Devanagari covers the Devanagari Unicode block (U+0900–U+097F) including conjuncts/matras required for Hindi; Noto Sans covers Latin + Latin Extended for English. This directly satisfies the "strong Devanagari + Latin support, content is Hindi-English code-switched" requirement. Fallback stack included for resilience if the webfont fails to load. ====================================================================== */ --font-family-base: "Noto Sans", "Noto Sans Devanagari", "Noto Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-family-devanagari: "Noto Sans Devanagari", "Noto Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Usage: set --font-family-base on as the default; both fonts are loaded together, so mixed Hindi/English text in the same element renders correctly without a lang-based font switch. Use --font-family-devanagari only if you need to force Devanagari rendering priority in a Hindi-only string. */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; /* body copy on Sponsor surface, and all Narrator text */ /* --- NARRATOR type scale --- Deliberately not a "normal consumer app" scale. Defaults already look like another app's "large text accessibility mode." Every value below is a floor, not a suggestion — do not scale down for "better fit," resize the layout instead. */ --font-size-narrator-button-label: 40px; /* "Baat karein" label on/near the main button */ --font-size-narrator-heading: 34px; /* rare, e.g. a one-time onboarding headline */ --font-size-narrator-body: 28px; /* the dynamic status line under the button */ --font-size-narrator-caption: 24px; /* smallest permitted size anywhere on this surface (e.g. language toggle label) */ --line-height-narrator: 1.4; /* --- SPONSOR type scale --- Normal-but-generous — roomier than a typical dense SaaS dashboard, with a user-facing text-size control (see --font-scale-sponsor). */ --font-size-sponsor-display: 32px; /* page-level hero numbers/headings, rare */ --font-size-sponsor-h1: 26px; /* screen title, e.g. "Home", "Archive" */ --font-size-sponsor-h2: 21px; /* section headers within a screen */ --font-size-sponsor-h3: 18px; /* card titles */ --font-size-sponsor-body: 16px; /* default body/paragraph text */ --font-size-sponsor-body-small: 14px;/* metadata, timestamps, helper text */ --font-size-sponsor-caption: 13px; /* least-important labels only; avoid for anything load-bearing */ /* Sponsor in-app text-size control (per UX spec accessibility section). Multiply computed font-size by this scalar; wire a UI control that sets one of these three values on the root element, e.g. via a `data-text-scale` attribute switching a CSS custom property. */ --font-scale-sponsor-default: 1; --font-scale-sponsor-large: 1.15; --font-scale-sponsor-xlarge: 1.3; /* ====================================================================== 3. SPACING Base-8 scale (base-4 for the tightest increment) used by both surfaces. Narrator layouts should draw almost exclusively from the larger end of this scale. ====================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* --- Touch targets --- WCAG 2.1 AA minimum is 24x24px (2.5.8) / historical guidance is 44x44px (Apple)/48x48dp (Material). Virasat sets a higher floor given the elderly-user, motor-consideration context. */ --touch-target-min: 48px; /* absolute floor, Sponsor surface secondary controls */ --touch-target-comfortable: 64px; /* Sponsor primary buttons, nav items */ --touch-target-narrator-min: 96px; /* smallest tappable element permitted anywhere on Narrator surface (e.g. "Rok dein" stop control) */ --touch-target-narrator-primary: 280px; /* the one big "Baat karein" button diameter, mobile default */ --touch-target-narrator-primary-desktop: 340px; /* larger viewport variant */ /* ====================================================================== 4. RADIUS Consistently soft/rounded — reads as human and hand-held, not corporate-SaaS-sharp. Narrator surface uses full circles/very soft shapes exclusively; Sponsor surface uses generous rounding but can use smaller radii for dense UI like table rows. ====================================================================== */ --radius-sm: 8px; /* form inputs, small chips */ --radius-md: 14px; /* buttons, cards on Sponsor surface */ --radius-lg: 20px; /* larger cards, modals, sheets */ --radius-xl: 28px; /* hero cards, digest highlight cards */ --radius-full: 999px; /* pills, avatar frames, the Narrator button */ /* ====================================================================== 5. ELEVATION / SHADOW Soft, warm-toned, low-contrast shadows (never pure black) — reads as a soft physical object (paper, cushion) rather than a hard Material-style drop shadow. Narrator surface uses shadow rarely — the button's presence comes from motion/pulse, not elevation. ====================================================================== */ --shadow-color: 43, 36, 32; /* rgb triplet of --color-text-primary, used with low alpha below */ --shadow-xs: 0 1px 2px rgba(var(--shadow-color), 0.06); --shadow-sm: 0 2px 6px rgba(var(--shadow-color), 0.08); --shadow-md: 0 6px 16px rgba(var(--shadow-color), 0.10); --shadow-lg: 0 12px 32px rgba(var(--shadow-color), 0.14); /* Narrator button — soft warm glow instead of a neutral drop shadow, reinforces "presence" rather than "elevated UI panel." */ --shadow-narrator-button-resting: 0 0 0 12px rgba(7, 94, 84, 0.08), 0 8px 24px rgba(7, 94, 84, 0.20); --shadow-narrator-button-listening: 0 0 0 20px rgba(217, 142, 43, 0.14), 0 8px 28px rgba(217, 142, 43, 0.30); /* ====================================================================== 6. MOTION Used by the Narrator button's breathing/pulse and by gentle Sponsor-surface transitions. Keep everything slow and soft — nothing here should feel urgent, ping-like, or notification-badge-like. ====================================================================== */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 500ms; --duration-breathing-pulse: 2800ms; /* one full resting in/out breath cycle for the Narrator button */ --duration-listening-pulse: 1200ms; /* faster, livelier pulse once actively listening */ --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --easing-gentle: cubic-bezier(0.33, 0, 0.2, 1); /* ====================================================================== 7. Z-INDEX SCALE Kept minimal — neither surface should need deep stacking. ====================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky-nav: 100; --z-overlay: 500; --z-modal: 900; --z-toast: 1000; }