{"id":"designesy.components","version":"0.1.1","status":"public","name":"Designesy Components Contract","kind":"contract","public_url":"https://www.designesy.org/contracts/components","machine_url":"https://www.designesy.org/contracts/components.json","updated":"2026-10-13","source_authority":{"derived_from":"designesy.design-system","contract_version":"0.4.6","note":"The component list and its state prose come from the design system contract. This export adds machine-readable bindings; it does not restate the list, so the two cannot disagree about which components exist."},"components":[{"name":"Primary button","states":"default signal fill · hover signal-light · active scale(0.97) · focus-visible 2px signal-light","state_bindings":[{"state":"default","tokens":["--signal","--paper-on-signal"]},{"state":"hover","tokens":["--signal-light"]},{"state":"active","tokens":[],"obligation":"press scale, see takt.press_scale.cell"},{"state":"focus-visible","tokens":["--signal-light"],"obligation":"2px outline, 2px offset"}]},{"name":"Ghost button","states":"transparent + line-strong · hover surface-hover · active scale(0.97)","state_bindings":[{"state":"default","tokens":["--line-strong"]},{"state":"hover","tokens":["--surface-hover"]},{"state":"active","tokens":[],"obligation":"press scale, see takt.press_scale.cell"}]},{"name":"Nav link","states":"muted · hover ink + surface-hover · sticky topbar blur when scrolled","state_bindings":[{"state":"default","tokens":["--muted"]},{"state":"hover","tokens":["--ink","--surface-hover"]},{"state":"scrolled","tokens":[],"obligation":"sticky topbar blur"}]},{"name":"Card / pillar","states":"reading material (--mat-reading) + top-lit rim + elev-1 · fine-pointer hover heats the rim and adds contact light, no lift · active scale(0.99)","state_bindings":[{"state":"default","tokens":["--surface","--line"]},{"state":"hover","tokens":["--surface-raised","--line-strong"],"obligation":"fine pointer only: gated on (hover: hover) and (pointer: fine)"},{"state":"active","tokens":[],"obligation":"press scale, see takt.press_scale.card"}]},{"name":"Sound toggle","states":"switch with a visible Sound label and an On/Off state word · aria-pressed sync · Cuelume setEnabled(true|false)","state_bindings":[{"state":"off","tokens":["--muted-dim"],"obligation":"aria-pressed=\"false\"; Cuelume setEnabled(false)"},{"state":"on","tokens":["--signal-light"],"obligation":"aria-pressed=\"true\"; Cuelume setEnabled(true)"}]},{"name":"Definition block","states":"reading material + top-lit rim + elev-1 · a copyable one heats its rim and draws a 3px signal edge on hover, focus or copy · label 12px uppercase muted","state_bindings":[{"state":"default","tokens":["--surface","--line"]},{"state":"hover","tokens":["--line-strong"]},{"state":"label","tokens":["--muted-dim"],"obligation":"uppercase, letter-spacing 0.18em"}]}],"press_scale":{"cell":null,"card":null,"floor":0.95,"note":"Read from takt.rules. Never below the 0.95 floor."},"accessibility":["html lang=\"en\"; meaningful page titles via metadata template","Focus-visible: a 2px solid outline on every control, --signal-light at a 3px offset over a --signal-dim halo by default; cards and dense lists tune the offset, and reading cards draw it in --signal-access","Sound control is named by its visible label and exposes aria-pressed","Decorative glyphs use aria-hidden where text is already labeled","Prefer semantic landmarks: sticky header, main, footer","Do not rely on color alone for state","Respect prefers-reduced-motion, tiered: travel stops, opacity fades and transitions of 200ms or less stay, and a motion demo plays on request","Scroll padding-top 4.5rem (72px) for sticky topbar anchors"],"permission":"read-only by default; write scope requires explicit operator grant","cite":{"short":"Designesy components contract (designesy.org/contracts/components)","machine":"https://www.designesy.org/contracts/components.json"}}