/* ========================================================= mbrd - design tokens Nothing in app.css hardcodes a colour, a corner, a duration or a typeface. Everything resolves through a custom property declared here, which is what makes the whole look swappable at runtime - by the Appearance panel, by a board that travels with its own look, and eventually by the board itself reading the pictures you drop on it. Three layers, applied in this order (later wins on equal specificity, and every selector below is exactly (0,2,0), so source order *is* the cascade): 1. :root the base look - Papyrus, the playful extreme 2. :root[data-palette=x] a different set of pigments, same personality 3. :root[data-whimsy=n] a different personality entirely On top of all three sit inline properties on :root, written by the Appearance panel. Inline always wins, so a hand-picked pigment survives a palette switch or a slide along the whimsy axis - which is the behaviour you want, and it falls out of the cascade for free. ========================================================= */ /* ========================================================= 1. Base - whimsy 1, "Middle". Papyrus & terracotta: warm paper, iron-gall ink, corners in, nothing moving on its own. The middle of the axis is the base rather than a variant because it is the default look, and the default has to be what renders before any script has run - so an unset data-whimsy and a data-whimsy="1" mean the same thing, and a first paint needs no attribute at all. Light only, on purpose: the whole thing reads as a sheet of paper you pin things to, and a dark sheet of papyrus is a contradiction. ========================================================= */ :root { /* ---- paper ---- */ --paper: #fbf8f1; /* the sheet */ --paper-2: #f4efe4; /* insets, wells */ --paper-3: #ebe3d4; /* pressed, active */ --paper-card: #fffdf8; /* items sit slightly brighter than the board */ /* ---- ink ---- */ --ink: #372a1d; --ink-2: #6f5b45; /* secondary text */ --ink-3: #9a866c; /* faint */ --rule: #e6dcc8; --rule-2: #cdbfa2; /* ---- pigment ---- */ --accent: #c25c2b; /* terracotta */ --accent-warm: #e0983f; /* amber */ --accent-deep: #8d3c17; /* burnt sienna, for pressed states */ /* What sits on top of the accent. Mixed up out of this palette's own sheet rather than fixed, so it is never a warm cream on a teal button. */ --accent-fg: color-mix(in srgb, var(--paper) 45%, #fff); --leafy: #75855f; /* olive - secondary ornament */ /* Kept unmistakably red - a destructive action should not have to be decoded - but pulled towards this palette's ink so it belongs to the board it is printed on. */ --danger: color-mix(in srgb, #a83232 85%, var(--ink)); /* ---- text highlight ---- What a selected run of text sits on - a note being written, a name being renamed, an address being copied out of a link card. Left to the browser this was the one colour on the whole page nobody chose: a flat system blue, on a board whose entire premise is that you picked the pigments. Translucent rather than solid, and that is the load-bearing decision. One declaration then works on every surface the app has - a white card, a coloured sticky, the sidebar's wells - because the surface shows through it. A solid block would need a colour per surface and a text colour light enough to read on the accent, which is a second decision that fights the note tints the moment they are anything but pale. So: a wash of this palette's own pigment, which reads as a marker drawn over paper, with the ink underneath left as ink. --highlight-ink is named anyway rather than left to inherit, because the plain end of the axis wants a solid block and needs somewhere to say so. */ --highlight: color-mix(in srgb, var(--accent) 26%, transparent); --highlight-ink: var(--ink); /* ---- canvas grid ---- Derived from the ink, so one --grid-alpha slider drives both layers and every palette gets a grid that matches its own ink. */ --grid-alpha: 0.14; --grid-minor: color-mix(in srgb, var(--ink) calc(var(--grid-alpha) * 100%), transparent); --grid-major: color-mix(in srgb, var(--ink) calc(var(--grid-alpha) * 190%), transparent); --grid-axis: color-mix(in srgb, var(--accent) 55%, transparent); --grid-dot: 1.7px; /* ---- the web between items (canvas/web.js) ---- Deliberately a true neutral grey rather than a mix of this palette's ink, which is the one exception on this whole sheet. The threads run *under* every item and behind whatever colours those items bring, and a tinted thread crossing a photograph reads as an artefact of the photograph. Grey reads as string. Screen px, because the stroke does not scale with zoom. */ --web-line: rgba(128, 128, 128, 0.4); --web-weight: 1.4px; /* ---- item chrome ---- */ --item-bg: var(--paper-card); --item-border: color-mix(in srgb, var(--ink) 16%, transparent); /* Never grey - and never one fixed brown either. Mixed out of this palette's own ink, so a teal board casts a teal-grey shadow rather than a warm one borrowed from Papyrus. A grey drop shadow on warm paper is the single most generic-web-app thing you can do; a brown one on a green board is worse. */ --item-shadow: 0 1px 1px color-mix(in srgb, var(--ink) 11%, transparent), 0 10px 22px -10px color-mix(in srgb, var(--ink) 34%, transparent); /* How much the interface reacts to being touched. Every one of these is zero (or 1x) at the plain end, where nothing should move on its own, so the same declarations cover "springs up to meet you" and "sits still". Items, on the board: */ --lift-hover: 0px; --grow-hover: 1; --lift-drag: 0px; --tilt-drag: 0deg; /* Controls, in the panels: */ --btn-lift: -1px; --btn-grow: 1; --btn-press: 0.985; /* How far off square an item may come to rest. Each one gets its own factor in [-1, 1] from canvas/items.js and multiplies it by this, so the whole board straightens up or scatters as the axis moves, with no JS involved. */ --tilt-max: 1.5deg; --select: var(--accent); --select-fill: color-mix(in srgb, var(--accent) 15%, transparent); /* The selection outline, and the corner brackets that thicken it. All three are one geometry: the bracket is drawn on exactly the path the outline already traces, just heavier, so a selected corner reads as the outline swelling rather than as a second line hovering nearby. */ --sel-gap: 5px; /* clear space between the item and the outline */ --sel-line: 2px; /* the outline itself */ --sel-corner: 3.2px; /* how heavy that line gets at the corners */ --sel-reach: 10px; /* how far it runs on past the end of that curve */ /* ---- sticky notes ---- A pack of four colours, every one mixed out of this palette's own pigment rather than named outright - so a note stays a note when the palette changes underneath it, instead of turning into a stray office-yellow rectangle in the middle of a sage-green board. */ --note-1: color-mix(in srgb, var(--accent-warm) 34%, var(--paper-card)); --note-2: color-mix(in srgb, var(--accent) 17%, var(--paper-card)); --note-3: color-mix(in srgb, var(--leafy) 26%, var(--paper-card)); --note-4: color-mix(in srgb, var(--accent-warm) 13%, var(--paper-2)); /* Guillotined from a pad, not die-cut - so a sticky's corner is tighter than a card's, but a fraction of it rather than an independent number. That way the Corner radius slider moves the notes along with everything else. */ --note-radius: calc(var(--radius) * 0.42); /* Tight and close: a sticky is pressed flat to the board, not floating over it like the framed items are. */ --note-shadow: 0 1px 1px color-mix(in srgb, var(--ink) 17%, transparent), 0 5px 9px -5px color-mix(in srgb, var(--ink) 32%, transparent), 0 13px 16px -13px color-mix(in srgb, var(--ink) 28%, transparent); /* ---- shape ---- Every corner is even. --leaf sizes controls, --ogee the panels that hold them, --radius-xs the small fry (checkboxes, chips, kbd). */ --radius: 13px; --radius-sm: 8px; --radius-xs: 4px; --leaf: 10px; --ogee: 15px; /* Gap between a card's edge and its inner rule. The rule's own radius is --radius minus this, so the two curves stay concentric. */ --card-rule-gap: 5px; --density: 1; --sidebar-w: 322px; --hairline: 1px; --shadow-1: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent); --shadow-2: 0 18px 44px -18px color-mix(in srgb, var(--ink) 46%, transparent); /* ---- type ---- Two voices, and this level is the only one that has two. A serif for anything that announces itself - titles, names, headings, the small italic asides - over a neutral sans for everything you actually read. That pairing, not a bigger heading, is what makes a thing look set rather than styled, and it is why the middle of the axis is its loudest point: the soft end is one serif doing every job, the plain end is one sans doing every job, and only here do two faces have to agree with each other. Serif above sans, never the other way round. Sans headlines over serif body is the newspaper convention and it reads as a newspaper. Fraunces is self-hosted (see fonts.css); the stack behind it is the old system-serif list, so a board still sets sensibly before the file lands or if it never does. */ --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, "Times New Roman", serif; --font-body: "Geist", -apple-system, "Helvetica Neue", Helvetica, "Liberation Sans", system-ui, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "DejaVu Sans Mono", monospace; /* The display sizes are tokens rather than numbers in app.css because they are the axis's loudest lever: three steps above the body here, closer to two at the ends. --t-display is the largest thing on a board (a note's title, the wordmark); --t-title is a filed card's name. */ --t-display: 30px; --t-title: 21px; --t-body: 15px; --t-small: 13px; --t-tiny: 11px; /* Fraunces gets a display cut up top and a text cut down at 13px on its own. Blink needs telling; Gecko does it by default. */ font-optical-sizing: auto; /* Two knobs the whimsy axis turns rather than rewriting a dozen rules: whether ornamental text is italic, and how wide the tracked small caps are set. Each site multiplies its own em value by --ls-scale, so their relative differences survive being scaled down. */ --display-italic: italic; --ls-scale: 1; /* ---- ornament ---- Multiplier on the decorative washes in the paper. 0 flattens them without app.css needing a second background declaration. */ --wash: 1; /* ---- motion ---- */ --dur-fast: 0.13s; --dur-base: 0.24s; --ease: cubic-bezier(0.22, 0.9, 0.28, 1); /* A slight overshoot, so panels settle like they have weight. */ --ease-back: cubic-bezier(0.34, 1.4, 0.5, 1); /* Read by canvas/viewport.js, so the board's own movement sits on the same axis as the interface's - not in a JS constant that ignores it. */ --dur-zoom: 190ms; --dur-travel: 400ms; } /* ========================================================= 2. Palettes. Same paper-and-ink logic, different pigment. These set pigments only, never shape, type or motion - a palette is a change of colour, not of personality. Personality is the axis below. The paper carries the palette as much as the accent does. Four sheets that are all within a percent of white, distinguished only by what is printed on them, is not four palettes - it is one palette with four inks. So each sheet below is tinted well into its own hue, and its wells and pressed states are ramped from that rather than from a shared grey. ========================================================= */ :root[data-palette="absinthe"] { --paper: #f3f7e0; --paper-2: #e9efcf; --paper-3: #dce5ba; --paper-card: #fbfcf0; --ink: #2c3324; --ink-2: #5a6550; --ink-3: #89947c; --rule: #c8d0aa; --rule-2: #a3ad82; --accent: #7d8f3c; --accent-warm: #b3ae4a; --accent-deep: #56652a; --leafy: #a4772f; } :root[data-palette="tearose"] { --paper: #fdeee9; --paper-2: #f9dfd6; --paper-3: #f1cdc0; --paper-card: #fff8f6; --ink: #3b2725; --ink-2: #75564f; --ink-3: #a5827a; --rule: #e6c2b4; --rule-2: #cb9c8c; --accent: #b4574f; --accent-warm: #d98f7a; --accent-deep: #82352f; --leafy: #7c8466; } :root[data-palette="peacock"] { --paper: #e9f3f0; --paper-2: #dbeae6; --paper-3: #c8dcd7; --paper-card: #f7fcfa; --ink: #1b2c2b; --ink-2: #4a615f; --ink-3: #7e9391; --rule: #bcd2cd; --rule-2: #92aeaa; --accent: #1f7a72; --accent-warm: #cf9a3a; --accent-deep: #14544f; --leafy: #8a6f3c; } /* ========================================================= 3. The whimsy axis. One dial from "a scrapbook" to "a spec sheet". Deliberately not just a corner-radius switch - it moves shape, type, motion, elevation, ornament and reactivity together, because those together are what make a thing feel playful or serious. Moving only one of them reads as a bug. 0 Softish deep corners, springy overshoot, things that lift and tilt under the pointer, ornament turned up, items pinned up crooked. 1 Middle the base above - the same room with the furniture straightened. 2 Harsh Swiss. Square, hairline, high contrast, sans, minimal motion. Level 1 is the base, so it is the default and what renders before any script has run. The other two are overrides on top of it, which also means the two ends stay honest: anything they do not restate is deliberately the middle's. What the axis does NOT touch is the palette. All three levels are the same pigments: Papyrus stays terracotta, Peacock stays teal. Harsh is a change of *contrast*, not of colour - it pushes this palette's own paper and ink to their extremes, mixing them out of the palette's accent so the hue survives the trip. No pigment is named below: the only literals either end declares are the achromatic ends of its own ramps - white, black, and the one neutral stock Harsh prints its sheet on - and every colour is mixed out of a pigment already chosen above. The stops are discrete for now. The intended endgame is a board that reads the pictures dropped on it - their contrast and their sharpness - and parks itself somewhere along here on its own, with the palette above rewritten from the colours it extracted. Everything such a driver needs to write is a custom property, so it can drive all of this without touching app.css. ========================================================= */ /* ---- 0: softish --------------------------------------------------------- Shape, motion, ornament and reactivity only. No pigment: the palette is the palette, and the shadows below take their colour from its ink. */ :root[data-whimsy="0"] { --radius: 26px; --radius-sm: 17px; --radius-xs: 9px; --leaf: 20px; /* on a 35px control this is all but a pill */ --ogee: 30px; --card-rule-gap: 8px; --ls-scale: 1.2; --wash: 2.2; /* An actual highlighter pen: the warm accent rather than the primary one, and laid on heavier. This is the end of the axis where a board is a scrapbook, and a scrapbook is marked up in amber. */ --highlight: color-mix(in srgb, var(--accent-warm) 42%, transparent); /* No --grid-alpha and no --grid-dot here, deliberately. This level used to restate them as 0.18 and 2.4px against the middle's 0.14 and 1.7px. A dot lays down ink by area, so 2.4px against 1.7px is twice the mark before the extra strength is counted and about two and a half times after - a lattice that had stopped being the paper's texture and become a pattern printed on it, competing with the things pinned to it. Turning ornament up at this end is --wash's job and the shapes', not the board's. Saying nothing is what inherits the middle's grid. */ /* One serif, top to bottom. The optical axis is what makes that survivable: the same file is a display cut at 28px and a text cut at 15px, so setting running copy in the display face is not the compromise it usually is. Sizes sit a step under the middle's - with only one voice on the page, the size difference has nothing to hold apart, and shouting it would just be shouting. */ --font-body: var(--font-display); --t-display: 28px; --t-title: 20px; --item-shadow: 0 2px 3px color-mix(in srgb, var(--ink) 13%, transparent), 0 20px 38px -14px color-mix(in srgb, var(--ink) 44%, transparent); --note-shadow: 0 2px 2px color-mix(in srgb, var(--ink) 18%, transparent), 0 8px 14px -6px color-mix(in srgb, var(--ink) 34%, transparent), 0 18px 22px -16px color-mix(in srgb, var(--ink) 30%, transparent); --shadow-1: 0 2px 3px color-mix(in srgb, var(--ink) 16%, transparent); --shadow-2: 0 24px 56px -20px color-mix(in srgb, var(--ink) 52%, transparent); /* Everything rises to meet the pointer and swings when you pick it up. */ --lift-hover: -6px; --grow-hover: 1.03; --lift-drag: -16px; --tilt-drag: -2deg; --btn-lift: -3px; --btn-grow: 1.04; --btn-press: 0.93; --tilt-max: 3deg; --sel-corner: 4.2px; --sel-reach: 12px; --dur-fast: 0.19s; --dur-base: 0.4s; --ease: cubic-bezier(0.2, 0.9, 0.24, 1); /* A real overshoot: things arrive, go visibly too far, and settle back. */ --ease-back: cubic-bezier(0.3, 2.05, 0.4, 1); --dur-zoom: 300ms; --dur-travel: 700ms; } /* ---- 2: harsh ----------------------------------------------------------- Swiss / International: square corners, hairline rules, high contrast, readability first. Same pigments, taken to their extremes. */ :root[data-whimsy="2"] { /* The stock this end of the axis prints on - and the one flat colour on the board that has to hold the whole surface up on its own. Middle's paper is a warm literal with three radial blooms laid over it by `body` in app.css, every one of them scaled by --wash. Harsh sets --wash to 0 further down, which is right - a spec sheet has no ornament - but it also means all three blooms mix away to fully transparent and the flat colour underneath becomes the entire sheet. A value picked to sit *under* a wash is not the same value as one that has to be the wash as well, and that is exactly what went wrong here: --paper was `var(--accent) 3%` into #fff - ninety-seven percent pure white - which reads as a blown-out screen with a faint cast on it rather than as paper. At that share all four palettes also landed within a couple of units of each other (#fdfaf9, #fbfcf9, #fdfafa, #f8fbfb), which is precisely the "every palette identical at this end of the axis" failure the derivation was there to prevent in the first place. So the stock is named outright rather than being 97% of a white nobody chose. It is a near-white, because that is what this end of the axis wants - a spec sheet is printed on office paper, not on card - but cool, since the warmth is Middle's to keep and a cool sheet is most of what tells the two ends apart at a glance. The accent share is deliberately small, and small is a real constraint rather than a shrug. It has to be big enough that Peacock still prints on something faintly green and Tearose on something faintly pink, so the palette is not simply erased at this end; and small enough that the sheet still reads as white. What it cannot also do is carry the separation from --paper-card, which stays #fff below - at this lightness there are only a few units between the two, so a card is told from the board by its edge and its shadow rather than by its fill. That is the honest trade for a white sheet, and it is why --rule at this level is the strongest of the three. */ --stock: #fafbfc; --paper: color-mix(in srgb, var(--accent) 4%, var(--stock)); /* Wells and pressed states step down towards this palette's own ink rather than towards more accent. More accent would darken and saturate in the same move, and a button that goes peach when you press it is the opposite of what this end of the axis is for - these want to read as the same sheet in shadow. Mixing against --paper also makes the ramp correct by construction rather than by coincidence: each step is a step down from the sheet itself, so the three can never cross no matter what the sheet is moved to, which three independent mixes into a shared white could not promise. (--ink is declared immediately below; custom properties resolve by name rather than by source order, so referring to it from up here is fine.) */ --paper-2: color-mix(in srgb, var(--ink) 4%, var(--paper)); --paper-3: color-mix(in srgb, var(--ink) 9%, var(--paper)); --paper-card: #fff; --ink: color-mix(in srgb, var(--accent) 13%, #000); --ink-2: color-mix(in srgb, var(--ink) 74%, var(--paper)); --ink-3: color-mix(in srgb, var(--ink) 52%, var(--paper)); --rule: color-mix(in srgb, var(--ink) 13%, var(--paper)); --rule-2: var(--ink); --accent-fg: #fff; /* A solid block, not a wash. This end takes its emphasis from contrast rather than from tint, and a marker-pen highlight is an ornament - the same reason the blooms and the vignette are gone. It can afford to be solid because it is the one place --accent-fg is already the answer to "what reads on top of the accent". */ --highlight: var(--accent); --highlight-ink: var(--accent-fg); /* The one place four colours survive: note tints carry meaning, so they are kept distinguishable rather than flattened to grey - just pale enough to read black text and a black rule over. Mixed into the card white rather than into --stock, because a note is an object lying *on* the board, and it belongs to the same family as the cards next to it rather than to the sheet underneath it. */ --note-1: color-mix(in srgb, var(--accent-warm) 20%, #fff); --note-2: color-mix(in srgb, var(--accent) 11%, #fff); --note-3: color-mix(in srgb, var(--leafy) 16%, #fff); --note-4: color-mix(in srgb, var(--ink) 7%, #fff); /* Elevation is a hairline, not a shadow. */ --item-border: var(--ink); --item-shadow: none; --note-shadow: none; --shadow-1: none; --shadow-2: 0 8px 28px color-mix(in srgb, var(--ink) 18%, transparent); /* Nothing moves on its own, and nothing rests off square. */ --lift-hover: 0px; --grow-hover: 1; --lift-drag: 0px; --tilt-drag: 0deg; --btn-lift: 0px; --btn-grow: 1; --btn-press: 1; --tilt-max: 0deg; /* 0px, not 0. These are lengths, and a bare 0 is a *number*: calc() cannot add a number to a length, so an unsuffixed zero here silently invalidated every expression downstream that offsets a radius - including the one that sizes the selection's corner marks, which collapsed to nothing. */ --radius: 0px; --radius-sm: 0px; --radius-xs: 0px; --leaf: 0px; --ogee: 0px; --note-radius: 0px; --sel-gap: 4px; --sel-line: 2px; --sel-corner: 3.2px; --sel-reach: 14px; /* One sans, top to bottom - and the serif is not merely unused here, it is unnamed, so a board left at this end never downloads it. */ --font-display: "Geist", -apple-system, "Helvetica Neue", Helvetica, "Liberation Sans", system-ui, sans-serif; --font-body: var(--font-display); --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; --display-italic: normal; --ls-scale: 0.5; /* Swiss takes its contrast from weight and rule, not from size. These are the smallest of the three, and the type still reads as the loudest, because nothing around it is competing. */ --t-display: 25px; --t-title: 19px; /* No blooms and no vignette: the ornament in the paper is Middle's, not this end's. Which is the whole reason --paper above has to be a colour that can stand up flat - with this at 0 there is nothing else left in the sheet. */ --wash: 0; /* A fine lattice, but a *visible* one. At 1px and 0.11 these were painted and not seen: a 1px radius is two pixels across before antialiasing eats the edges, and an eighth of an alpha on near-white paper finished the job. Harsh is spare, not blank. This is the one level where the lattice is not dots - canvas/grid.js reads data-whimsy and marks each intersection with a small cross instead, which is the drawing-office register mark this end of the axis is quoting. Both numbers still mean what they mean everywhere else, so the Grid weight and Grid strength sliders keep working; --grid-dot is simply spent on an arm's thickness rather than on a radius, and a cross lays down more ink than a dot of the same weight, so the lattice reads a shade firmer here than the 0.16 alone would suggest. That is the intent, not an oversight. */ --grid-alpha: 0.16; --grid-dot: 1.5px; --dur-fast: 0.1s; --dur-base: 0.15s; --ease: ease; --ease-back: ease; --dur-zoom: 110ms; --dur-travel: 220ms; }