/* ============================================================================ DJ VON FRANK — BRAND OS v3.0 · ATLAS ---------------------------------------------------------------------------- The third system this site has worn, and the first one with a mark of its own. Seventeen colours became six. One dark, one warm, one white, two signals, one material. There is no seventh, including "just a lighter midnight" for large fills. · Named tokens only. Never hardcode a hex that has a token. · Every colour published with its measured contrast ratio, and its FAILURES written down as laws rather than nudged away. · Hairlines over shadows. Hover is border-colour plus a 1-2px lift. · Exactly one owned motion: THE SURFACE, in three places and no fourth. Two owned motions is zero owned motions. The Route, v1's seven-segment signal, stays retired and is not revived alongside it. · Reduced motion REMOVES movement, never slows it. · Derived tokens are formulas, so a palette swap re-renders everything. Repoint Midnight Green and the whole page re-renders correctly. That is the test this file exists to pass, and the six literals below are the only place a repoint has to land. Every ratio in this file was measured on 2026-08-13 — computed from these exact hexes with the WCAG relative-luminance maths, not carried over from v2 and not estimated. Three of the six fail somewhere and all three say so in their own definition. One value GAINED in v3: True North reaches 5.6:1 on Midnight Green and is now legal for body text on dark. That is the only place it gained, and on white it is still never type at any size. WHAT V3 REMOVED, so nobody re-adds it by reflex: the alert red, the text-legal burnt orange, the pale sea-glass voice for dark surfaces and its alias, the elevated dark card, the mid-tone teal support, the whole warm bronze family, the three chart fills, and the washes and gradients that fed them. None of those were repointed. They were deleted by law, and a token left defined "just in case" is how an old palette leaks back. There is no red in this palette. An error state is carried by a 2px Midnight Green border, the glyph, and a line of Plex Mono under the field — never by True North, which means action, not failure. Focus is a 2px Surface Steel ring, never a glow. ========================================================================= */ :root { /* ---- THE SIX ---------------------------------------------------------- Three do the work: Midnight Green grounds everything, Paper White carries the type, True North is the only warm thing in the system. Two more are reserved for signal — they are never decoration and never brand furniture. The sixth is not really a colour at all; it is what The Surface falls back to when it cannot render. These six are the only literal hexes in this file apart from the two stops the material owns (see THE MATERIAL). Everything below resolves through them. */ --ink: #00272C; /* MIDNIGHT GREEN · PRIMARY · GROUND · INK. White on it 15.8:1 ✓ · On white 15.8:1 ✓ The one dark. Heroes, headers, footers, dark bands, and every line of body type on a light page. There is no second dark and no lighter "almost midnight" for large areas. This token is the definition point: every ground and every derived neutral in this file is a formula against it. */ --spark: #FF6B1C; /* TRUE NORTH · SECONDARY · THE NEEDLE. On Midnight 5.6:1 ✓ · On white 2.8:1 ✗ Named for the needle it colours. The only warm value in the system, and the only one allowed to move: primary buttons, the eyebrow on dark, the live rule, the needle. Used once per view, twice at most. LAW: on light grounds it is a fill, a rule, or a shape, and body copy on light is --ink. At 5.6:1 on Midnight Green it is legal for body text on dark, and that is the only place it gained over v2. THE STANDING EXCEPTION (owner's ruling, 2026-08-27). Two components carry True North as small type on a light ground, deliberately, at the owner's call: the .kflag section eyebrow (47 instances, 11 pages, 2.29:1 to 2.64:1) and the header CTA and its .band-spark relatives (2.85:1). These are labels, not reading matter: an eyebrow names the section the reader is already looking at, and its glyph and rule carry the same colour, so the label is never the only way the meaning arrives. The ruling was made on the measured numbers, not around them. It licenses these two components and nothing else. Any new small-type-on-light use is a fresh ruling, not an extension of this one. */ --spark-surface: color-mix(in srgb, var(--spark) 96%, var(--ink)); /* TRUE NORTH AS A SURFACE THAT CARRIES WHITE TYPE. DJ's call 2026-08-27: the Company OS band should be the flat, vivid orange of the duo card, not the 135deg gradient, whose midnight-mixed end stops read gold and brown at the corner rather than brand. Why 96% and not 100%. Paper White on pure #FF6B1C is 2.85:1, under the 3:1 large-text floor, and that is the same 2.85:1 the audit found in four places (the duo card, the arc card, the spark spine, and the band headline). 97% is the exact tipping point, 3.00:1. 96% clears it at 3.05:1 and is a 4% mix, so the eye reads it as the same orange while the headline becomes legal. The rule: a spark surface that carries PAPER type uses this. A spark surface that carries INK type uses --spark directly, because ink measures 5.56:1 on pure spark and gains nothing from the mix. */ --paper: #FFFFFF; /* PAPER WHITE · BASE · CARD · KNOCKOUT. On Midnight 15.8:1 ✓ True white, never off-white. Cards, sheets, knockout marks, and all type on dark grounds. The page beneath the cards is --page, a 5% Surface Steel tint, so white sheets have something to sit on. v2's off-white ground is gone; the sheet and the page are now two different values, which is the job --page exists to do. */ --signal: #09E85E; /* LANDFALL · ARRIVAL · LIVE · SHIPPED · PASSING. On Midnight 9.6:1 ✓ · On white 1.7:1 ✗ Land sighted. The owner's 2026-08-25 ruling widened this from status-dot duty to a working role: the pulsing dot on live work, the gate seal's tick, the current era on the timeline, PASS states in demos. It still only ever marks what is genuinely running, which is what keeps it meaning something. LAW: never small type on white; type on a Landfall field is --ink, which measures 9.6:1. It marks what is live, never what is merely claimed. */ --beacon: #279AF1; /* MERIDIAN · MOTION · IN PROGRESS · INFORMATION. On Midnight 5.3:1 ✓ · On white 3.0:1 · large only A line of longitude: the thing you are still travelling along. Widened 2026-08-25 to a working role: the Operating Loop's station dots, the .note.info edge and wash, in-progress chips, read-time markers on dark grounds, the second series in a chart. LAW (amended by the owner's ruling, 2026-08-27). The 3.0:1 figure is Meridian on pure white. Body copy does not sit on pure white here: it sits on --page, the 5% Surface Steel tint, where the real rendered value is 2.79:1. The 2026-08-25 link ruling was therefore made on a number this site does not produce. Re-made on the true one: body links stay Meridian at 2.79:1, underlined, and the underline is what carries the affordance. Large display on white keeps its 3.0:1. Small Meridian type still lives on dark everywhere else. */ --chrome: #245D63; /* SURFACE STEEL · STRUCTURE · LINK · LABEL. On white 7.4:1 ✓ · On Midnight 2.1:1 ✗ What The Surface collapses to with no WebGL, and since 2026-08-25 the site's structural material: the .band-steel section ground, the data-strips, the .btn.steel tertiary button, the sub-nav hover, plus its old jobs as the link and eyebrow colour on light and the bezel inside the mark. LAW: fails on dark at 2.1:1. A Steel fill on a dark ground is a shape, never a label. Links are Steel with a 1px underline 3px clear of the baseline, on light only. */ /* THE ROLE PAIR — Landfall and Meridian still only ever mean something; the 2026-08-25 expansion widened where they say it, not what they say. Landfall = arrived (live, shipped, passing). Meridian = in motion (in progress, in review, informational). Allowed: status, dots, ticks, chips, washes, chart fills, the .note.info edge, accents inside a demo frame. Still never: logos · the header CTA · primary buttons · marketing copy adjacent to the mark. The moment green means "nice green" it stops meaning shipped. Greyscale separation, measured: Landfall 0.59, Meridian 0.30, Midnight 0.02 of 1. The three stay apart in a black-and-white print, which is why the pair can carry meaning without a shape change. */ /* ---- GROUNDS — every one resolves through the six --------------------- */ --ground: var(--ink); /* the primary dark ground: heroes, dark bands, the header when solid. Identical to --ink in v3, because there is no second dark. */ --ink-deep: var(--ink); /* footers and code excerpts. Was a third dark in v2; folded in. Kept as a name so existing rules keep reading. */ --deep: var(--ink); /* the v2 extension's Deep Water, promoted: its hex became the whole system's ground. Now an alias, not a distinct value. */ --card: var(--paper); /* the one true white for sheets. Identical to --paper in v3; the sheet/page distinction is carried by --page below, not by an off-white. */ --page: color-mix(in srgb, var(--chrome) 5%, var(--paper)); /* 5% Steel on white → #F4F7F7. The ground beneath the cards, so a white sheet has something to sit on. v3's one genuinely new value. Midnight on it measures 14.7:1. */ --band: color-mix(in srgb, var(--chrome) 8%, var(--paper)); /* 8% Steel on white → #EDF2F3. Recessed bands, table heads. Midnight on it measures 14.0:1. */ /* ---- DERIVED NEUTRALS — formulas, so a palette swap re-renders -------- Where the Brand OS prints a swatch hex beside a formula, the formula lands within one 8-bit step of it. The formula is the law and the swatch is the illustration; the ratios below are computed from what the formula actually renders, not from the swatch. */ --muted: color-mix(in srgb, var(--ink) 72%, var(--paper)); /* Secondary text on light. Renders #476367, 6.5:1 on white ✓. The Brand OS swatch prints #476467 at 6.4:1; one step apart, both comfortably AA. */ --faint: color-mix(in srgb, var(--ink) 65%, var(--paper)); /* Captions and tertiary labels. Renders #597376, 5.1:1 on white ✓. v2 shipped a kit value at 3.9:1 and darkened it rather than excusing it; v3 arrives at the same place by formula. THE FLOOR, written down: on --page rather than true white — which is the ground these two sit on more often — --muted measures 6.0:1 and --faint measures 4.7:1. Both still pass AA at text sizes. --faint is the floor of this palette and is not to be lightened; there is nothing under it. */ --dim-d: color-mix(in srgb, var(--paper) 66%, transparent); /* Dimmed type on Midnight. Renders #A8B6B7 over --ink, 7.6:1 ✓. Was 62% in v2; 66% is the published v3 value. */ --strong-d: color-mix(in srgb, var(--paper) 88%, transparent); --hairline: color-mix(in srgb, var(--ink) 13%, transparent); --hairline-soft: color-mix(in srgb, var(--ink) 8%, transparent); --hairline-d: color-mix(in srgb, var(--paper) 16%, transparent); /* Depth comes from hairlines, not shadows: a one-pixel border and a one-to -two-pixel lift. The light hairline tightened from 14% to 13% in v3; the dark one is unchanged at 16%. */ /* ---- VOICES ----------------------------------------------------------- */ --primary: var(--chrome); /* THE accent role on light: links, labels, eyebrows, the 2px focus ring. Harbor held this in v2; Surface Steel holds it now, and carries the same law — it fails on dark. */ --wash-primary: color-mix(in srgb, var(--primary) 7%, var(--card)); --wash-spark: color-mix(in srgb, var(--spark) 8%, var(--card)); /* 2026-08-25 role-bound expansion: the signal pair earns wash duty. Landfall washes ground an arrival moment, Meridian washes ground an information moment. Washes are fills, legal on light at any ratio. */ --wash-signal: color-mix(in srgb, var(--signal) 9%, var(--card)); --wash-beacon: color-mix(in srgb, var(--beacon) 8%, var(--card)); /* Washes are fields, never type grounds for the colour they are made of. A True North wash is legal on light because at 8% it is a fill, which is the only thing True North is allowed to be there. */ --glass: color-mix(in srgb, var(--paper) 86%, transparent); --glass-d: color-mix(in srgb, var(--ground) 88%, transparent); --blur-1: saturate(170%) blur(14px); /* sticky chrome */ --blur-2: saturate(140%) blur(22px); /* overlays */ /* Two grades of glass. A third makes depth ambiguous. Where blur is unsupported the glass falls back to solid Midnight Green; anyone who sets reduced transparency gets the solid, not a thinner blur. */ /* ---- THE MATERIAL ----------------------------------------------------- THE SURFACE is WebGL. This is its flat cousin, for the places that need the same read without a canvas, and for every browser that cannot run it. v2 carried two chrome gradients; v3 carries one, because the avoid list permits exactly one gradient in this system: The Surface and this fallback. Print drops even this and uses flat --chrome. The two outer stops are the material's own, published in the Brand OS as literals. They are the only hexes here that are not one of the six, and they are legal precisely because they have no token name — they are not palette colours, they are where the material starts and ends. The middle stop is the ground, so a repoint of Midnight Green moves the gradient with it. */ --grad-ground: linear-gradient(158deg, #0A4C4A 0%, var(--ground) 46%, #001A1E 100%); --grad-paper: var(--page); /* Retirement stub. v2 lit its light ground with a radial-plus-linear gradient; --paper is true white now and a gradient between brand colours is on the avoid list, so there is no paper gradient in v3. The name survives only so that any rule still calling it resolves to the legal light ground instead of falling through to transparent. Remove it once nothing references it. */ /* ---- TYPE ------------------------------------------------------------- Archivo — headlines, section heads, card titles, buttons. 800-900 for display, 700 for anything under 24px. IBM Plex Sans — body and UI. ~16px over 1.55 leading, 1.65 in long-form. IBM Plex Mono — eyebrows, figures, IDs, file names, code. Tabular figures always, so columns of numbers line up. All three are self-hosted latin subsets: /fonts/. Zero external requests. Saira Black at wdth 125 is the fourth face in the Brand OS and it is deliberately NOT tokenised here. It sets the wordmark and nothing else, and the standing rule is that the wordmark is artwork, not live text, in production. A --font-wordmark token would invite live text and a font request this site does not make. The lockups ship outlined. */ --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- CARRIED FORWARD FROM v2 ------------------------------------------ The type scale and the layout tokens below are v2's, unchanged. v3 does not restate them, and that distinction matters: the Brand OS is not their source and must not be cited as one. The single exception is --measure, which the Brand OS does specify — "holds a 66-character measure" — and which happens to already be right. The timing, easing, blur and radius values further down ARE restated by v3 and are identical to v2's, with one change: buttons move to --pill. */ --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem); --step-0: clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem); --step-1: clamp(1.20rem, 1.13rem + 0.34vw, 1.42rem); --step-2: clamp(1.48rem, 1.34rem + 0.68vw, 1.92rem); --step-3: clamp(1.85rem, 1.58rem + 1.32vw, 2.65rem); --step-4: clamp(2.30rem, 1.79rem + 2.48vw, 3.80rem); --step-5: clamp(2.80rem, 1.86rem + 4.55vw, 5.60rem); /* ---- SPACE, RADIUS, MOTION -------------------------------------------- */ --hd-h: 70px; /* header height. Anything sticky below it keys off this. */ --gutter: clamp(20px, 4.5vw, 44px); --wrap: 1180px; --wrap-wide: 1420px; --measure: 66ch; --section: clamp(60px, 9vw, 124px); /* ---- SPACING SCALE (2026-08-25) ----------------------------------------- The type ramp had steps and the space between things did not: 254 inline declarations across the page modules used 22 distinct pixel values. The 22 collapse onto seven steps, each with one job, and a page module never writes a raw spacing pixel again. The mapping that retired each value is recorded here so a future eye knows 22px card padding did not vanish, it became --sp-4. --sp-1 6px micro: a label to its value, a dot to its word (4,6) --sp-2 10px small: chips, tight stacks, icon gaps (8,9,10,12) --sp-3 14px base: text rhythm, a kicker to its headline (14,16) --sp-4 20px roomy: card padding, grid gaps (18,20,22) --sp-5 26px panel: feature padding, sub-section air (24,26,28) --sp-6 34px block: a lede to the proof below it (30,32,34,36,40) --sp-7 48px group: between the page's big moves (44,48,52) The steps are literal px on purpose: spacing that breathes with the viewport already has --gutter and --section, and a third fluid axis would make every gap a calculation. */ --sp-1: 6px; --sp-2: 10px; --sp-3: 14px; --sp-4: 20px; --sp-5: 26px; --sp-6: 34px; --sp-7: 48px; --r-sm: 8px; /* chips, tags */ --r: 14px; /* cards, inputs */ --r-lg: 22px; /* panels, feature blocks */ --pill: 999px; /* BUTTONS. They were --r in v2 and are --pill in v3. One True North button per view: a second primary means the first one was not primary. Hit target never below 44px. Tiles curve at 22% of tile width, so an app icon and a favicon curve alike. */ /* Hairlines do the work. These two exist for genuinely floating surfaces, and nothing else. --sh-sm lost its second layer in v3: one 3px layer at 5% for resting sheets, one 30px layer at 22% for floating ones. The base is Midnight Green, written as a formula so the shadows follow a repoint instead of drifting from it — v2 pasted an rgba that belonged to no token and quietly stopped matching the ground. */ --sh-sm: 0 1px 3px color-mix(in srgb, var(--ink) 5%, transparent); --sh-md: 0 12px 30px -14px color-mix(in srgb, var(--ink) 22%, transparent); /* The timing budget, fixed. Every STATE CHANGE in this system resolves in 260ms or less. Hover is a border-colour change plus a 1-2px lift: never a scale, never a colour wash across a whole card. THE AMBIENT EXCEPTION (owner's ruling, 2026-08-26, the same shape as the spark-glow ruling that preceded it). The budget governs state changes, which are things a person triggers and then waits on. It does not govern continuous ambient surfaces, which nobody is waiting on: The Surface itself, the marquee, the traveling rail pulses, and as of this ruling the hero's rotating line (a 6s cycle) and its kicker shine (3.6s). The test is whether a person is blocked by it. If someone clicked and is waiting, 260ms. If it simply breathes, it is ambient and exempt. Reduced motion still REMOVES all of it rather than shortening it. */ --t-hover: 170ms; --t-press: 90ms; --t-release: 200ms; --ease: cubic-bezier(.33, 0, .15, 1); } /* ============================================================================ THE SURFACE — the one piece of decorative motion this brand owns. ---------------------------------------------------------------------------- Not a colour. A material: a slow liquid-chrome field in Midnight Green with a low, out-of-phase thread of True North running through it, tone-mapped so the brightest band lands on a muted steel instead of blowing to white. It is the one texture this brand owns, and owning exactly one is the point. Parameters, published: speed 0.12 · amplitude 0.32 · base #00272C · orange thread 0.04. It answers the pointer. WHERE IT RENDERS — three places, and there is no fourth: 1. the site hero, 2. the Brand OS document cover, 3. the app icon, exported as a still frame. Of those three, exactly one is a web page. On this site The Surface renders once, on the homepage hero, and the other two are not ours to draw. v2 said "exactly one place" because only the hero existed; the count went to three when the document and the icon did, and it stops there. Never: a second instance on this site · behind body text · above the fold on any page but the homepage · under a lockup outside the three cleared uses · beside a second owned motion. Two owned motions is zero owned motions. No WebGL: the flat --grad-ground gradient underneath simply shows and nothing structural is lost. Print: flat --chrome, no gradient. Reduced motion: ONE still frame is drawn at t=8.0 and the loop never starts. Movement is REMOVED, never slowed — a slowed signature reads as broken. The Route, v1's seven-segment signal, retired with v1 and stays retired. ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }