{"id":"designesy.components","version":"0.1.0","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-09-24","source_authority":{"derived_from":"designesy.design-system","contract_version":"0.4.0","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":"surface + line · hover raised + line-strong · active scale(0.985); lift only on fine pointer hover","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":"aria-pressed sync · pressed shows signal-light · 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":"bordered surface · hover line-strong · label uppercase muted-dim","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":0.96,"card":0.985,"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: 2px solid --signal-light, offset 2px","Sound control exposes aria-label, aria-pressed, and title","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","Scroll padding-top 4rem 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"}}