/* ══════════════════════════════════════════════════════════ MIMO · Design Tokens ---------------------------------------------------------- Rebuilt 9 Sep around the FINAL LOGO and Muhsin's ruling that the brand colour is purple. WHAT THE LOGO GIVES US brand/logo/mimo-logo.svg is a wordmark: soft geometric lowercase "mimo" in warm bone #E4DFD3 on pure black. Two values, no third. It is round, heavy and friendly, and it is deliberately quiet about colour, which is what lets the purple be the brand rather than fighting the mark. So the system is three things: black the mark's own ground. Depth, weight, night. cream #E4DFD3, the mark's own ink. Type on anything dark. purple the brand. Identity, action, structure, focus. This RETIRES the four-tile system from 8 Sep. The tiles are gone with the symbol they came from, so red, amber, blue and green no longer carry brand meaning. Three status colours survive, doing semantic work only. See below. PURPLE IS THE THEME, NOT A HIGHLIGHT Earlier versions used purple structurally and gave actions to a second hue. That is over. Purple now does identity AND action, which is only safe because the ramp goes deep enough to carry cream type. Warmth comes from the bone cream and from depth, not from a second colour. EVERY PAIR BELOW IS MEASURED, NOT ESTIMATED Ratios are WCAG 2.1 against --mm-ground unless stated. Nothing under 4.5:1 is allowed to carry body text. ══════════════════════════════════════════════════════════ */ :root { /* ── Purple, the brand ────────────────────────────────── 500 is the purple you would name. 600 is the one that does the work, because it is the lightest step that carries white type at AA with room to spare. */ --mm-purple-50: #F6F2FD; --mm-purple-100: #EDE4FB; --mm-purple-200: #DCC9F6; --mm-purple-300: #C3A3EE; --mm-purple-400: #A678E2; --mm-purple-500: #8B4FD0; /* the brand purple. 4.7:1 as text */ --mm-purple-600: #7433BC; /* actions. white 7.1:1, cream 5.4:1 */ --mm-purple-700: #5E2699; /* pressed. white 9.5:1 */ --mm-purple-800: #451C6F; --mm-purple-900: #2E1249; --mm-purple-950: #1C0B2E; --mm-purple: #7433BC; /* alias: when you just mean purple */ /* ── Black and cream, straight off the mark ───────────── --mm-black is RESERVED for the logo plate and the app icon. Interface text uses --mm-ink, which is a purple black: pure #000 on a purple ground reads as a hole. */ --mm-black: #000000; --mm-cream: #E4DFD3; /* the wordmark's own bone. 14.1:1 on ink */ /* ── Ground and surface ───────────────────────────────── Every neutral is tinted purple. There is no grey in this system, because a true grey next to purple looks broken. */ --mm-ground: #F8F5FD; --mm-ground-deep: #F0EAFA; --mm-surface: #FFFFFF; --mm-surface-2: #FCFAFF; --mm-void: #170E22; /* dark surfaces inside the product */ /* ── Ink ────────────────────────────────────────────────*/ --mm-ink: #170E22; /* 17.4:1 */ --mm-ink-soft: #3B2A4E; /* 10.4:1 */ --mm-muted: #6B5B7B; /* 5.7:1, the floor for small text */ --mm-faint: #9485A2; /* 3.2:1. Icons and disabled state, NEVER text */ --mm-line: #EAE1F6; --mm-line-2: #DACEEC; /* ── Status: three colours, one job each ──────────────── These are NOT brand colours and must never be used for decoration, only to say what state something is in. Blue is gone: purple already means "information" here. */ --mm-amber: #F0A02A; /* waiting, in progress, money moving */ --mm-green: #12A05A; /* settled, confirmed, paid */ --mm-red: #E04B4E; /* attention, a problem, a stop */ /* tints, for the ground behind a small label */ --mm-amber-soft: #FEF2DE; --mm-green-soft: #DEF5E9; --mm-red-soft: #FCE7E7; /* the readable versions. A status word is set in these, never in the fill colour above. All measured 5.7:1+ */ --mm-amber-ink: #8A5300; --mm-green-ink: #0A7040; --mm-red-ink: #B32B2E; /* ── Action ───────────────────────────────────────────── One primary action, always purple 600, always white or cream type. Nothing else in the product is this colour, which is what makes it unambiguous. */ --mm-action: #7433BC; --mm-action-hover: #5E2699; --mm-action-ink: #FFFFFF; --mm-action-soft: #EDE4FB; --mm-focus: #8B4FD0; /* ── Gradients ────────────────────────────────────────── Never a flat purple on anything large. A two stop ramp is what keeps an all-purple product from reading as enterprise software. */ --mm-grad-brand: linear-gradient(135deg, #8B4FD0 0%, #5E2699 100%); --mm-grad-deep: linear-gradient(160deg, #2E1249 0%, #170E22 100%); --mm-grad-plate: linear-gradient(160deg, #1C0B2E 0%, #000000 100%); --mm-grad-soft: linear-gradient(150deg, #FCFAFF 0%, #F2ECFB 100%); --mm-grad-glow: radial-gradient(60% 80% at 50% 0%, rgba(139,79,208,.22) 0%, rgba(139,79,208,0) 70%); /* ── Type ─────────────────────────────────────────────── No serif anywhere. The mark is a round geometric sans, so the closest Google face is actually Outfit; DM Sans is kept because it is already on every surface and the deadline is this week. If the type ever gets revisited, Outfit is the one that matches the letterforms. */ --mm-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --mm-mono: "DM Mono", ui-monospace, "SF Mono", monospace; --mm-display: var(--mm-sans); --mm-ls-xl: -.04em; --mm-ls-lg: -.032em; --mm-ls-md: -.024em; /* ── Radius ───────────────────────────────────────────── The mark's bowls are near circular and its stems are fully rounded, so the interface leans generous. Nothing in the product should have a sharp corner. */ --mm-r-xs: 8px; --mm-r-sm: 12px; --mm-r-md: 18px; --mm-r-lg: 24px; --mm-r-xl: 32px; --mm-r-pill: 999px; /* ── Elevation ────────────────────────────────────────── Shadows are purple, never black. A neutral shadow on a tinted ground is the fastest way to look unfinished. */ --mm-sh-sm: 0 1px 2px rgba(46, 18, 73, .06); --mm-sh-md: 0 2px 10px rgba(46, 18, 73, .08), 0 1px 2px rgba(46, 18, 73, .05); --mm-sh-lg: 0 16px 44px rgba(46, 18, 73, .13), 0 3px 8px rgba(46, 18, 73, .06); --mm-sh-xl: 0 32px 80px rgba(46, 18, 73, .20), 0 6px 16px rgba(46, 18, 73, .08); --mm-sh-action: 0 4px 16px rgba(116, 51, 188, .32); /* ── Motion ─────────────────────────────────────────────*/ --mm-fast: 140ms; --mm-norm: 220ms; --mm-slow: 380ms; --mm-ease: cubic-bezier(.22, 1, .36, 1); --mm-spring: cubic-bezier(.34, 1.56, .64, 1); --mm-exit: cubic-bezier(.4, 0, 1, 1); /* ── Layout ─────────────────────────────────────────────*/ --mm-app-max: 480px; --mm-page-max: 1160px; --mm-read-max: 68ch; /* line length cap. The team build runs past 100 */ /* -- LEGACY ALIASES, delete once the surfaces are ported -- The 8 Sep system was a plum ground with four tile accents. These map the old names onto the purple system so nothing renders broken. Do not use them in new work. */ --mm-plum-950: var(--mm-purple-950); --mm-plum-900: var(--mm-purple-950); --mm-plum-800: var(--mm-purple-900); --mm-plum: var(--mm-purple-900); --mm-plum-600: var(--mm-purple-700); --mm-plum-500: var(--mm-purple-600); --mm-plum-400: var(--mm-purple-400); --mm-plum-300: var(--mm-purple-300); --mm-plum-200: var(--mm-purple-200); --mm-plum-100: var(--mm-purple-100); --mm-plum-50: var(--mm-purple-50); --mm-blue: var(--mm-purple-600); --mm-blue-soft: var(--mm-purple-100); --mm-blue-ink: var(--mm-purple-700); --mm-grad-plum: var(--mm-grad-deep); --mm-grad-tiles: var(--mm-grad-brand); --mm-grad-warm: var(--mm-grad-brand); } /* -- Using the mark -────────────────────────────────────── brand/logo/mimo-logo.svg the supplied lockup, cream on black. Untouched. App icon, share cards, print, anywhere it stands alone. brand/logo/mimo-wordmark.svg the letters only, filled with currentColor. Use this in the interface and set the colour: cream on dark, purple 600 on light. Clear space is one stem width on every side. Minimum width is 72px, below which the counters in the m's close up. Never outline it, never put it on a mid purple, never recolour the letters to anything but cream, purple 600 or ink. ──────────────────────────────────────────────────────── */ /* ── Voice reference, not code ──────────────────────────── mimo speaks like a very good friend who happens to run events. Short sentences. She says "I'll", never "the system will". Never "platform". No "Certainly!". Prices in AED. NO EM DASHES. Anywhere, ever. The name: mimo is Portuguese and Spanish for a treat, or a fuss made over someone. That is the product in one word. ──────────────────────────────────────────────────────── */