/* ============================================================================================ NIGHTFALL — one navy, nine steps, and a light left on. ============================================================================================ THIS FILE STATES NO SIZE, NO SPACE AND NO POSITION. Not one padding, margin, grid, inset or gap; no `--c-u`, no `--c-gap`, no `--c-rhythm`, no `--c-gut`, no `--c-measure`. Delete it and the page is the same page, in grey. `lib/designs/paint.test.js` is that sentence as a test. IT IS A PORT. Every value below comes off the token specification on the theme board (idea `t_fck2gldj`, `4644ebef6c734267766d.html`), written from a smart-home dashboard photographed at night and set out in Clay's own token names. Where a line here is NOT the specification's, the comment says so and BRIEF.md says why. WHAT IT IS. THE SECOND DESIGN THAT OPENS IN THE DARK, AND THE ONLY ONE WHOSE DARK IS A COLOUR. Room opens dark as well, and its room is a warm-neutral graphite — "never a blue-black", in its own words, because food photographed under tungsten wants the warm one. This is the opposite decision taken deliberately: the two dark designs are a warm one and a cool one rather than one design twice. The screenshots were dark, dark is the primary room, and the light room is DECIDED underneath it rather than inverted out of it. Every neutral is one NAVY at a different lightness — oklch hue 250–258, not the 220 of a photographic slate and nowhere near a true grey — so the greys are not greys: they are one midnight blue dimmed and lifted. The deepest surface is `#060B12`, a blue-black rather than a black, "because the whole design depends on four navies you can only just tell apart, which only works if the deepest one still has hue left in it to be darker than. Black is the end of a ramp; this is the ninth step of one." THE TWO ROOMS WORK IN OPPOSITE DIRECTIONS. In dark the work is done by LIFT — the card sits above the page and there are four surfaces. In light it is done by SINK — the page is the brightest thing, the band recedes below it, and the card is the same value as the paper with a hairline instead of a lift. Light has three surfaces and dark has four. WHAT IT REFUSES. No warm surface anywhere — not a cream, not a paper, not a tinted card. No second accent, and no colour on a surface except the one accent band. No display serif and no third typeface. No gradient as a fill. No border on a button. No uppercase on a title. And no accent on text at body size: the accent is the thing you press and the thing that is live, and nothing else. ============================================================================================ */ /* ── THE ACCENT SLOT ─────────────────────────────────────────────────────────────────────── `--c-brand` is 0%, and here that is not a preference: "the accent is a lemon yellow, and mixing any of it into a navy neutral turns the surface olive within 4%. The neutrals are the theme's own and the accent never touches them." */ :root, :is(#clay-page,#design-sheets).nightfall{ --accent:#F2E205; /* the lemon — the one live variable */ --c-brand:0%; } /* ── THE DARK ROOM, WHICH IS THE DESIGN ──────────────────────────────────────────────────── The specification's own ramp, named: frost · mist · haze · dusk · slate · iron · ink · deep · night · nadir. The page is `--nf-850` and every surface climbs away from it. */ :is(#clay-page,#design-sheets).nightfall, #clay-page.nightfall[data-mode="dark"], #design-sheets.nightfall[data-mode="dark"], :root[data-mode="dark"] #clay-page.nightfall, :root[data-mode="dark"] #design-sheets.nightfall{ --nf-100:#F2F6FA; /* frost */ --nf-200:#D3DCE6; /* mist */ --nf-300:#A9B7C6; /* haze */ --nf-400:#8593A3; /* dusk */ --nf-500:#5C6A7A; /* slate */ --nf-600:#3A4757; /* iron */ --nf-700:#24303E; /* ink */ --nf-800:#16202C; /* deep */ --nf-850:#0E1620; /* night */ --nf-900:#060B12; /* nadir */ --c-paper:var(--nf-850); --c-ink:var(--nf-100); --c-soft:var(--nf-300); /* 8.9:1 on the paper */ --c-faint:var(--nf-400); /* 5.8:1 on the paper, 5.2:1 on the first lift */ --c-line:var(--nf-700); --c-fill:var(--nf-800); --c-card-bg:#1B2634; --c-ground-fill:#101A25; --c-map-ground:#101922; /* `--c-over` IS A GROUND, NOT A VEIL. parts.css writes `--g:var(--c-over)` on a photograph band and derives every ink on it from that colour, so a value with alpha in it hands the derivation a transparent colour and every word over a picture comes out transparent too. The specification writes it at 72%; the colour is stated solid and the 72 is applied where the veil is drawn — see `--nf-veil` and `.sheet-veil`. */ --c-over:#040810; --nf-veil:72%; --c-flip:var(--nf-900); /* re-derived from the owner's hue below */ --c-flip-ink:#EAF0F6; --c-block-bg:#1F2B3A; /* one step inside the plate — re-derived below */ --c-accent:var(--accent); --c-accent-ink:#F7EC6B; /* re-derived below */ --c-band-accent:var(--accent); --c-quote-bg:#121B26; --c-field-bg:#131C27; --c-field-bg-hi:#18222E; /* DECIDED, and the specification is explicit that the live dot is the one exception to "an icon is never the accent" — "the live dot is a shape, not a glyph". It is still not the accent here: open-or-closed is a FACT, and a fact that borrowed the owner's colour would be indistinguishable from the thing you press. */ --nf-live:#3DD68C; --nf-thing:#263343; /* a card standing on the plate — re-derived below */ } /* ── THE LIGHT ROOM — DECIDED, and not an inversion ──────────────────────────────────────── "In light the work is done by SINK — the page is the brightest thing, the band recedes below it, and the card is the same value as the paper with a hairline instead of a lift." `--c-flip` is the SAME blue-black in both rooms, on purpose: "one deep plate, both modes, so the contrast band is the one place the two modes look identical." */ #clay-page.nightfall[data-mode="light"], #design-sheets.nightfall[data-mode="light"], :root[data-mode="light"] #clay-page.nightfall, :root[data-mode="light"] #design-sheets.nightfall{ --nf-100:#FFFFFF; --nf-200:#F5F7FA; --nf-300:#E8ECF2; --nf-400:#D5DCE5; --nf-500:#A2AEBC; --nf-600:#586573; --nf-700:#3E4A57; --nf-800:#212C38; --nf-850:#131C26; --nf-900:#060B12; --c-paper:var(--nf-200); --c-ink:#0F1620; --c-soft:var(--nf-700); /* 8.5:1 on the paper */ --c-faint:var(--nf-600); /* 5.7:1 on the paper, 5.1:1 on the fill */ --c-line:var(--nf-400); --c-fill:var(--nf-300); --c-card-bg:var(--nf-100); --c-ground-fill:#EDF1F6; --c-map-ground:#EEF1F5; --c-over:#0B1220; --nf-veil:42%; --c-flip:var(--nf-900); /* re-derived from the owner's hue below */ --c-flip-ink:#EAF0F6; /* THE SPECIFICATION SAYS `--nf-100` — WHITE — AND THAT IS THE ONE LINE IT GETS WRONG ABOUT THIS PRODUCT. `--c-block-bg` in Clay is the step INSIDE the deep plate: the ground a ways-in card takes while standing ON `--c-flip`, which is the blue-black in both rooms. A white card inside a near-black plate is not one step, it is the other end of the ramp. Derived from the plate, like the dark room's. */ --c-block-bg:#1A2433; --c-map-ground:#EEF1F5; --c-accent:var(--accent); --c-accent-ink:#6B6606; /* re-derived below */ --c-band-accent:var(--accent); --c-quote-bg:var(--nf-300); --c-field-bg:var(--nf-100); --c-field-bg-hi:#FBFCFD; --nf-live:#17904A; --nf-thing:#232E3D; } /* ── THE PLATE AND THE ACCENT AS TEXT, TAKEN FROM THE OWNER'S HUE ────────────────────────── The specification carries this derivation commented out, with the measurement beside it: "the deep colour already has hue, so it may take the owner's, rotated 35° COLD, chroma capped at .018 — measured, because yellow muddies above that." It is enabled here, because the contract asks every theme's deep surfaces to belong to the business, and −35° toward violet is this design's character where Marigold and Bone rotate +25 toward amber. THE LIGHTNESS NEVER MOVES: every number below is the oklch lightness of the hex it replaces, so the page keeps the weight, the seam and the contrast it already had. THE PAGE IS NOT TOUCHED IN EITHER ROOM — tinting a dark room's paper takes the band with it. */ @supports (color: oklch(from red l c h)){ :is(#clay-page,#design-sheets).nightfall, #clay-page.nightfall[data-mode="dark"], #design-sheets.nightfall[data-mode="dark"], :root[data-mode="dark"] #clay-page.nightfall, :root[data-mode="dark"] #design-sheets.nightfall{ --c-flip:oklch(from var(--accent) .13 min(c, .018) calc(h - 35)); --c-block-bg:oklch(from var(--accent) .27 min(c, .014) calc(h - 35)); --nf-thing:oklch(from var(--accent) .32 min(c, .014) calc(h - 35)); /* THE ACCENT AS TEXT IS NOT THE ACCENT AS A FILL. On the night ramp the owner's colour is LIFTED so a sentence in it can be read; in the light room it is dropped instead. The BUTTON keeps the hue exactly as it was typed — parts.css holds the correction in a hairline round it, and derives the word on it by luminance. */ --c-accent-ink:oklch(from var(--accent) max(l, .86) c h); } #clay-page.nightfall[data-mode="light"], #design-sheets.nightfall[data-mode="light"], :root[data-mode="light"] #clay-page.nightfall, :root[data-mode="light"] #design-sheets.nightfall{ --c-flip:oklch(from var(--accent) .13 min(c, .018) calc(h - 35)); --c-block-bg:oklch(from var(--accent) .27 min(c, .014) calc(h - 35)); --nf-thing:oklch(from var(--accent) .32 min(c, .014) calc(h - 35)); --c-accent-ink:oklch(from var(--accent) min(l, .44) c h); } } /* ── TYPE — three faces, and two of them are substitutions ───────────────────────────────── The specification names Sora for the display, IBM Plex Sans for the body and IBM Plex Mono for the label, and adds in its own comment that "the real theme self-hosts these as woff2". SORA IS ALREADY IN THE LIBRARY and is the loudest half, so it is the real face. The other two are not, and are taken from the nearest thing that is: INTER for the body, which is the same kind of object as Plex Sans — a neutral grotesk drawn for a screen, with the same open apertures and a near-identical x-height — and JETBRAINS MONO for the label, which is what the specimen uses a mono FOR: the four or five words a system says about itself. A theme's folder serves two file types and neither of them is a font; embedding two more families as base64 would put 130KB into a stylesheet to move a body face one degree. Written up in BRIEF.md. "No uppercase on a title" is one of the refusals — `--c-case` is `none` — and the label is the opposite: the mono, uppercase, at .115em. */ :is(#clay-page,#design-sheets).nightfall{ --c-display:"Sora",ui-sans-serif,system-ui,sans-serif; --c-body:"Inter",ui-sans-serif,system-ui,sans-serif; --c-label:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --c-weight:600; --c-case:none; --c-track:-.021em; --c-lead-h:1.07; --c-body-h:1.55; --c-base:16px; /* THE SPECIFICATION SAYS 1.22 AND THIS IS 1.32, which is the one number in this file that is not its own. Its scale is a plain geometric run; Clay's is FLUID — the top two steps are clamped by `4.2cqw` and `6cqw`, so on a wide page a heading is 59px and an h1 84px whatever a theme says, and on a phone they are `base * ratio^n`, which is the theme's alone. At 1.22 that is 29px against 59 and 35 against 84 — a role doubling between a phone and a desk — and `sizes.test.js` holds every one of them to 1.8x on the ground that "a role that doubles between the two is a role a phone never sees the design of". 1.32 lands them at 1.60x and 1.73x. The BODY step is untouched at 16px, which is the size a reader experiences. */ --c-ratio:1.32; --c-ratio-sm:1.15; --c-display-adj:.98; --c-label-weight:500; --c-label-case:uppercase; --c-label-track:.115em; --c-eyebrow-deco:none; } /* ── TREATMENT — a small corner, one hairline, and a glow rather than a shadow ───────────── 12 on a card, a picture and a field, 22 on the large boxes, a full pill on anything you press. One pixel of line everywhere — this design has four navies you can only just tell apart and a heavy rule between two of them would be the loudest thing on the page. `--c-field-bw` AND `--c-field-bw-b` ARE WIDTHS HERE. The specification states colours in them (`#2A3644` and `#3A4757`), which is what those names mean in the document it was written from and is not what they mean in Clay: a border-width slot handed a colour is a declaration the browser throws away, and every field on the site would have come out with no edge at all. The two colours it names are the ramp's `--nf-600` and `--nf-700`, which is what `--c-line` already resolves to in this room, so nothing is lost. The shadow is a GLOW OUT rather than a contact shadow: `0 26px 64px -28px` of a near-black navy, which is what an object above a dark room actually does. In the light room it becomes a contact shadow, which is the same statement made the other way up. These are shape, not size. */ :is(#clay-page,#design-sheets).nightfall{ --c-r:12px; --c-r-lg:22px; --c-bw:1px; --c-card-bw:1px; --c-quote-bw:0px; --c-field-bw:1px; --c-field-bw-b:1px; --c-card-shadow:0 26px 64px -28px rgba(3,6,12,.85); } #clay-page.nightfall[data-mode="light"], #design-sheets.nightfall[data-mode="light"], :root[data-mode="light"] #clay-page.nightfall, :root[data-mode="light"] #design-sheets.nightfall{ --c-card-shadow:0 2px 3px -1px rgba(48,58,74,.13), 0 12px 28px -18px rgba(48,58,74,.22); } /* ── THE GRADE ───────────────────────────────────────────────────────────────────────────── `contrast(1.06) brightness(.955)` and a wash that goes from nothing at the top of the frame to a navy at 42% at the bottom — the picture sinking into the room rather than sitting on it. The scrim is deep (`--c-scrim-b:.78`) because the type over a photograph here is pale and a pale word on somebody's phone snapshot is the one thing this design cannot risk: "no text of any kind on a photograph without a scrim under it." THE SPECIFICATION ASKS FOR `saturate(.88)` AND THE LAYOUT REFUSES IT — `no theme desaturates the owner's photographs, except the one that is about that` in runtime/parts.test.js bans any `saturate()` or `contrast()` under one, because it "makes the pictures to flat". The wash and the deeper scrim carry the same intent without taking the colour out of the one thing on the page the business supplied. */ :is(#clay-page,#design-sheets).nightfall{ --c-photo:contrast(1.06) brightness(.955); --c-photo-wash:linear-gradient(180deg, rgba(11,17,28,0) 0%, rgba(11,17,28,.42) 100%); --c-photo-wash-blend:normal; --c-scrim-a:0; --c-scrim-b:.78; --c-scrim-dim:.55; } #clay-page.nightfall[data-mode="light"], #design-sheets.nightfall[data-mode="light"], :root[data-mode="light"] #clay-page.nightfall, :root[data-mode="light"] #design-sheets.nightfall{ --c-photo:contrast(1.04) brightness(1.01); --c-scrim-b:.62; } /* THE ESCAPE HATCH — the picture as they took it, the grade and the wash off together */ :root[data-photos="raw"], :root[data-photos="raw"] :is(#clay-page,#design-sheets).nightfall{ --c-photo:none; --c-photo-wash:none; } /* ── THE ACTION ──────────────────────────────────────────────────────────────────────────── "The accent is the thing you press and the thing that is live, nothing else." The button is the owner's colour in both rooms and the word on it is derived by luminance in parts.css — which is what a lemon accent needs: black words, worked out from the fill rather than stated. "No border on a button" is one of the refusals, and the layout already draws none; what it does draw is a hairline round the button on an inverted band, which is a correction rather than a border and is the only thing keeping a near-black accent legible on a near-black plate. The label is sentence case at 600 — "no uppercase on a title", and a button is a title of one word. */ :is(#clay-page,#design-sheets).nightfall{ --c-act-font:var(--c-body); --c-act-weight:600; --c-act-case:none; --c-act-track:-.01em; --c-act-bg:var(--c-accent); --c-act-bar-bg:var(--c-accent); --c-band-accent:var(--c-accent); --c-nav-dim:1; } /* ── A CARD ON THE PLATE ─────────────────────────────────────────────────────────────────── A card on the deep plate cannot be `--c-fill`: `--c-fill` is re-derived from `--g` on every element that sets one, and `.c-card` is one of them, so `--g:var(--c-fill)` is a cycle — the browser throws both away and the card paints no background and no border at all. `--nf-thing` is this theme's stated answer, one step up from the plate. */ :is(#clay-page,#design-sheets).nightfall .c-g-ink .c-card{--g:var(--nf-thing);background:var(--g)} :is(#clay-page,#design-sheets).nightfall .l-bc-thing{--g:var(--nf-thing);background:var(--g)} /* ── THE LIT EDGE ───────────────────────────────────────────────────────────────────────── The one thing the specification asks for that the contract has no name for. Its cards are not fills: they are plates over the room with a LIT TOP HAIRLINE, "and a theme that can only say `--c-card-bg:#1B2634` has thrown that away and kept the average colour." The blur it asks for with it is NOT here. A backdrop filter on every card on the page is a compositing layer per band on a phone, and the thing behind a Clay card is usually the flat paper rather than a photograph, so the cost buys nothing. What survives is the edge, which is the half that reads: a one-pixel highlight along the top of a plate, at the ramp's own haze, very low. It is a colour on a border, which is the theme's; it states no size and no position, and `--c-card-bw` above is what decides whether there is a line there at all. */ :is(#clay-page,#design-sheets).nightfall .c-card, :is(#clay-page,#design-sheets).nightfall .c-quote, :is(#clay-page,#design-sheets).nightfall .l-does-card, :is(#clay-page,#design-sheets).nightfall .l-team-card, :is(#clay-page,#design-sheets).nightfall .l-visit-card{ border-block-start-color:color-mix(in oklab, var(--nf-300) 26%, var(--c-line))} #clay-page.nightfall[data-mode="light"], #design-sheets.nightfall[data-mode="light"], :root[data-mode="light"] #clay-page.nightfall, :root[data-mode="light"] #design-sheets.nightfall{ /* frosted, not lit — "a bright edge on a bright page is nothing" */ --nf-300:#E8ECF2; } /* ============================================================================================ THE EDITOR'S STYLESHEETS ARE ON THIS PAGE TOO — and they are older than this design. ============================================================================================ An owner's page loads editor-ui.css and site.css for the panel, the dock and the pickers. Both carry UNSCOPED class rules on names the design layer also uses — `.sheet`, `.card`, `.wrap`, `.field`, `.fgrid` — and the result is visible only to the OWNER, which is why it survives a whole test suite. Everything those files set on a shared name is put back to the browser's own value here. This is plumbing, not design: it undoes, it does not decide. ============================================================================================ */ :is(#clay-page,#design-sheets).nightfall .sheet{color:inherit;font-family:inherit;background:none;border:0} :is(#clay-page,#design-sheets).nightfall .card{background:none;border-radius:0;transition:none} /* A BUTTON IS NOT A BUTTON-SHAPED BOX. Anything clickable is a real