/* ============================================================ SANWA METAL POWDERS — DESIGN TOKENS, v1 ============================================================ The approved direction: version B, "Elemental on the bench", in safety orange, with the "cells under the curve" pattern. Client decision, 1 October 2026. Every value here is lifted from #opt-orange in brand-b-round4.html / .css. Nothing is reinvented. The two exceptions are declared where they appear: the alarm ramp (section 1.6), which the colour board had no need for because it carried no forms, and the measured-but-unused values kept for the record. THE ONE RULE THAT SHAPES EVERYTHING ELSE A safety orange cannot carry small text. #d75b01 on stone is 3.42:1 — enough for a graphic or large display type at the 3:1 floor, not enough for body copy at 4.5:1. The darkest orange that does reach 4.5:1 on stone is #ba4900, and it reads as rust, which the client rules out. So this system has no orange text value at all. The orange is a FILL and a SIGNAL: it fills buttons, bands, the card back and the favicon with a graphite label; it draws the wordmark, display lines, rules, ticks and focus rings. Small text is graphite with an orange rule beside it. That is why --pr-text below resolves to graphite and not to the primary: the role is split so no token can smuggle orange into small type. SHAPE The system is square and rule-led. There is one radius, --r: 3px, and it exists only to keep a 1px hairline from looking chipped at the corner of a panel. Nothing is a pill, nothing is a soft card, and no elevation is expressed with a shadow — separation is a rule, a band or a ground change. ============================================================ */ :root { /* ========================================================== 1 · COLOUR ========================================================== */ /* --- 1.1 ground and ink ------------------------------------- The neutrals are untouched from version B. Stone is the page, chalk is a panel on it, paper is a panel on the panel, and graphite is both the ink and the only dark field. ---------- */ --stone: #f3f0e8; /* oklch(95.5% 0.011 89.7) page ground */ --chalk: #fbfaf5; /* oklch(98.4% 0.007 97.3) panels */ --paper: #e9e4d7; /* oklch(91.9% 0.018 89.4) panel-on-panel, ghost hover */ --graphite: #16140f; /* oklch(19.2% 0.010 88.8) ink and bands */ --graphite-2: #2e2c26; /* oklch(29.3% 0.011 91.7) band hover */ --bone: #f0ece1; /* oklch(94.3% 0.015 90.2) type on graphite */ --dust: #a49c89; /* oklch(69.4% 0.029 87.9) labels on graphite */ --ash: #5c574c; /* oklch(45.8% 0.018 86.5) secondary text */ --rule: #8b8371; /* oklch(61.2% 0.028 86.9) borders, inputs */ --hairline: #d9d4c6; /* oklch(87.0% 0.020 90.6) quiet borders */ --grid-ink: #e6e1d4; /* oklch(91.0% 0.018 89.4) measurement grid */ --chart-grid: #d9d4c6; /* chart rules — the hairline tone */ /* semantic aliases, so components never name a colour directly */ --ground: var(--stone); --surface: var(--chalk); --surface-2: var(--paper); --fg: var(--graphite); --muted: var(--ash); --border: var(--rule); --border-quiet: var(--hairline); /* --- 1.2 the primary: safety orange ------------------------ oklch(62.0% 0.175 45.8). 8.2 ΔE2000 from ANSI safety orange #ff6700 — close enough to read as the same signal, dark enough to clear 3:1 on stone where #ff6700 manages 2.56:1. 13.5 ΔE from Makin Metal Powders' copper-orange #eb8d3c and 13.4 from Höganäs's amber #f68b33: redder, deeper and more saturated than either, which is what makes it a safety colour rather than a metal colour. The ramp is deliberately short. Two steps a deep primary would normally have do not exist here: there is no darker orange for text, and there is no darker hover. A filled control goes LIGHTER on hover, so its graphite label gains contrast instead of losing it. ------------------------------ */ --pr-ink: #d75b01; /* oklch(62.0% 0.175 45.8) the primary */ --pr-hi: #fd7000; /* oklch(70.6% 0.195 47.1) fill hover, lighter */ --pr-lift: #ff9b59; /* oklch(78.1% 0.145 52.4) the primary on graphite */ --pr-wash: #ffecdf; /* oklch(95.5% 0.027 56.8) acknowledged ground */ /* kept flat on purpose: a deep primary would step down here, and this one cannot. Anything asking for a darker orange gets the same orange, which is the honest answer. */ --pr-deep: #d75b01; --pr-mid: #d75b01; --pr-line: #d75b01; /* measured and rejected, kept so nobody re-derives it: #ba4900 · oklch(55.0% 0.161 43.8) · 4.56:1 on stone — the darkest orange that passes AA for small text, and it reads as rust. Do not use it. */ --pr-rejected: #ba4900; /* --- 1.3 the primary split into roles ----------------------- Text and rule are separate tokens so that the rule can be orange while the text stays graphite. --pr-text is graphite by definition in this colourway, and must not be redefined. */ --pr-text: var(--fg); /* small text that sits WITH the primary — graphite */ --pr-text-hover: var(--fg); /* it does not move: the underline thickens instead */ --pr-rule: var(--pr-ink); /* the rule, tick or underline beside that text */ --accent-ink: var(--pr-text); --row-hover: var(--pr-wash); /* --- 1.4 family markers ------------------------------------- Five markers, sampled from photographs of the powders. They are MARKERS ONLY: a row edge, a chip edge, the swatch photo, the family name in its own row, the family rule, and the band on that family's drum label. Never a large field, a heading, a link or a button. Each family has a text value (deepened to clear 4.5:1 on stone) and a fill value (the powder's natural value, used under graphite type). Pure metals is SHIFTED. It was the copper #a34a18, which is 12.7 ΔE2000 from this primary — the same hue family, lower lightness, which on a page reads as "the brand colour, dimmed". It moves to an oxidised-copper red 24° further round and 19 lightness points down: 27.9 ΔE from the primary, still recognisably a copper, which is what the family is. ---------- */ --bronze: #876115; --bronze-fill: #c2a068; /* 4.92:1 on stone · fill 7.47:1 under graphite */ --prealloy: #766a51; --prealloy-fill: #b39c6c; /* 4.67:1 on stone */ --puremetals: #89292e; --puremetals-fill: #c67b76;/* 7.62:1 on stone · fill 5.69:1 — SHIFTED */ --cocr: #577241; --cocr-fill: #8b9a6f; /* 4.74:1 on stone */ --steel: #5a676c; --steel-fill: #a2adb0; /* 5.13:1 on stone */ /* the round-3 copper, kept so the shift is not quietly undone */ --puremetals-was: #a34a18; /* --- 1.5 controls ------------------------------------------- The one place the primary becomes a control surface: an orange fill with a graphite label at 4.72:1, rising to 6.57:1 on hover because the fill lightens. ------------------ */ --btn-bg: var(--pr-ink); --btn-fg: var(--graphite); --btn-bg-hover: var(--pr-hi); --btn-fg-hover: var(--graphite); --ghost-fg: var(--fg); --ghost-border: var(--rule); --ghost-hover: var(--paper); /* graphite bands: site header, proof footer, the element-tile panel */ --band-bg: var(--graphite); --band-fg: var(--bone); --band-muted: var(--dust); --band-line: rgba(240, 236, 225, 0.18); --band-line-2: rgba(240, 236, 225, 0.34); --band-hover: var(--graphite-2); --band-btn-bg: var(--bone); --band-btn-fg: var(--graphite); /* the favicon and the card back: graphite on the orange, not bone. Graphite on #d75b01 is 4.72:1; bone on it only 3.30:1, and a 16 px tab strip needs the dark monogram. */ --fav-bg: var(--pr-ink); --fav-fg: var(--graphite); --card-bg: var(--pr-ink); --card-fg: var(--graphite); --card-line: rgba(22, 20, 15, 0.72); --card-dim: var(--graphite); /* --- 1.6 state: alarm --------------------------------------- NEW IN THIS RUN. #opt-orange carried no forms, so it had no error value; these four are derived in OKLCH and measured here rather than borrowed from anywhere. A cold cherry-crimson at hue 11, chosen to sit as far from the oxidised-copper family marker as a true red can: 7.1 ΔE2000 from #89292e, and 34.5 from the primary. No red is far from another red, so the two are separated by behaviour as well as hue — the marker only ever draws a 7 px family edge, a chip edge or a drum band, and the alarm only ever draws a field border, an inline message and its tick. They never appear in the same component. There is deliberately NO success hue. See 1.7. ------------- */ --alarm: #8b0032; /* oklch(40.6% 0.162 11.5) · 8.60:1 stone, 9.37:1 chalk */ --alarm-hover: #770023; /* oklch(36.2% 0.145 15.4) · 10.20:1 stone — darkens */ --alarm-lift: #ff859b; /* oklch(75.8% 0.149 9.9) · 7.96:1 on graphite */ --alarm-wash: #feeaed; /* oklch(95.4% 0.022 7.2) · graphite 15.96:1, ash 6.23:1 */ /* --- 1.7 state: acknowledged (what other systems call success) There is no green in this system, and adding one would have cost more than it bought: a success green near enough to read as "go" lands within 12 ΔE of the cobalt-chromium marker, and red/green as the only difference between two form states is the classic failure for deuteranopia. So success reuses the primary wash, which already means "acknowledged" — it is the ground of a hovered grade-table row. A validated field takes the wash, a graphite border at 2px instead of 1px, a filled graphite tick and a graphite label. Error and success then differ in ground, border weight, mark and word, not in hue alone. ------------------- */ --ok-bg: var(--pr-wash); --ok-fg: var(--fg); --ok-border: var(--graphite); /* --- 1.8 pattern ink ---------------------------------------- One ink, one set of opacities. A safety-orange hairline needs more weight than a deep primary would: these are the orange board's values, not the green board's. --------------------- */ --pat-ink: var(--pr-ink); --field-op: 0.88; /* the opacity of a pattern field as a whole */ --op-frame: 0.32; /* the panel frame */ --op-tick: 0.44; /* the axis ticks */ --op-freq: 0.58; /* the frequency curve */ --op-cum: 1; /* the cumulative curve — the subject */ --op-net: 0.85; /* the grain-cell walls */ --op-twin: 0.46; /* twinning lines */ --op-pore: 0.72; /* pores */ /* --- 1.9 the lockup ----------------------------------------- Client decision, 9 October 2026 (option 1A): "Metal Powders" is a cool steel, not graphite. The orange wordmark above it is unchanged, and the RULE between the two stays graphite — that is what makes the steel read as a decision rather than a fade. The rule therefore has its own token; the words and the rule are two different colours and .lock .mp can no longer draw its border from currentColor. The steel is a grey with a cool cast at chroma 0.018, which keeps it clearly apart from Sanwa Diamond Tools' #0094de and 9.9 ΔE2000 from the stainless family marker #5a676c — the lockup never carries a family colour. ---------------------- */ --lockup-steel: #565661; /* oklch(45.7% 0.018 285.7) · 6.36:1 on stone, 7.24:1 on white, 6.93:1 on chalk */ --lockup-rule: var(--fg); /* graphite, 16.16:1 on stone */ --lockup-steel-rev: #dedeea; /* oklch(90.4% 0.016 286.1) · 13.80:1 on graphite, 10.46:1 on graphite-2 */ --lockup-rule-rev: var(--bone); /* 15.59:1 on graphite */ /* ========================================================== 2 · TYPE Chivo for display and labels, 900 and 700, uppercase permitted. Onest for running text. DM Mono for every figure, grade code, caption and table cell, with tabular numerals so a composition column aligns on the decimal. Three families is the whole set. Loaded from Google Fonts. The parent company's faces — Saira, Sora, Azeret Mono — are never used here. ========================================================== */ --display: "Chivo", "Helvetica Neue", Arial, sans-serif; --text: "Onest", "Helvetica Neue", Arial, sans-serif; --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* --- 2.1 weights ------------------------------------------- */ --w-regular: 400; --w-medium: 500; --w-semi: 600; /* Onest only */ --w-bold: 700; /* Chivo: section titles, labels, buttons */ --w-black: 900; /* Chivo: display lines and grade codes only */ /* --- 2.2 the scale ------------------------------------------ Fluid where a line has to survive 360 → 1920 px, fixed where it is a label and should not move. Display sizes are the ones #opt-orange actually renders. ------------------------------ */ /* display — Chivo 900, uppercase, tight */ --fs-d-hero: clamp(38px, 5.6vw, 80px); /* hero line: 38 at 390, 80 at 1440 */ --fs-d-2xl: clamp(33px, 7vw, 84px); /* page-opening statement */ --fs-d-xl: clamp(30px, 4.4vw, 56px); --fs-d-l: clamp(26px, 3.4vw, 34px); --fs-d-m: clamp(22px, 2.6vw, 26px); --fs-d-grade: clamp(30px, 4vw, 48px); /* a grade code on a label */ /* headings — Chivo 700, uppercase, letterspaced */ --fs-h-l: clamp(15px, 1.9vw, 21px); /* numbered section title */ --fs-h-m: 13px; /* panel heading */ --fs-h-s: 12px; /* small panel heading */ /* running text — Onest */ --fs-lede: clamp(16px, 1.7vw, 18.5px); --fs-body: 16px; --fs-body-s: 15px; --fs-s: 14.5px; --fs-xs: 12.5px; /* figures and labels — DM Mono */ --fs-mono-l: 16px; /* a value on a drum label */ --fs-mono: 13px; /* a grade-table cell */ --fs-mono-s: 11.5px; /* a caption or inline figure */ --fs-mono-xs: 10.5px; /* an eyebrow or column label */ /* control labels — Chivo 700, uppercase */ --fs-label: 12.5px; --fs-label-s: 11.5px; /* --- 2.3 line height -------------------------------------- */ --lh-display: 0.88; --lh-display-2: 0.86; --lh-grade: 0.9; --lh-head: 1.2; --lh-tight: 1.35; --lh-mono: 1.5; --lh-body: 1.6; --lh-flat: 1; /* --- 2.4 tracking ------------------------------------------ Display type is tracked in, labels and mono are tracked out. The lockup's "Metal Powders" has its own value because it is justified to the wordmark's width. ------------------------- */ --tr-display: -0.014em; --tr-grade: -0.016em; --tr-head: 0.065em; --tr-head-2: 0.07em; --tr-label: 0.1em; --tr-mono: 0.14em; --tr-mono-2: 0.12em; --tr-eyebrow: 0.16em; --tr-lockup: 0.16em; --tr-band: 0.2em; /* ========================================================== 3 · SPACE A 4 px base, which makes every step land on the 16 px measurement grid at --sp-4 and its multiples. ========================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; /* vertical rhythm, fluid */ --sp-sec: clamp(40px, 5.4vw, 76px); /* between numbered sections */ --sp-sec-lg: clamp(56px, 8vw, 110px); /* between major regions */ --sp-head: clamp(18px, 2.6vw, 30px); /* section head to content */ --sp-panel: clamp(16px, 2vw, 22px); /* inside a panel */ --sp-gap: clamp(20px, 3vw, 36px); /* between columns */ --sp-gap-s: clamp(16px, 2.4vw, 26px); /* ========================================================== 4 · LAYOUT ========================================================== */ --container: 1360px; --container-wide: 1440px; /* above 1500 px */ --container-text: 760px; /* a reading column */ --measure: 66ch; /* body copy */ --measure-lede: 58ch; /* a lede */ --measure-note: 74ch; /* a caption under a figure */ --gutter: clamp(16px, 4vw, 56px); --grid-cols: 12; --grid-gap: clamp(16px, 2.2vw, 28px); /* Breakpoints. CSS cannot read a custom property inside a media query, so these are the documented values that every @media in components.css uses literally. Change them in both places or not at all. --bp-xs 400px two-up swatches collapse --bp-s 620px paired lists go single column --bp-m 720px the grade table becomes records --bp-l 900px the three-column and label grids open --bp-xl 1200px the wide label grid opens --bp-xxl 1500px the container grows to 1440 px */ --bp-xs: 400px; --bp-s: 620px; --bp-m: 720px; --bp-l: 900px; --bp-xl: 1200px; --bp-xxl: 1500px; /* ========================================================== 5 · BORDER AND RADIUS Square and rule-led. One radius, four widths, no shadows. ========================================================== */ --r: 3px; /* the only radius in the system */ --r-sharp: 0; /* bands, strips, full-bleed panels */ --bw-hairline: 1px; /* the default border */ --bw-rule: 2px; /* an emphasised rule, a focused field */ --bw-marker: 3px; /* a family edge on a table row */ --bw-marker-l: 4px; /* the same edge on a phone record */ --bw-underline: 1.5px; /* a link underline; 3px on hover */ /* ========================================================== 6 · THE MEASUREMENT GRID 16 px, behind charts, tables and label property blocks only. Never behind the page and never behind running text. v1.2 — THE GRID LIVES IN A GUTTER AT THE ENDS. v1.1 cleared the grid from behind the type, which was right, but it could only live inside the panel's own padding, so one faint cell was all that showed. v1.2 gives the panel a gutter of its own. Every .datagrid carries --grid-gutter of inline padding, a WHOLE NUMBER OF CELLS wide, and the grid lives there at near its v1.0 strength. The content — headings, tables, stacked records, chart axes, captions — starts after the gutter, so nothing reflows into the grid and the grid never reaches the type. viewport --grid-gutter solid ramp zero from >=1500px 64px · 4 cells 48px 16px 64px 620-1499px 48px · 3 cells 32px 16px 48px <=619px 32px · 2 cells 16px 16px 32px The fourth cell waits for --bp-xxl because that is where the container itself grows to 1440 px. Below it, a fourth cell costs the wide cobalt-chromium grade table the 720 px its columns need and drops it into record form on a desktop. The ramp is always the LAST CELL of the gutter: the grid is held at --grid-alpha across every cell but the innermost, then falls to ZERO exactly at the content edge. Text contrast is therefore measured against plain chalk, not against the grid. The gutter and the mask are both driven by --grid-gutter, so they cannot drift apart — CHANGE THE GUTTER AND THE PANEL'S PADDING IS THE SAME CHANGE. Both ends read as whole cells. The vertical rules are drawn twice, once anchored to the panel's left edge and once to its right, each confined to its own gutter, so a full cell line meets the outer edge on both sides and no end finishes on a sliver. The horizontal rules keep one continuous 16 px rhythm from the top across the full width; the mask is what keeps them out of the middle. ========================================================== */ --grid-step: 16px; /* the cell */ --grid-alpha: 0.9; /* near v1.0 strength — gutter only */ --grid-alpha-plot: 1; /* a chart plot holds the full strength */ /* The gutter, in whole cells. Phones get 2; the two media queries under this block open it to 3 at --bp-s and 4 at --bp-xxl. CSS cannot read a custom property inside a media query, so those two use the literal 620px and 1500px. */ --grid-gutter: calc(var(--grid-step) * 2); --grid-gutter-y: calc(var(--grid-step) * 2); /* .datagrid--frame band */ --grid-ramp: var(--grid-step); /* the innermost cell ramps out */ /* The mask gradients. Black keeps the grid, transparent drops it. Solid across the gutter but its last cell, zero from the content edge inward, and that transparent middle is what clears the text. */ --grid-mask-x: linear-gradient(to right, #000 0, #000 calc(var(--grid-gutter) - var(--grid-ramp)), transparent var(--grid-gutter), transparent calc(100% - var(--grid-gutter)), #000 calc(100% - var(--grid-gutter) + var(--grid-ramp)), #000 100%); --grid-mask-y: linear-gradient(to bottom, #000 0, #000 calc(var(--grid-gutter-y) - var(--grid-ramp)), transparent var(--grid-gutter-y), transparent calc(100% - var(--grid-gutter-y)), #000 calc(100% - var(--grid-gutter-y) + var(--grid-ramp)), #000 100%); /* ========================================================== 7 · FOCUS The orange ring, 2 px, offset 3 px. 3.42:1 on stone, 3.73:1 on chalk, 3.07:1 on paper — above the 3:1 a non-text control needs on all three. On graphite the ring takes the lift at 8.84:1, because the orange itself is only 4.72:1 there and a ring should be unmissable. ========================================================== */ --focus: var(--pr-ink); --focus-on-dark: var(--pr-lift); --focus-w: 2px; --focus-offset: 3px; /* ========================================================== 8 · TARGETS ========================================================== */ --target-min: 24px; /* WCAG 2.2 AA minimum, for inline controls */ --target-touch: 44px; /* every primary touch target */ --control-h-s: 40px; --control-h: 48px; /* the default button and field height */ --control-h-l: 56px; /* ========================================================== 9 · MOTION Short, and only on colour, border and position. Nothing in this system moves to announce itself; a transition exists to keep a state change from flickering. Reduced motion removes all of it (the rule is at the foot of this file). ========================================================== */ --dur-1: 0.15s; /* a state change on a control */ --dur-2: 0.22s; /* a drawer or a panel */ --ease: cubic-bezier(0.2, 0, 0.3, 1); --ease-out: cubic-bezier(0, 0, 0.3, 1); /* ========================================================== 10 · DEPTH Stacking only. No shadows and no elevation: a thing in front is in front because it has a ground and a rule. ========================================================== */ --z-base: 0; --z-grid: 1; /* content above the measurement grid */ --z-sticky: 40; /* a sticky table head */ --z-header: 50; /* the site header */ --z-overlay: 60; /* the drawer scrim */ --z-drawer: 70; --z-skip: 99; /* the skip link, above everything */ } /* The grid gutter opens a cell at a time: 2 on a phone, 3 from --bp-s, and the fourth only at --bp-xxl, where the container itself grows to 1440 px and a panel can spare the width. Below that, a fourth cell would cost the wide cobalt-chromium table the 720 px its columns need and drop it into record form on a desktop. */ @media (min-width: 620px) { :root { --grid-gutter: calc(var(--grid-step) * 3); } } @media (min-width: 1500px) { :root { --grid-gutter: calc(var(--grid-step) * 4); } } @media (min-width: 1500px) { :root { --container: var(--container-wide); } } /* ============================================================ REDUCED MOTION Declared with the tokens rather than with the components, so that any file loading tokens.css inherits it. ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }