/* ============================================================================ ORPPIO — design tokens One Relocation Platform for Pet Industry Operators. This file declares the brand. Nothing in it selects an element and nothing in it styles a component; it is the one place a colour, a size, a radius or a shadow is given a value. Every Orppio surface — the agency back office (backoffice.css), the master console (master.css), the public site and the authentication pages (site.css) — spends these tokens and never a literal. The token NAMES are internal identifiers and deliberately unchanged: two hundred templates, BackofficeHelper and four sibling stylesheets are written against `--kernol-*`, and a rebrand is a change of values, not a rename. Read a family name as the slot it fills rather than as a colour word — the ramp still called `teal` is the brand's pine green, `tan` is the burnt orange, and `navy`/`chrome` are the deep greens. Three layers, in this order: --orppio-* the five brand colours, exactly as the brand sheet gives them (public/brand-variant-8.png). The source of truth. --kernol-* the primitives. Ramps and scales derived from the five, named for the slot they fill. Adding a shade means adding a step. semantic roles. Named for what they MEAN (surface, border, danger, status-planning). A component reads these, so re-tinting the product is an edit to this file rather than a sweep through two hundred templates. Deep green is the structural colour: the sidebar, the dark canvas, the ink. Pine green is the one positive/action colour: primary buttons, links, focus, "done". Warm grey is the workspace — grounds, borders, and the ink over them. Burnt orange is a restrained accent and the warning tone. Red stays semantic: destructive, failed, overdue, and nothing else. The contrast ratio of every ink is recorded beside it — this is an operations tool that people read for eight hours, so an inaccessible pairing is a bug and not a taste question. ============================================================================ */ :root { /* ═══ 0. THE BRAND ══════════════════════════════════════════════════════ The five colours of the Orppio brand sheet, plus the very dark green the board itself is printed on. Everything below is derived from these. */ --orppio-warm-grey: #E2DED7; --orppio-pine: #2E7D5A; --orppio-deep: #124734; --orppio-red: #EF4444; --orppio-orange: #FF8A3D; --orppio-canvas: #08150F; /* the branding board's ground */ /* ═══ 1. PRIMITIVES ═════════════════════════════════════════════════════ */ /* ─── Ink — type, and the structural dark ─────────────────────────────── The deep green carried down to an ink that can hold body copy: page titles, table identities, the darkest structural fills. Green enough to belong to the brand, dark enough that nobody reads it as a colour. */ --kernol-navy-950: #06120D; --kernol-navy-900: #0C1F17; /* BRAND ANCHOR — ink 17.2:1 */ --kernol-navy-800: #123024; --kernol-navy-700: #17402F; --kernol-navy-600: #21543E; /* ─── Chrome — the sidebar and the dark canvas ───────────────────────── The deep-green ramp, with the brand's own #124734 sitting in it as the hover step. Ordered by lightness: 950 is the outer edge, 700 the raised state on top of the ground. A dark surface this large needs the chroma or it reads as flat black rather than as green. */ --kernol-chrome-950: #082017; --kernol-chrome-900: #0E3A2A; /* SIDEBAR GROUND */ --kernol-chrome-850: #124734; /* BRAND — deep green, the hover step */ --kernol-chrome-800: #17553E; --kernol-chrome-700: #1D6549; /* ─── Neutrals — the warm workspace ──────────────────────────────────── One family from the page ground to the muted ink, at the warm grey's own hue so a border never reads as a different grey than the text beside it. Contrast below is against #FFFFFF; every ink tier is also checked against grey-50, grey-100 and grey-200, the other grounds it sits on. */ --kernol-grey-25: #FCFBF9; --kernol-grey-50: #F7F6F3; /* page background */ --kernol-grey-100: #F1EFEA; /* secondary surface, row hover */ --kernol-grey-200: #E9E6DF; /* subtle border, hairline */ --kernol-grey-300: #E2DED7; /* BRAND — warm grey, the border */ --kernol-grey-400: #CFCABF; /* border under the cursor, dashed rules */ --kernol-grey-500: #A9A296; /* non-text only: art, dividers 2.5:1 */ --kernol-grey-600: #6B6559; /* muted ink 5.8:1 on white, 4.6 on 200 */ --kernol-grey-700: #575147; /* secondary ink 7.9:1 */ --kernol-grey-800: #3A362F; /* body ink 12.0:1 */ /* ─── Blue — "in review", and nothing else ────────────────────────────── The brand has no blue, and the product must not look like generic SaaS. So this family is desaturated to a slate that carries the `info` state and is never the interactive colour: links, focus and primary actions are pine. */ --kernol-blue-50: #ECF1F5; --kernol-blue-100: #DAE4EC; --kernol-blue-200: #BCCDDB; --kernol-blue-400: #6E8FA8; --kernol-blue-500: #4E7590; --kernol-blue-600: #3D6480; --kernol-blue-700: #2E5169; /* on blue-50 7.4:1 */ --kernol-blue-800: #244053; /* ─── Pine green — action, done, paid, healthy ────────────────────────── The brand's positive colour and the product's one interactive hue. */ --kernol-teal-50: #E8F3ED; --kernol-teal-100: #D2E7DC; --kernol-teal-200: #A9D2BF; --kernol-teal-500: #2E7D5A; /* BRAND — pine green */ --kernol-teal-600: #2A7052; /* success, primary button white 5.9:1 */ --kernol-teal-700: #1F5B41; /* on teal-50 7.0:1 */ --kernol-teal-800: #164433; /* ─── Periwinkle — planning, scheduled, forecast ──────────────────────── Muted to an indigo slate for the same reason as the blue: it is a status, not an invitation to click. */ --kernol-periwinkle-50: #EFEFF6; --kernol-periwinkle-100: #E2E2EF; --kernol-periwinkle-200: #C9C9E0; --kernol-periwinkle-500: #7A7AA8; --kernol-periwinkle-600: #5E5E8C; --kernol-periwinkle-700: #4A4A72; /* on periwinkle-50 7.3:1 */ /* ─── Burnt orange — the warm accent. Attention, travel day, warning ──── The one warm family, and the brand's signature note. Reserved: a warm highlight everywhere is a warm highlight nowhere. */ --kernol-tan-50: #FFF1E6; --kernol-tan-75: #FFE6D3; --kernol-tan-100: #FFD3B3; --kernol-tan-200: #FFB784; --kernol-tan-400: #FF8A3D; /* BRAND — burnt orange, decorative weight */ --kernol-tan-500: #F5813A; --kernol-tan-600: #E0701F; /* warning */ --kernol-tan-700: #9A4A10; /* on tan-50 5.7:1, tan-75 5.2:1 */ --kernol-tan-800: #7A3A0C; --kernol-tan-soft: #FBF2EA; /* the quietest warm ground */ /* ─── Red — overdue, failed, destructive. Semantic only. ────────────────*/ --kernol-red-50: #FEECEC; --kernol-red-100: #FCD9D9; --kernol-red-200: #F7B4B4; --kernol-red-500: #EF4444; /* BRAND — red */ --kernol-red-600: #DC2626; --kernol-red-700: #B42318; /* on red-50 5.8:1 */ /* ═══ 2. SEMANTIC ROLES ═════════════════════════════════════════════════ */ /* ─── Surfaces ───────────────────────────────────────────────────────── Three grounds and nothing else: the page, the card that floats on it, and the well sunk into the card. A component that invents a fourth is a component that has drifted. */ --kernol-background: var(--kernol-grey-50); --kernol-surface: #FFFFFF; --kernol-surface-secondary: var(--kernol-grey-100); --kernol-surface-rail: var(--kernol-grey-25); /* ─── Ink ─────────────────────────────────────────────────────────────── */ --kernol-text-primary: var(--kernol-navy-900); --kernol-text-body: var(--kernol-grey-800); --kernol-text-secondary: var(--kernol-grey-700); --kernol-text-muted: var(--kernol-grey-600); --kernol-text-on-dark: #FFFFFF; /* ─── Lines ───────────────────────────────────────────────────────────── */ --kernol-border: var(--kernol-grey-300); --kernol-border-subtle: var(--kernol-grey-200); --kernol-border-strong: var(--kernol-grey-400); /* ─── Interaction — pine, everywhere ──────────────────────────────────── */ --kernol-primary: var(--kernol-teal-600); /* the one strong button */ --kernol-primary-hover: var(--kernol-teal-700); --kernol-accent: var(--kernol-teal-600); /* links, focus, selection */ --kernol-accent-hover: var(--kernol-teal-700); --kernol-hover: var(--kernol-grey-50); /* any row under the cursor */ --kernol-hover-strong: var(--kernol-grey-100); /* menu items, controls */ --kernol-selected: var(--kernol-teal-50); --kernol-focus-ring: 0 0 0 3px rgb(46 125 90 / 0.24); /* ─── State families ────────────────────────────────────────────────── Six tones, each a (ground, ink, dot) triple. Every badge, pill, callout, status dot and row flag in the product resolves to one of these, so a status cannot mean pine in a table and green in a card. */ --kernol-neutral-soft: var(--kernol-grey-100); --kernol-neutral-ink: var(--kernol-grey-700); --kernol-neutral-dot: var(--kernol-grey-500); --kernol-info-soft: var(--kernol-blue-50); --kernol-info-ink: var(--kernol-blue-700); --kernol-info-dot: var(--kernol-blue-600); --kernol-success-soft: var(--kernol-teal-50); --kernol-success-ink: var(--kernol-teal-700); --kernol-success-dot: var(--kernol-teal-600); --kernol-warning-soft: var(--kernol-tan-50); --kernol-warning-ink: var(--kernol-tan-700); --kernol-warning-dot: var(--kernol-tan-600); --kernol-danger-soft: var(--kernol-red-50); --kernol-danger-ink: var(--kernol-red-700); --kernol-danger-dot: var(--kernol-red-500); --kernol-plan-soft: var(--kernol-periwinkle-50); --kernol-plan-ink: var(--kernol-periwinkle-700); --kernol-plan-dot: var(--kernol-periwinkle-500); /* ─── The dark chrome ───────────────────────────────────────────────── Inks on the sidebar ground, with their contrast against it. The active item is the product's signature and gets its own three: the pine fill, and a near-white ink that clears 4.5:1 on it. Orange is deliberately NOT spent here — the accent stays rare. */ --kernol-chrome: var(--kernol-chrome-900); --kernol-chrome-hover: var(--kernol-chrome-850); --kernol-chrome-line: var(--kernol-chrome-800); --kernol-chrome-raised: var(--kernol-chrome-700); --kernol-chrome-edge: var(--kernol-chrome-950); --kernol-chrome-ink: #FFFFFF; /* 12.7:1 */ --kernol-chrome-soft: #D9E5DE; /* 9.8:1 — resting nav labels */ --kernol-chrome-muted: #A9BFB3; /* 6.5:1 — icons, secondary */ --kernol-chrome-faint: #9BB2A5; /* 5.6:1 — group labels */ --kernol-nav-active-bg: var(--kernol-teal-500); --kernol-nav-active-ink: #FFFFFF; --kernol-nav-active-icon: #FFFFFF; --kernol-nav-active-ring: var(--kernol-teal-500); /* Count pills on the chrome. The light-canvas tints are far too bright here, so each tone gets a dark ground and a light ink of its own hue. */ --kernol-chrome-pill-bg: var(--kernol-chrome-700); --kernol-chrome-pill-ink: #C9DCD2; --kernol-chrome-pill-alert-bg: #6B2320; --kernol-chrome-pill-alert-ink: #FCC5C0; --kernol-chrome-pill-info-bg: #1E4A63; --kernol-chrome-pill-info-ink: #C3DCEC; /* ═══ 3. SPACE, SHAPE, DEPTH, TYPE ══════════════════════════════════════ */ /* ─── Spacing — a 4px grid ───────────────────────────────────────────── Two rhythms share it. Between major sections the steps are generous (20, 24, 32); inside a table or a queue row they are tight (4, 8, 12). The scale is the same so the two never disagree about what "one step" is. */ --kernol-space-1: 4px; --kernol-space-2: 8px; --kernol-space-3: 12px; --kernol-space-4: 16px; --kernol-space-5: 20px; --kernol-space-6: 24px; --kernol-space-8: 32px; --kernol-space-10: 40px; --kernol-space-12: 48px; /* ─── Radius — rounded, not bubbly ───────────────────────────────────── Controls at 8, cards at 14, and a badge at 6 — a rounded rectangle rather than a capsule, which is what stops a screen of statuses reading as a row of sweets. */ --kernol-radius-xs: 4px; --kernol-radius-sm: 6px; --kernol-radius: 8px; --kernol-radius-md: 10px; --kernol-radius-lg: 14px; --kernol-radius-xl: 18px; --kernol-radius-full: 9999px; /* ─── Elevation — borders do the structural work ─────────────────────── Nothing on the canvas floats. These four are for things that genuinely leave the page: a menu, a modal, a sticky bar, the active tab lifting off the tab rail. Tinted with the deep green, so a floating panel casts the colour the surface beneath it is made of. */ --kernol-shadow-xs: 0 1px 2px rgb(12 31 23 / 0.05); --kernol-shadow-sm: 0 1px 3px rgb(12 31 23 / 0.07), 0 1px 2px rgb(12 31 23 / 0.05); --kernol-shadow-pop: 0 6px 20px -6px rgb(12 31 23 / 0.18), 0 2px 6px rgb(12 31 23 / 0.08); --kernol-shadow-modal: 0 24px 56px -14px rgb(6 18 13 / 0.36), 0 4px 12px rgb(6 18 13 / 0.12); /* ─── Type ───────────────────────────────────────────────────────────── Inter, self-hosted (app/assets/tailwind/application.css). One scale for the whole product. The page title is the only thing above 18px: this is an operations tool, and a heading that shouts costs a row of the table. */ --kernol-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --kernol-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --kernol-text-10: 10px; /* micro counters */ --kernol-text-11: 11px; /* eyebrows, supporting metadata */ --kernol-text-12: 12px; /* secondary metadata, table subs */ --kernol-text-13: 13px; /* table and dense body — the base */ --kernol-text-14: 14px; /* comfortable body, card labels */ --kernol-text-16: 16px; /* section heading */ --kernol-text-18: 18px; /* card heading, detail title */ --kernol-text-22: 22px; /* metric value */ --kernol-text-26: 26px; /* page title */ --kernol-tracking-tight: -0.018em; --kernol-tracking-eyebrow: 0.07em; /* ─── Layout metrics ──────────────────────────────────────────────────── */ --kernol-sidebar-w: 236px; --kernol-topbar-h: 60px; --kernol-page-x: 24px; --kernol-row-h: 44px; } @media (min-width: 1600px) { :root { --kernol-page-x: 32px; } } /* ============================================================================ THE WHITE-LABEL FREEZE Two surfaces are NOT Orppio's and were deliberately left out of the rebrand: the client portal (body.kp-app, portal.css) and the agency's own public enquiry page (body.pe-page, public_enquiry.css). To a pet owner those pages belong to the relocation agency, not to us; the only thing Orppio adds to them is a "Powered by Orppio.com" line in the footer. Both are written against the same --kernol-* tokens as everything else, so re-valuing the ramps above would have recoloured them. Instead the pre-rebrand palette is pinned here, on their own body scope, where it overrides :root for those documents and nothing else. This is a frozen snapshot: do not "tidy" it towards the values above, and do not add Orppio colours to it. Adding a NEW token above means adding it here too if either of those two stylesheets comes to use it — otherwise it would inherit the Orppio value. ============================================================================ */ body.kp-app, body.pe-page { --kernol-navy-950: #07101F; --kernol-navy-900: #0B1426; --kernol-navy-800: #12233D; --kernol-navy-700: #1D3453; --kernol-navy-600: #2C4767; --kernol-chrome-950: #011730; --kernol-chrome-900: #01224A; --kernol-chrome-850: #042B58; --kernol-chrome-800: #0A3563; --kernol-chrome-700: #14416F; --kernol-grey-25: #FBFCFD; --kernol-grey-50: #F8F9FB; --kernol-grey-100: #F4F6F9; --kernol-grey-200: #EEF1F5; --kernol-grey-300: #E4E8EF; --kernol-grey-400: #D3D9E4; --kernol-grey-500: #A8B2C3; --kernol-grey-600: #636E80; --kernol-grey-700: #526078; --kernol-grey-800: #33405A; --kernol-blue-50: #EBF2FF; --kernol-blue-100: #DBE7FE; --kernol-blue-200: #C3D5FC; --kernol-blue-400: #6C97F5; --kernol-blue-500: #3B76EF; --kernol-blue-600: #2563EB; --kernol-blue-700: #1D4ED8; --kernol-blue-800: #1E40AF; --kernol-teal-50: #E6F8F5; --kernol-teal-100: #CCF0EB; --kernol-teal-200: #A5E4DC; --kernol-teal-500: #10BFAE; --kernol-teal-600: #10A889; --kernol-teal-700: #0B7A67; --kernol-teal-800: #075C4E; --kernol-periwinkle-50: #F0EEFF; --kernol-periwinkle-100: #E4E1FE; --kernol-periwinkle-200: #CFCBFD; --kernol-periwinkle-500: #7C8CFF; --kernol-periwinkle-600: #5B5FE8; --kernol-periwinkle-700: #4A45C8; --kernol-tan-50: #FFF0E7; --kernol-tan-75: #FDE8D8; --kernol-tan-100: #FBD9C1; --kernol-tan-200: #F5B98A; --kernol-tan-400: #E2713A; --kernol-tan-500: #D2A06A; --kernol-tan-600: #E59A45; --kernol-tan-700: #A34A17; --kernol-tan-800: #7C3A15; --kernol-tan-soft: #F8EEE3; --kernol-red-50: #FEEDEA; --kernol-red-100: #FBDAD4; --kernol-red-200: #F6BDB3; --kernol-red-500: #E85D4A; --kernol-red-600: #D6402B; --kernol-red-700: #B4331F; --kernol-background: var(--kernol-grey-50); --kernol-surface: #FFFFFF; --kernol-surface-secondary: var(--kernol-grey-100); --kernol-surface-rail: var(--kernol-grey-25); --kernol-text-primary: var(--kernol-navy-900); --kernol-text-body: var(--kernol-grey-800); --kernol-text-secondary: var(--kernol-grey-700); --kernol-text-muted: var(--kernol-grey-600); --kernol-text-on-dark: #FFFFFF; --kernol-border: var(--kernol-grey-300); --kernol-border-subtle: var(--kernol-grey-200); --kernol-border-strong: var(--kernol-grey-400); --kernol-primary: var(--kernol-chrome-900); --kernol-primary-hover: var(--kernol-chrome-800); --kernol-accent: var(--kernol-blue-600); --kernol-accent-hover: var(--kernol-blue-700); --kernol-hover: var(--kernol-grey-50); --kernol-hover-strong: var(--kernol-grey-100); --kernol-selected: var(--kernol-blue-50); --kernol-focus-ring: 0 0 0 3px rgb(37 99 235 / 0.16); --kernol-neutral-soft: var(--kernol-grey-100); --kernol-neutral-ink: var(--kernol-grey-700); --kernol-neutral-dot: var(--kernol-grey-500); --kernol-info-soft: var(--kernol-blue-50); --kernol-info-ink: var(--kernol-blue-700); --kernol-info-dot: var(--kernol-blue-600); --kernol-success-soft: var(--kernol-teal-50); --kernol-success-ink: var(--kernol-teal-700); --kernol-success-dot: var(--kernol-teal-600); --kernol-warning-soft: var(--kernol-tan-50); --kernol-warning-ink: var(--kernol-tan-700); --kernol-warning-dot: var(--kernol-tan-600); --kernol-danger-soft: var(--kernol-red-50); --kernol-danger-ink: var(--kernol-red-700); --kernol-danger-dot: var(--kernol-red-500); --kernol-plan-soft: var(--kernol-periwinkle-50); --kernol-plan-ink: var(--kernol-periwinkle-700); --kernol-plan-dot: var(--kernol-periwinkle-500); --kernol-chrome: var(--kernol-chrome-900); --kernol-chrome-hover: var(--kernol-chrome-850); --kernol-chrome-line: var(--kernol-chrome-800); --kernol-chrome-raised: var(--kernol-chrome-700); --kernol-chrome-edge: var(--kernol-chrome-950); --kernol-chrome-ink: #FFFFFF; --kernol-chrome-soft: #E3E9F2; --kernol-chrome-muted: #9FAEC4; --kernol-chrome-faint: #838BA2; --kernol-nav-active-bg: var(--kernol-teal-700); --kernol-nav-active-ink: var(--kernol-teal-50); --kernol-nav-active-icon: var(--kernol-teal-50); --kernol-nav-active-ring: var(--kernol-teal-700); --kernol-chrome-pill-bg: var(--kernol-chrome-700); --kernol-chrome-pill-ink: #C6D3E4; --kernol-chrome-pill-alert-bg: #6E2A22; --kernol-chrome-pill-alert-ink: #FBBCB0; --kernol-chrome-pill-info-bg: #1B4A87; --kernol-chrome-pill-info-ink: #BAD5FB; --kernol-space-1: 4px; --kernol-space-2: 8px; --kernol-space-3: 12px; --kernol-space-4: 16px; --kernol-space-5: 20px; --kernol-space-6: 24px; --kernol-space-8: 32px; --kernol-space-10: 40px; --kernol-space-12: 48px; --kernol-radius-xs: 4px; --kernol-radius-sm: 6px; --kernol-radius: 8px; --kernol-radius-md: 10px; --kernol-radius-lg: 14px; --kernol-radius-xl: 18px; --kernol-radius-full: 9999px; --kernol-shadow-xs: 0 1px 2px rgb(11 20 38 / 0.04); --kernol-shadow-sm: 0 1px 3px rgb(11 20 38 / 0.06), 0 1px 2px rgb(11 20 38 / 0.04); --kernol-shadow-pop: 0 6px 20px -6px rgb(11 20 38 / 0.16), 0 2px 6px rgb(11 20 38 / 0.07); --kernol-shadow-modal: 0 24px 56px -14px rgb(7 16 31 / 0.34), 0 4px 12px rgb(7 16 31 / 0.10); --kernol-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --kernol-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --kernol-text-10: 10px; --kernol-text-11: 11px; --kernol-text-12: 12px; --kernol-text-13: 13px; --kernol-text-14: 14px; --kernol-text-16: 16px; --kernol-text-18: 18px; --kernol-text-22: 22px; --kernol-text-26: 26px; --kernol-tracking-tight: -0.018em; --kernol-tracking-eyebrow: 0.07em; --kernol-sidebar-w: 236px; --kernol-topbar-h: 60px; --kernol-page-x: 24px; --kernol-row-h: 44px; }