LOCAL CONTRACT / RECONSTRUCTED + ORIGINAL ADDITIONS
The details that survive reuse.
These rules govern the static reference. Exact product styling comes from captured public CSS and geometry. Backend behavior, authentication success and private analytics are not implied by a local fixture.
Geometry and ownership
Read each specimen's contract beside the rendered result. The parent owns the distance between components. Component padding owns its content inset. Child gaps, margins and line boxes stay separate in measurement. Never substitute a rounded spacing scale for a captured exception.
Parent layout gap
Per-side border + padding
Icon slot gap Text line box
Source probes record box sizing, min/max dimensions, four-side margin, border and padding, grid/flex rules, overflow, transforms, children, font metrics and subpixel boxes. Local comparison reports name the tolerance and every mismatch.
The trace index links source and local records at 390 and 1440 pixels. Twenty-one families have a supported part correspondence at both widths; correspondence alone is not a fidelity pass. Matched-rule records retain stylesheet hashes and conditions, but do not identify the winning declaration for each property.
Runtime and integration
Runtime boundary
Contract
Rule
platform
Static HTML, CSS and browser JavaScript. No application server, authentication service, database or API key is required.
state
Ephemeral UI state belongs to the containing control or page. No sample email address is sent to a server or retained across visits.
requests
Only same-site static resources are required to use the guide. Source citation links are explicit outbound navigation. Local form and demo actions must not make remote requests.
analytics
No analytics or telemetry is enabled. Browser test logs retain selectors and synthetic fixtures only. Product-side analytics and private audit events are unknown and outside scope.
flags
No remote feature flags or experiments. The versioned generator and CSS are the full local configuration.
rollout
Publish the checked site folder under the same private GSites name. Keep the prior package in repository history or an authorized backup for rollback. Any content repair requires a new evaluation freeze.
offline
A loaded static page remains readable if the connection drops. Navigation to an uncached page may fail at the browser level; no service-worker offline guarantee is claimed. Local fixtures continue without a backend.
Performance and resilience budgets
Budget
Threshold
Verification
html-size
Each HTML page under 750 KiB before compression
Static file-size report; large ledgers stay in data files with readable page summaries.
javascript-size
Local functional JavaScript under 150 KiB total before compression
Static file-size report; source SDKs and third-party scripts are not loaded by the guide.
font-budget
No 21 MB SF Pro font in publication; local used WOFF2 subset files only
Published asset inventory and network crawl.
render-reflow
No document horizontal overflow beyond 1 CSS px at 390, 768, 1440 and 1920 widths
tools/verify-render.cjs
control-response
Synchronous visible feedback for local toggles; explicit loading fixture has bounded completion and cancel/reset
Canonical pointer and keyboard control audit plus interaction tests.
local-data
Search and list fixtures handle empty, long, malformed and duplicate records predictably without HTML injection
Content-state verification uses synthetic strings and stable record identifiers.
motion
Reduced-motion mode stops decorative motion and preserves content and controls
Chromium reduced-motion and intermediate-frame comparison.
Local contract
Rule
Required behavior
credentials
Do not request or store a TypeSafe API key in the reference. Render example credentials as visibly synthetic placeholders in code only.
authentication
The public console entry is a visual and interaction reconstruction. Provider sign-in and email delivery are not executed. Their local controls must explain the boundary with a visible result.
forms
Use synthetic addresses in tests. Validate before simulated completion, preserve the entered value after an error, and reset only when the user requests it.
externalLinks
Source citations use https and a visible destination. New-window links use rel=noopener noreferrer.
unsafeContent
Escape generated text and insert runtime data with textContent or fixed trusted templates. Do not evaluate strings or build executable URLs from input.
destructiveActions
The declared public reference has no deletion, payment, account change, administrative approval or destructive mutation. Extensions needing one require a separate product contract and are not inferred from this guide.
Product language and data
Controlled vocabulary
Term
Meaning
Use rule
TypeSafe
Company and product brand
Use this capitalization in prose. Use the exact asset for a distinctive brand mark.
Jev
Named public System One model
Do not use as a generic name for every decision model.
System One
TypeSafe's model category
Two words, initial capitals, source terminology.
state
The text or structured context evaluated by questions
Use code formatting for a JSON field; use ordinary lowercase prose otherwise.
question
One independently evaluated typed query
Preserve its stable key in request and result examples.
Choice
Select one named option
Options are unordered. Do not render as an ordered score scale.
Score
Evaluate ordered descriptive levels
Preserve level order and labels; distinguish a model score from a benchmark assessment.
Noul
Probability for a yes/no statement
Retain the public product spelling. Give a plain-language explanation at first use.
confidence
Publicly documented estimate separate from the selected answer
Do not silently substitute confidence for probability or a measured accuracy claim.
local fixture
Deterministic interaction in this guide
Say when no data is sent and never imply a real account or registration was created.
Local contract
Rule
Required behavior
dates
Research evidence uses ISO 8601 UTC. Visible guide dates use 18 Sep 2026. Original articles retain their captured publication date.
numbers
Use locale-aware grouping for prose counts, a period as the JSON decimal separator, and monospaced tabular digits for code and measured values.
dimensions
Show CSS px, preserve source subpixels in raw evidence, and name viewport width and height. Do not round an exception into a preferred scale.
probabilities
Use 0–1 numeric fixture values. A displayed percentage must multiply by 100 and label the result. Never use color as its only label.
currency
Any source price is a dated first-party claim. Link to current official model/pricing documentation. No local billing flow is implied.
identifiers
Preserve case and spelling inside code. Wrap long identifiers in prose and permit horizontal scrolling inside code blocks without widening the document.
pluralization
Use one result / two results and no results. Announce the same count displayed after filtering.
Local contract
Rule
Required behavior
observedLocale
English
productLocalization
No other product locale is claimed without its own capture.
localFallback
The reference allows 200% text, long names, and a pseudolocale expansion fixture. Use logical inline/block properties for new components and dir=auto for user-authored text. Code retains dir=ltr.
missingText
Keep a clear Unavailable label for required metadata. Omit an optional section with its heading when no meaningful content exists. Do not show undefined, null or empty interactive labels.
unsafeText
Insert fixture text through textContent. Do not inject untrusted HTML, URLs or arbitrary script. Reference search treats input as plain text.
Reference fixtures are synthetic. An article has a stable slug, title, source date, category and sections. A question example has a stable key, a type, instructions and the answer space required by that type. Keep request and response keys paired. A missing optional field may be omitted; a missing required field must get an explicit error or Unavailable label.
Target WCAG 2.2 AA in the local reference. One main landmark and one page-level heading own each document. Use native links for navigation, buttons for state changes, labelled fields, native dialogs and details where their behavior fits. Every visible action needs an accessible name and a visible, documented result.
Keyboard focus uses a visible outline and remains unobscured. A dialog takes focus, contains it, closes with Escape and returns to its opener. Validation preserves input, names the field, links the error, sets the invalid state and announces correction. Search announces a count and provides an empty-results message. Copy feedback remains available to assistive technology.
Test four viewport widths, reduced motion, text enlargement and long content. Keep code readable through internal horizontal scrolling. Restore document reflow outside the code block. Supply text alternatives for product diagrams and a still form for decorative motion.
Verified execution covers Chromium, emulated narrow viewports, pointer, keyboard, axe and accessibility-tree probes. Human screen-reader users, Safari, Firefox and real mobile hardware were not studied. Those are explicit production verification tasks.
Extension and maintenance
Choose the closest observed component and its rendered family specimen.
Add the smallest compatible variant to the shared CSS or a new component with a written reason. Do not duplicate an existing control under a new name.
Define inputs, outputs, content limits, default and difficult states, focus behavior and responsive transformation.
Give the example a stable ID, source label, retrieval path and repeatable acceptance check.
Update the ledgers and version. Re-capture the affected source and local examples. A frozen package edit requires a fresh independent panel.
The reference maintainer owns local changes. Product owners must supply authority for an authenticated API, payment, permission or data-retention change.
/ field notes