/** * tokens.css — the five colours, the surfaces they make, motion, and the one * screen-only status colour. * * THE PALETTE (Ollie, 20 Oct 2026). Five colours, declared ONCE, in * theme.json; this file only aliases the variables WordPress generates from * them, under the names Ollie gave them, so there is a single source of * truth and no opportunity for a hex to drift: * * --bp-pearl-grey #7A7B7A primary background (RAL 9023, the trailer) * --bp-black #111111 logo, text, line art (rich black) * --bp-orange #E8622A rules and accents only, and button fills * --bp-light-grey #C9CAC7 secondary surface * --bp-white #F6F4EF text on black (warm white) * * The pairings he set, as measured (WCAG 2.x relative luminance): * * Black on Pearl Grey 4.44:1 headings and the logo only: large type * Black on Light Grey 11.47:1 body text, menus * White on Black 17.18:1 the footer, call-to-action blocks * Black on Orange 5.59:1 buttons only * * Orange is never a text colour on Pearl Grey, Light Grey or White. Body * text never stands on Pearl Grey: it goes on a Light Grey surface (a card, * a band, the header) or on a Black block in White. * tests/e2e/contrast.test.mjs reads every word on every page and holds each * to one of the four pairings. * * The eight greys and the two Brooklyn oranges of September (Ink, Void, * Graphite, Dark Petal, Petal Light, Mist, Paper, Snow, Brooklyn orange and * its lighter step) are retired. Their names are gone from this file, so a component cannot * reach for one; tools/lint-brand.mjs fails the build if one comes back. * Brooklyn OS keeps its own copies (--o-* in office.css), so the team's app * looks exactly as it did. * * Components never name one of the five directly where a role exists; they * use the SEMANTIC layer below (--bpc-field, --bpc-card, --bpc-type and so * on), so a surface can be changed in one place. That is how the whole site * moved to this palette. */ :root { /* ---- The five (values come from theme.json) ------------------------- */ --bp-pearl-grey: var(--wp--preset--color--pearl-grey); --bp-black: var(--wp--preset--color--black); --bp-orange: var(--wp--preset--color--orange); --bp-light-grey: var(--wp--preset--color--light-grey); --bp-white: var(--wp--preset--color--white); /** * Screen-only status colour. Deliberately absent from the theme palette so * the block editor can never place it on a marketing page — it exists only * for portal status marks. It is a mark, never type: on Light Grey it * measures 3.82:1, short of AA for words, so the words beside it are Black. * * TODO: the Design Master says "quiet green" but never pins a hex. This is * a considered placeholder and needs Ollie's confirmation before launch. */ --bpc-status-paid: #2F6B4F; /* ---- Motion --------------------------------------------------------- * One curve, one duration scale. The Design Master refuses clay 3D, so * the feeling of expense comes from precision; the one raised object, the * menu bar Ollie asked for on 25 Sep, is lit metal rather than inflated * plastic (components.css). No component invents its own timing. */ --bpc-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --bpc-dur: 260ms; --bpc-dur-slow: 300ms; --bpc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* things arriving: quick, then settling (26 Sep) */ --bpc-dur-reveal: 640ms; /* the hero, the two progress lines, the oven and the office anchor wash only */ --bpc-dur-quick: 160ms; /* feedback, exits, closing scrims, small things dropping in */ --bpc-rise: 4px; /* the one distance an arriving thing travels */ /* The office's own pass mirrors these as --o-* in office.css: change them together. */ /* ---- Rules and edges ------------------------------------------------ */ --bpc-hairline: 1px; --bpc-radius: 2px; /* slight radius, never a pill */ --bpc-radius-button: 999px; /* buttons: pills, as on the July site (Ollie, 26 Sep: "like the design before") */ /* * The forms' own corners (28 Sep): a field or a tile 8px, an open list * 12px, an option inside it 6px, a dietary need a pill, a phone's sheet * 16px at its top. Named so the portal can take them to its one small * radius (21 Oct) while the site's forms keep theirs. */ --bpc-radius-control: 8px; --bpc-radius-panel: 12px; --bpc-radius-inner: 6px; --bpc-radius-chip: 999px; --bpc-radius-sheet: 16px; /* a list that opens as a sheet from the foot of a phone */ } /* ---- The field: Pearl Grey ground, Light Grey surfaces, Black type -------- */ /* * The roles, as Ollie set them on 20 Oct: * * field Pearl Grey: the page. Headings, photographs and the logo * stand on it; nothing smaller than a heading does. * card Light Grey: every surface that carries words — cards, the * header and its menus, the facts band, the forms. * type Black, everywhere on the two greys. There is no grey type * any more: quieter lines are quieter by size and weight. * type-hint Black at 65%, for one thing only: the hint in an empty * field (a placeholder, "Choose one"), so an empty box never * looks like an answer already given (21 Oct). 4.78:1 on * Light Grey, over AA. Never a word of content. * display Black: headlines of 24px and up, the one type Pearl takes. * rule Black at a fraction, so a hairline reads on Pearl Grey and * on Light Grey alike; the strong rule is Black itself. * input A field, a tile, a chip and the list a field opens: the * fill, its edge, and an option under the pointer. On the * site the card's own Light Grey with a Black edge. * chrome The header and the phone's tab bar, and the line at the * header's foot: Light Grey and Black on the site. * accent Orange: the short rules, the marks, an underline under the * pointer. Never the colour of a word. * button Orange with Black words (5.59:1), a darker orange edge; * under the pointer it warms towards White, so the words * only gain contrast. * shadow, sheen Black and White, the only two colours a shadow or a * highlight is mixed from. */ body { --bpc-field: var(--bp-pearl-grey); --bpc-card: var(--bp-light-grey); --bpc-card-hover: color-mix(in srgb, var(--bp-black) 8%, var(--bp-light-grey)); /* a row under the pointer: Black on it 9.7:1 */ --bpc-type: var(--bp-black); --bpc-type-quiet: var(--bp-black); --bpc-type-strong: var(--bp-black); --bpc-type-display: var(--bp-black); --bpc-type-hint: color-mix(in srgb, var(--bp-black) 65%, transparent); /* an empty field's hint only: 4.78:1 on Light Grey */ --bpc-rule: color-mix(in srgb, var(--bp-black) 28%, transparent); --bpc-rule-strong: var(--bp-black); --bpc-accent: var(--bp-orange); --bpc-input-border: var(--bp-black); --bpc-input-fill: var(--bp-light-grey); --bpc-input-hover: var(--bpc-card-hover); /* an option under the pointer, in an open list */ --bpc-chrome: var(--bp-light-grey); /* the header and the phone's tab bar */ --bpc-chrome-rule: var(--bp-black); /* the line at the header's foot */ --bpc-rule-detail: var(--bp-black); /* the fine lines inside the portal card of the header and the menu sheet (26 Sep) */ --bpc-card-edge: transparent; /* a card's own edge: none on the site, where the tonal step is the separation; Light Grey in the portal */ --bpc-btn-fill: var(--bp-orange); --bpc-btn-fill-hover: color-mix(in srgb, var(--bp-orange) 82%, var(--bp-white)); /* Black on it: 6.6:1 */ --bpc-btn-type: var(--bp-black); --bpc-btn-edge: color-mix(in srgb, var(--bp-orange) 62%, var(--bp-black)); /* a small darker edge (Ollie, 26 Sep: "Have a small border in the cta") */ --bpc-pill-fill: var(--bp-light-grey); --bpc-pill-type: var(--bp-black); --bpc-shadow: var(--bp-black); --bpc-sheen: var(--bp-white); } /* * White on Black: the footer and the call-to-action blocks (20 Oct): the * site's footer (.bpc-footer), the block that closes a page (.bpc-closing) * and anything else given .bpc-on-black. The same roles, turned round, so a * component inside one needs nothing of its own: its words become White, * its hairlines White at a fraction, and the button stays orange with Black * words. */ .bpc-on-black, .bpc-footer, .bpc-closing { --bpc-field: var(--bp-black); --bpc-card: var(--bp-black); --bpc-card-hover: color-mix(in srgb, var(--bp-white) 10%, var(--bp-black)); --bpc-type: var(--bp-white); --bpc-type-quiet: var(--bp-white); --bpc-type-strong: var(--bp-white); --bpc-type-display: var(--bp-white); --bpc-type-hint: color-mix(in srgb, var(--bp-white) 65%, transparent); --bpc-rule: color-mix(in srgb, var(--bp-white) 32%, transparent); --bpc-rule-strong: var(--bp-white); --bpc-input-border: var(--bp-white); --bpc-input-fill: var(--bp-black); --bpc-input-hover: color-mix(in srgb, var(--bp-white) 10%, var(--bp-black)); --bpc-pill-fill: var(--bp-black); --bpc-pill-type: var(--bp-white); --bpc-btn-secondary-edge: var(--bpc-rule); /* the portal's own, below, never reaches a Black block */ background-color: var(--bp-black); color: var(--bpc-type); } /* ---- The portal: a White page, White cards with a fine line (21 Oct) ------- * * Ollie, 21 Oct: "The portal dosent look moderns ellegent. Use the light * grey / white not the dark grey", "Just the portal", and then, of the * cards, "White cards, thin line": no solid Light Grey slabs. The body * class is on every portal screen (the pay page among them), the sign-in * and Register, and nowhere else (functions.php, brooklyn_is_portal_scope()); * the rest of the site keeps every role above. * * field Premium White with a tenth of Light Grey in it, so a * White card lifts off it (his rule allows up to a fifth, * never darker). No Pearl Grey anywhere in the portal. * Black on it is 16:1, so in the portal body text may stand * on the page as well as on a card. * card Premium White, every card and panel, with one fine Light * Grey edge (--bpc-card-edge) instead of a grey slab. * chrome The header and the tab bar are White too, set off from * the page by one Light Grey hairline. * rule Light Grey: the one weight of line in the portal (card * edges, between rows, under the header, round the tab bar, * inside the portal card of the menu sheet). * input A field, a tile or a chip is White with an edge of Black * at 60% (4.9:1 on White, so it is seen as a control); * under the pointer, focused or chosen, the edge is Black * itself, and a chosen tile's doubles, so every state reads. * A secondary button takes the same edge * (--bpc-btn-secondary-edge), so it reads as a button and * not as a hairline. * pill A status chip keeps its small quiet Light Grey fill. * fill A row while it is pressed: a third of Light Grey in White. * radius One small soft radius, 6px (Ollie, 21 Oct evening: cards * keep "a small soft radius"), for every card, panel, * field, tile and list. Every button and call to action is * a full pill ("Cta more rounded I do not want or like * square !!!"): --bpc-radius-button, as on the site; and * "Chips, toggles and selectors are round too", so a chip * is a full pill as well. * room One room inside every card (--bpc-card-pad-y and -x: 16px * on a phone, 24px by 28px from an iPad up) and one gap * between cards (--bpc-stack: 12px, 16px), so the cards' * edges and their words line up from screen to screen, and * no band of empty room opens between them. * header The logo row and the menu at the top (plan R1, "Menu at * the top instead"): 52px and 44px on a phone, 64px and * 48px from an iPad up; the page's gutter (20px, 48px from * an iPad, 64px from 1100px) and its column (the screen on * a phone, 640px from an iPad, 880px from 1100px), which * the header and every screen share, centred together. * * Orange stays where it was: button fills, the short rules, the marks. */ body.bpc-field-portal { --bpc-field: color-mix(in srgb, var(--bp-light-grey) 10%, var(--bp-white)); --bpc-card: var(--bp-white); --bpc-card-edge: var(--bp-light-grey); --bpc-card-hover: var(--bpc-input-hover); --bpc-chrome: var(--bp-white); --bpc-chrome-rule: var(--bp-light-grey); --bpc-rule: var(--bp-light-grey); --bpc-rule-detail: var(--bpc-rule); --bpc-input-fill: var(--bp-white); --bpc-input-border: color-mix(in srgb, var(--bp-black) 60%, transparent); --bpc-input-hover: color-mix(in srgb, var(--bp-black) 6%, var(--bp-white)); /* Black on it 15:1 */ --bpc-btn-secondary-edge: var(--bpc-input-border); --bpc-fill: color-mix(in srgb, var(--bp-light-grey) 32%, var(--bp-white)); /* a row while pressed: Black on it 15.6:1 */ --bpc-radius: 6px; --bpc-radius-control: var(--bpc-radius); --bpc-radius-panel: var(--bpc-radius); --bpc-radius-inner: var(--bpc-radius); --bpc-radius-chip: var(--bpc-radius-button); --bpc-radius-sheet: var(--bpc-radius); --bpc-card-pad-y: 1rem; --bpc-card-pad-x: 1rem; --bpc-stack: 0.75rem; /* The header and the column (plan R1). */ --bpc-p-brand-h: 3.25rem; --bpc-p-menu-h: 2.75rem; --bpc-p-item-pad: clamp(7px, 2.6vw, 11px); --bpc-p-gutter: 1.25rem; --bpc-p-col: 100%; } /* * A menu of five (a module's own item beside the four) sits its words * closer on a phone, so it stays on one line at 390px (23 Oct); a menu of * four keeps R1's room. */ @media (max-width: 47.99rem) { body.bpc-field-portal .bpc-pmenu__list:has(> .bpc-pmenu__item:nth-child(5)) { --bpc-p-item-pad: clamp(4px, 1.4vw, 11px); } } @media (min-width: 48rem) { body.bpc-field-portal { --bpc-card-pad-y: 1.5rem; --bpc-card-pad-x: 1.75rem; --bpc-stack: 1rem; --bpc-p-brand-h: 4rem; --bpc-p-menu-h: 3rem; --bpc-p-item-pad: 12px; --bpc-p-gutter: 3rem; --bpc-p-col: 40rem; } } @media (min-width: 68.75rem) { body.bpc-field-portal { --bpc-p-gutter: 4rem; --bpc-p-col: 55rem; } } /* ---- A Light Grey band, as the editor places it --------------------------- * The facts strip and any group given the Light Grey background: the type * on it is the field's own Black, so nothing changes but the ground. */ .has-light-grey-background-color { color: var(--bpc-type); } @media (prefers-reduced-motion: reduce) { :root { --bpc-dur: 1ms; --bpc-dur-slow: 1ms; --bpc-dur-quick: 1ms; --bpc-dur-reveal: 1ms; --bpc-rise: 0px; } } /* * The type, applied. The body, and every link that is not a button, are * Black; a link under the pointer keeps its colour and takes an orange * underline, the one way the accent touches a word. The large headlines take * the display colour, which is Black too, so a heading on Pearl Grey reads at * 4.44:1 — large type only. */ html body { color: var(--bpc-type); } body a:where(:not(.wp-element-button, .wp-block-button__link)) { color: var(--bpc-type); } body a:where(:not(.wp-element-button, .wp-block-button__link)):hover { color: var(--bpc-type-strong); text-decoration-color: var(--bpc-accent); } body :is(h1, h2):not(.has-heading-s-font-size, .has-lead-font-size, .has-body-font-size, .has-small-font-size, [style*="font-size"]), body .bpc-hero__line { color: var(--bpc-type-display); } /* ---- Retired colour names, still on saved pages --------------------------- * * A page or a block saved before 20 Oct can still carry the old palette's * classes (has-petal-light-background-color on the facts strip, has-ink-color * on a closing line). WordPress writes no rule for a slug it no longer has, * so each is given its new role here rather than left to fall back to * nothing: the old grounds become Pearl Grey, the old surfaces Light Grey, * every old type colour Black (or White, where it was type on a dark field), * and the old oranges the new one. An old type colour becomes the type * colour of wherever it stands, so a closing line saved in Graphite reads * White on the Black closing block rather than vanishing into it. */ .has-paper-background-color, .has-petal-background-color { background-color: var(--bp-pearl-grey) !important; } .has-snow-background-color, .has-petal-light-background-color, .has-mist-background-color { background-color: var(--bp-light-grey) !important; color: var(--bpc-type); } .has-ink-background-color, .has-void-background-color, .has-graphite-background-color { background-color: var(--bp-black) !important; color: var(--bp-white); } .has-orange-light-background-color { background-color: var(--bp-orange) !important; } .has-ink-color, .has-void-color, .has-graphite-color, .has-petal-color, .has-petal-light-color, .has-mist-color { color: var(--bpc-type) !important; /* Black, or White inside a Black block */ } .has-snow-color, .has-paper-color { color: var(--bp-white) !important; }