/* ========================================================================== MultiUnitOperators.com V2 - DESIGN TOKENS -------------------------------------------------------------------------- This is the only file you need to edit to change the look of the site. Nothing below this file should contain a raw hex value, px size or font name. Dials for this pass: DESIGN_VARIANCE 6 / MOTION_INTENSITY 3 / VISUAL_DENSITY 4 Accent policy: ONE clickable colour (Prussian blue). Orange is the statement and is never type and never a link. Radius policy: ONE radius value for every box on the page. ========================================================================== */ :root { /* ---- Colour: light (default) ------------------------------------------ Five values: black, Prussian blue, orange, a grey, and white. White is the ground, which is the change that does the most work: the page reads as paper rather than as a surface with a colour applied to it. The set is deliberately narrow. Two hues means nothing on the page can be ambiguous about what it is: blue is the thing you click, orange is the thing you are meant to notice, everything else is black on white with a grey in between. Change --c-accent first if the brand moves. */ /* THE PAGE IS WHITE. It was cream for a while, on the argument that a warm ground is what stops a site reading as a product page. That argument is real but it was not what this brand wanted, and the rest of the editorial work does the job without it: the serif, the hairlines, the square corners and the masthead are what make this read as a publication, not the temperature of the paper. The greys are neutral again for the same reason they were warm before. A warm hairline reads as considered on cream and as dirt on white. */ --c-ground: #FFFFFF; /* the page */ --c-surface: #FFFFFF; /* cards sit on the ground, divided by rule */ --c-surface-2: #F5F5F5; /* recessed blocks, a half step off white */ --c-surface-warm: #FAFAFA; /* the podcast rail. A half step, no tint */ --c-ink: #000000; /* headlines, primary text. 21:1 */ --c-ink-2: #3A3A3A; /* body, standfirsts. 11.4:1 */ --c-ink-3: #6E6E6E; /* meta, captions. 5.6:1 on white */ --c-ink-4: #8C8C8C; /* read times, the one tertiary grey. 3.5:1, so it is never used for anything that has to be read, only for texture */ --c-rule: #E5E5E5; /* hairlines. THE separator on this site */ --c-rule-strong: #C9C9C9; /* input borders, stronger dividers */ --c-accent: #14213D; /* Prussian. The ONLY clickable colour. 16:1 */ --c-accent-hover: #2A3F6B; --c-accent-tint: #E9ECF2; --c-on-accent: #FFFFFF; --c-focus: #14213D; /* ---- The statement colour ---------------------------------------------- Orange is the loudest thing on the site and it is never a link. It is a block: a button fill, a rule, a marker. At 2:1 on white it cannot be read as type, so when a word has to be set in it use --c-statement-ink, which is the same orange taken down until it clears AA. */ --c-statement: #FCA311; /* 2.0:1 on white. Blocks only, never type. */ --c-statement-ink: #9A6100; /* 5.1:1 on white. The readable version. */ /* Ink for type sitting ON the orange fill, as the primary button does. It has to be its own token because orange is the one colour that does not flip between themes, so the ink on it must not flip either. Written as Prussian's own value rather than var(--c-accent): the accent inverts in dark mode, and when it did under the previous palette, the primary button on every page fell to 1.2:1. Declared once and never redefined below. */ --c-on-statement: #14213D; /* 7.9:1 on orange, in both themes. */ /* A surface that stays light in dark mode, for third party content we cannot theme. An embedded form renders in a cross-origin iframe and draws its own light fields and dark labels whatever the page is doing, so a card that inverted underneath it put slate labels on near-black and left the fields as white slabs floating in the dark. These two are the light values of --c-surface and --c-rule, pinned. Like --c-on-statement, they are declared once and never redefined in either dark block. */ --c-surface-fixed: #FFFFFF; --c-rule-fixed: #E5E5E5; /* The same argument, for artwork rather than iframes, and the reason the ad strip is not built from the tokens above at all. An advertiser's mark is drawn for one ground and is the one asset class never graded into this palette: the Peoplebox mark is #5F28B5, which measures 2.24:1 on a dark surface and all but disappears. So the strip wears the advertiser's own colours in both themes. The gradient is the one Peoplebox puts on their own banner (.banner in their one pager) and the ink, muted, line and purple are their declared variables, which is also what makes a reader register the strip as an ad rather than as one more thing the publication is saying. Declared once and never redefined in either dark block. */ --ad-pb-gradient: linear-gradient(102deg, #EDE7FD 0%, #F3EFFE 50%, #FBF0EC 100%); --ad-pb-ink: #1F1235; --ad-pb-muted: #6C6383; --ad-pb-line: #E7E0F5; --ad-pb-purple: #5B28C6; /* ---- The topic accents, now collapsed ----------------------------------- THESE ARE ALL THE SAME COLOUR ON PURPOSE. It is not an oversight. The previous palette coded eight topics with eight distinguishable colours, and a reader could learn the colour of Labor without being told. This palette has two hues. Eight readable, non-arbitrary categories cannot be built from blue and orange without inventing six more colours, and inventing colours is the thing the brief rules out. So topic coding is gone. Every topic label is Prussian, every topic tint is the grey, and a section is identified by its words and its position rather than by its hue. That is how most print magazines have always worked, and it suits the editorial direction. The tokens are kept rather than deleted so nothing downstream breaks and so the decision is reversible from this file alone. If a coded system is wanted again, it needs new hues added to the palette deliberately. */ --c-accent-2: #14213D; --c-accent-3: #14213D; --c-accent-4: #14213D; --c-accent-5: #14213D; --c-accent-6: #14213D; --c-accent-7: #14213D; --c-accent-6-full: #14213D; --c-accent-7-full: #14213D; --c-accent-2-tint: #E5E5E5; --c-accent-3-tint: #E5E5E5; --c-accent-4-tint: #E5E5E5; --c-accent-5-tint: #E5E5E5; --c-accent-6-tint: #E5E5E5; --c-accent-7-tint: #E5E5E5; /* ---- Section grounds ---------------------------------------------------- What a full width band may sit on. The dark band is Prussian rather than black: black on white is the page's normal contrast, so a black band would read as more of the same, where the blue reads as a change of register. */ --c-ground-news: #F5F5F5; /* newsprint. A half step down from the page */ --c-ground-ink: #14213D; /* the dark band. Prussian at full strength. */ --c-on-ink: #FFFFFF; /* type on the dark band. 16:1 */ --c-on-ink-2: #B9C2D4; --c-accent-on-ink: #FCA311; /* Prussian cannot read on Prussian, so the action colour on the band is the orange. 7.9:1, and the pairing this palette is built around */ /* The same six on the dark band. Two values alternating rather than six, for the same reason as above: there are not six colours to give them. The alternation keeps the ticker from reading as one flat run of orange. */ --c-a2-on-ink: #FCA311; --c-a3-on-ink: #B9C2D4; --c-a4-on-ink: #FCA311; --c-a5-on-ink: #B9C2D4; --c-a6-on-ink: #FCA311; --c-a7-on-ink: #B9C2D4; /* ---- Topic tints -------------------------------------------------------- One grey, eight times over. Card grounds and page head washes. See the note on the collapsed accents above: with two hues in the palette there is no honest way to give eight sections eight tints. */ --c-tint-1: #E5E5E5; --c-tint-2: #E5E5E5; --c-tint-3: #E5E5E5; --c-tint-4: #E5E5E5; --c-tint-5: #E5E5E5; --c-tint-6: #E5E5E5; --c-tint-7: #E5E5E5; --c-tint-8: #E5E5E5; /* ---- Slab geometry ------------------------------------------------------ Homepage sections are stacked cards rather than a continuous scroll. Adjacent slabs sit flush, so their rounded corners open a small notch of page floor at each boundary. That notch is what reads as layering, and it replaces the hairline rules the sections used to carry. */ --r-slab: 40px; --slab-inset: 8px; /* Semantic. Only for good / warning / bad states, never for emphasis. */ --c-good: #14213D; /* Prussian. Success, never emphasis. */ --c-warn: #9A6100; /* 5.4:1 on surface */ --c-danger: #A3283A; /* 6.3:1 on surface */ /* ---- Type ------------------------------------------------------------- Display serif is deliberate: the brief is a trade publication, not a SaaS product. Body is a neutral grotesque so long reading stays comfortable. */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --fs-display: clamp(2.25rem, 1.4rem + 2.8vw, 3.4rem); --fs-h2: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); --fs-h3: 1.18rem; --fs-h4: 1.02rem; --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); --fs-body: 1.0rem; --fs-sm: 0.905rem; --fs-xs: 0.8rem; --lh-display: 1.08; --lh-heading: 1.22; --lh-body: 1.62; --tracking-display: -0.018em; --tracking-label: 0.08em; /* ---- Spacing (4px base) ---------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 5.5rem; --s-10: 7rem; --section-y: var(--s-9); /* vertical rhythm between sections */ --section-y-tight: var(--s-8); /* ---- Shape ------------------------------------------------------------ ONE radius for the whole page. Do not add a second value. */ /* ZERO. 4px was the most generic value in this file: not a decision, the number everyone lands on. Square edges are what make the cards read as print. Photographs keep a radius, and they are the only thing that does. */ --radius: 0; --radius-photo: 8px; --border: 1px solid var(--c-rule); --border-strong: 1px solid var(--c-rule-strong); /* ---- Widths ----------------------------------------------------------- */ --w-page: 1160px; /* main container */ --w-read: 68ch; /* comfortable reading measure */ --w-narrow: 640px; /* centred CTA copy, forms */ /* ---- Motion (MOTION_INTENSITY 3: hover and focus only, no autoplay) ---- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 140ms; --header-h: 68px; /* nav height cap is 80px */ } /* ---- Colour: dark ------------------------------------------------------- Same tokens, different values. Hierarchy and contrast parity maintained. The page never mixes modes: one theme for every section. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-ground: #000000; --c-surface: #0D0D0D; --c-surface-2: #1A1A1A; --c-ink: #FFFFFF; --c-ink-2: #C4C4C4; --c-ink-3: #9E9E9E; /* 7.8:1 on black, 6.5:1 on the raised surface */ --c-ink-4: #757575; /* 4.4:1 on black. Texture only, as in light */ --c-surface-warm: #1A1A1A; /* the rail. Warm is a light theme idea, so in dark it is simply the raised surface */ --c-rule: #262626; --c-rule-strong: #404040; /* Prussian measures 1.3:1 on black, so it cannot be the action colour here. It lifts to a pale blue and the ink sits on top. */ --c-accent: #8FA8D9; --c-accent-hover: #A8BEE8; --c-accent-tint: #141B2A; --c-on-accent: #000000; --c-focus: #8FA8D9; --c-statement: #FCA311; --c-statement-ink: #FCA311; /* The six accents, lifted for a dark ground. Same six hues, same family relationship, raised until each clears 5:1 on --c-ground. */ --c-accent-2: #8FA8D9; --c-accent-3: #8FA8D9; --c-accent-4: #8FA8D9; --c-accent-5: #8FA8D9; --c-accent-6: #8FA8D9; --c-accent-7: #8FA8D9; --c-accent-6-full:#8FA8D9; --c-accent-7-full:#8FA8D9; --c-accent-2-tint:#1A1A1A; --c-accent-3-tint:#1A1A1A; --c-accent-4-tint:#1A1A1A; --c-accent-5-tint:#1A1A1A; --c-accent-6-tint:#1A1A1A; --c-accent-7-tint:#1A1A1A; --c-ground-news: #0D0D0D; --c-ground-ink: #14213D; --c-on-ink: #FFFFFF; --c-on-ink-2: #B9C2D4; --c-accent-on-ink:#FCA311; /* Topic tints, the same eight hues at 12 to 17 per cent lightness so the grid keeps its colour coding without glowing on a dark ground. */ --c-tint-1: #1A1A1A; --c-tint-2: #1A1A1A; --c-tint-3: #1A1A1A; --c-tint-4: #1A1A1A; --c-tint-5: #1A1A1A; --c-tint-6: #1A1A1A; --c-tint-7: #1A1A1A; --c-tint-8: #1A1A1A; --c-good: #8FA8D9; --c-warn: #FCA311; --c-danger: #E08A7E; } } :root[data-theme="dark"] { --c-ground: #000000; --c-surface: #0D0D0D; --c-surface-2: #1A1A1A; --c-ink: #FFFFFF; --c-ink-2: #C4C4C4; --c-ink-3: #9E9E9E; /* 7.8:1 on black, 6.5:1 on the raised surface */ --c-ink-4: #757575; /* 4.4:1 on black. Texture only, as in light */ --c-surface-warm: #1A1A1A; /* the rail. Warm is a light theme idea, so in dark it is simply the raised surface */ --c-rule: #262626; --c-rule-strong: #404040; /* Prussian measures 1.3:1 on black, so it cannot be the action colour here. It lifts to a pale blue and the ink sits on top. */ --c-accent: #8FA8D9; --c-accent-hover: #A8BEE8; --c-accent-tint: #141B2A; --c-on-accent: #000000; --c-focus: #8FA8D9; --c-statement: #FCA311; --c-statement-ink: #FCA311; /* The six accents, lifted for a dark ground. Same six hues, same family relationship, raised until each clears 5:1 on --c-ground. */ --c-accent-2: #8FA8D9; --c-accent-3: #8FA8D9; --c-accent-4: #8FA8D9; --c-accent-5: #8FA8D9; --c-accent-6: #8FA8D9; --c-accent-7: #8FA8D9; --c-accent-6-full:#8FA8D9; --c-accent-7-full:#8FA8D9; --c-accent-2-tint:#1A1A1A; --c-accent-3-tint:#1A1A1A; --c-accent-4-tint:#1A1A1A; --c-accent-5-tint:#1A1A1A; --c-accent-6-tint:#1A1A1A; --c-accent-7-tint:#1A1A1A; --c-ground-news: #0D0D0D; --c-ground-ink: #14213D; --c-on-ink: #FFFFFF; --c-on-ink-2: #B9C2D4; --c-accent-on-ink:#FCA311; /* Topic tints, the same eight hues at 12 to 17 per cent lightness so the grid keeps its colour coding without glowing on a dark ground. */ --c-tint-1: #1A1A1A; --c-tint-2: #1A1A1A; --c-tint-3: #1A1A1A; --c-tint-4: #1A1A1A; --c-tint-5: #1A1A1A; --c-tint-6: #1A1A1A; --c-tint-7: #1A1A1A; --c-tint-8: #1A1A1A; --c-good: #8FA8D9; --c-warn: #FCA311; --c-danger: #E08A7E; } /* ========================================================================== TOPIC KEYS Eight classes, one per topic, each setting two local variables. Put one on a page wrapper and everything inside it that reads --topic or --topic-tint takes that topic's colour: the header ground, the icon, the rules, the drop cap. This is what makes a resources page feel like Labor rather than like a generic page about labor, and it is why the accents exist at all. Anything that can be clicked still takes --c-accent. A topic colour is furniture, on every page, without exception. ========================================================================== */ .t-hiring { --topic: var(--c-accent-2); --topic-tint: var(--c-tint-1); --topic-ink: var(--c-a2-on-ink); } .t-labor { --topic: var(--c-accent-4); --topic-tint: var(--c-tint-2); --topic-ink: var(--c-a4-on-ink); } .t-operations { --topic: var(--c-accent); --topic-tint: var(--c-tint-3); --topic-ink: var(--c-accent-on-ink); } .t-technology { --topic: var(--c-accent-5); --topic-tint: var(--c-tint-4); --topic-ink: var(--c-a5-on-ink); } .t-finance { --topic: var(--c-accent-3); --topic-tint: var(--c-tint-5); --topic-ink: var(--c-a3-on-ink); } .t-growth { --topic: var(--c-accent-6); --topic-tint: var(--c-tint-6); --topic-ink: var(--c-a6-on-ink); } .t-marketing { --topic: var(--c-accent-7); --topic-tint: var(--c-tint-7); --topic-ink: var(--c-a7-on-ink); } .t-compliance { --topic: var(--c-accent); --topic-tint: var(--c-tint-8); --topic-ink: var(--c-accent-on-ink); }