/** * 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) * arbitrary blues not in this file */ /* ───────────────────────────────────────────────────────────────────────── FONTS — rebuild-aug11 (ummahmediagroup.com Build A) self-hosts its face set instead of the master system's Bunny-CDN @import (see fonts.css in this same css/ directory: Fraunces 400/500/600, Instrument Sans variable, Amiri 400 for the Bismillah line only). Outfit and Noto Naskh Arabic are not used on this page, so their imports are dropped rather than carried as dead weight. This keeps the investor-grade page at zero third-party network requests, Bunny Fonts included — a stricter bar than the org default, not a deviation from the no-Google rule. ───────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────── 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). Added Jul 19 (palette conferral). */ --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 */ /* ─── 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 (Jul 19 execution conferral) — 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); } /* ───────────────────────────────────────────────────────────────────────── ESTATE VOICE — additive tokens extracted from ummahpass.io/pricing (THE ONE-MOVE, Slice 1 — Jul 19 2026, card sdXSWWoP) 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; } }