/* Z World Shell — design tokens Single source of truth. Every colour, radius, space, shadow, z-index and timing used by shell.css lives here. Override any of these on :root (or on [data-z-shell]) from the host page; nothing else needs patching. RADIUS SPEC ----------- --z-radius 24px universal — windows, dock slab, modals, popovers --z-radius-inner 16px inner chrome — tiles, cards, list rows --z-radius-ctl 10px controls — menu items, buttons, inputs --z-radius-chip 8px smallest chrome — checkboxes, badges, ticks --z-radius-pill 999px pills only Nothing else. Do not introduce new radius values. */ :root { /* ---- Base palette ------------------------------------------------ */ --z-bg: #0d0617; --z-bg-deep: #06040c; --z-bg-raise: #111218; --z-bg-panel-a: rgba(20, 14, 36, 0.97); --z-bg-panel-b: rgba(10, 7, 20, 0.97); --z-bg-window: rgba(17, 18, 24, 0.88); --z-bg-inset: rgba(4, 6, 12, 0.70); --z-bg-scrim: rgba(6, 4, 12, 0.60); --z-violet-900: #4c1d95; --z-violet-700: #6d28d9; --z-violet-600: #7c3aed; --z-violet-500: #a855f7; --z-violet-300: #c4b5fd; --z-violet-200: #e9d5ff; --z-cyan-300: #7dd3fc; --z-cyan-400: #2de1ff; --z-text: #f8fafc; --z-text-2: #e8e8ea; --z-text-3: rgba(176, 198, 224, 0.68); --z-text-4: rgba(176, 198, 224, 0.50); --z-line: rgba(196, 181, 253, 0.16); --z-line-strong: rgba(196, 181, 253, 0.40); --z-line-hairline: rgba(255, 255, 255, 0.06); /* Traffic lights */ --z-tl-close: #ff5f57; --z-tl-min: #febc2e; --z-tl-max: #28c840; /* Z_HIS_BADGES_ARE_PURPLE_NOT_RED_2026-09-02 (Assistant A) HIS ROW, his words: "Homepage badges must be purple not red". It was #ff2d55, which is red. This file already has a house way of saying "make it purple" - --z-running and --z-suggest both point at the violet scale rather than naming a colour - so this follows that, and no new colour is invented. MEASURED FIRST: var(--z-badge) is used in exactly ONE place, .z-dock__badge in shell.css:383, so nothing else can change with it. REVERT THIS ALONE: put back --z-badge: #ff2d55; */ --z-badge: var(--z-violet-500); --z-running: var(--z-violet-500); /* ---- Suggestion accent (the old #41f4a7) ------------------------- * * Ships violet. Green only appears if the host opts in with * . #41f4a7 exists nowhere else. */ --z-suggest: var(--z-violet-300); --z-suggest-bg: rgba(196, 181, 253, 0.14); --z-suggest-border: rgba(196, 181, 253, 0.42); /* ---- App-tile artwork shell -------------------------------------- */ --z-tile-art: linear-gradient(155deg, #a06bf5 0%, #7b3fe4 46%, #4c1d95 100%); --z-tile-art-inner: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(196, 181, 253, 0.22); /* ---- Surfaces / gradients ---------------------------------------- */ --z-grad-dock: linear-gradient(104deg, rgba(34,22,60,0.80) 0%, rgba(16,10,30,0.72) 62%, rgba(8,5,16,0.90) 100%); --z-grad-panel: linear-gradient(180deg, var(--z-bg-panel-a), var(--z-bg-panel-b)); --z-grad-titlebar: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0)); --z-grad-hover: linear-gradient(90deg, rgba(45,225,255,0.16), rgba(196,181,253,0.16)); --z-grad-cta: linear-gradient(90deg, rgba(124,58,237,0.50), rgba(168,85,247,0.40)); /* ---- Radius (spec above) ----------------------------------------- */ --z-radius: 24px; --z-radius-inner: 16px; --z-radius-ctl: 10px; --z-radius-chip: 8px; --z-radius-pill: 999px; /* Icon art corner: 26% of the icon box, per size */ --z-radius-icon-lg: 10px; /* 38px art */ --z-radius-icon-md: 9px; /* 33px art */ --z-radius-icon-sm: 5px; /* 19px art */ /* ---- Spacing ----------------------------------------------------- */ --z-space-1: 2px; --z-space-2: 4px; --z-space-3: 6px; --z-space-4: 8px; --z-space-5: 10px; --z-space-6: 12px; --z-space-7: 16px; --z-space-8: 20px; --z-space-9: 28px; --z-space-10: 40px; /* ---- Sizes ------------------------------------------------------- */ --z-dock-slot: 40px; --z-dock-icon: 33px; --z-dock-gap: 9px; --z-dock-inset: -22px; /* slab bleeds off the right edge */ --z-dock-hidden: -96px; --z-hit: 44px; /* minimum touch target */ --z-tl: 13px; /* traffic light diameter */ --z-menubar-h: 39px; /* ---- Z_THE_SIZE_IS_IN_THE_PICTURES_NOW_2026-08-31 (Assistant C) -------- FOUNDER: "You can edit the biggest icon files so theyre all identical sizes, and then regenerate the smaller sizes from that. That way no code or script does resizing matchinng" - and, asked directly on 2026-08-31, "Make the smaller ones BIGGER by editing the core files". DONE. The fifteen big picture files were edited so the drawing inside each one is the same size, and the small copies were rebuilt from them. Nothing was shrunk: Mail's drawing grew about 25 per cent, Learn 27, Voice 18, Game 18, Office 16, Chat 15, and Calendar - already the biggest - was left untouched. Backup of all 283 files before the edit: core/swarm/evolve/_backups-claude/icons-before-normalise-20260831-102122 SO THE FIFTEEN NUMBERS THAT USED TO LIVE HERE ARE GONE, and so is the rule in shell.css that applied them. No code resizes a picture any more, which is exactly what he asked for. THE ONE HONEST GAP: Mail and Voice are wide flat drawings that already nearly fill their own square, so they could not grow the whole way. Mail ends about 14 per cent short of Calendar and Voice about 13. Closing that needs the artwork redrawn taller, not code. REVERT: the backup above puts every picture back, and shell.css names the rule to restore. */ /* ---- Shadows ----------------------------------------------------- */ --z-shadow-window: 0 24px 80px rgba(10, 8, 18, 0.45); --z-shadow-panel: 0 22px 50px rgba(0, 0, 0, 0.62); --z-shadow-pop: 0 12px 30px rgba(0, 0, 0, 0.50); --z-shadow-dock: 0 0 0 1px rgba(255,255,255,0.05), -14px 14px 36px rgba(0,0,0,0.55); --z-shadow-icon: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.55)); --z-glow-halo-lo: 0 0 12px rgba(140,100,255,0.42), 0 0 22px rgba(140,100,255,0.22); --z-glow-halo-hi: 0 0 22px rgba(140,100,255,0.62), 0 0 44px rgba(140,100,255,0.34); /* ---- Z-index ladder ---------------------------------------------- */ --z-layer-desktop: 1; --z-layer-header: 40; /* Z_DOCK_SITS_ABOVE_APPS_2026-08-31 (Assistant C, founder-direct). FOUNDER: "keep the dock ONTOP of the apps (z-index) always". MEASURED: the dock was 46 and windows are 56 and can climb to 71, so every window sat OVER the dock - the opposite of his rule. 72 is the first free rung above the window ceiling and still below everything that must cover the dock: on-top windows, the menu bar, menus, scrims, popups and prompts. Nothing else on the ladder moves. REVERT: put --z-layer-dock back to 46. */ --z-layer-dock: 72; --z-layer-window: 56; /* + stack offset, max +15 */ --z-layer-ontop: 74; --z-layer-menubar: 80; --z-layer-menu: 84; --z-layer-submenu: 86; /* Z_A_SLIDE_OVER_PANEL_HAS_ITS_OWN_RUNG_2026-09-01 (Assistant A). Founder: "the chat slideout goes UNDER the z-index of the top page. i TOLD u to use the zindex fucking leedger when building". The This-chat panel had a raw number and no rung here, which is exactly what the ledger exists to stop. A slide-over panel covers the page and everything an app draws on it, including the app's own menu bar, and sits below a modal's dim. */ --z-layer-slideover: 98; --z-layer-scrim: 100; --z-layer-modal: 110; --z-layer-prompt: 142; /* ===================================================================== THE ONE Z-INDEX LEDGER FOR THE WHOLE WEBSITE Z_ONE_LAYER_LEDGER_2026-08-31 (written by Assistant B on his order) ===================================================================== FOUNDER, 2026-08-31, word for word: "For the website, make sure z index things have ONE ledger where they're all written ... Should contain everything from the pages, apps, windows, menus, keyboards, settings, etc. The layers should be known & understood, never butting heads or breakng the rule, and z indexes should never randomly be set. EVERY element gets one and EVERY elment gets a placing for z index, so its never randomly assigned." THE RULE, FOR EVERY AGENT AND EVERY FILE: 1. No element gets a raw z-index number ever again. It uses a token below. 2. If a thing has no token yet, its token is ADDED HERE FIRST, in the right place on the ladder, and only then used. 3. Nothing is squeezed between two rungs with a decimal or a +1. If two things need to be apart, the ladder gets a new rung here. 4. Read this before changing anything visual. It is the whole picture. WHY THERE ARE TWO FLOORS, AND WHY THAT IS NOT A CONTRADICTION. Layers only compete inside the same stacking context. The page lives inside #app, and the shell furniture lives inside #z-shell, which are siblings. A number on the page floor can never beat a number on the shell floor, no matter how big it is. That is why settings once lost to the dock at 72. So there are two ladders, and the floor is chosen first, the rung second. ---- FLOOR ONE: things drawn inside the page (#app) ------------------- --z-layer-desktop 1 the page itself --z-layer-header 40 a page's own top bar --z-layer-window 56 an app window (+ its stack offset, max +15) --z-layer-dock 72 the dock, above every app window --z-layer-ontop 74 a window kept on top --z-layer-menubar 80 an app's menu bar --z-layer-menu 84 an open menu --z-layer-submenu 86 a menu inside a menu --z-layer-slideover 98 a panel that slides over the whole page --z-layer-scrim 100 the dim behind a modal --z-layer-modal 110 a modal --z-layer-prompt 142 a prompt on top of a modal ---- FLOOR TWO: the shell overlay, above the whole page -------------- Everything here sits above every page. The numbers are large on purpose: they were chosen long ago to clear anything a page could ever use. */ --z-shell-root: 2147481500; /* #z-shell itself, and the dock inside it */ --z-shell-page-over: 2147481600; /* a page lifted over the shell on purpose */ --z-shell-zdesign: 2147482000; /* the two zDesign menus */ --z-shell-keyboard-tray: 2147482700; /* the keyboard button and the gamepad */ --z-shell-keyboard: 2147482800; /* the on-screen keyboard itself */ --z-shell-settings: 2147482900; /* settings - ABOVE the dock and the keyboard and the gamepad tabs, on his direct order of 2026-08-31 */ --z-shell-launcher: 2147482950; /* the open / add to dock sheet */ --z-shell-itemmenu: 2147482990; /* the catcher behind a dock item menu */ --z-shell-itemmenu-top: 2147482991; /* a dock item's own right-click menu */ /* ---- WHAT IS STILL UNPLACED, so nobody guesses -------------------- Nothing on this list may be given a number until it is added above. Everything measured on 2026-08-31 is placed. When a new part appears - a watch face, a tv screen, an ar layer - it gets its rung here first. */ /* ---- Motion ------------------------------------------------------ */ --z-dur-fast: 120ms; --z-dur: 180ms; --z-dur-slow: 240ms; --z-dur-genie-out: 300ms; --z-dur-genie-in: 340ms; --z-ease: cubic-bezier(0.32, 0.72, 0, 1); --z-ease-out: cubic-bezier(0.25, 1, 0.40, 1); --z-ease-in: cubic-bezier(0.50, 0, 0.75, 0); --z-halo-cycle: 3.2s; /* ---- Type -------------------------------------------------------- */ --z-font: "Z Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --z-font-mono: "Z JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --z-fs-body: 15px; --z-fs-ui: 12.5px; --z-fs-small: 11px; --z-fs-mono: 10.5px; } /* Opt-in green. Off by default — #41f4a7 does not ship unless this is set. */ [data-z-flag-green="1"] { --z-suggest: #41f4a7; --z-suggest-bg: rgba(65, 244, 167, 0.16); --z-suggest-border: rgba(65, 244, 167, 0.42); } @media (prefers-reduced-motion: reduce) { :root { --z-dur-fast: 1ms; --z-dur: 1ms; --z-dur-slow: 1ms; --z-dur-genie-out: 1ms; --z-dur-genie-in: 1ms; } }