Dither
Signal Trace

Purpose

Provide one exact, recognizable SUDX X for chrome, favicon, motion, and distributed assets.

Rules

States

• Light
• Dark
• Compact
• Favicon
• Radar center

Tokens and dependencies

• Ink routeThe route that passes over, in text ink so the mark themes with the page.
• Clay routeThe route that passes under, broken where the Ink route crosses. The only accent in the mark.
• 100 by 100 viewBoxThe mark's coordinate space. The geometry is fixed and is never redrawn or traced.

Semantic recipe

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-labelledby="title">
  <title id="title">SUDX mark</title>
  <path fill="currentColor" d="M21.3 10.7L89.3 78.7A7.5 7.5 0 0 1 78.7 89.3L10.7 21.3A7.5 7.5 0 0 1 21.3 10.7Z"/>
  <path fill="#C56A4A" d="M55.66 33.74L78.7 10.7A7.5 7.5 0 0 1 89.3 21.3L66.26 44.34ZM33.74 55.66L10.7 78.7A7.5 7.5 0 0 0 21.3 89.3L44.34 66.26Z"/>
</svg>

Accessibility

• Use empty alt text when the adjacent wordmark already names SUDX.
• Keep meaningful standalone marks named SUDX.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, All future SUDX surfaces

Provenance

Lanes study chosen by Nico on 14 October 2026

Purpose

Define compact and formal identity arrangements across navigation, documents, icons, and operational surfaces.

Rules

States

• Formal
• Compact
• Light
• Dark
• Operational surface

Tokens and dependencies

• sudx-x.svgThe mark on its own.
• sudx-lockup.svgThe wordmark and mark locked together at their approved relationship.
• hairline dividerThe rule that separates the lockup from adjacent content when they must sit together.

Semantic recipe

<svg class="sudx-lockup" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440 112" role="img" aria-labelledby="title">
  <title id="title">SUDX formal lockup</title>
  <g transform="translate(8 12) scale(.88)">
    <path fill="currentColor" d="M21.3 10.7L89.3 78.7A7.5 7.5 0 0 1 78.7 89.3L10.7 21.3A7.5 7.5 0 0 1 21.3 10.7Z"/>
    <path fill="#C56A4A" d="M55.66 33.74L78.7 10.7A7.5 7.5 0 0 1 89.3 21.3L66.26 44.34ZM33.74 55.66L10.7 78.7A7.5 7.5 0 0 0 21.3 89.3L44.34 66.26Z"/>
  </g>
  <path d="M116 18V94" stroke="currentColor" stroke-opacity=".22"/>
  <g transform="translate(140 21)" fill="none" stroke="currentColor" stroke-width="9" stroke-linecap="square" stroke-linejoin="miter">
    <path d="M48 4H0V31H48V58H0"/>
    <path d="M69 4V58H119V4"/>
    <path d="M143 4V58H174C194 58 204 46 204 31S194 4 174 4Z"/>
  </g>
  <g transform="translate(355 14) scale(.76)">
    <path fill="currentColor" d="M21.3 10.7L89.3 78.7A7.5 7.5 0 0 1 78.7 89.3L10.7 21.3A7.5 7.5 0 0 1 21.3 10.7Z"/>
    <path fill="#C56A4A" d="M55.66 33.74L78.7 10.7A7.5 7.5 0 0 1 89.3 21.3L66.26 44.34ZM33.74 55.66L10.7 78.7A7.5 7.5 0 0 0 21.3 89.3L44.34 66.26Z"/>
  </g>
  <path d="M140 96H425" stroke="currentColor" stroke-opacity=".16"/>
</svg>

Accessibility

• Give one accessible name to the complete lockup.
• Do not announce decorative metadata.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, Release consumers

Provenance

Recovered formal SUDX identity rules

Purpose

Lock the mark geometry, 1X clearspace, minimum sizes, and selective technical-document grammar.

Rules

States

• Construction grid
• Clearspace
• Desktop
• Mobile
• Favicon

Tokens and dependencies

• 1X clearspaceClear space around the mark or lockup equal to the width of one route. Nothing enters it.
• 64pxThe lockup's comfortable minimum width.
• 40pxThe superseded minimum target, still carried by surfaces that predate 3.4.2.
• 24pxThe wordmark's minimum legible height.
• 16pxThe mark's minimum legible size on its own.

Semantic recipe

<figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-labelledby="title">
  <title id="title">SUDX mark</title>
  <path fill="currentColor" d="M21.3 10.7L89.3 78.7A7.5 7.5 0 0 1 78.7 89.3L10.7 21.3A7.5 7.5 0 0 1 21.3 10.7Z"/>
  <path fill="#C56A4A" d="M55.66 33.74L78.7 10.7A7.5 7.5 0 0 1 89.3 21.3L66.26 44.34ZM33.74 55.66L10.7 78.7A7.5 7.5 0 0 0 21.3 89.3L44.34 66.26Z"/>
</svg><figcaption>1X clearspace · 16px minimum</figcaption></figure>

Accessibility

• Keep construction annotations readable as text.
• Do not rely on diagram labels alone.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

Design Portal, Brand asset producers

Provenance

Recovered SUDX identity sheet ratified for V3

Purpose

Express continuous route awareness with a clean sweep and a short dithered memory.

Rules

States

• Static
• Running
• Hidden document
• Reduced motion

Tokens and dependencies

• 1.5px coreThe radar sweep's leading edge. Clean, never dithered.
• Bayer 4 by 4The ordered dither matrix. The one approved way to render partial coverage.
• short tailThe sweep's dithered memory. Short enough to read as decay, not as a smear.
• prefers-reduced-motionThe setting that replaces every animation with its static end state.

Semantic recipe

<canvas data-sudx-radar aria-hidden="true"></canvas>

Accessibility

• Treat the sweep as decorative enhancement.
• Provide the route-awareness meaning in nearby text.
• Render the static fallback at the resting bearing.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website (landing field), SUDX Design Portal (specimen only)

Provenance

Recovered SUDX motion refined with CMA dither law

Purpose

Expand the shipping-intelligence remit without shifting the hero layout.

Rules

States

• Shipping fallback
• Typing out
• Typing in
• Reduced motion

Tokens and dependencies

• shippingA term in the rotating headline's approved remit.
• tradeA term in the rotating headline's approved remit.
• freightA term in the rotating headline's approved remit.
• portsA term in the rotating headline's approved remit.
• cargoA term in the rotating headline's approved remit.

Semantic recipe

<span data-sudx-rotating-word>shipping</span>

Accessibility

• Keep the changing word aria-hidden when the full static meaning is nearby.
• Remove automatic typing under reduced motion.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website

Provenance

Recovered SUDX typed headline

Purpose

Provide one warm light theme, one true-black dark theme with white type and the Clay accent, and semantic colors with fixed jobs.

Rules

States

• System default
• Explicit light
• Explicit dark
• Storage unavailable

Tokens and dependencies

• --sudx-backgroundThe page ground. Everything else is drawn on it, and nothing else may claim it.
• --sudx-surfaceA raised reading surface: cards, panels, popovers. Carries no resting shadow.
• --sudx-borderThe default hairline. One rule or one tonal inset separates two things, never both.
• --sudx-border-strongThe heavier hairline, reserved for a dashed or emphasised edge around unproven or empty work.
• --sudx-textPrimary reading text.
• --sudx-accentClay for borders, fills, strokes, and underlines. Below AA on paper, so never small text.
• --sudx-accent-wellThe tinted accent ground behind a notice, an arrival ribbon, or an applied filter. Background only.

Semantic recipe

<script src="/assets/theme.js"></script><link rel="stylesheet" href="/assets/sudx-tokens.css">

Accessibility

• Meaningful text must meet WCAG AA.
• Pair semantic colors with a glyph or text label.

Deviations

• Warning on paper: --sudx-warning-light measured 3.44:1 on the paper ground, below AA for small text, while cost-up and cost-down both sat near 5.26:1. Warning was the one semantic colour the system shipped without a legible step. (resolved)

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

DRIFT and CMA migration evidence ratified by SUDX

Purpose

Assign a clear font role to identity, interface, data, and editorial narrative.

Rules

States

• Web font loaded
• System fallback
• Narrow viewport
• Long numeric value

Tokens and dependencies

• --sudx-font-wordmarkSpace Grotesk. The SUDX wordmark and rare display headings, nothing else.
• --sudx-font-sansGeist. All interface text: headings, controls, navigation, body.
• --sudx-font-monoGeist Mono with tabular figures. Every value, date, percentage, unit, and token name.
• --sudx-font-serifSource Serif 4. Editorial and analytical prose only, never controls, tables, or data.

