Skip to selected specimen
JavaScript is unavailable. Every node remains visible below and tree links use normal page anchors.
The requested node does not exist. Showing Principles.
Purpose Set the product and interface decisions that every Stable SUDX pattern must follow.
Specimen Operational truth Show facts, units, range, and source. Earn stability Prove patterns in real use. Own adoption Copy named releases locally. States Current release Superseded release with replacement link Rules Do Tie every visual choice to information, navigation, state, or action. Do not Add decoration that carries no job or product evidence. Tokens and dependencies `--sudx-text` `--sudx-text-muted` `--sudx-border`
Semantic recipe Copy <section aria-labelledby="principles"><h2 id="principles">Principles</h2><ol><li>Operational truth</li><li>Earn stability</li><li>Own adoption</li></ol></section>
Accessibility Use ordered semantics when sequence matters. Keep the principles readable without color or motion. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, DRIFT, CMA Tracker
Provenance Approved SUDX 1.0 foundation
Purpose Move a proven need into SUDX and then into a product without creating runtime coupling.
Specimen 1 Prove 2 Ratify 3 Publish 4 Adopt 5 Verify States Candidate need Ratified contract Published release Locally adopted Verified parity Rules Do Record the copied SUDX base version in each consumer DESIGN.md. Do not Import CSS, JavaScript, fonts, or components from sudx.io at runtime. Tokens and dependencies `SUDX semver` `manifest SHA-256` `consumer DESIGN.md`
Semantic recipe Copy <ol aria-label="Adoption cycle"><li>Prove</li><li>Ratify</li><li>Publish</li><li>Adopt</li><li>Verify</li></ol>
Accessibility Expose the sequence as an ordered list. Describe status with text as well as color. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, DRIFT, CMA Tracker, Future products
Provenance Approved prove-to-verify release cycle
Purpose Identify the exact Stable contract and explain the compatibility meaning of each release change.
Specimen 1.0.0 Stable 22 Jul 2026
Change Version Contract break Major Addition Minor Correction Patch
States Current Deprecated Superseded Rules Do Increment the release before publishing a contract change. Do not Treat Lab experiments as Stable compatibility promises. Tokens and dependencies `version` `published` `stability` `manifest assets`
Semantic recipe Copy <p><strong>1.0.0</strong> <span>Stable</span> <time datetime="2026-07-22">22 Jul 2026</time></p>
Accessibility Use machine-readable time values. Spell out compatibility meaning near the version. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, All release consumers
Provenance SUDX semantic version policy
Purpose Provide one warm light theme, one neutral graphite dark theme, and semantic colors with fixed jobs.
Specimen #FAF9F5#1F1E1D#C56A4A#141414
States System default Explicit light Explicit dark Storage unavailable Rules Do Use Clay as the single shared brand accent and semantic colors only for their named meaning. Do not Use CMA heatmap bands or direction colors as generic decoration. Tokens and dependencies `--sudx-background` `--sudx-surface` `--sudx-border` `--sudx-text` `--sudx-accent`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
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.
Specimen SUDX
Interface heading in Geist
USD 1,840 · W29 · ▲ 2.1%
Analytical narrative in Source Serif 4.
States Web font loaded System fallback Narrow viewport Long numeric value Rules Do Use Geist Mono with tabular numerals for every value, date, percentage, and unit-bearing label. Do not Use Source Serif 4 in navigation, controls, tables, or data. Tokens and dependencies `--sudx-font-wordmark` `--sudx-font-sans` `--sudx-font-mono` `--sudx-font-serif`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
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.
Specimen 4 8 16 24 32
6px surface · 4px chip
States Dense desktop Comfortable mobile One tonal inset Popover elevation Rules Do Use sections, hairlines, or one tonal inset to express hierarchy. Do not Nest cards or add resting shadows. Tokens and dependencies `--sudx-space-1 through --sudx-space-8` `--sudx-radius` `--sudx-radius-chip` `--sudx-shadow-popover`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
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.
Specimen Focus me Disabled 44px minimum
States Rest Hover Focus visible Active Disabled Reduced motion Rules Do Keep keyboard order aligned with visual order and restore focus after a drawer closes. Do not Use glow, unrelated animation, or layout-shifting hover labels. Tokens and dependencies `--sudx-accent` `--sudx-target-min` `prefers-reduced-motion`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
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.
Specimen Use USD 1,840 / FEU · W29 · Source: carrier sheet
Avoid Best-in-class rate intelligence
States Measured Projected Missing Stale Illustrative Rules Do Write direct labels and attach unit, date or range, provenance, and estimate state. Do not Invent marketing claims or hide missing data behind smooth copy. Tokens and dependencies `--sudx-font-sans` `--sudx-font-mono` `--sudx-text-muted` `--sudx-projected`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, DRIFT, CMA Tracker
Provenance Shipping workflow and public-site copy review
Purpose Express one clear primary action, quieter secondary actions, links, and unavailable states.
States Rest Hover Focus Active Disabled Loading Rules Do Use one primary action per local decision and keep labels verb-led. Do not Turn every action Clay or change label width while loading. Tokens and dependencies `--sudx-text` `--sudx-background` `--sudx-border` `--sudx-accent` `--sudx-target-min`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, DRIFT, CMA Tracker
Provenance Shared route and product control usage
Purpose Collect text, passwords, selections, and longer input with persistent labels and clear help or error copy.
States Empty Populated Hover Focus Disabled Loading Error Rules Do Keep a visible label and put corrective text next to the invalid field. Do not Use placeholder text as the only label or reveal sensitive configuration in an error. Tokens and dependencies `--sudx-surface` `--sudx-border` `--sudx-text` `--sudx-cost-up` `--sudx-target-min`
Semantic recipe Copy <div class="sudx-field"><label for="lane">Lane</label><input id="lane" aria-describedby="lane-help"><small id="lane-help">Origin and destination</small></div>
Accessibility Associate label, help, and error text with the control. Set aria-invalid only while the value is invalid. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, DRIFT, CMA Tracker
Provenance SUDX password form and product filter inputs
Purpose Support boolean, single-choice, and compact scope choices with native semantics and stable labels.
States Unchecked Checked Indeterminate Focus Disabled Error Rules Do Group related choices with fieldset and legend. Do not Build a custom switch when a checkbox or radio already expresses the choice. Tokens and dependencies `--sudx-accent` `--sudx-border` `--sudx-text` `--sudx-target-min`
Semantic recipe Copy <fieldset><legend>Scope</legend><label><input type="radio" name="scope" value="overview"> Overview</label></fieldset>
Accessibility Keep the native input in the accessibility tree. Make the full label area clickable and at least 44px on mobile. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers DRIFT, CMA Tracker, Future products
Provenance Shared product filters and analysis scope controls
Purpose Communicate success, warning, error, freshness, direction, and experimental state without relying on color alone.
Specimen Stable ! Stale 2h ▲ Buyer cost ▼ Buyer cost ~ Projected
States Informational Success Warning Error Stale Projected Experimental Rules Do Pair every semantic color with a glyph or explicit status word. Do not Reuse direction, warning, projection, or CMA band colors as decoration. Tokens and dependencies `--sudx-cost-up` `--sudx-cost-down` `--sudx-warning` `--sudx-projected`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
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.
States Default Current page Hover Focus Collapsed mobile Drawer open Rules Do Keep the identity, current location, and essential actions stable across routes. Do not Hide the only route back or overload the shell with product content. Tokens and dependencies `--sudx-background` `--sudx-border` `--sudx-text` `--sudx-text-muted` `--sudx-target-min`
Semantic recipe Copy <header><a href="/" aria-label="SUDX home">SUDX</a><nav aria-label="Primary"><a aria-current="page" href="/data">Data</a></nav></header>
Accessibility Name each navigation landmark. Expose the current page with aria-current and a visual state. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, Future products
Provenance Unified SUDX route-family shell
Purpose Group related content with one flat surface, clear heading, optional controls, and internal section separators.
Specimen Section
Lane context Filter One surface, one tonal inset, no nested card.
States Default Interactive header Empty Loading Error Rules Do Use one panel boundary and hairlines between internal regions. Do not Place a card inside a card or add a resting shadow. Tokens and dependencies `--sudx-surface` `--sudx-surface-quiet` `--sudx-border` `--sudx-radius`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
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.
Specimen Illustrative rates · USD/FEU Lane W28 W29 Move HKG → LAX 1,810 1,840 ▲ 1.7%
States Default Sorted Selected row Loading Empty Error Horizontal overflow Rules Do Put units in the caption or heading and align numeric columns for scanning. Do not Replace dense row trends with decorative bar strips. Tokens and dependencies `--sudx-font-mono` `--sudx-border` `--sudx-text` `--sudx-text-muted`
Semantic recipe Copy <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. Provide a keyboard-reachable overflow region on narrow screens. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, DRIFT, CMA Tracker
Provenance SUDX portal and dense product data usage
Purpose Keep filters, selected range, comparison scope, and primary view actions in one explicit analysis control region.
Specimen Overview Member Range W24–W29 Carrier: CMA
States Default Filter active Scope changed Loading No available range Mobile wrap Rules Do Show active filters and analysis range next to the view they change. Do not Hide scope in an unlabeled icon or let controls re-order unpredictably. Tokens and dependencies `--sudx-surface-quiet` `--sudx-active` `--sudx-border` `--sudx-target-min`
Semantic recipe Copy <div role="toolbar" aria-label="Analysis controls"><button aria-pressed="true">Overview</button><label>Range <select><option>W24–W29</option></select></label></div>
Accessibility Name the toolbar and every icon-only control. Keep native tab order unless arrow-key toolbar behavior is implemented completely. Metadata
Status Stable
Version 1.0.0
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.
Specimen Empty No rates match this range.
Error Rates are unavailable. Retry
States Loading Empty Stale Unavailable Validation error Recovered Rules Do Keep the affected region sized and provide a specific safe recovery action. Do not Use endless animation, blame the user, or expose server configuration. Tokens and dependencies `--sudx-warning` `--sudx-cost-up` `--sudx-surface-quiet` `aria-live`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
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.
States Signed out Submitting Invalid credentials Unavailable Authenticated Signed out by POST Rules Do Validate return paths server-side and clear only the selected portal cookie on logout. Do not Reveal which secret is missing or mutate auth state with GET. Tokens and dependencies `password-only` `same-origin return_to` `HttpOnly scoped cookie` `POST logout`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
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.
Specimen Rate USD 1,840 / FEU ▲ USD 30 · 1.7% W29 · Source: carrier sheet
States Measured Rising Falling Flat Projected Missing Stale Rules Do Put unit and period next to the value and encode buyer-cost direction with glyph plus color. Do not Show a naked number or treat green as universally positive. Tokens and dependencies `--sudx-font-mono` `--sudx-cost-up` `--sudx-cost-down` `--sudx-projected`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
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.
Specimen Selected lane index Domain 86–108 · Sample Week Index W1 91 W2 94 W3 Missing W4 98 W5 101
States Selected series Context series Missing gap Loading texture Canvas unavailable Reduced motion Rules Do Use Bayer 4x4, 2px cells, maximum coverage 0.4, a 0.72 cap, and one selected field. Do not Overlap fills, animate idle charts, interpolate gaps, or place dither behind text. Tokens and dependencies `BAYER_4` `MAX_COVERAGE = 0.4` `cellSize = 2` `explicit domain` `--sudx-accent`
Semantic recipe Copy <figure><figcaption>Lane index · Domain 86–108</figcaption><canvas aria-hidden="true"></canvas><table aria-label="Lane index values">…</table></figure>
Accessibility Keep a textual summary and data table when Canvas works or fails. Use line style and labels in addition to color for series context. Metadata
Status Stable
Version 1.0.0
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.
States Rising Falling Flat Missing segment Selected row Narrow cell Rules Do Use a line with a visible final value and accessible trend summary. Do not Use bar strips or imply an unlabeled zero baseline. Tokens and dependencies `--sudx-text` `--sudx-text-muted` `--sudx-font-mono`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
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.
Specimen 42% 68% 102% 128%
CMA profile only
States Below 50% 50–79% 80–119% 120% and above Missing Selected cell Rules Do Print the value in every cell and keep the four bands inside CMA allocation heatmaps. Do not Promote CMA bands to shared buttons, text, navigation, or generic charts. Tokens and dependencies `CMA shortfall rgba(190,74,84,.75)` `CMA warning rgba(181,138,45,.70)` `CMA target rgba(63,115,82,.75)` `CMA high rgba(94,94,158,.80)`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
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.
States Active Inactive Missing Selected Current period Overflow matrix Rules Do Use square cells, visible axes, and a numeric summary. Do not Apply dither texture or turn activity cells into unlabeled decoration. Tokens and dependencies `--sudx-surface-quiet` `--sudx-accent` `--sudx-border` `--sudx-font-mono`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
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.
Specimen
Source Carrier sheet
As of 2026-07-20 09:00 HKT
Estimate ~ Projected from W28
Gap W27 missing States Observed Projected Stale Missing Conflicting sources Unknown Rules Do Place provenance beside the qualified output and preserve real gaps. Do not Hide projection in a tooltip or silently choose between conflicting sources. Tokens and dependencies `--sudx-projected` `--sudx-warning` `--sudx-font-mono` `source` `as-of`
Semantic recipe Copy <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. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, DRIFT, CMA Tracker
Provenance Shipping source-artifact and projected-rate requirements
Purpose Apply the SUDX foundation to the public studio, login, portal, Design Tree, theme, and portable release presentation.
Specimen SUDX
Routes / · /login · /portal · /design/
Identity Space Grotesk wordmark · Clay X
Data Illustrative samples are labeled not live States Public Protected Light Dark Mobile Desktop Rules Do Use one shell, token file, type grammar, theme mechanism, and focus system across all routes. Do not Reintroduce the retired identity or compete with login using marketing content. Tokens and dependencies `SUDX 1.0.0` `sudx-tokens.css` `SUDX Website profile`
Semantic recipe Copy <body data-product="sudx-website"><header>SUDX</header><main>Route content</main></body>
Accessibility Verify every route in both themes and at 390px and 1440px. Keep public and protected route semantics clear. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers www.sudx.io
Provenance Current SUDX website route family
Purpose Extend SUDX for carrier identity, buyer-cost polarity, projected freight rates, dense operations, and selected dither trends.
Specimen DRIFT ▲ Buyer cost USD 30 ▼ Buyer cost USD 25 ~ Projected W30
Selected series receives the dither field; context remains line-only.
States Observed rate Projected rate Buyer cost up Buyer cost down Selected trend Context trend Rules Do Keep direction buyer-centric and attach provenance to every projected rate. Do not Use product identity color as a full card tint or overlap dither fills. Tokens and dependencies `SUDX 1.0.0` `--sudx-cost-up` `--sudx-cost-down` `--sudx-projected` `dither law`
Semantic recipe Copy <article data-product="drift" data-sudx-base="1.0.0"><data>USD 1,840 / FEU</data><span>▲ Buyer cost</span><small>Source: carrier sheet</small></article>
Accessibility Spell out buyer-cost direction in addition to glyph and color. Keep projection and source text visible without hover. Metadata
Status Stable
Version 1.0.0
Owner DRIFT product owner
Consumers DRIFT
Provenance Proven DRIFT migration inspected before SUDX ratification
Purpose Extend SUDX for allocation bands, overview-first Performance, matrices, activity mosaics, and explicit analysis scope.
Specimen CMA Tracker Performance → Overview → member/week detail
42% 68% 102% 128%
Allocation heatmap only States Overview Member detail Week detail Scope filtered Heatmap selected Activity mosaic Rules Do Open Performance on the overview and expose active analysis scope. Do not Use allocation bands outside CMA heatmaps or dither inside a heatmap. Tokens and dependencies `SUDX 1.0.0` `CMA utilization bands` `analysis scope` `square mosaic cells`
Semantic recipe Copy <article data-product="cma-tracker" data-sudx-base="1.0.0"><nav>Overview · Member · Week</nav><table aria-label="Allocation utilization">…</table></article>
Accessibility Print values inside heatmap cells and expose headers. Describe active scope in text and preserve keyboard order from overview to detail. Metadata
Status Stable
Version 1.0.0
Owner CMA Tracker product owner
Consumers CMA Tracker
Provenance Proven CMA migration inspected before SUDX ratification
Purpose Start a new product from Stable SUDX and declare only its mark, domain semantics, justified deviations, and patterns still requiring proof.
Specimen Name and purpose State the real workflow. Mark Geometric; at most one Clay element. Semantics Declare product-only meanings. Gaps Prove new needs in Lab. States Foundation copied Profile drafted Deviation reviewed Lab need identified Adoption verified Rules Do Copy the Stable bundle locally and document every addition or deviation. Do not Duplicate shared SUDX rules or claim an unproven Lab pattern is Stable. Tokens and dependencies `SUDX base version` `product mark` `domain semantics` `allowed deviations` `Lab candidates`
Semantic recipe Copy <article data-product="new-product" data-sudx-base="1.0.0"><h1>Product name</h1><dl><dt>Purpose</dt><dd>Real workflow</dd><dt>Added semantics</dt><dd>Declared meanings</dd></dl></article>
Accessibility Include accessibility requirements in the profile before adoption. Verify light, dark, desktop, and mobile output before parity is declared. Metadata
Status Stable
Version 1.0.0
Owner SUDX and product owner
Consumers Future products
Provenance Approved local-copy extension model
Purpose Provide generated raw tokens and light, dark, and system theme aliases as a local CSS release artifact.
States Current Stale output rejected Copied locally Rules Do Generate this file from tokens.json and verify it with check mode. Do not Edit the generated CSS or import it from sudx.io inside another product. Tokens and dependencies `all --sudx-* raw tokens` `light aliases` `dark aliases` `system media alias`
Semantic recipe Copy <link rel="stylesheet" href="./sudx-tokens.css">
Accessibility Keep fallback fonts in the generated type tokens. Verify both explicit themes and system default after copying. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, Release consumers
Provenance Generated from canonical tokens.json
Purpose Provide the machine-readable token authority for consumers that transform the release into a local platform format.
States Canonical Generated copy Schema rejection Versioned copy Rules Do Compare the public JSON to canonical JSON exactly and preserve release metadata. Do not Create a second hand-maintained token-value file. Tokens and dependencies `meta` `tokens.color` `tokens.type` `tokens.layout` `themes.light` `themes.dark`
Semantic recipe Copy <script type="application/json" data-sudx-release="1.0.0" src="./tokens.json"></script>
Accessibility Generated consumer CSS must retain contrast and target contracts. Document platform-specific token-name mappings. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers Release tooling, Future products
Provenance Exact generated copy of canonical design-system/tokens.json
Purpose Carry the human-readable identity, type, layout, access, theme, version, and adoption contract with the release.
States Current release Copied into consumer docs Superseded with release link Rules Do Read this contract with tokens and product profile before adoption. Do not Treat narrative docs as a substitute for generated-value checks. Tokens and dependencies `SUDX principles` `identity` `type` `shape` `access` `theme` `version` `adoption`
Semantic recipe Copy <a href="./foundation.md" download>Copy SUDX foundation 1.0.0</a>
Accessibility Keep heading order and plain language in copied documentation. Preserve links to exact local assets. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers Product teams, Agentic workers
Provenance Approved human-readable SUDX foundation
Purpose Carry dither, sparkline, heatmap, mosaic, provenance, uncertainty, and accessible fallback rules with the release.
States Stable law Profile extension Canvas fallback Missing-data gap Rules Do Adopt the law with its tests, fallback table, and profile-specific boundaries. Do not Copy the visual effect while dropping domain, missingness, or accessibility rules. Tokens and dependencies `BAYER_4` `MAX_COVERAGE` `direction semantics` `CMA band quarantine`
Semantic recipe Copy <a href="./chart-law.md" download>Copy SUDX chart law 1.0.0</a>
Accessibility Every chart implementation must retain a text summary and exact-data path. Test color-independent meaning and reduced motion. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, DRIFT, CMA Tracker
Provenance Approved data visualization contract
Purpose Provide copyable approved brand SVGs and framework-neutral markup and CSS for proven Stable primitives.
States Approved brand Stable recipe Copied locally Hash verified Rules Do Copy the named release and adapt semantic markup to the consumer framework. Do not Trace a new competing SUDX mark or include Lab snippets in the Stable recipe bundle. Tokens and dependencies `sudx-wordmark.svg` `sudx-x.svg` `button.html` `form-control.html` `product-directory.html` `theme-toggle.html` `recipes.css`
Semantic recipe Copy <img src="./brand/sudx-wordmark.svg" alt="SUDX"><link rel="stylesheet" href="./recipes/recipes.css">
Accessibility Use text wordmarks or meaningful alt text according to context. Retain native control semantics when adapting recipes. Metadata
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, Future products
Provenance Generated approved brand and Stable recipe bundle
Purpose Explore dense comparison overlays before a real product proves a stable interaction and accessibility contract.
Specimen Experimental Layer A Layer B Compare
States Closed Open Layer selected Dismissed Rules Do Label every specimen Experimental and record the product need being tested. Do not Ship this pattern as Stable or include it in portable recipes. Tokens and dependencies `Lab infrastructure only`
Semantic recipe Copy <div data-experimental="advanced-overlay">Prototype only</div>
Accessibility Prove focus order, dismissal, labelling, and non-visual comparison before promotion. Metadata
Status Experimental
Version Lab
Owner SUDX
Consumers Lab only
Provenance Unproven Design Tree experiment
Purpose Explore compact date-range and paging controls for dense operational histories before production use.
States Previous available Next available Boundary Invalid range Loading Rules Do Test real date ranges, locale expectations, and boundary behavior with a consumer. Do not Publish compatibility or replace proven native date input without evidence. Tokens and dependencies `Lab infrastructure only`
Semantic recipe Copy <nav data-experimental="date-paging" aria-label="Period">Prototype only</nav>
Accessibility Prove announced range changes, labelled arrows, and keyboard date entry before promotion. Metadata
Status Experimental
Version Lab
Owner SUDX
Consumers Lab only
Provenance Unproven Design Tree experiment
Purpose Explore file selection, validation, progress, and recovery for future product import workflows.
States Idle Dragging Selected Validating Invalid Uploading Complete Failed Rules Do Prove real file limits, validation copy, recovery, and privacy with a consumer. Do not Promise upload behavior or add this prototype to the Stable bundle. Tokens and dependencies `Lab infrastructure only`
Semantic recipe Copy <form data-experimental="upload-import"><label>Choose file <input type="file"></label></form>
Accessibility Keep a native file input and announce validation and progress before promotion. Metadata
Status Experimental
Version Lab
Owner SUDX
Consumers Lab only
Provenance Unproven Design Tree experiment
Purpose Test chart interactions that fall outside the Stable dither, sparkline, heatmap, matrix, and mosaic laws.
States Prototype Series focus Keyboard probe Rejected Candidate for proof Rules Do State the unanswered question and test it with exact data and a real consumer. Do not Decorate pages with the prototype or imply Stable chart support. Tokens and dependencies `Lab infrastructure only`
Semantic recipe Copy <figure data-experimental="chart"><figcaption>Research question</figcaption><svg role="img" aria-label="Prototype summary">…</svg></figure>
Accessibility Define the non-visual equivalent and keyboard model before any promotion. Metadata
Status Experimental
Version Lab
Owner SUDX
Consumers Lab only
Provenance Unproven Design Tree experiment
Inspector Close
Selected node
Principles
Status Stable
Version 1.0.0
Owner SUDX
Consumers SUDX Website, DRIFT, CMA Tracker
Provenance Approved SUDX 1.0 foundation
