/* ========================================================================== RESTAGE SKIN — token overrides only. No selectors, no components, no layout. ========================================================================== WHAT THIS IS. The Branch/Trellis skin restated in the Restage language, purely as token values. It loads after tokens.css and tokens-v2.css and redefines names those two already own. project.css, style.css, shell.css and client-v2.css are not touched and do not need to be: between them they make 4817 var() references, and every one reads whatever lands here. SCOPED TO [data-skin="restage"] so the old skin still exists. A rebrand is judged by comparison, and a comparison you cannot make in one click is a comparison nobody makes. Drop the attribute and the app is exactly as it was. SOURCE OF TRUTH, in this order: 1. website/restage/css/restage.css — the live site. Boek, 2026-07-27: "de waardes uit dit document zijn actueler". 2. brand-system/restage.html — for DARK ONLY. The live site is light-only; it has no dark theme to copy, and the styleguide is the only place the dark member of this identity is written down. Values are read from those files, never sampled off a screenshot: #F6F5F2 read off a PNG is close, wrong, and forks the two systems on day one. THE BRIEF (Boek, 2026-07-27): drop every drop shadow, gradient and highlight; 8px corners; blue highlights become black. Read as a shop, not an app. WHERE THE BRIEF AND THE LIVE SITE DISAGREE, and both are flagged in place below rather than quietly settled: THE ACCENT IS TERRACOTTA, NOT BLACK. restage.css:20 sets --accent:#D16142. The black in the screenshots is --btn-dark, the dark BUTTON — a different token doing a different job. Both are honoured here: accent is terracotta, dark buttons are near-black. One line flips it. THE PILL SURVIVES. restage.css:44 states the corner rule and its single exception in its own words: "every rectangle on the site is 8px. The only exception is --r-pill, which is a shape, not a corner." So --radius-pill stays 999px. This is the exact thing the brief was unsure about, and it is one line either way. AND ONE THING NEITHER SOURCE SAYS, which is not optional: REMOVING SHADOW MEANS SWITCHING HAIRLINES BACK ON. tokens.css sets --line: transparent with "borders retired" written beside it. That holds today only because every panel and popup is separated from its background by a shadow instead. Remove the shadows and leave --line transparent and the interface does not go flat, it dissolves: white panels on near-white paper with no edge at all. So --line becomes a real hairline, at the Restage value. The website made the same call — the rules beside "Armchairs" and under "Endless options" are hairlines, on a page carrying no shadow anywhere. ========================================================================== */ :root[data-skin="restage"] { /* ---- Surfaces -------------------------------------------------------- restage.css: --paper / --panel / --inset. The platform's three map one to one; the rest of its background vocabulary is derived from them. */ --bg-app: #F1F1F1; --bg-primary: #F1F1F1; --bg-page: #FFFFFF; --bg-panel: #FFFFFF; --bg-tertiary: #FFFFFF; --bg-inset: #EBEBEB; --bg-secondary: #EBEBEB; /* The row tray (restage-rows.css §10b C). A fourth surface, between the page and a phase panel, so a product reads as one container without competing with the white it holds. Boek, 2026-07-27, on the first attempt at #F6F5F2 — the exact midpoint: "de kleur mag ook donkerder, of in ieder geval meer hetzelfde als de achtergrondkleur." So it is pulled back to roughly a quarter of the way from the page to the panel rather than half: present, not announced. page #ECEAE6 --bg-inset (style.css:31 paints the body with it) TRAY #F1EFEC <- here panel #FFFFFF --bg-panel A literal value rather than a color-mix(): with dark mode gone there is no second theme for it to adapt to, and a number you can read is worth more than an expression you have to evaluate. */ --bg-tray: #F7F7F7; /* ---- Ink -------------------------------------------------------------- */ --text-primary: #1D1D1D; /* --ink */ --text-secondary: #5C5C5C; /* --ink-2 */ --text-muted: #5C5C5C; --text-faint: #8E8E8E; /* --ink-faint */ --color-black: #121212; /* --dark */ --color-white: #FFFFFF; /* ---- Hairlines -------------------------------------------------------- */ /* restage.css --hair. See the note above: this carries every separation that shadow used to carry. */ --line: rgba(28, 28, 28, .07); --border-color: rgba(28, 28, 28, .07); --border-color-light: rgba(28, 28, 28, .05); --border-color-strong: rgba(28, 28, 28, .14); /* ---- Accent ----------------------------------------------------------- BLACK, decided by Boek on 2026-07-27 after seeing terracotta in place: "er is ook nog een terracotta highlight kleur, dat moet zwart worden". This deliberately departs from restage.css:20, which sets --accent:#D16142. The site keeps terracotta; the app does not. That is a real fork and it should be a decision rather than a drift, so: on the marketing site the accent is a colour you look at, on the app it is a colour you click, and the app already carries plenty of its own colour in status. Restore terracotta by putting #D16142 / #B0492C / #FFFFFF back here. Warm near-black (#141210), not #000 — Restage's --dark. Pure black on warm paper reads as a hole punched through the page. */ --accent: #121212; --accent-ink: #121212; /* accent used as TEXT */ --accent-mark: #121212; --on-accent: #F5F5F5; /* --dark-on */ --accent-wash: rgba(18, 18, 18, .07); --color-primary: #121212; --color-primary-dark: #000000; /* The blue that was never the accent: the generator button and the loose "accent blue". Same destination now. */ --color-accent-blue: #121212; --btn-generator-bg: #121212; --btn-generator-hover: #282828; /* Focus must survive without a glow: a ring at full ink, no halo. */ --focus-ring: #121212; --focus-halo: none; /* ---- Radius: 12px, one corner everywhere ------------------------------ restage.css --r is 8. Boek, 2026-07-27: "kan je alle ronde hoeken over de hele site vergroten naar 12?" — so this is a deliberate fork from the site, the same kind as the accent above, and it belongs in one place rather than as a scattering of local overrides. Every one of these is read by the component CSS through var(), so this block is the whole change. It also does real work for the phases: with the gap between them at 0 (section 9b) the only thing marking where one ends and the next begins is the notch their rounded corners leave. At 8px that notch is small enough to close up on a high-DPI screen; at 12 it is a shape you can see. */ /* ONE CORNER, AND NOW LITERALLY ONE VALUE. 6px (Boek 2026-07-28, after seeing both: 12 -> 6 -> 12 -> 6 in one afternoon). Those eight tokens exist because eight stylesheets ask for different names, not because the corner has eight values — so they alias onto --rs-radius and the decision lives in exactly one place. Three round trips were three eight-line edits; the next one is a single number, which is what a system is for. "One corner" was already the rule in words (restage.css:43 writes it out); this is the rule expressed in the file instead of repeated in it. --radius-pill stays 999 because it is a SHAPE and not a corner — the same exception restage.css writes out in words — and --radius-none stays 0. THE LOADER STILL DOES NOT FOLLOW THIS, even though it currently matches. It is a 14px box that Boek asked to be "een vierkant met 6px corner radius" — an instruction about that object, not about the system. At 12px the same radius makes a 14px box a circle, which is the shape it was asked to stop being, so it holds its own 6 in restage-rows.css §17. The two agreeing today is a coincidence worth not collapsing. */ --rs-radius: 12px; /* <- the corner. Change it HERE and nowhere else. */ --radius-none: 0; --radius-sm: var(--rs-radius); --radius-md: var(--rs-radius); --radius-lg: var(--rs-radius); --radius-soft: var(--rs-radius); --radius-field: var(--rs-radius); --radius-sheet: var(--rs-radius); --radius-media: var(--rs-radius); --app-radius: var(--rs-radius); /* THE PILL GOES TOO. restage.css:44 keeps --r-pill as "a shape, not a corner", and that holds for a marketing page whose only pill is a chat button. In the app the pill IS the app-y look — the phase button, the status chips, the nav segments — and removing it is the brief's actual objective: "het verwijderen van wat de huidige layout uniek maakt ... die ronde, speelse knoppen ... om meer als een webshop te voelen". One lever reaches all of it: project.css:10 defines --btn-radius: var(--radius-pill) and 50 declarations read that. BACK TO 999px, 2026-07-27, and this is the third position on it — worth recording rather than quietly flipping a number for the third time. 8px : the brief, "de ronde speelse knoppen moeten weg". 12px : "alle ronde hoeken naar 12". 999px: "ik denk dat eigenlijk alle knoppen pillen moeten worden, dus ook die in de menubalk bovenin." What changed between the second and the third is that the PANELS became the thing carrying the corner language — trays, phases and cards all at 12 — which leaves the pill free to mean something again: a pill is a control, a 12px rectangle is a surface. That is a distinction the interface can use, where "everything is 8" and "everything is 12" were only ever one. IT REACHES MORE THAN BUTTONS. 50 declarations read --btn-radius, and the status chips and nav segments read this token directly — so those become pills too. That is consistent with the instruction (the top bar was named specifically) but it is wider than the word "knoppen" suggests, so it should be looked at rather than assumed. */ --radius-pill: 999px; /* ---- Shadows: gone ---------------------------------------------------- This goes further than the live site, which still defines --shadow-btn and --shadow-accent. It is the brief's step one, and it is the step that decides whether the app can carry a flat skin at all — so it is worth seeing at full strength before anything is softened back in. The insets go too: a well pressed into a field is the same depth trick as a card lifted off the page. */ --shadow-sm: none; --shadow-md: none; --shadow-raised: none; --shadow-floating: none; --shadow-glass: none; --shadow-rail: none; --shadow-soft: none; --shadow-accent: none; --shadow-accent-press: none; --shadow-danger: none; --shadow-danger-press: none; --shadow-btn: none; --shadow-btn-press: none; --shadow-field: none; --image-inset-shadow: none; --toggle-knob-shadow: none; --folder-shadow: none; /* a filter, so it needs its own no-op */ /* ---- Gradients: flattened --------------------------------------------- Each becomes the colour its gradient was travelling towards, so whatever sits on top keeps the contrast it was drawn against. */ --accent-grad: #121212; --btn-grad: #FFFFFF; --danger-grad: #C0392B; --folder-fill-0: #FFFFFF; --folder-fill-1: #FFFFFF; /* ---- Glass: the simple recipe ----------------------------------------- restage.css:38, in Boek's own words on 27 July: "one flat translucent fill + blur. No gradient, no rim, no bevel." So the BLUR STAYS — it is the surface, not a highlight. Dropping it would leave translucency with nothing behind it, which reads as a mistake rather than as flat. */ --bg-glass: rgba(255, 255, 255, .55); /* --glass-lite */ --panel-glass: rgba(255, 255, 255, .55); --glass-bg: rgba(255, 255, 255, .55); --glass-blur: blur(26px) saturate(1.5); /* The rim, the bevel and the inner strokes are one device: a light edge faking a raised surface. That is a highlight, and it goes. */ --glass-rim: transparent; --glass-bevel: none; --glass-inset: none; --glass-border: rgba(28, 28, 28, .07); --hover-glass: rgba(18, 18, 18, .045); /* THE FOLDER PANE'S EDGE — the token that carries the whole flat skin. It is --folder-strk-*, not --folder-stroke-*. I wrote the second, which exists nowhere, so those two lines did nothing and the panes kept the old WHITE rim: invisible on light paper. With the drop shadow gone as well, an empty step had no edge at all and dissolved into the background — which is exactly what Boek saw on the Step 2 and Download panes. Deliberately DARKER than --line (12% against 7%). A rule under a line of text only has to be noticed; the outline of a pane has to hold a shape against a background 4% away from its own fill, with nothing else to help it. The website never faces this — its cards are photographs, which bring their own edge. */ --folder-strk-0: rgba(28, 28, 28, .12); --folder-strk-1: rgba(28, 28, 28, .12); /* Modal scrims keep their dimming and lose their blur: a blurred backdrop is depth, and depth is what is being removed. */ --veil-blur: none; --overlay-blur: none; --veil-bg: rgba(28, 28, 28, .32); --bg-scrim: rgba(28, 28, 28, .32); /* ---- Status ----------------------------------------------------------- Node and approval states are product vocabulary, not brand: they keep their meanings and only take a Restage hue where one exists. Restage names three — success, danger, warn — so READY and REVIEW, which were blue, have no hue to move to and become ink. That is the brief's "blue goes black" applied where it actually lands. EVERY COLOUR IS SET WITH ITS WASH. Changing --color-status-ready alone leaves dark text sitting on the pale blue --bg-status-ready, which is worse than either skin on its own. The washes are the status colour at low alpha rather than hand-mixed pastels, so they sit on warm paper instead of fighting it. */ --color-status-approved: #2D8056; --color-status-complete: #2D8056; --color-status-error: #C0392B; --color-status-rejected: #C0392B; --color-status-running: #B26B0F; --color-status-waiting: #8E8E8E; --color-status-pending: #8E8E8E; --color-status-ready: #121212; --danger: #C0392B; --text-status-approved: #2D8056; --text-status-rejected: #C0392B; --text-status-review: #121212; --bg-status-approved: rgba(45, 128, 86, .12); --bg-status-rejected: rgba(192, 57, 43, .12); --bg-status-running: rgba(178, 107, 15, .14); --bg-status-ready: rgba(18, 18, 18, .08); --bg-status-review: rgba(18, 18, 18, .08); /* Two tag families: one carries the accent, one stays neutral. The character tag was the last indigo left in the palette. */ --tag-character-text: #121212; --tag-character-bg: rgba(18, 18, 18, .10); --tag-location-text: #5C5C5C; --tag-location-bg: #E5E5E5; /* Text selection reads as the accent, not as a leftover from the old family. */ --selection-bg: rgba(18, 18, 18, .14); /* ---- Motion ----------------------------------------------------------- Already identical in both systems; restated so the mapping is complete and a future change to Restage has an obvious place to land. */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-boot: cubic-bezier(.16, 1, .3, 1); --duration-fast: 150ms; --duration-base: 280ms; --duration-slow: 600ms; } /* ========================================================================== Dark — REMOVED, 2026-07-27 -------------------------------------------------------------------------- Boek: "forget about dark mode. let's remove that entirely." What stood here was the Restage identity's dark member, read from brand-system/restage.html (the only place it is written down) — surfaces, ink, hairlines, the inverted accent, the status washes lifted to stay visible against #191919. It is re-derivable from that file if this is ever undone; nothing about it was invented here. WHY DELETING IT IS ENOUGH TO MAKE THE APP LIGHT, and why that is worth stating rather than assuming: tokens.css declares its dark values on `[data-theme="dark"]` (0,1,0), and this file's light block is `:root[data-skin="restage"]` (0,2,0), which outranks it. So with no dark block here, every token resolves to its light value whatever the attribute says. Verified by measurement, not by reading. WHAT IS NOT REMOVED, and needs its own decision: - the theme toggle still exists (shell.js, base.html's flash-prevention script, change_password.html) and still writes data-theme="dark"; - ten component-level rules outside the token layer still match it (client-v2.css x4, shell.css x5, project.css x1) — overlay tints and the like, which will now apply on a light interface if anyone flips it. Neither is dangerous, both are dead weight, and ripping out a user-facing control is not something to do on inference. ========================================================================== */ /* ========================================================================== THE FLAT PASS — the only part of this file that carries selectors. ========================================================================== Setting the 17 shadow TOKENS to none removes 561 of the app's 667 box-shadow declarations. The other 106 write their own structure instead of pointing at a token, so no token value can reach them. The candy status button is the clearest example (project.css:18801): box-shadow: 0 6px 16px -6px color-mix(in srgb, ...), inset 0 1px 0 ... It reads --success for the colour but the depth is hard-coded, so it keeps its lift and its inner highlight no matter what the tokens say. Those 106 are exactly the raised, glossy controls the brief is trying to get rid of, so leaving them is not an option: the result would be a flat interface with the app-iest parts still floating. THIS IS A BLUNT INSTRUMENT AND IT IS MEANT TO BE. The brief is "haal alle drop shadows weg, kijken of alles dan nog duidelijk is" — an experiment whose whole value is that nothing survives to muddy the answer. One rule answers it today; the proper fix is to rewrite those 106 declarations to read tokens, which is a day of careful work and pointless before the question is settled. Scoped to the skin, so removing data-skin restores every shadow untouched. --folder-shadow needs its own line: client-v2.css re-declares it on .cv2-prow and .flow-container.cv2-skin-folders, and a custom property set on a descendant beats one set on :root for that whole subtree — which is why the folder panes kept their drop shadow while every token said none. Matching it on * at higher specificity is what actually reaches them. ========================================================================== */ :root[data-skin="restage"] *, :root[data-skin="restage"] *::before, :root[data-skin="restage"] *::after { box-shadow: none !important; text-shadow: none !important; --folder-shadow: none; } /* ========================================================================== THE GREY SYSTEM — folded in, 2026-07-28 ========================================================================== These values arrived as a switchable proposal alongside the warm palette they replaced. Boek, after living with them: "tone warm schakelaar mag er ook uit. We blijven werken met grijswaarde. Dus alleen licht en donker switch blijft." So the proposal IS the skin now, written straight into the block above, and data-tone is gone from the stylesheets, the templates and the guards. Two themes remain — light here, dark below — which is one axis instead of two. WHAT THE WARM PALETTE WAS, kept as the reason rather than as a fallback, because the argument is what stops it drifting back. Every surface ran R−B +4 to +6 (--bg-app #F6F5F2, --bg-inset #ECEAE6) while every ink ran −1 to −2 (--text-primary #1C1C1E, --text-secondary #5A585B). Surfaces leaned yellow, the text on them leaned purple: two systems, not two settings of one. The dark was warm (+4) while the text on white was cool (−2), so the interface carried two different blacks. That disagreement is what "het voelt een beetje willekeurig" was pointing at. AND THE LADDER IS ANCHORED ON WHITE. The old one stepped 10 / 6 / 5 and then 0 — page and inset were the SAME value, so a sunken control and the field behind it were one colour and a search field only read as sunken where it happened to sit on a bar. The steps now: page #FFFFFF 255 the canvas panel #FFFFFF 255 step 0 a piece of page, drawn by the tray around it tray #F7F7F7 247 step 8 a product row's own band paper #F1F1F1 241 step 6 floating chrome + the "not yet" fill inset #EBEBEB 235 step 6 sunken controls, their own tone at last PAGE AND PANEL SHARE 255 ON PURPOSE and that is not the old collapse repeated: page and inset meant opposite things while sharing a value, which is the failure. Page and panel mean the same thing, which is the design. --bg-page is a NEW name. style.css:29 paints the body --bg-inset, which is exactly how page and sunken ended up as one colour; restage-rows.css §14 puts --bg-page on the body instead. That repoint is two rules and it is the whole repoint. Status colours are deliberately not on this axis: red, green and amber are semantic, and a rejection has to stay red. ========================================================================== */ /* ========================================================================== NEUTRAL DARK — dark mode back, on the same ladder ========================================================================== Boek, 2026-07-28: "kan je de dark mode weer terugbrengen? Toch wel benieuwd hoe dat eruitziet." It was not so much removed as overruled: the light block above sets its values unconditionally, so [data-theme="dark"] resolved to the light skin. This block is one attribute more specific and takes it back, and it is written on the SAME ladder rather than as a second palette — which is the whole reason the light one was made regular first. THE LADDER, MIRRORED BY MEANING AND NOT BY ARITHMETIC. In light everything steps DOWN from a white page. Flipping the numbers would put the sunken tone above the page, and a sunken control that is lighter than its surroundings is not sunken. So each surface keeps its RELATIONSHIP instead of its distance: light dark page #FFFFFF the canvas #141414 panel #FFFFFF = page #141414 = page, same reason tray #F7F7F7 −8 from the page #1C1C1C +8 a row band lifts off it paper #F1F1F1 −14 #222222 +14 floating chrome inset #EBEBEB −20, sunken #0C0C0C −8 sunken is still sunken Tray and paper INVERT direction because in light a surface separates itself by getting darker than white and in dark by getting lighter than black. Inset does not: sunken means below the page in both. THE ACCENT HAS TO FLIP, and it is the one thing that cannot be a token translation. In light the primary button is near-black on white. Near-black on a #141414 page is invisible, so in dark it becomes near-white with dark ink on it — the same object, the same contrast, the opposite polarity. Status colours are lifted rather than reused: #2D8056 and #C0392B are chosen against white and go muddy on #141414. Same hues, more light in them. FIRST LOOK, not a finished dark mode. The values are honest and the ladder is right, but 180 `--bg-inset` consumers across four stylesheets have never been seen dark, and the ones I have not looked at are the ones that will be wrong. ========================================================================== */ :root[data-skin="restage"][data-theme="dark"] { --bg-page: #141414; --bg-panel: #141414; --bg-tertiary: #141414; --bg-tray: #1C1C1C; --bg-app: #222222; --bg-primary: #222222; --bg-inset: #0C0C0C; --bg-secondary: #0C0C0C; --text-primary: #E8E8E8; --text-secondary: #A6A6A6; --text-muted: #A6A6A6; --text-faint: #737373; --color-black: #E8E8E8; /* the "ink" object, inverted with everything else */ --color-white: #141414; /* the primary action: near-white on dark, dark ink on it */ --accent: #E8E8E8; --accent-ink: #E8E8E8; --accent-mark: #E8E8E8; --accent-grad: #E8E8E8; --on-accent: #141414; --color-primary: #E8E8E8; --color-primary-dark: #FFFFFF; --color-accent-blue: #E8E8E8; --btn-generator-bg: #E8E8E8; --btn-generator-hover: #CFCFCF; --focus-ring: #E8E8E8; --color-status-ready: #E8E8E8; --text-status-review: #E8E8E8; --tag-character-text: #E8E8E8; /* the white button becomes a raised dark surface, not a white slab */ --btn-grad: #222222; --folder-fill-0: #1C1C1C; --folder-fill-1: #1C1C1C; /* hairlines are light on dark — the same .07/.14 weights, inverted */ --line: rgba(255, 255, 255, .10); --border-color: rgba(255, 255, 255, .10); --border-color-light: rgba(255, 255, 255, .07); --border-color-strong: rgba(255, 255, 255, .18); --accent-wash: rgba(232, 232, 232, .10); --bg-status-ready: rgba(232, 232, 232, .10); --bg-status-review: rgba(232, 232, 232, .10); --tag-character-bg: rgba(232, 232, 232, .12); --selection-bg: rgba(232, 232, 232, .18); --hover-glass: rgba(255, 255, 255, .06); --veil-bg: rgba(0, 0, 0, .55); --bg-scrim: rgba(0, 0, 0, .55); --folder-strk-0: rgba(255, 255, 255, .14); --folder-strk-1: rgba(255, 255, 255, .14); --glass-bg: rgba(34, 34, 34, .55); --bg-glass: rgba(34, 34, 34, .55); --panel-glass: rgba(34, 34, 34, .92); /* same hues, enough light in them to survive #141414 */ --color-status-approved: #4FB383; --color-status-complete: #4FB383; --color-status-error: #E4695A; --color-status-rejected: #E4695A; --color-status-running: #D9A24A; --color-status-waiting: #8E8E8E; --color-status-pending: #8E8E8E; --danger: #E4695A; --danger-grad: #E4695A; --text-status-approved: #4FB383; --text-status-rejected: #E4695A; --tag-location-text: #A6A6A6; --tag-location-bg: #0C0C0C; }