Semantic recipe

<h2>Interface heading</h2><data value="1840">USD 1,840</data><p class="editorial">Analysis</p>

Accessibility

• Preserve hierarchy under fallback fonts.
• Do not rely on letter spacing alone to distinguish labels.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

SUDX 1.0 type-role decision

Purpose

Create dense but legible layouts with a 4px/8px rhythm, flat surfaces, and restrained rounding.

Rules

States

• Dense desktop
• Comfortable mobile
• One tonal inset
• Control elevation
• Popover elevation

Tokens and dependencies

• --sudx-space-1 through --sudx-space-8The whole spacing scale: 4, 8, 12, 16, 24, 32, 48, 64px. No value between steps.
• --sudx-radiusThe surface radius. Cards, panels, and buttons.
• --sudx-radius-chipThe tighter radius for chips and badges, so a small inline marker does not carry the corner of the card it sits on.
• --sudx-shadow-activeThe single-pixel lift on a pressable control. Dropped while the control is active.
• --sudx-shadow-popoverThe only shadow permitted on a floating surface. Resting panels carry none.

Semantic recipe

<section class="sudx-panel"><header>Section</header><div>Content</div></section>

Accessibility

• Keep mobile actions at least 44px.
• Let text reflow without clipping at 200% zoom.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

Shared DRIFT/CMA density and surface evidence

Purpose

Make interaction perceivable and predictable for keyboard, touch, motion-sensitive, and screen-reader users.

Rules

States

• Rest
• Hover
• Focus visible
• Active
• Disabled
• Reduced motion

Tokens and dependencies

• --sudx-accentClay for borders, fills, strokes, and underlines. Below AA on paper, so never small text.
• --sudx-target-minThe minimum interactive target. Raised from 40px in 3.4.2.
• prefers-reduced-motionThe setting that replaces every animation with its static end state.

Semantic recipe

<button type="button">Action</button><style>button:focus-visible{outline:2px solid var(--sudx-accent);outline-offset:2px}</style>

Accessibility

• Verify keyboard traversal and visible focus.
• Collapse non-essential motion when reduced motion is requested.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

SUDX focus, motion, and target contract

Purpose

Keep interface copy factual, domain-specific, concise, and explicit about units, time, source, and uncertainty.

Rules

States

• Measured
• Projected
• Missing
• Stale
• Illustrative

Tokens and dependencies

• --sudx-font-sansGeist. All interface text: headings, controls, navigation, body.
• --sudx-font-monoGeist Mono with tabular figures. Every value, date, percentage, unit, and token name.
• --sudx-text-mutedSecondary text: supporting prose, units, and labels beside a value.
• --sudx-projectedA value that was estimated rather than observed. Always carries its word label too.

Semantic recipe

<p><data value="1840">USD 1,840 / FEU</data> <time datetime="2026-W29">W29</time> <small>Source: carrier sheet</small></p>

Accessibility

• Expand uncommon abbreviations on first use.
• Use text in addition to punctuation or color for estimates and stale data.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

Shipping workflow and public-site copy review

Purpose

Publish a universal SUDX base that products adopt selectively while keeping framework source and product expression local.

Rules

States

• Pending evidence
• Candidate proved
• Named release
• Pinned older release

Tokens and dependencies

• --sudx-backgroundThe page ground. Everything else is drawn on it, and nothing else may claim it.
• --sudx-textPrimary reading text.
• --sudx-accentClay for borders, fills, strokes, and underlines. Below AA on paper, so never small text.
• --sudx-target-minThe minimum interactive target. Raised from 40px in 3.4.2.

Semantic recipe

<link rel="stylesheet" href="./sudx/tokens.css"><link rel="stylesheet" href="./sudx/shadcn.css">

Accessibility

• Preserve SUDX focus, contrast, semantic-color, data-presentation, target-size, and reduced-motion law.
• Verify applicable states, light and dark themes, keyboard behavior, and reduced motion in the consumer runtime.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

Selective shadcn and Tailwind v4 adopters

Provenance

Canonical shadcn compatibility profile and consumer evidence record

Purpose

Express one clear primary action, quieter secondary actions, links, and unavailable states.

Rules

States

• Rest
• Hover
• Focus
• Active
• Disabled
• Loading

Tokens and dependencies

• --sudx-textPrimary reading text.
• --sudx-backgroundThe page ground. Everything else is drawn on it, and nothing else may claim it.
• --sudx-borderThe default hairline. One rule or one tonal inset separates two things, never both.
• --sudx-accentClay for borders, fills, strokes, and underlines. Below AA on paper, so never small text.
• --sudx-target-minThe minimum interactive target. Raised from 40px in 3.4.2.
• --sudx-transition-controlThe one control transition. Anything longer reads as latency.

Semantic recipe

<button class="sudx-button sudx-button--primary" type="button"><span>Save changes</span></button>

Accessibility

• Use native buttons for actions and anchors for navigation.
• Expose loading with text or aria-live without removing the accessible name.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

Shared route and product control usage

Purpose

Collect an observed value with its unit and period held inside the control, and render a value that was never observed as missing rather than blank.

Rules

States

• Populated
• Missing
• Hover
• Focus
• Disabled
• Loading
• Error

Tokens and dependencies

• --sudx-surfaceA raised reading surface: cards, panels, popovers. Carries no resting shadow.
• --sudx-borderThe default hairline. One rule or one tonal inset separates two things, never both.
• --sudx-border-strongThe heavier hairline, reserved for a dashed or emphasised edge around unproven or empty work.
• --sudx-textPrimary reading text.
• --sudx-text-mutedSecondary text: supporting prose, units, and labels beside a value.
• --sudx-font-monoGeist Mono with tabular figures. Every value, date, percentage, unit, and token name.
• --sudx-cost-upA rise in buyer cost. Always paired with the arrow and the percentage, never colour alone.
• --sudx-target-minThe minimum interactive target. Raised from 40px in 3.4.2.
• --sudx-transition-controlThe one control transition. Anything longer reads as latency.

Semantic recipe

<div class="sudx-field"><label for="rate">All-in rate</label><span class="sudx-field__slot"><input id="rate" name="rate" aria-describedby="rate-help"><span class="sudx-field__unit">USD/FEU</span></span><small id="rate-help">Spot, week 31</small></div>

Accessibility

• Associate label, help, and error text with the control.
• Set aria-invalid only while the value is invalid.
• Keep the unit inside the label's reading path; it is not a decoration the screen reader may skip.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

SUDX password form, DRIFT rate entry, and CMA reference fields

Purpose

Resolve one route out of several, or include a series, with the clay diamond and the filled cell carrying which kind of choice is being made.

Rules

States

• Unchecked
• Checked
• Indeterminate
• Focus
• Disabled
• Error

Tokens and dependencies

• --sudx-accentClay for borders, fills, strokes, and underlines. Below AA on paper, so never small text.
• --sudx-accent-wellThe tinted accent ground behind a notice, an arrival ribbon, or an applied filter. Background only.
• --sudx-borderThe default hairline. One rule or one tonal inset separates two things, never both.
• --sudx-border-strongThe heavier hairline, reserved for a dashed or emphasised edge around unproven or empty work.
• --sudx-textPrimary reading text.
• --sudx-text-mutedSecondary text: supporting prose, units, and labels beside a value.
• --sudx-font-monoGeist Mono with tabular figures. Every value, date, percentage, unit, and token name.
• --sudx-cost-upA rise in buyer cost. Always paired with the arrow and the percentage, never colour alone.
• --sudx-target-minThe minimum interactive target. Raised from 40px in 3.4.2.

Semantic recipe

<fieldset class="sudx-choices"><legend>Scope</legend><label class="sudx-choice"><input type="radio" name="scope" value="overview" checked><span>Overview</span><span class="sudx-choice__key">scope=overview</span></label></fieldset>

Accessibility

• Keep the native input in the accessibility tree.
• Make the full label area clickable and at least 44px on mobile.
• Carry a group error on the fieldset with aria-invalid and aria-describedby.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

DRIFT, CMA Tracker, Future products

Provenance

The SUDX clay diamond and filled square applied to DRIFT and CMA scope filters

Purpose

Let a reader take the warm light theme or the true-black dark theme, starting from the one their system already asked for, and show which of the two the next press delivers.

Rules

States

• Offers dark
• Offers light
• Hover
• Focus
• Active
• Reduced motion

Tokens and dependencies

• --sudx-surfaceA raised reading surface: cards, panels, popovers. Carries no resting shadow.
• --sudx-borderThe default hairline. One rule or one tonal inset separates two things, never both.
• --sudx-textPrimary reading text.
• --sudx-accentClay for borders, fills, strokes, and underlines. Below AA on paper, so never small text.
• --sudx-target-minThe minimum interactive target. Raised from 40px in 3.4.2.
• --sudx-shadow-activeThe single-pixel lift on a pressable control. Dropped while the control is active.
• --sudx-transition-controlThe one control transition. Anything longer reads as latency.

Semantic recipe

<script src="/assets/theme.js"></script><button class="sudx-theme-toggle" type="button" data-theme-toggle aria-pressed="false" aria-label="Use dark theme"><span aria-hidden="true">◐</span><span data-theme-label>Use dark theme</span></button><script src="/assets/site.js" defer></script>

Accessibility

• Carry the state in aria-pressed and the action in the accessible name; the half-moon is decorative and stays aria-hidden.
• Rename the control when it flips, so a reader who never sees the moon still hears what the press does.
• Reduced motion drops the rotation. The flipped glyph still arrives, without the sweep.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

The theme control carried by every SUDX route header, including this portal

Purpose

Communicate success, warning, error, freshness, direction, and experimental state without relying on color alone.

Rules

States

• Informational
• Success
• Warning
• Error
• Stale
• Projected
• Experimental

Tokens and dependencies

• --sudx-cost-upA rise in buyer cost. Always paired with the arrow and the percentage, never colour alone.
• --sudx-cost-downA fall in buyer cost. Green is not "good" here; it is a direction.
• --sudx-warningA caution marker for freshness and gaps. Measures 5.26:1 on paper, the same step as its cost siblings, so it carries small text as well as badges and borders.
• --sudx-projectedA value that was estimated rather than observed. Always carries its word label too.

Semantic recipe

<p role="status"><span aria-hidden="true">!</span> Data is stale by 2 hours.</p>

Accessibility

• Use role=status for non-blocking updates and role=alert only for urgent errors.
• Do not announce decorative repetition.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

Auth, freshness, projection, and data-direction states

Purpose

Orient users with a persistent wordmark, restrained primary links, current location, and reachable theme control.

Rules

States

• Default
• Current page
• Hover
• Focus
• Theme toggled
• Collapsed mobile
• Drawer open

Tokens and dependencies

• --sudx-backgroundThe page ground. Everything else is drawn on it, and nothing else may claim it.
• --sudx-borderThe default hairline. One rule or one tonal inset separates two things, never both.
• --sudx-surface-quietThe recessed companion to a surface: readouts, table heads, and inset wells.
• --sudx-textPrimary reading text.
• --sudx-text-mutedSecondary text: supporting prose, units, and labels beside a value.
• --sudx-accentClay for borders, fills, strokes, and underlines. Below AA on paper, so never small text.
• --sudx-target-minThe minimum interactive target. Raised from 40px in 3.4.2.
• --sudx-transition-controlThe one control transition. Anything longer reads as latency.

Semantic recipe

<header class="sudx-header"><a class="sudx-wordmark" href="/" aria-label="SUDX home"><span class="sudx-brand-name" aria-hidden="true">SUD</span><svg class="sudx-mark" viewBox="0 0 100 100" aria-hidden="true"><path class="sudx-mark__ink" d="M21.3 10.7L89.3 78.7A7.5 7.5 0 0 1 78.7 89.3L10.7 21.3A7.5 7.5 0 0 1 21.3 10.7Z"/><path class="sudx-mark__clay" d="M55.66 33.74L78.7 10.7A7.5 7.5 0 0 1 89.3 21.3L66.26 44.34ZM33.74 55.66L10.7 78.7A7.5 7.5 0 0 0 21.3 89.3L44.34 66.26Z"/></svg></a><nav class="sudx-nav" aria-label="Primary"><a data-mobile-essential href="/design/" aria-current="page">design/</a><a data-mobile-essential href="/portal">sign-in/</a></nav></header>

Accessibility

• Name each navigation landmark.
• Expose the current page with aria-current and a visual state.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, Future products

Provenance

The shell every SUDX route header runs

Purpose

Group related content with one flat surface, clear heading, optional controls, and internal section separators.

Rules

States

• Default
• Interactive header
• Empty
• Loading
• Error

Tokens and dependencies

• --sudx-surfaceA raised reading surface: cards, panels, popovers. Carries no resting shadow.
• --sudx-surface-quietThe recessed companion to a surface: readouts, table heads, and inset wells.
• --sudx-borderThe default hairline. One rule or one tonal inset separates two things, never both.
• --sudx-radiusThe surface radius. Cards, panels, and buttons.

Semantic recipe

<section aria-labelledby="panel-title"><header><h2 id="panel-title">Lane context</h2></header><div>Content</div></section>

Accessibility

• Give each major region a programmatic heading.
• Keep reading order identical to visual order.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

Flat surface hierarchy across SUDX products

Purpose

Present comparable records with stable columns, tabular values, visible units, and row actions that preserve context.

Rules

States

• Default
• Sorted
• Selected row
• Loading
• Empty
• Error
• Horizontal overflow

Tokens and dependencies

• --sudx-font-monoGeist Mono with tabular figures. Every value, date, percentage, unit, and token name.
• --sudx-borderThe default hairline. One rule or one tonal inset separates two things, never both.
• --sudx-textPrimary reading text.
• --sudx-text-mutedSecondary text: supporting prose, units, and labels beside a value.
• --sudx-accentClay for borders, fills, strokes, and underlines. Below AA on paper, so never small text.
• --sudx-transition-controlThe one control transition. Anything longer reads as latency.

Semantic recipe

<table><caption>Rates · USD/FEU</caption><thead><tr><th scope="col">Lane</th><th scope="col">Rate</th></tr></thead><tbody><tr><th scope="row">HKG → LAX</th><td>1,840</td></tr></tbody></table>

Accessibility

• Use caption and scoped headers.
• Give the directory row the same resolved state on keyboard focus as on hover.
• Provide a keyboard-reachable overflow region on narrow screens.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

SUDX portal and dense product data usage

Purpose

Keep the view, the analysis range, the comparison period, the applied filters, and the primary view action in one control region that states the scope it holds.

Rules

States

• Default
• Filter active
• Scope changed
• Loading
• No available range
• Mobile wrap

Tokens and dependencies

• --sudx-surface-quietThe recessed companion to a surface: readouts, table heads, and inset wells.
• --sudx-activeThe pressed or currently selected state of a control, not a hover.
• --sudx-accentClay for borders, fills, strokes, and underlines. Below AA on paper, so never small text.
• --sudx-accent-wellThe tinted accent ground behind a notice, an arrival ribbon, or an applied filter. Background only.
• --sudx-borderThe default hairline. One rule or one tonal inset separates two things, never both.
• --sudx-border-strongThe heavier hairline, reserved for a dashed or emphasised edge around unproven or empty work.
• --sudx-font-monoGeist Mono with tabular figures. Every value, date, percentage, unit, and token name.
• --sudx-target-minThe minimum interactive target. Raised from 40px in 3.4.2.
• --sudx-transition-controlThe one control transition. Anything longer reads as latency.
• aria-liveThe region that announces a state change to a screen reader without moving focus.
• toolbar.htmlThe published analysis toolbar recipe.

Semantic recipe

<div class="sudx-toolbar" role="group" aria-label="Analysis controls"><div class="sudx-toolbar__rail"><div class="sudx-toolbar__controls"><fieldset class="sudx-toolbar__views"><legend class="sudx-visually-hidden">View</legend><label class="sudx-toolbar__view"><input type="radio" name="view" value="overview" checked><span>Overview</span></label></fieldset><span class="sudx-toolbar__group"><label class="sudx-toolbar__key" for="range">Range</label><span class="sudx-field__slot"><span class="sudx-toolbar__picker"><select id="range" name="range"><option selected>W24–W29</option></select></span><span class="sudx-field__unit">6 wk</span></span></span></div><span class="sudx-toolbar__actions"><button class="sudx-button sudx-button--primary" type="button">Export view</button></span></div><p class="sudx-toolbar__scope" aria-live="polite"><span class="sudx-toolbar__key">Scope</span><span><b>2026-06-08 → 2026-07-19</b></span><span>6 weeks</span></p></div>

Accessibility

• Name the control region. Use role="toolbar" only with complete arrow-key navigation and a roving tabindex; a named group keeps native tab order honest.
• Keep the view switch a native radio group so arrow keys, the accessibility tree, and the submitted value stay intact.
• Announce the scope readback once with aria-live="polite" and never move focus to it.
• Name the object of each filter removal, and give it the full target on a coarse pointer.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

DRIFT, CMA Tracker, Future products

Provenance

DRIFT comparison and CMA Performance scope controls

Purpose

Keep layout and recovery clear while data is loading, empty, stale, unavailable, or invalid.

Rules

States

• Loading
• Empty
• Stale
• Unavailable
• Validation error
• Recovered

Tokens and dependencies

• --sudx-warningA caution marker for freshness and gaps. Measures 5.26:1 on paper, the same step as its cost siblings, so it carries small text as well as badges and borders.
• --sudx-cost-upA rise in buyer cost. Always paired with the arrow and the percentage, never colour alone.
• --sudx-surface-quietThe recessed companion to a surface: readouts, table heads, and inset wells.
• aria-liveThe region that announces a state change to a screen reader without moving focus.

Semantic recipe

<section aria-labelledby="state-title"><h2 id="state-title">Rates unavailable</h2><p>Try again.</p><button type="button">Retry</button></section>

Accessibility

• Announce asynchronous status once without stealing focus.
• Keep errors concise and put focus on recovery only when the action requires it.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

Shared loading, empty, stale, and failure needs

Purpose

Protect a registered path with one portal password while keeping errors generic and sessions scoped.

Rules

States

• Signed out
• Submitting
• Invalid credentials
• Unavailable
• Authenticated
• Signed out by POST

Tokens and dependencies

• password-onlySign-in takes a password and no identifier. There are no accounts to enumerate.
• same-origin return_toThe post-login destination, resolved on the server and rejected if it leaves the origin.
• HttpOnly scoped cookieThe session cookie: HttpOnly, SameSite=Lax, scoped to one portal path, 24 hours.
• POST logoutSign-out is POST-only, so a link or a prefetch can never end a session.

Semantic recipe

<form method="post" action="/api/login"><input type="hidden" name="return_to" value="/portal"><label>Password <input name="password" type="password" autocomplete="current-password"></label><button>Sign in</button></form>

Accessibility

• Use a real password label and current-password autocomplete.
• Put generic errors in a role=alert region without clearing user focus.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website

Provenance

Current SUDX path-scoped password portal

Purpose

Show a value with its unit, comparison, direction, time range, source, and estimate state in one scan path.

Rules

States

• Measured
• Rising
• Falling
• Flat
• Projected
• Missing
• Stale

Tokens and dependencies

• --sudx-font-monoGeist Mono with tabular figures. Every value, date, percentage, unit, and token name.
• --sudx-cost-upA rise in buyer cost. Always paired with the arrow and the percentage, never colour alone.
• --sudx-cost-downA fall in buyer cost. Green is not "good" here; it is a direction.
• --sudx-projectedA value that was estimated rather than observed. Always carries its word label too.

Semantic recipe

<figure><figcaption>Rate · W29</figcaption><data value="1840">USD 1,840 / FEU</data><p>▲ USD 30 · Source: carrier sheet</p></figure>

Accessibility

• Include direction words in accessible copy when a glyph is ambiguous.
• Keep unit and time range in the same figure or labelled group.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

DRIFT, CMA Tracker, Future products

Provenance

DRIFT rate metrics and CMA performance metrics

Purpose

Show one selected quantitative trend with texture density while preserving exact domains, context lines, and missing-data gaps.

Rules

States

• Selected series
• Context series
• Missing gap
• Loading texture
• Canvas unavailable
• Reduced motion

Tokens and dependencies

• BAYER_4The matrix itself, shared by every dithered surface so texture stays identical.
• MAX_COVERAGE = 0.4That ceiling's value: at most 40% of cells filled.
• OFF_TIER = 0.34The ink an unlit dither cell keeps, as a fraction of a lit one. Above zero, so density reads as weight rather than as holes punched through to the page.
• FIELD_FLOOR = 0.34The ink a dither field keeps at the value line, as a fraction of its ink at the domain floor. Above zero, so the field stays attached to the line it describes.
• cellSize = 2The dither cell in device pixels. Larger reads as pattern, smaller as noise.
• explicit domainThe stated minimum and maximum of a chart axis. A domain is never inferred and never hidden.
• --sudx-accentClay for borders, fills, strokes, and underlines. Below AA on paper, so never small text.

Semantic recipe

<figure><figcaption>Selected series · explicit domain</figcaption><canvas data-dither-chart="" aria-hidden="true"></canvas><table aria-label="Selected and context series values">…</table></figure>

Accessibility

• Keep a textual summary and data table when Canvas works or fails.
• Distinguish the selected series from context by line weight and dash, never by colour alone.
• Name every unobserved period in the table rather than leaving its cell empty.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT

Provenance

DRIFT dither chart proven and ratified into SUDX

Purpose

Add a compact line trend to a dense row without replacing the value, range, or accessible summary.

Rules

States

• Rising
• Falling
• Flat
• Missing segment
• Selected row
• Narrow cell

Tokens and dependencies

• --sudx-textPrimary reading text.
• --sudx-text-mutedSecondary text: supporting prose, units, and labels beside a value.
• --sudx-font-monoGeist Mono with tabular figures. Every value, date, percentage, unit, and token name.

Semantic recipe

<svg role="img" aria-label="Six-week utilization rises from 74 to 88 percent" viewBox="0 0 160 40"><polyline points="2,31 32,24 63,27 94,16 126,18 158,8"/></svg>

Accessibility

• Provide a concise trend description in the accessible name.
• Do not make the sparkline the only source of the final value.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

DRIFT, CMA Tracker

Provenance

Dense DRIFT/CMA row trend requirement

Purpose

Compare allocation utilization in a matrix using profile-owned bands, printed values, and adaptive foreground contrast.

Rules

States

• Below 50%
• 50–79%
• 80–119%
• 120% and above
• Missing
• Selected cell

Tokens and dependencies

• CMA shortfall rgba(190,74,84,.75)A quarantined CMA Tracker band colour. Not a SUDX token and not for reuse.
• CMA warning rgba(181,138,45,.70)A quarantined CMA Tracker band colour. Not a SUDX token and not for reuse.
• CMA target rgba(63,115,82,.75)A quarantined CMA Tracker band colour. Not a SUDX token and not for reuse.
• CMA high rgba(94,94,158,.80)A quarantined CMA Tracker band colour. Not a SUDX token and not for reuse.

Semantic recipe

<table aria-label="Allocation utilization"><tr><th>Member A</th><td data-band="target">102%</td></tr></table>

Accessibility

• Print each value and expose row and column headers.
• Choose foreground contrast per band and mark missing cells with text.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

CMA Tracker

Provenance

CMA allocation heatmap bands retained as a product profile

Purpose

Represent two-dimensional allocation relationships and calendar-shaped activity with explicit axes and square cells.

Rules

States

• Active
• Inactive
• Missing
• Selected
• Current period
• Overflow matrix

Tokens and dependencies

• --sudx-surface-quietThe recessed companion to a surface: readouts, table heads, and inset wells.
• --sudx-accentClay for borders, fills, strokes, and underlines. Below AA on paper, so never small text.
• --sudx-borderThe default hairline. One rule or one tonal inset separates two things, never both.
• --sudx-font-monoGeist Mono with tabular figures. Every value, date, percentage, unit, and token name.

Semantic recipe

<figure><div role="img" aria-label="Five of eight weeks active">…</div><figcaption>W22–W29 · 5 active</figcaption></figure>

Accessibility

• Describe the overall pattern and expose exact values in a table when decisions depend on them.
• Keep cells large enough to inspect when interactive.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

CMA Tracker, Future products

Provenance

CMA allocation matrix and member activity evidence

Purpose

Attach source, as-of time, confidence, missingness, and projection state to the value or chart they qualify.

Rules

States

• Observed
• Projected
• Stale
• Missing
• Conflicting sources
• Unknown

Tokens and dependencies

• --sudx-projectedA value that was estimated rather than observed. Always carries its word label too.
• --sudx-warningA caution marker for freshness and gaps. Measures 5.26:1 on paper, the same step as its cost siblings, so it carries small text as well as badges and borders.
• --sudx-font-monoGeist Mono with tabular figures. Every value, date, percentage, unit, and token name.
• sourceWhere a value came from, named within one line of the value.
• as-ofThe moment a value was true, printed beside it.

Semantic recipe

<aside aria-label="Data provenance"><dl><dt>Source</dt><dd>Carrier sheet</dd><dt>As of</dt><dd><time datetime="2026-07-20T09:00:00+08:00">20 Jul 09:00 HKT</time></dd></dl></aside>

Accessibility

• Keep provenance in the reading order, not hover-only UI.
• Use explicit words for projected, missing, stale, and unknown states.

Deviations

• None recorded.

Ownership and provenance

Owner

SUDX

Consumers

SUDX Website, DRIFT, CMA Tracker

Provenance

Shipping source-artifact and projected-rate requirements