/* Sinewave Campus design tokens, CSS custom-property export * * Generated 2026-08-19 from Brand/_reference/brand-book-v4-approved/brand-book-v4.html, * the approved family brand book (internal build revision v4, built 2026-07-31, * approved 2026-08-04). Machine-readable source of record: ./tokens.json, which carries * the per-token provenance and the measured contrast ratios. This file is the export. * * Campus only. No value here is offered for the family set, for Worlds or for Sinespace. * * No value is copied from any file in Website/campus/_planning, including * tokens-v4-family.json and tokens-v4-sinespace.json (both 2026-07-31, pre-approval), * nor from Website/corporate/sinewave/src/styles/colors_and_type.css, nor from the book * HTML's own chrome CSS, whose generator header states it is built from those same * pre-approval token files. * * Citations read "V4 SS2.1 The interface ramp": book section number, then the book's own * section title. * * Two layers, per V4 SS2.7. Primitives hold values, semantics hold decisions. Components * consume semantics only, never a primitive, never a raw hex, never a logo colour. * * Names the book requires at V4 SS2.7 for which it publishes no Campus value are present * as commented-out declarations, marked UNRESOLVED. They are left unset on purpose: a * plausible value with a citation beside it is a guess that has learned to pass review. * 20 are unresolved in the light theme and 33 in the dark, 34 distinct names in all. */ /* ========================================================================== Primitives. Do not consume these directly from a component. ========================================================================== */ :root { /* Violet. V4 SS2.1 */ --primitive-violet-full: #7B61FF; /* V4 SS2.1 Why violet. Logo art only in Campus. 4.20:1 on white */ --primitive-violet-full-fallback: #8A73FF; /* V4 SS2.1 Where this is judgement, not derivation. Same hue, one notch softer */ --primitive-violet-lifted: #B6ABFF; /* V4 SS3.2 Which colourway on which background */ --primitive-violet-interface: #5B3FD1; /* V4 SS2.1 The interface ramp. 6.83:1 on white */ --primitive-violet-interface-hover: #4930B3; /* V4 SS2.1 The interface ramp. 8.91:1 on white */ --primitive-violet-interface-pressed: #382288; /* V4 SS2.1 The interface ramp */ --primitive-violet-focus: #7C5CFA; /* V4 SS2.1 The interface ramp. 4.40:1 on the Campus light surface */ --primitive-violet-lifted-campus-dark: #C1B5FF;/* V4 SS5.3 dark ramp. 9.53:1 on Campus dark, 1.85:1 on white. Never a fill */ --primitive-violet-focus-campus-dark: #B7A7FF; /* V4 SS5.3 dark ramp. 8.41:1 on the Campus dark surface */ /* Campus secondary. V4 SS5.3 The Campus secondary */ --primitive-campus-secondary: #8A2F7B; /* 7.57:1 on light. 19 CIEDE2000 from the action colour */ --primitive-campus-secondary-hover: #732767; --primitive-campus-secondary-dark: #E0A6D8; /* 8.94:1 on dark. 39 CIEDE2000 from the action colour */ /* Campus neutrals. V4 SS5.3 Expression, except where noted */ --primitive-campus-canvas-light: #F7F7FA; --primitive-white: #FFFFFF; --primitive-campus-sunken-light: #E7E6EC; --primitive-campus-boundary: #717480; --primitive-campus-canvas-dark: #101116; --primitive-campus-surface-dark: #171820; /* V4 SS3.2 row Campus dark surface; V4 SS5.3 container law */ --primitive-campus-sunken-dark: #0C0D11; /* V4 SS2.1 and SS2.7. Not available in a headset */ /* Status. V4 SS2.1 Status colour, and The six regulated values */ --primitive-status-danger-text: #9B2C24; /* 6.61:1 on its own surface */ --primitive-status-warning-text: #704D00; /* 6.97:1 */ --primitive-status-safe-text: #25643A; /* 6.25:1 */ --primitive-status-mandatory-text: #2F579B; /* 6.20:1 */ --primitive-status-danger-regulated: #B83028; /* Light danger. 6.01:1 on its ground */ --primitive-status-warning-regulated: #996900; /* Light warning. 4.80:1 */ --primitive-status-safe-regulated: #117E56; /* Light safe. 5.07:1 */ --primitive-status-danger-regulated-dark: #F55F5C; /* Dark danger. 5.62:1 */ --primitive-status-warning-regulated-dark: #D6A229;/* Dark warning. 7.63:1 */ --primitive-status-safe-regulated-dark: #07B075; /* Dark safe. 6.29:1 */ } /* ========================================================================== Type, space, shape and motion. Theme-independent. ========================================================================== */ :root { /* Families. V4 SS2.2 Typography. Self-hosted WOFF2, same-origin only, no third-party font request on any surface (V4 SS2.2 The payload, measured) */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Weight ramp. V4 SS2.2 The scale, and Measure, numerals and case. Never weight 300 or lighter in product, dark or spatial contexts. On dark surfaces and in compact interface, 500 replaces 400. */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* Scale. V4 SS2.2 The scale. Base 16 px, ratio 1.25, a major third. Sizes and line heights are the px pairs the book prints. */ --type-display-size: 39px; --type-display-line: 44px; --type-display-weight: 600; --type-display-tracking: -0.022em; --type-title-size: 31px; --type-title-line: 35px; --type-title-weight: 600; --type-title-tracking: -0.018em; --type-heading-size: 25px; --type-heading-line: 34px; --type-heading-weight: 600; --type-heading-tracking: -0.012em; --type-subhead-size: 20px; --type-subhead-line: 27px; --type-subhead-weight: 600; --type-subhead-tracking: -0.006em; --type-lead-size: 18px; --type-lead-line: 28px; --type-lead-weight: 400; --type-lead-tracking: 0em; --type-body-size: 16px; --type-body-line: 25px; --type-body-weight: 400; --type-body-tracking: 0em; --type-ui-size: 14px; --type-ui-line: 22px; --type-ui-weight: 500; --type-ui-tracking: 0em; --type-caption-size: 13px; --type-caption-line: 20px; --type-caption-weight: 400; --type-caption-tracking: 0.010em; /* Measure. V4 SS2.2 Measure, numerals and case. A character count, not a width: 45 to 75 characters single column, 66 the target, 40 to 50 in multiple columns. */ --measure-target: 66ch; --measure-min: 45ch; --measure-max: 75ch; --measure-multicolumn-min: 40ch; --measure-multicolumn-max: 50ch; /* Spacing. V4 SS2.3 Spacing. A 4 px base with an 8 px rhythm dominating above 16 px. Components consume the names, not the numbers, and add no near-duplicate gaps. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 88px; /* Layout. V4 SS2.3 Spacing. 12-column grid reducing to 8, 5, 3 and 2. */ --breakpoint-desktop: 1280px; --breakpoint-tablet: 768px; --breakpoint-mobile: 375px; --layout-longform-max: 720px; /* Radius. V4 SS2.3 Radius. A property of the surface class, not of the object's dimensions: a card corner stays 16 px at any width. Nested corners share a virtual centre, innerRadius = outerRadius - padding, and square off at zero or less. Fully rounded is reserved for things that are conceptually circular. Buttons are not pills. */ --radius-none: 0; /* Data tables, dense grids, anything that tiles edge to edge */ --radius-sm: 4px; /* Inputs, checkboxes, small controls */ --radius-chip: 6px; /* Chips and filter pills */ --radius-md: 8px; /* Buttons, inputs, icon tiles */ --radius-lg: 16px; /* Cards, panels, modals, sheets */ --radius-full: 999px; /* Toggles, avatars, status dots */ /* Elevation. V4 SS2.3 Elevation. A 1 px hairline in preference to a shadow. Shadow is reserved for surfaces that genuinely float, such as a menu or a dialog, and never separates two things on the same plane. Print floors: 0.25 pt offset litho, 0.35 pt digital, 0.65 pt screen print. Set to the coarsest process a layout meets. */ --hairline-screen: 1px; /* Motion. V4 SS2.4. Three curves derived from one. Duration scales with the area crossed so perceived speed stays constant. Anything a person initiates begins within 100 ms. Exits are shorter than entrances (V4 SS2.4 The asymmetry law). */ --easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9); /* Begins and ends on screen */ --easing-entrance: cubic-bezier(0, 0, 0.38, 0.9); /* Leaves at once, settles */ --easing-exit: cubic-bezier(0.2, 0, 1, 1); /* Ends at speed */ --motion-micro: 120ms; /* A state change inside one control: hover, press, focus */ --motion-short: 200ms; /* An element entering or leaving in place: reveal, tooltip */ --motion-medium: 320ms; /* A panel, sheet or dialog crossing a large part of the frame */ } /* ========================================================================== Semantic layer, light theme. The required set is V4 SS2.7. ========================================================================== */ :root { /* Surface. V4 SS5.3 Expression. Campus canvas is cooler than the parent's and cards are true white. */ --color-bg-canvas: var(--primitive-campus-canvas-light); --color-bg-surface: var(--primitive-white); --color-bg-sunken: var(--primitive-campus-sunken-light); /* --color-bg-subtle: UNRESOLVED. V4 SS2.7 requires the name; no Campus value published */ /* --color-bg-raised: UNRESOLVED. V4 SS2.7 requires the name; no Campus value published */ /* --color-bg-inverse: UNRESOLVED. V4 SS2.7 requires the name; no Campus value published */ /* Text. V4 SS2.7 names all four. The book writes ink as a role (V4 SS5.1, product name in ink) and publishes no Campus hex for it. */ /* --color-text-default: UNRESOLVED */ /* --color-text-muted: UNRESOLVED */ /* --color-text-subtle: UNRESOLVED */ --color-text-on-inverse: var(--primitive-white); /* V4 SS5.3 Lit world-space and Emissive surfaces. 17.68:1 on #171820 as authored */ /* Action. V4 SS2.1 The interface ramp. States move away from their surface, never towards it: darker on light, lighter on dark. */ --color-action-primary-bg: var(--primitive-violet-interface); --color-action-primary-bg-hover: var(--primitive-violet-interface-hover); --color-action-primary-bg-pressed: var(--primitive-violet-interface-pressed); --color-action-primary-text: var(--primitive-white); /* The white label, 6.83:1 in both themes */ /* --color-action-secondary-bg: UNRESOLVED. V4 SS5.3 gives #8A2F7B a secondary-action use but carries it as data.secondary and does not author this group */ /* --color-action-secondary-bg-hover: UNRESOLVED */ /* --color-action-secondary-text: UNRESOLVED */ /* --color-action-secondary-border: UNRESOLVED */ /* Link. Decision 2026-09-08, links are violet, carried from Brand/sinewave-campus/tokens.css, which amended the 2026-08-19 export for this one decision. Links are violet, not the blue the older products carry. V4 SS2.1 Proportion permits an accent text token for a link and for nothing else, so this is one name with no hover, visited or active step beside it: the ruling names none. The mark's own #7B61FF is not a candidate, at 4.20:1 on white. */ --color-link: var(--primitive-violet-interface); /* #5B3FD1. 6.83:1 on white */ /* State. V4 SS2.1 The interface ramp */ --color-focus-ring: var(--primitive-violet-focus); /* 4.40:1 on the Campus light surface */ /* --color-state-hover-on-light: UNRESOLVED. V4 SS5.3's light ramp gives an accent hover of #4930B3, which is action.primary.bgHover. Whether this token is that value or a neutral wash is not stated, so it is not mapped */ /* Structure. V4 SS5.3 Expression. Any boundary that identifies a control uses border.strong rather than a shadow. Decorative borders and grid lines never become the only visible boundary of an interactive state. */ /* --color-border-default: UNRESOLVED. V4 SS2.7 states it is decorative and carries no contrast requirement; no Campus value published */ --color-border-strong: var(--primitive-campus-boundary); /* --color-input-bg: UNRESOLVED */ /* --color-input-text: UNRESOLVED */ /* --color-input-placeholder: UNRESOLVED */ /* --color-input-border: UNRESOLVED. V4 SS2.7: a boundary needed to identify a control uses border.strong or input.border, so this answers to 3:1 when it is that boundary */ /* --color-table-header-bg: UNRESOLVED */ /* --color-table-stripe-bg: UNRESOLVED */ /* Meaning. V4 SS2.1 Status colour and The six regulated values. Not customer-configurable, in any context, on any surface, in any brand. Every status carries a label or a recognisable shape as well as its colour. Blue is not a generic informational colour here: it means a mandatory instruction, and neutral information uses neutral tokens. The bg values are read from the rendered swatch in V4 SS2.1 rather than from its prose, which is weaker provenance than the text and border values. See tokens.json. */ --color-status-danger-bg: #FDECEA; --color-status-danger-text: var(--primitive-status-danger-text); --color-status-danger-border: var(--primitive-status-danger-regulated); --color-status-warning-bg: #FFF4D6; --color-status-warning-text: var(--primitive-status-warning-text); --color-status-warning-border: var(--primitive-status-warning-regulated); --color-status-safe-bg: #E6F4EB; --color-status-safe-text: var(--primitive-status-safe-text); --color-status-safe-border: var(--primitive-status-safe-regulated); --color-status-mandatory-bg: #E8F0FE; --color-status-mandatory-text: var(--primitive-status-mandatory-text); --color-status-mandatory-border: #3D67A8; /* Swatch only. Mandatory has no row in The six regulated values */ /* Data and asset. V4 SS5.3 The Campus secondary, and SS2.1 Proportion */ --color-data-primary: var(--primitive-violet-interface); /* Inferred: SS2.1 permits the accent on labelled data series, SS5.3 assigns the second series to data.secondary */ --color-data-secondary: var(--primitive-campus-secondary); --color-data-secondary-hover: var(--primitive-campus-secondary-hover); /* --color-data-neutral: UNRESOLVED */ /* --color-data-grid: UNRESOLVED. V4 SS2.7 states it is decorative and carries no contrast requirement */ --color-logo-field: var(--primitive-campus-surface-dark); /* Inferred from V4 SS3.2 row Campus dark surface */ } /* ========================================================================== Semantic layer, dark theme. Per V4 SS2.7 Where the headset sits in this, VR takes this theme rather than a fifth palette. Foreground values are chosen on their worst case across the adaptation range, the two-dimensional thresholds are a floor rather than a target, and no token below #0d0d0d is used, which puts --color-bg-sunken out of use in a headset: use the surface above it instead. Fall-through, stated because it is load-bearing. This block overrides custom properties declared on :root, so any token it does not redeclare keeps its light value. Fifteen do: --color-action-primary-bg-hover --color-status-danger-bg --color-action-primary-bg-pressed --color-status-danger-border --color-border-strong --color-status-warning-bg --color-data-secondary-hover --color-status-warning-border --color-focus-ring --color-status-safe-bg --color-text-on-inverse --color-status-safe-border --color-status-mandatory-bg --color-status-mandatory-border --color-status-mandatory-text None of those fifteen is a dark value the book publishes. Each is the light value still standing because nothing replaced it, and each is measured against a light ground. Treat every one as unmeasured on dark until the design system authors it: use them on a dark surface and the ratio in the comment beside the light declaration does not apply. ========================================================================== */ [data-theme="dark"] { --color-bg-canvas: var(--primitive-campus-canvas-dark); --color-bg-surface: var(--primitive-campus-surface-dark); --color-bg-sunken: var(--primitive-campus-sunken-dark); /* --color-bg-subtle: UNRESOLVED */ /* --color-bg-raised: UNRESOLVED */ /* --color-bg-inverse: UNRESOLVED */ /* --color-text-default: UNRESOLVED. White type is stated for the near-black in-scene field and for emissive surfaces. Whether the 2D dark theme's body text is pure white or a stepped-down neutral is not stated */ /* --color-text-muted: UNRESOLVED */ /* --color-text-subtle: UNRESOLVED */ /* --color-text-on-inverse: UNRESOLVED */ /* The fill does not move with the theme. V4 SS2.1 Law: the theme selects the surface, the surface selects the foreground, the fill does not move. A product whose primary action changes colour when a reader flips the theme has two primary actions. On the Campus dark surface the fill silhouette measures 2.59:1, below the 3:1 a boundary would answer to, and it is deliberately not relied on: the white label at 6.83:1 and the focus ring at 8.41:1 identify the control. */ --color-action-primary-bg: var(--primitive-violet-interface); --color-action-primary-text: var(--primitive-white); /* --color-action-primary-bg-hover: UNRESOLVED. V4 SS5.3's dark ramp gives Rest #C1B5FF and Hover #FFFFFF, but SS2.1 states those are foreground cue values and that a lifted value is never a fill. No dark fill hover is published */ /* --color-action-primary-bg-pressed: UNRESOLVED */ /* --color-action-secondary-bg: UNRESOLVED */ /* --color-action-secondary-bg-hover: UNRESOLVED */ /* --color-action-secondary-text: UNRESOLVED */ /* --color-action-secondary-border: UNRESOLVED */ /* Decision 2026-09-08, links are violet: dark. The dark rest step of the ramp whose light rest step is the light link, a foreground cue and never a fill. */ --color-link: var(--primitive-violet-lifted-campus-dark); /* #C1B5FF. 9.53:1 on the Campus dark surface */ --color-focus-ring-on-dark: var(--primitive-violet-focus-campus-dark); /* V4 SS5.3. 8.41:1 on the Campus dark surface */ /* --color-state-hover-on-dark: UNRESOLVED. V4 SS5.3's dark ramp gives an accent-cue hover of #FFFFFF at 17.68:1. Whether this token is that value or a neutral lift is not stated */ /* --color-border-default: UNRESOLVED */ /* --color-border-strong: UNRESOLVED. #717480 is published at V4 SS5.3 in the Campus swatch row without a theme qualifier and is not measured against #101116, so it is not carried into this theme here */ /* --color-input-bg: UNRESOLVED */ /* --color-input-text: UNRESOLVED */ /* --color-input-placeholder: UNRESOLVED */ /* --color-input-border: UNRESOLVED */ /* --color-table-header-bg: UNRESOLVED */ /* --color-table-stripe-bg: UNRESOLVED */ /* V4 SS2.1 The six regulated values publishes one value per regulated meaning on dark, measured on its ground. It publishes no dark bg or border pair, and no dark mandatory value, so those are unresolved rather than derived from the light triple. */ --color-status-danger-text: var(--primitive-status-danger-regulated-dark); --color-status-warning-text: var(--primitive-status-warning-regulated-dark); --color-status-safe-text: var(--primitive-status-safe-regulated-dark); /* --color-status-danger-bg, --color-status-danger-border: UNRESOLVED */ /* --color-status-warning-bg, --color-status-warning-border: UNRESOLVED */ /* --color-status-safe-bg, --color-status-safe-border: UNRESOLVED */ /* --color-status-mandatory-bg, --color-status-mandatory-text, --color-status-mandatory-border: UNRESOLVED */ --color-data-primary: var(--primitive-violet-interface); --color-data-secondary: var(--primitive-campus-secondary-dark); /* --color-data-neutral: UNRESOLVED */ /* --color-data-grid: UNRESOLVED */ --color-logo-field: var(--primitive-campus-surface-dark); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg-canvas: var(--primitive-campus-canvas-dark); --color-bg-surface: var(--primitive-campus-surface-dark); --color-bg-sunken: var(--primitive-campus-sunken-dark); --color-action-primary-bg: var(--primitive-violet-interface); --color-action-primary-text: var(--primitive-white); --color-link: var(--primitive-violet-lifted-campus-dark); --color-focus-ring-on-dark: var(--primitive-violet-focus-campus-dark); --color-status-danger-text: var(--primitive-status-danger-regulated-dark); --color-status-warning-text: var(--primitive-status-warning-regulated-dark); --color-status-safe-text: var(--primitive-status-safe-regulated-dark); --color-data-primary: var(--primitive-violet-interface); --color-data-secondary: var(--primitive-campus-secondary-dark); --color-logo-field: var(--primitive-campus-surface-dark); } } /* ========================================================================== Accent ramp, printed verbatim from V4 SS5.3 Expression. Carried separately because the book prints it as a ramp with measured ratios and does not map every step onto a V4 SS2.7 token name. The dark rest and hover values are foreground cues, not fills: V4 SS2.1 states a lifted value is never a fill. ========================================================================== */ :root { --campus-ramp-light-rest: #5B3FD1; /* 6.83:1 */ --campus-ramp-light-hover: #4930B3; /* 8.91:1 */ --campus-ramp-light-label: #FFFFFF; /* Primary action label, 6.83:1 */ --campus-ramp-light-focus: #7C5CFA; /* 4.40:1 */ --campus-ramp-dark-rest: #C1B5FF; /* 9.53:1 on the Campus dark surface. Never a fill */ --campus-ramp-dark-hover: #FFFFFF; /* 17.68:1 */ --campus-ramp-dark-label: #FFFFFF; /* Primary action label, 6.83:1 */ --campus-ramp-dark-focus: #B7A7FF; /* 8.41:1 */ } /* ========================================================================== In-scene chrome. V4 SS5.3 What the palette does in-scene, and what it drops. In-scene there is one accent, the fixed status set, and no secondary chromatic colour. Every control sits on its own filled container at a stated opacity, never a tint over the scene and never a scrim. That surface is neutral and stays neutral. The accent appears twice in a frame at most: the primary action as a fill at rest, and the active control by inversion. An unavailable control is marked by a strike on the glyph, never by a colour change. Anything that is neither an action nor a status takes no hue. Brand colour never carries safety meaning in-world: inside a simulated scene the operator's own standard governs. ========================================================================== */ :root { --inscene-accent: var(--primitive-violet-interface); /* 6.83:1 on white, against the 3:1 non-text threshold */ --inscene-container-bg: var(--primitive-campus-surface-dark); --inscene-container-opacity: 0.88; /* Floor 0.591, where a white glyph still clears 4.5:1 against white. Whoever reduces it publishes the figure */ --inscene-nametag-opacity: 0.70; /* Worst case 6.56:1 across every backdrop measured. Stated above the 0.591 floor so it survives a plate someone later tints */ } /* ========================================================================== Prohibited, and what these tokens must never be asked to do. V4 SS2.1 Law: the two palettes. The logo palette and the interface palette are separate systems. Logo art answers to the 3:1 non-text threshold; interface text answers to 4.5:1. A value correct in the mark is not thereby correct in a button, and correcting a mark to an interface value is a misuse of the rule, not an application of it. The Campus mark is #7B61FF on light and #B6ABFF on dark (V4 SS5.1). Neither is exported as an interface custom property above, on purpose. #7B61FF measures 4.20:1 on white: it passes 3:1 as logo art and is prohibited as normal-size text and as a fill under a white label. Every Campus button stays #5B3FD1. V4 SS2.1 Prohibited combinations: - The action violet never sits directly against status red, amber or green. - Status colours are never a decorative set, a plan tier, an unlabelled chart series or a "popular" badge. - Product colours never enter parent chrome. - The mark's magenta and cyan endpoints are asset colours, never a button, link, chart series, theme or print colour. - A lifted value is never a fill. - White is never an in-world container fill. - A control that carries meaning is never a lit world-space surface. - No token below #0d0d0d is used in a headset. - The rejected coral #FF685E never appears near a danger state. V4 SS2.7: opacity is never applied to a text, action, focus or status token. A new foreground and background pairing is a change to the token system, not a styling decision: it is measured and registered before it ships. V4 SS2.1 Proportion: three token families deliberately do not exist, and their absence is the rule. There is no accent surface token, no accent border token, and no accent text token for anything other than a link. A layout cannot exceed the accent budget, because the tokens to exceed it with were never authored. V4 SS5.3 The status set in-scene: the shipping triad #479E7B safe, #FF5555 danger, #FFA24B warning is current state, not specification, and is superseded by the values above. #00F59B and #FFC700 are migration items: the roles stay, the values move. ========================================================================== */ /* Reduced motion. V4 SS2.4 Law: reduced motion. Motion is replaced, not deleted. A slide or scale becomes a fade at the same duration; parallax and shape morphing are disabled outright. State changes remain visible, because a reader who cannot tolerate motion still needs to see that something happened. This is a values decision, which is why the book states it rather than leaving it to implementation. */