/** * UMG Ecosystem Design System — Master Tokens * Version: 1.0.0 — Jul 7 2026 * Owner: UMG Creative Director (Katib) * * LOCKED by ecosystem brand council Jul 7 2026. * Import this file once at the root of any UMG property. * * Font CDN: Bunny Fonts (fonts.bunny.net) — NEVER Google Fonts. * CSP note: style-src AND font-src MUST allow fonts.bunny.net. * * Kill list (rogue tokens — grep+purge on sight): * #2D5016 #10B981 #C4A265 (rogue greens/gold) * #F59E0B #14B8A6 as DECORATIVE/CTA accents (added in the Aug 25 flagship * pass — bare hexes sprinkled across unrelated buttons with no shared * meaning). NARROWED Aug 26 (two-desk conferral under r301): #14B8A6 is * SANCTIONED as the semantic --void-success token below, and only as * that. Success/valid state on void, referenced by name; any other use * of the bare hex is still killed. * arbitrary blues not in this file */ /* ───────────────────────────────────────────────────────────────────────── FONTS — via Bunny Fonts (drop-in Google Fonts replacement) ───────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.bunny.net/css?family=amiri:400,400i,700,700i&display=swap'); @import url('https://fonts.bunny.net/css?family=outfit:300,400,500,600,700&display=swap'); @import url('https://fonts.bunny.net/css?family=noto-naskh-arabic:400,500,600,700&display=swap'); /* ───────────────────────────────────────────────────────────────────────── MASTER PALETTE — locked, canonical ───────────────────────────────────────────────────────────────────────── */ :root { /* Green axis */ --forest: #166534; /* Master action green — CTAs, links, active states */ --forest-deep: #0F4A26; /* Hover/pressed state for forest */ --emerald: #065F46; /* UmmahCauses — deeper giving tint, not for CTAs */ /* Gold axis — heritage/value/scarcity; NEVER a CTA button on LIGHT surfaces. RULING (Tab, Jul 19 2026, resolving the conflict with the void theme's --action-primary): on the VOID canvas (ummah.city night) gold-bright IS the sanctioned action color — "gold is the city's light at night." Everywhere else (warm/light family) the unconditional rule stands: forest = primary CTA, gold never a button fill. */ --gold: #C8912E; /* Master brand gold — money, pricing, launch urgency, heritage marks (FILLS/ICONS/BORDERS; as small TEXT on light it fails AA 2.62:1 — use --gold-text) */ --gold-text: #96631A; /* Gold as a GLYPH color on light surfaces (4.83:1 on cream — AA) */ --gold-bright: #DFA032; /* Executive + Pulse + VOID action color (night primary CTA — see night mandate below) */ /* Dark axis */ --void: #060B18; /* ummah.city dark canvas — do NOT use on consumer products */ --ink: #0F1F17; /* Body text / dark neutral */ --slate: #1B2A4A; /* Corporate / MuslimReach enterprise surfaces */ /* Light axis */ --cream: #FAF8F3; /* Primary surface / breathing room */ --stone: #EAE6DF; /* Secondary surface / borders / dividers */ /* Functional (frozen — never reassign to marketing) */ --live-green: #6DB87A; /* Pulse LIVE flash / conversion signal — NOT a property color */ --red: #DC2626; /* Admin Help-Mode / destructive actions ONLY */ --void-success: #14B8A6; /* Success/valid/available on VOID surfaces ONLY — the handle-is-free check, valid-token marks, checkmarks. Added Aug 26 2026 (two-desk conferral, r301): void had no success token — forest fails 2.76:1 on void, gold-bright is the ACTION color there, live-green is frozen for Pulse. 8.06:1 on #040810; blue-leaning, so it stays separable from --red for red-green colourblind users. NEVER a CTA fill, never decoration, never on light surfaces. */ /* ─── PRISM — per-property jewel-tone accents ───────────────────────── Each property gets ONE accent color. PRISM extends the master palette as property-level signatures (accent only; master palette provides surfaces, type, and structure). Gold (#C8912E) is RESERVED for MAN/MuslimReach + money/heritage. Forest (#166534) is the UmmahCity / ecosystem-level color. ─────────────────────────────────────────────────────────────────────── */ --prism-ummahcity: #166534; /* = --forest (the city IS the ecosystem) */ --prism-ummahpass: #1B5FA8; /* Deep sapphire — identity / SSO (v2 Jul 10: was #5B93D6 = 2.79:1 on cream, FAILED WCAG AA; now ~5.1:1) */ --prism-ummahplaces: #1A7040; /* Deep sea-green — discovery / places (v2 Jul 10: was #2D9B5F = 3.08:1 on cream, FAILED WCAG AA; now ~5.3:1) */ --prism-ummahcauses: #B5551E; /* Sienna orange — giving / charity (deepened Jul 19: #D4662A was 3.45:1 on cream, failed AA as a text-carrying badge) */ --prism-ummahjobs: #0B7A6E; /* Teal — work / opportunity (deepened Jul 19: #0D9488 was 3.53:1, same fix) */ --prism-ummaharmy: #C94A4A; /* Crimson — mission / action */ --prism-ummahbuzz: #7B50D4; /* Amethyst — community / content */ --prism-man: #C8912E; /* = --gold (MAN/MuslimReach brand color) */ --prism-ummahemail: #C2458F; /* Magenta-rose — communication / inbox */ --prism-muslimreach: #1B2A4A; /* = --slate (enterprise, cool-register) */ /* ───────────────────────────────────────────────────────────────────────── TYPOGRAPHY ───────────────────────────────────────────────────────────────────────── */ /* Font stacks */ --font-display: 'Amiri', 'Times New Roman', serif; /* Signature display — every property hero */ --font-ui: 'Outfit', 'Helvetica Neue', Arial, sans-serif; /* Universal UI + body */ --font-arabic: 'Noto Naskh Arabic', 'Arial Unicode MS', serif; /* Extended Arabic */ --font-mono: 'Courier New', 'Consolas', monospace; /* Code / data */ /* Type scale — 4px-anchored */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 3.75rem; /* 60px */ --text-6xl: 4.5rem; /* 72px */ /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* Letter spacing */ --tracking-tight: -0.03em; --tracking-snug: -0.015em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.08em; --tracking-widest: 0.15em; /* Font weights */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ───────────────────────────────────────────────────────────────────────── SPACING — 4px grid, multiples only ───────────────────────────────────────────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ───────────────────────────────────────────────────────────────────────── BORDER RADII ───────────────────────────────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; /* Default: buttons, inputs */ --radius-lg: 12px; /* Default: cards */ --radius-xl: 16px; /* Large cards, panels */ --radius-2xl: 24px; /* Hero cards, feature panels */ --radius-pill: 9999px; /* Tags, badges, pills */ /* ───────────────────────────────────────────────────────────────────────── ELEVATION / SHADOWS ───────────────────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(15, 31, 23, 0.06); --shadow-sm: 0 2px 6px rgba(15, 31, 23, 0.08), 0 1px 2px rgba(15, 31, 23, 0.05); --shadow-md: 0 4px 12px rgba(15, 31, 23, 0.10), 0 2px 4px rgba(15, 31, 23, 0.06); --shadow-lg: 0 8px 24px rgba(15, 31, 23, 0.12), 0 3px 8px rgba(15, 31, 23, 0.07); --shadow-xl: 0 16px 48px rgba(15, 31, 23, 0.14), 0 6px 16px rgba(15, 31, 23, 0.08); --shadow-gold: 0 4px 16px rgba(200, 145, 46, 0.25); /* Gold accent glow — exec surfaces */ /* GOLD-AS-LIGHT — the signature. Physical light: tight hot core, soft falloff, faint bloom. VOID surfaces only, TWO triggers only (District gate-crossing flare + /join handle-claim success). Never on hover, never at rest ambient, never on cream, never on buttons. */ --gold-glow-core: 0 0 2px rgba(223, 160, 50, 0.9); --gold-glow-mid: 0 0 12px rgba(223, 160, 50, 0.45); --gold-glow-bloom: 0 0 32px rgba(223, 160, 50, 0.18); --gold-glow: var(--gold-glow-core), var(--gold-glow-mid), var(--gold-glow-bloom); /* ───────────────────────────────────────────────────────────────────────── TRANSITION + MOTION ───────────────────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0); --ease-in: cubic-bezier(0.4, 0.0, 1.0, 1.0); --ease: cubic-bezier(0.4, 0.0, 0.2, 1.0); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; /* ───────────────────────────────────────────────────────────────────────── Z-INDEX SCALE ───────────────────────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-help-mode: 99999; /* Admin Help-Mode banner — always on top */ /* ───────────────────────────────────────────────────────────────────────── BREAKPOINTS (reference only — use in media queries by value) ───────────────────────────────────────────────────────────────────────── */ /* sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px */ } /* ───────────────────────────────────────────────────────────────────────── FIREWALLED THEME A — "Ummah" (warm consumer family) Properties: UmmahCity, Ummah One, UmmahPlaces, UmmahCauses, UmmahArmy, ummah.email, UmmahChat, ummah.me Apply via: or .theme-ummah ───────────────────────────────────────────────────────────────────────── */ [data-umg-theme="ummah"], .theme-ummah { /* Surface hierarchy */ --surface-base: var(--cream); /* Page background */ --surface-raised: #FFFFFF; /* Cards on cream */ --surface-sunken: var(--stone); /* Inputs, code blocks */ --surface-overlay: rgba(15,31,23,0.6); /* Modal backdrops */ /* Text hierarchy */ --text-primary: var(--ink); /* Body, headings */ --text-secondary: #4A6356; /* Labels, captions */ --text-muted: #7D9E8C; /* Placeholder, disabled */ --text-inverse: var(--cream); /* Text on dark/forest backgrounds */ /* Action */ --action-primary: var(--forest); --action-primary-hover: var(--forest-deep); --action-secondary: var(--cream); --action-border: var(--forest); /* Borders */ --border-subtle: var(--stone); /* Dividers */ --border-default: #D1C8BF; /* Input borders */ --border-strong: #B8AD9E; /* Emphasized borders */ --border-action: var(--forest); /* Focus rings, active */ /* Geometry signature (watermark) */ --star-watermark-opacity: 0.25; --star-watermark-color: var(--forest); } /* ───────────────────────────────────────────────────────────────────────── FIREWALLED THEME B — "MuslimReach" (cool enterprise family) Properties: MAN, MuslimReach Exchange, MuslimReach PMP Apply via: or .theme-muslimreach NEVER mix with the Ummah consumer palette. ───────────────────────────────────────────────────────────────────────── */ [data-umg-theme="muslimreach"], .theme-muslimreach { /* Surface hierarchy */ --surface-base: #F4F6FA; /* Cool near-white */ --surface-raised: #FFFFFF; --surface-sunken: #E8EDF5; --surface-overlay: rgba(27,42,74,0.7); /* Text hierarchy */ --text-primary: var(--slate); --text-secondary: #4A5A7A; --text-muted: #8A97B5; --text-inverse: #F4F6FA; /* Action */ --action-primary: var(--slate); /* Deep slate — enterprise primary */ --action-primary-hover: #111D35; --action-secondary: #F4F6FA; --action-border: var(--slate); /* Accent — gold for value/pricing only, never CTA */ --action-accent: var(--gold-bright); /* Borders */ --border-subtle: #DDE3EF; --border-default: #C4CDE0; --border-strong: #9AAAC8; --border-action: var(--slate); /* Geometry signature */ --star-watermark-opacity: 0.12; --star-watermark-color: var(--slate); } /* ───────────────────────────────────────────────────────────────────────── UMMAH.CITY DARK CANVAS — void surface (ummah.city + exec/Pulse surfaces) Apply via: [data-umg-theme="void"] — ummah.city dark-default NIGHT PRIMARY MANDATE (Jul 19, three independent justifications — measured contrast: forest-on-void 2.76:1 FAILS the 3:1 UI minimum, gold-bright-on-void 8.62:1; Tab's carve-out ruling; the industry review found home's night CTA still forest = the two flagship dark surfaces disagreeing): on VOID surfaces the PRIMARY action is ALWAYS gold-bright; forest demotes to secondary. Apply everywhere, no per-page discretion. RULING (Tab, Jul 19 2026, after a 2-expert conferral — supersedes both the Jul-7 HELD note and the brief same-night dark-default confirm): ummah.city theme policy = SYSTEM-PREFERENCE default (prefers-color-scheme) · saved manual toggle always wins · no-OS-signal fallback = day · manifest/splash locked to void (the guaranteed brand-dark moment). The void palette stays ummah.city's — NEVER UmmahPass/warm-family (Theme-A light-primary). Provenance: decided in-session by Tab (AskUserQuestion flow); implemented ummah.city commit of Jul 19. Night-mode token consolidation unblocked. ───────────────────────────────────────────────────────────────────────── */ [data-umg-theme="void"], .theme-void { --surface-base: var(--void); /* #060B18 */ --surface-raised: #0D1525; --surface-sunken: #060B18; --surface-overlay: rgba(0,0,0,0.7); --text-primary: var(--cream); --text-secondary: rgba(250,248,243,0.7); --text-muted: rgba(250,248,243,0.4); --text-inverse: var(--ink); --action-primary: var(--gold-bright); --action-primary-hover: #EEB034; --action-secondary: rgba(250,248,243,0.1); --action-border: var(--gold-bright); --border-subtle: rgba(250,248,243,0.08); --border-default: rgba(250,248,243,0.15); --border-strong: rgba(250,248,243,0.25); --border-action: var(--gold-bright); --star-watermark-opacity: 0.07; --star-watermark-color: var(--gold-bright); } /* ───────────────────────────────────────────────────────────────────────── VOID + DAY-MODE — BUG-445 (Ilma, Jul 31 2026 laptop test), found Aug 3 2026 nightly sweep. /join is the ONLY page carrying [data-umg-theme="void"] AND a real day-mode design (Fix Round, Jul 20 2026) -- but --text-secondary above is defined UNCONDITIONALLY by the void block to a cream/night value (rgba(250,248,243,0.7)), so it never falls through to any rule's own #4A6356 fallback even when .day-mode is active; a CSS var() only uses its fallback when the variable is UNDEFINED, not when a "wrong for this mode" value is defined. Confirmed live: /join's own nav-pill District links (/eat /mosques /dua /give /email /work — plain tags with no class, styled via body.day-mode .city-nav-pill a{color:var(--text-secondary,...)} in ummahcity.css) rendered at rgba(250,248,243,0.7), functionally identical to the nav pill's own transparent/cream day background -- measured contrast ~1:1, the links were entirely unreadable. #4A6356 is already the value every one of those rules falls back to and is already proven correct on every OTHER (non-void) page, so redefining it here for this one combination carries no new risk. Scoped to --text-secondary only (not --text-muted/--text-primary/etc) — those aren't reproducibly broken on /join today, and this page's day-mode conversion already hand-tuned ~20 page-local overrides for other tokens; touching them without a confirmed defect risks the "fix one layer, break a sibling" class this project's CLAUDE.md warns about. ───────────────────────────────────────────────────────────────────────── */ html[data-umg-theme="void"].day-mode, .theme-void.day-mode { --text-secondary: #4A6356; } /* ───────────────────────────────────────────────────────────────────────── ESTATE VOICE — additive tokens extracted from ummahpass.io/pricing Industry verdict: /pricing is the estate's best surface ("this page has taste"). This block codifies its editorial/ledger register as an OPT-IN LAYER on top of a base theme — apply [data-umg-voice="estate"] alongside [data-umg-theme="ummah"] to inherit it. It does NOT replace base-theme tokens; it adds a second, more editorial vocabulary a surface can choose into. Component classes that consume these tokens live in the companion file `pricing-language.css`. Adoption checklist + do/don'ts: see README § "The /pricing language (estate voice)". Extraction only — Slice 1 does NOT re-skin any product surface. Slice 2+ apply this voice page by page, fixing the gap-list items on /pricing itself first (see README) before cloning it elsewhere. OPEN CONFLICT — flagged for Tab, not resolved here: the Typography Grammar section above locks Amiri as the display face for EVERY property hero h1/h2 ("secondary faces layered ON TOP only, never instead"). /pricing uses Fraunces AS the primary hero display, not Amiri — that's the actual shipped, industry-praised page. This file codifies what shipped; --font-editorial-display only activates under the explicit data-umg-voice="estate" opt-in, so it does not silently override the Amiri rule ecosystem-wide. Reconciling the two rules (amend the Amiri-always-primary rule for this voice, vs. keep Amiri primary and demote Fraunces to secondary-emphasis-only on re-skins) is a Slice-2 decision — see the gap list. ───────────────────────────────────────────────────────────────────────── */ [data-umg-voice="estate"] { /* Fonts — Fraunces (display, PRIMARY within this voice) + Instrument Sans (body). Loaded via Bunny Fonts in pricing-language.css — not in the shared tokens.css @import block, since only estate-voice surfaces need them (same pattern as UmmahPlaces/Exchange/MT secondary faces). */ --font-editorial-display: 'Fraunces', Georgia, serif; --font-editorial-body: 'Instrument Sans', 'Inter', system-ui, sans-serif; /* Hairline rule system — ink-based translucent dividers for a newspaper/ledger register. Distinct from --border-subtle/default/ strong (opaque hex, sized for cards/inputs) — a --rule divider reads thinner and warmer against --cream than an opaque --stone border does. */ --rule: rgba(15, 31, 23, 0.16); --rule-soft: rgba(15, 31, 23, 0.085); /* Surface tint — a warmer, slightly deeper cream than --stone. Used for two-panel splits (order-form right rail) and gradient origins (the khatim price panel fades from this to transparent). */ --surface-tint: #F2EEE4; /* Void tint — a near-void well for media/video panels embedded in an otherwise light page. Distinct from the void theme's own --surface-raised (#0D1525) — this is darker and warmer, tuned to sit under a video element rather than behind void-theme UI chrome. */ --void-tint: #0D1117; /* Editorial corner radii — SHARP, ledger/newspaper register. A deliberate departure from the master --radius-md/lg soft-UI scale. Do not use editorial radii outside data-umg-voice="estate" surfaces; do not mix editorial-sharp and master-soft radii on the same page. */ --radius-editorial-sm: 2px; /* buttons, chips, inputs, tags, badges */ --radius-editorial-lg: 1.25rem; /* 20px — ledger cards, bordered panels */ /* Ink-opacity ladder — the voice's actual secondary/muted-text system. /pricing itself uses at least 8 distinct rgba(ink, X) opacities plus a second near-black base (rgba(6,11,24,X), from --void, on the ledger-row value color) for what reads as ~3 real emphasis tiers. This ladder is a deliberate NORMALIZATION down to 3 stops on --ink — it does not reuse the base theme's flat --text-secondary/--text-muted (those are solid hex, not a translucency ladder, and would silently replace this voice's actual look if used as a var() fallback). See README gap list for the un-normalized inventory. */ --ink-editorial-strong: rgba(15, 31, 23, 0.78); /* lede body, prominent secondary lines */ --ink-editorial: rgba(15, 31, 23, 0.58); /* captions, secondary CTA, asides */ --ink-editorial-faint: rgba(15, 31, 23, 0.46); /* tertiary labels, ledger row values */ } /* ───────────────────────────────────────────────────────────────────────── ACCESSIBLE CONTRAST HELPERS ───────────────────────────────────────────────────────────────────────── */ /* Forest on cream: #166534 on #FAF8F3 = 6.72:1 AA (strong pass; NOT AAA — corrected Jul 19, was overclaimed 7.2) */ /* Ink on cream: #0F1F17 on #FAF8F3 = 16.10:1 AAA (measured Jul 19; better than the old 14.8 claim) */ /* Gold on ink: #C8912E on #0F1F17 = 4.6:1 AA */ /* Cream on forest: #FAF8F3 on #166534 = 6.72:1 AA (corrected Jul 19) */ /* Minimum tap target: 44x44px (iOS/Android HIG) */ /* Minimum contrast for text: 4.5:1 AA (WCAG 2.1) */ /* Minimum contrast for UI components: 3:1 */ /* ───────────────────────────────────────────────────────────────────────── PRINT / EXPORT OVERRIDES ───────────────────────────────────────────────────────────────────────── */ @media print { :root { --forest: #166534; --cream: #FFFFFF; --ink: #000000; } } /* ───────────────────────────────────────────────────────────────────────── REDUCED MOTION ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } } /* Vendored from https://ummah.city/css/brand/tokens.css on 2026-08-26 (re-synced after the --void-success token landed). Re-sync: curl -s https://ummah.city/css/brand/tokens.css -o public/css/brand-tokens.css. The estate file is the source of truth; never edit here. */