/* Deft Oryx — the brand, in tokens. * * This file is site-owned: it is the one place a colour, a length or a font * stack is written down. `uilib/static/uilib/uilib.css` and * `core/static/core/core.css` describe structure only and read every value * they paint from the `--uilib-*` custom properties below, so rebranding * this site is an edit to this file and nothing else. A token they read that * is missing here degrades to its `var()` fallback rather than erroring — * legible and unbranded, never invisible. * * `static/css/theme-dark.css` is the matched fixture that proves the seam * holds: it defines exactly this token set in different values, and swapping * the one `` in `core/templates/core/base.html` flips the whole site. * `tests/test_theme.py` asserts set equality in both directions, so a token * added here must be added there in the same commit. * * --------------------------------------------------------------------- * The direction: deep blue, vivid orange, and one section with no colour * * Flat UI Palette v1 (flatuicolors.com/palette/defo) was the starting point * rather than the boundary. What survives from it: the three blue grounds * are darkened Belize Hole #2980b9, and the three neutrals are its Clouds, * Silver and Concrete. The colour roles and the aside are mixed. * * THE GROUND IS WHY THE ACCENTS WORK. This is the one thing to understand * before changing a value here. An earlier version of this theme ran the * blue ladder three steps lighter (#123147 / #183d58), and on it every * saturated accent failed AA against `--uilib-surface` — vermilion measured * 3.3:1, fuchsia 3.3:1, magenta 3.1:1. The only way to reach the floor was * to lighten the accent, and lightening a hue is what makes it read dusty. * Five accents were tried and rejected on that ground for looking washed * out; the accent was never the problem, the ground was. Deepening the * ladder to what is below took vermilion to 4.6:1 and this orange to 6.1:1. * * So: do not lighten the grounds to make a section "pop". Every accent on * the site is priced against `--uilib-surface`, and lifting it spends that * budget. * * Contrast (WCAG 2.1 AA — 4.5:1 for body text, 3:1 for non-text UI). Every * pair `uilib.css` and `core.css` actually draw, measured: * * --uilib-ink on --uilib-paper 15.7:1 * --uilib-ink on --uilib-surface 13.8:1 * --uilib-ink on --uilib-shade 17.2:1 * --uilib-ink on --uilib-aside 15.4:1 * --uilib-muted on --uilib-paper 10.1:1 * --uilib-muted on --uilib-surface 8.9:1 * --uilib-muted on --uilib-shade 11.1:1 * --uilib-muted on --uilib-aside 9.9:1 * --uilib-accent on --uilib-paper 6.9:1 * --uilib-accent on --uilib-surface 6.1:1 * --uilib-accent on --uilib-shade 7.6:1 * --uilib-accent on --uilib-aside 6.8:1 * --uilib-accent-ink on --uilib-accent 7.6:1 * --uilib-highlight on --uilib-paper 9.7:1 * --uilib-highlight on --uilib-surface 8.5:1 * --uilib-highlight on --uilib-shade 10.6:1 * --uilib-highlight on --uilib-aside 9.5:1 * --uilib-figure on --uilib-paper 12.4:1 * --uilib-figure on --uilib-surface 10.9:1 * --uilib-figure on --uilib-shade 13.6:1 * --uilib-figure on --uilib-aside 12.2:1 * --uilib-border on --uilib-paper 7.1:1 (non-text floor is 3:1) * --uilib-border on --uilib-surface 6.2:1 * --uilib-focus on --uilib-paper 6.9:1 (non-text floor is 3:1) * --uilib-focus on --uilib-surface 6.1:1 * * The tightest pair clears its floor by 1.57 — there is real headroom here, * where the previous ground left the accent clearing by 0.11. * * The focus ring is drawn with `outline-offset`, so it lands on the page * behind a control rather than on the control itself. * * Change a colour here and recompute before shipping. The site, not a * library, owns this promise. */ :root { /* Structure ---------------------------------------------------------- * `--uilib-measure` is the reading column for prose. `--uilib-gutter` is * the page's horizontal edge. `--uilib-rhythm` is the vertical space a * full-bleed section gives itself, top and bottom, and the rhythm between * the elements it stacks — generous here, because space is most of what * makes a page of plain copy feel considered rather than cheap. */ --uilib-measure: 62ch; --uilib-gutter: clamp(1.25rem, 5vw, 3rem); --uilib-rhythm: clamp(3rem, 7vw, 5rem); /* The corner this site cuts. Square everywhere, except the small radius a * control needs to read as pressable and the chamfer below. */ --uilib-radius: 2px; /* The chamfer — one clipped corner on a card, a plate or the form panel. * A cut, not a curve: it is the only ornament this design carries, and it * says "plate" rather than "app". */ --uilib-chamfer: 18px; /* Colour -------------------------------------------------------------- * Four grounds, three colour roles, two neutrals. The ladder is deep on * purpose — see the note above. */ /* The page. Darkened BELIZE HOLE #2980b9. */ --uilib-paper: #0a1725; --uilib-ink: #ecf0f1; /* CLOUDS */ /* A section that reads as a distinct band. One step up from the page — * and the lightest of the four grounds, which makes it the one every * accent is measured against. */ --uilib-surface: #102434; --uilib-surface-ink: #ecf0f1; /* CLOUDS */ /* The deepest plate: the masthead the page opens on and the call-to-action * band it closes on. Deliberately not the footer — `core.css` paints that * on the surface pair so the two do not merge into one slab. */ --uilib-shade: #050b12; --uilib-shade-ink: #ecf0f1; /* CLOUDS */ /* The fourth ground: the section where a person speaks in the first * person, and the only place on the site with no colour in it at all. * * That is the argument, not a shortage of ideas. Everywhere else on this * page is the business talking, and everywhere else is branded. The one * section written in the first person — the one that names what being a * one-person shop cannot do — stops being branded, and the colour drains * out of the ground to say so. * * A warm oxblood was tried first and was wrong twice over: it competed * with `--uilib-accent` for the warmest thing on the page, which the call * to action has to win, and it made the section louder when the point is * that it is quieter. An aubergine and a deep indigo were tried too; the * indigo read as the blue getting more purple, which is a variation, and * `--uilib-surface` is already the token for those. * * Sits within 1.02:1 of the page in *lightness*, so the band reads as a * change of hue rather than a change of emphasis. Nothing else on the site * uses it. */ --uilib-aside: #15191d; --uilib-aside-ink: #ecf0f1; /* CLOUDS */ /* Second-rank copy: an intro's supporting line, a spec value, a caption. */ --uilib-muted: #bdc3c7; /* SILVER */ /* THREE COLOUR ROLES, not one accent ----------------------------------- * * Colour is assigned by job. Pointing two roles at one token is what made * an earlier pass read as monochrome: every coloured thing on the page was * the same colour, so there was nowhere for a second hue to live. * * --uilib-accent action — a button, a link, the edge of a plate, an * error. Anything a visitor can act on. * --uilib-highlight label — an eyebrow, a spec label, a group label, a * form label. What the site names itself with. * --uilib-figure figure — numerals, and nothing else. * * A new coloured element belongs to exactly one of these. If it does not * obviously belong to any, it probably should not be coloured. */ /* Action — vivid orange, at full chroma. It has to be a *colour*, never a * near-white: `--uilib-accent` also paints a link in body copy and an * invalid form field, and near-white on near-white ink leaves a link * distinguishable only by its underline and turns a rejected field white * instead of alarming. Two of the three things this token does are * states. */ --uilib-accent: #ff7a00; --uilib-accent-ink: #050b12; /* Label — sky. Cool and light, so it names a section without competing * with the orange control near it: labels are the most frequently repeated * coloured element on the site, and a warm label beside a warm action * colour turns every section heading into a second call to action. */ --uilib-highlight: #7fc7ea; /* Figure — sand. A warm neutral rather than a third saturated hue: a * number counts, it does not call, and the page already has one thing * shouting. */ --uilib-figure: #e6d5a8; --uilib-border: #95a5a6; /* CONCRETE */ --uilib-focus: #ff7a00; /* Type ------------------------------------------------------------------ * The faces themselves are declared in `static/css/fonts.css` and served * from this site's own origin. Only the stacks are here. * * Display and utility: Bricolage Grotesque — headlines, and, in caps with * wide tracking, every small label on the site, so no third family is * needed for the utility role. Body: Newsreader, a serif drawn for * screens. The fallbacks are picked for width, not for looks: the page * reflows once when a face lands and should not relayout. * * `--uilib-font-mono` sets the ledger rows — a label/value plate is data, * and data wants figures that line up. */ --uilib-font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif; --uilib-font-body: "Newsreader", Georgia, "Times New Roman", serif; --uilib-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }