/* ========================================================================== Structured PM Ltd · design tokens v3 · rebuilt from the approved pricing block, August 2026. This file is the only place a raw value is allowed to appear. Pages and components read these custom properties and never redeclare them. If a design needs a value that is not here, the value is wrong or the brand document needs a decision from the owner. WHAT CHANGED FROM v2 AND WHY The owner approved a pricing block whose look is now the whole site. Four things carried across: a warmer palette, a raised navy surface so cards can sit inside a navy panel, navy as the dominant ground rather than an occasional panel, and Archivo as the display face. The approved block asked for Bebas Neue and never loaded it, so what was actually approved was system-ui at weight 700. That is SF Pro on a Mac, Segoe UI on Windows, and it cannot be self-hosted or licensed for the web. Archivo is the second name in that same stack, it is open licence, and at 700 it sits almost on top of what was approved. It is the face. The system runs light and dark grounds, not light and dark MODES. Navy is a presentation surface chosen per section, so there is no prefers-color-scheme block below and there must never be one. ========================================================================== */ :root { /* --- Colour ---------------------------------------------------------- Warmer than v2 across the board. Navy moved off near-black and towards blue-grey. The light ground moved off cool blue-white and towards warm paper. Both were approved as a pair and neither works alone. The split this note used to record is closed. dashboard.html came across on 25 August 2026, step-zero.html and post-payment.html on the 26th, and the two pages that were still holding the v2 palette were the StepWise Ops pages, which were removed the same day. Every page the public or a customer can reach now reads these values. bi-dashboard.html does not, and is the one exception: it is the admin business-intelligence page and only the owner sees it. */ --spm-navy: #0F2233; --spm-orange: #E5622D; --spm-lime: #C8E64B; --spm-light: #F4F2ED; --spm-paper: #FFFFFF; /* Raised navy. v2 had no surface between navy and light, so a card inside a navy panel could only be outlined, never lifted. This is the token that was missing, and it is the reason the approved block reads as designed rather than typeset. It sits 1.24:1 off the navy ground, which is nowhere near the 3:1 a boundary needs on its own, so every raised surface also carries --spm-rule-on-navy as a border. The lift and the line do the job together. Never use one without the other. */ --spm-surface: #1B3348; /* Navy at reduced strength, for body copy and metadata on light grounds. Figures are the composited colour measured against its ground, which is what a browser actually paints for translucent type on a solid surface. Both alphas went UP from v2. The warm light ground is slightly darker than the cool one it replaced, so the same alpha bought less contrast. ink-70 composites to #4F5C67 on light at 6.14:1. ink-50 composites to #616D76 at 4.74:1, which is the floor for the 11px mono labels it is assigned to. Do not lower either without remeasuring. */ --spm-ink-70: rgba(15, 34, 51, 0.72); --spm-ink-50: rgba(15, 34, 51, 0.64); --spm-rule: rgba(15, 34, 51, 0.14); --spm-rule-strong: rgba(15, 34, 51, 0.24); /* Inverted set, for type and rules on navy and on the raised surface. Every figure below is the worse of the two grounds, which is always the raised surface because it is lighter. on-navy-50 is 0.55, not 0.50. The approved block used 0.45 for its VAT line, which measures 4.00:1 and fails AA for the 11px it was set at. 0.55 is the lowest alpha that clears 4.5:1 on both grounds. */ --spm-on-navy: #F4F2ED; --spm-on-navy-80: rgba(244, 242, 237, 0.86); --spm-on-navy-70: rgba(244, 242, 237, 0.66); --spm-on-navy-50: rgba(244, 242, 237, 0.55); --spm-rule-on-navy: rgba(244, 242, 237, 0.18); /* Interaction state for the orange ground. This token is a BACKGROUND and never a text colour. Orange LIGHTENS on hover. The button label is navy, so darkening the ground under dark type lowers contrast. Navy on rest orange is 4.72:1, navy on hover orange is 5.75:1. */ --spm-orange-hover: #EC7A4B; --spm-orange-tint: rgba(229, 98, 45, 0.10); --spm-lime-tint: rgba(200, 230, 75, 0.16); /* Button labels sit NAVY on orange at 4.72:1. The approved block set them white, which measures 3.43:1 and fails AA for normal text at the 12px the label is set at. There were two ways to rescue it. Darkening the orange until white clears 4.5:1 lands on #CD4D19, a rust that no longer reads as the approved orange. Keeping the orange and switching the label to navy costs one small detail and keeps the colour that was actually approved. Navy label it is. */ --spm-on-orange: #0F2233; /* Orange as TEXT on a light ground. The brand orange is a background and an accent, not a text colour: #E5622D on the light ground measures 3.07:1 and fails AA at any size a label is actually set at. It clears 4.72:1 on navy, which is why the same colour is fine for a reference inside a navy panel and not fine for the same reference on the page ground. This is the darkened form, same hue and saturation, and it exists only for small orange type on light or paper: 4.52:1 and 5.05:1. It measures 3.20:1 on navy, so it must never be used there. Use --spm-orange. */ --spm-orange-ink: #BF4818; /* Navy on lime is 11.47:1. Lime is a chip and a rule, never a button. */ --spm-on-lime: #0F2233; /* --- Type ------------------------------------------------------------ Display is always uppercase and never carries colour other than navy, except on a navy ground where it sits in light. Mono is reserved for labels, references, dates, prices and document marks, never for reading copy. Archivo is one variable file covering 400 to 700, 35KB for the whole range. It replaced Bebas Neue, which was condensed, shipped a single weight, and was never actually loaded by the block that was approved. */ --spm-font-display: Archivo, system-ui, 'Segoe UI', sans-serif; --spm-font-body: Montserrat, system-ui, -apple-system, sans-serif; --spm-font-mono: 'JetBrains Mono', ui-monospace, monospace; --spm-weight-regular: 400; --spm-weight-medium: 500; --spm-weight-semibold: 600; --spm-weight-display: 700; /* Archivo at 700 is wider and shorter than Bebas at the same pixel size, so the display sizes came down. A Bebas headline needed the height to read as a headline. An Archivo headline reads as one sooner. */ --spm-size-display-1: clamp(38px, 6vw, 68px); --spm-size-display-2: clamp(30px, 4.2vw, 50px); --spm-size-h2: clamp(26px, 3.4vw, 40px); --spm-size-h3: 22px; --spm-size-price: clamp(38px, 5vw, 56px); --spm-size-lead: 19px; --spm-size-body: 16px; --spm-size-small: 15px; --spm-size-fine: 13px; --spm-size-label: 11px; --spm-leading-display: 1.04; --spm-leading-tight: 1.15; --spm-leading-lead: 1.65; --spm-leading-body: 1.7; --spm-tracking-display: 0.005em; --spm-tracking-label: 0.16em; --spm-tracking-button: 0.12em; /* --- Spacing, 4px base ------------------------------------------------ Whitespace is the main design device. When a layout feels cramped, remove an element before reducing space. */ --spm-space-1: 4px; /* icon gaps */ --spm-space-2: 8px; /* label to value */ --spm-space-3: 12px; /* inside cards */ --spm-space-4: 16px; /* grid gap */ --spm-space-6: 24px; /* block gap */ --spm-space-8: 32px; /* card padding */ --spm-space-12: 48px; /* header to content */ --spm-space-16: 64px; /* panel padding */ --spm-space-24: 96px; /* section rhythm */ --spm-space-32: 128px; /* page top and tail */ /* --- Layout ----------------------------------------------------------- Twelve columns, 16px gutters, 1180px container. Editorial layouts use 7 and 5, or 8 and 4. Never centre a text block wider than 66 characters. Grids auto-fit on content width, not device names. */ --spm-container: 1180px; --spm-measure: 66ch; --spm-gutter: clamp(24px, 5vw, 40px); --spm-grid-gutter: 16px; --spm-grid-min: 260px; /* Section rhythm compresses from 96px to 64px on narrow viewports. */ --spm-section: clamp(64px, 8vw, 96px); /* --- Shape and line --------------------------------------------------- 2px everywhere, never pill shaped. v2 carried a separate 3px because the brand document contradicted itself. The approved block settled it at 2px for buttons and cards alike, so there is now one radius. */ --spm-radius: 2px; --spm-border: 1px solid var(--spm-rule); --spm-border-on-navy: 1px solid var(--spm-rule-on-navy); --spm-hairline: 1px; /* Minimum interactive target. Applies to every control. */ --spm-target: 48px; /* --- Motion ----------------------------------------------------------- Rise and fade, 14px, 400 to 600ms, ease out. Nothing bounces. Hover states change colour or border, never size beyond 2px. */ --spm-rise: 14px; --spm-duration: 480ms; --spm-duration-fast: 150ms; --spm-ease: cubic-bezier(0.16, 1, 0.3, 1); }