/* THE ONE FILE THAT DECIDES WHAT THE APP LOOKS LIKE. Every colour, radius, shadow, spacing step and stacking layer the panel uses lives here, so "the sidebar is too narrow" or "the pink is too hot" is one line in a short file rather than a search through six thousand lines of CSS. Loaded FIRST, before every other stylesheet, because the rest reference it. Rule for anything added later: if a value appears in more than one place, or somebody might reasonably want it different, it belongs in here with a name. A one-off value used once is fine left where it is. */ :root { /* ---- Surfaces ------------------------------------------------------- DEEPER, AND QUIETER BETWEEN THE LAYERS. Simon, with a mockup: "Adjust the colour theme of the dark parts of the site so it's a little bit more like this, as it just feels like a bit of a nicer design." What the mockup does differently is not a hue -- it is neutral grey the same as this -- it is CONTRAST. The old set ran #0d0d0e behind #1a1a1c cards inside #2a2a2e borders: thirteen points of separation at every step, which reads as a stack of grey boxes you can count. The mockup drops the whole stack nearer black and cuts the steps to about half that, so a field is a shape you notice at its edge rather than a lighter rectangle sitting on top of a darker one. The pink is doing the only shouting, which is the point of having one brand colour. Everything here is a step darker and the gaps between the steps are smaller; the text is untouched, so contrast against the words goes UP rather than down. Only this block changed -- nothing in the app names a surface colour of its own. */ /* ...AND THEY LEAN BLUE. Simon, with the mockup: "Let's make it so the lighter boxes in our UI design are slightly tinted blue, like here." ...AND THEY ARE NEUTRAL. A blue lean was tried here and taken out again the same evening. Simon: "Let's make it so the lighter boxes in our UI design are slightly tinted blue", then "Decrease the amount of blue in the design. It's far too blue now", then "Remove the blue tint from the interface." Two passes, eleven points of red-to-blue spread and then five, and the answer both times was less. So: grey. The one or two points of blue left in these are the same incidental cast the palette has always had, not a tint -- the theory that a neutral grey reads green beside this much crimson may be true in the abstract and it is not what he wants to look at. Recorded here because a cool lean is a thing somebody will propose again. */ --bg: #08080a; /* the window behind everything */ --card: #111113; /* a panel, a card, a field */ --card-hover: #19191c; --surface-sunk: #0d0d0f; /* grouped sections: darker, so cards lift off */ --surface-deep: #0a0a0b; /* the deepest wells — viewers, canvases */ --border: #1b1b1e; --border-dash: #28282c; /* an empty slot, waiting for something */ /* ---- Text ----------------------------------------------------------- */ --text: #e9e9ec; --text-dim: #9a9aa2; /* labels, secondary lines */ --text-faint: #66666e; /* hints, placeholders, disabled */ --text-bright: #ffffff; /* ---- Accent and status ---------------------------------------------- */ --accent: #E50A4E; /* Covert crimson. The one brand colour. */ /* The same colour as three numbers, for the dozens of places that want it at some opacity. `rgba(var(--accent-rgb), .12)` rather than the digits written out again — those copies are what made changing the brand a fifty-file job instead of this one line. */ --accent-rgb: 229, 10, 78; --accent-soft: rgba(var(--accent-rgb), 0.14); --accent-glow: rgba(var(--accent-rgb), .6); --blue: #5aa2ff; --green: #6fd08c; --red: #ff6b6b; --danger: #c0392b; /* destructive buttons, hard failures */ --warn: #ffd35a; /* a caution that is not yet a failure */ --warn-deep: #f5b43c; --warn-bg: #17120a; --cyan: #22d3ee; /* selections and live markers on the canvas */ /* ---- Scrims --------------------------------------------------------- Overlays behind modals and over thumbnails. Named by weight, not by the thing they happen to sit under, so a new modal picks one instead of inventing a thirteenth shade of black. */ --scrim-light: rgba(0, 0, 0, .45); --scrim: rgba(0, 0, 0, .55); --scrim-mid: rgba(0, 0, 0, .6); --scrim-heavy: rgba(0, 0, 0, .7); --chrome-blur-bg: rgba(8, 8, 10, .94); /* floating bars over content */ /* ---- Marks ---------------------------------------------------------- THE SPARKLE, ONCE. Simon: "adjust the sparkle graphic that's next to Generate so it matches the same sparkle graphic that we use for the Generate buttons in the node space." That one is drawn inline in js/nleedit.js (GEN_ICO) because it sits inside a button the timeline builds as a string. CSS cannot read a JS constant, so the path lives here too -- and tests/generate-sparkle.mjs compares the two character for character, because two copies of a path is exactly the kind of thing that drifts the next time one of them is nudged. Used as a MASK rather than a background so it takes currentColor: the same mark reads white on the crimson Generate and picks up whatever colour a button beside it happens to be. */ --spark-ico: url('data:image/svg+xml;utf8,'); /* ---- Shape ---------------------------------------------------------- */ --radius: 3px; --radius-sm: 3px; --radius-lg: 4px; --radius-pill: 3px; /* THE CONTROLS' OWN CORNER. Simon: "make it so the boxes where you choose the dimensions, resolution, etc., are much less rounded." Everything you choose a value in -- the field pills, the toolbar pills, the tier tabs -- wears this. Then, of the whole app: "fewer rounded boxes. They can have a slight rounding, but nowhere near as much as they currently do." So every radius above -- and every literal radius in the stylesheets and the scripts' own style blocks -- is capped at 3px; only 50% circles (ports, dots, thumbs) keep their shape. The pill token is kept for its name and is 3px too. */ --radius-ctl: 3px; /* ---- Spacing -------------------------------------------------------- A step scale rather than free px. Most gaps in the panel are already one of these; new ones should be too. */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; /* ---- Inline controls ------------------------------------------------ Simon, with a picture of one FILE TYPE select seven hundred pixels wide: "the spacing of all buttons makes sense and has some consistency. Look how wide this file type box is. It makes no sense." It made no sense because two families of control grew up side by side and never agreed on anything. The image toolbar's pills (count, ratio, resolution) were 36px tall with a 10px radius; the field pills under them were ~33px with a full radius, and set to `flex: 1 1 calc(50% - 3px)` -- grow enabled. In a 380px panel that reads as a tidy two-up grid, which is what it was drawn in. In the docked desktop layout the make column is three times that, the toolbar took its content width off the front of the row, and the one field left over grew into everything remaining. So the row's geometry is named here, once, and both families read it. A control is this tall, rows are this far apart, and NOTHING in a control row grows past --ctl-max: past about 260px a labelled select is not more usable, only more surprising. The two-up grid at panel width survives because the basis is still 50% -- the cap only bites once 50% is absurd. */ --ctl-h: 36px; --ctl-gap: 6px; --ctl-max: 260px; /* ---- Type ----------------------------------------------------------- */ /* Simon: "change font to montserrat instead of where figtree is used." The @font-face rules that load it are in css/style/01-base.css. */ --font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fs-micro: 10px; --fs-small: 11px; --fs-body: 12px; --fs-mid: 13px; --fs-large: 15px; --fs-title: 18px; /* ---- Stacking ------------------------------------------------------- The panel had twenty-nine different z-index numbers and no way to tell which was meant to be above which. These are the layers those numbers were reaching for; the numbers themselves are unchanged, so nothing moves in front of or behind anything it did not already. */ --z-base: 1; /* raised inside a card */ --z-overlay: 3; /* badges and hover chrome on a thumbnail */ --z-sticky: 40; /* tab bars and headers that pin */ --z-rail: 100; /* the app rail down the side */ --z-drawer: 200; /* settings, reference library, side drawers */ --z-menu: 300; /* dropdowns and context menus */ --z-modal: 900; /* trim window, image editor, full preview */ --z-toast: 950; /* the thing that must be readable over a modal */ /* ---- Motion ---------------------------------------------------------- Two durations. Anything slower than `slow` reads as the app hanging. */ --t-quick: .12s; --t-slow: .22s; }