{ "$schema": "https://designtokens.org/schemas/2025.10/format.json", "$description": "Designesy design system contract v0.4.0 — W3C DTCG 2025.10 format. Custom types (spring, sound) declared via $extensions.designesy.", "$version": "0.4.0", "color": { "text": { "primary": { "$value": { "colorSpace": "srgb", "components": { "red": 0.9607843137254902, "green": 0.9607843137254902, "blue": 0.9686274509803922, "alpha": 1 } }, "$type": "color", "$description": "Primary text / foreground" }, "secondary": { "$value": { "colorSpace": "srgb", "components": { "red": 0.6274509803921569, "green": 0.6274509803921569, "blue": 0.6274509803921569, "alpha": 1 } }, "$type": "color", "$description": "Secondary text" }, "muted_dim": { "$value": { "colorSpace": "srgb", "components": { "red": 0.49019607843137253, "green": 0.49019607843137253, "blue": 0.49019607843137253, "alpha": 1 } }, "$type": "color", "$description": "Tertiary / meta text" } }, "foundation": { "black": { "$value": { "colorSpace": "srgb", "components": { "red": 0.00392156862745098, "green": 0.00392156862745098, "blue": 0.00784313725490196, "alpha": 1 } }, "$type": "color", "$description": "Page background" } }, "surface": { "black": { "$value": { "colorSpace": "srgb", "components": { "red": 0.0392156862745098, "green": 0.0392156862745098, "blue": 0.047058823529411764, "alpha": 1 } }, "$type": "color", "$description": "Card / panel base" }, "raised": { "$value": { "colorSpace": "srgb", "components": { "red": 0.07058823529411765, "green": 0.07058823529411765, "blue": 0.08627450980392157, "alpha": 1 } }, "$type": "color", "$description": "Elevated surface" } }, "signal": { "blue": { "$value": { "colorSpace": "srgb", "components": { "red": 0.00392156862745098, "green": 0.2, "blue": 0.796078431372549, "alpha": 1 } }, "$type": "color", "$description": "Brand accent (internal token name; public products avoid this vocabulary)" }, "light": { "$value": { "colorSpace": "srgb", "components": { "red": 0.2, "green": 0.34509803921568627, "blue": 0.9098039215686274, "alpha": 1 } }, "$type": "color", "$description": "Accent hover / focus lift" } }, "activation": { "yellow": { "$value": { "colorSpace": "srgb", "components": { "red": 0.996078431372549, "green": 0.8, "blue": 0.20392156862745098, "alpha": 1 } }, "$type": "color", "$description": "Activation highlight (reserved)" } }, "border": { "subtle": { "$value": { "colorSpace": "srgb", "components": { "red": 1, "green": 1, "blue": 1, "alpha": 0.12 } }, "$type": "color", "$description": "Default border" }, "strong": { "$value": { "colorSpace": "srgb", "components": { "red": 1, "green": 1, "blue": 1, "alpha": 0.22 } }, "$type": "color", "$description": "Emphasized border" } } }, "motion": { "duration": { "default": { "$value": "0.6s", "$type": "duration", "$description": "Primary entrance duration" }, "quick": { "$value": "150ms", "$type": "duration", "$description": "Close, swap, tooltip (transitions.dev cross-ref)" }, "fast": { "$value": "250ms", "$type": "duration", "$description": "Open, hover transition, icon swap" }, "medium": { "$value": "350ms", "$type": "duration", "$description": "Panel close, toast" }, "slow": { "$value": "400ms", "$type": "duration", "$description": "Panel open, skeleton reveal" } }, "ease": { "default": { "$value": "cubic-bezier(0.22, 0.61, 0.36, 1)", "$type": "cubicBezier", "$description": "Default ease" }, "out": { "$value": "cubic-bezier(0.23, 1, 0.32, 1)", "$type": "cubicBezier", "$description": "Exit / settle" }, "in_out": { "$value": "cubic-bezier(0.77, 0, 0.175, 1)", "$type": "cubicBezier", "$description": "Symmetric motion" }, "drawer": { "$value": "cubic-bezier(0.32, 0.72, 0, 1)", "$type": "cubicBezier", "$description": "Drawer / panel slide" } } }, "$extensions": { "designesy": { "typography": { "source_lab": "Cadence", "adopted_in": "0.1.3", "rules": [ "Font smoothing on root: -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale", "Rem-based scale: every text size is a rem multiple of the 16px root — never px", "Line-height by role: headings 1.05–1.1, body 1.5–1.6, display 1 — never a single global line-height", "Tracking by size: negative for headings (-0.02 to -0.04em), positive for labels (0.03–0.18em), zero for body", "Cap the measure: body text 520–580px max, layout shell 1080px — text wider than 75ch loses readers", "Wrap deliberately: text-wrap: balance on headings, text-wrap: pretty on body", "Tabular numbers: font-variant-numeric: tabular-nums for all data, stats, and numerical tables", "Selection: ::selection styled with a token color — never default browser blue", "user-select: none on UI chrome (buttons, labels, meta) — body text stays selectable", "16px input floor on mobile — inputs never below 16px to avoid iOS auto-zoom", "No decorative display fonts: system stack is the contract for public UI" ], "verified_against": "Live CSS audit (48,755 bytes) — font smoothing, line-heights, letter-spacing, text-wrap, tabular-nums, ::selection, user-select, rem scale, font-synthesis, text-underline-position, text-decoration-skip-ink, logical inline properties all parsed", "verification": [ "https://www.designesy.org/labs/cadence", "https://www.designesy.org/review/cadence" ], "unverified": [ "Block-axis logical properties (margin-block-start/end) not yet migrated — only inline-axis (margin-inline, padding-inline) done", "border-left decorative accents not yet migrated to border-inline-start — visual regression risk needs testing", "inset left/right positioning not yet migrated to inset-inline — absolute positioning needs case-by-case review" ] }, "takt": { "source_lab": "Takt", "adopted_in": "0.1.2", "rules": [ "Concentric border radius: outerRadius = innerRadius + padding on every nested pair", "Press scale 0.96 on cells and buttons; 0.985 on cards and rows — never below 0.95", "Image outlines: 1px at 0.1 opacity, pure black in light mode, pure white in dark mode — never tinted neutrals", "Minimum hit area: 44px for touch, 40px for desktop — extend with pseudo-element when needed", "Stagger enter animations: ~80–100ms per semantic chunk; skip animation on page load", "Soften exits: small fixed translateY, softer than enter — no full-height collapse", "Never use transition: all — every transition names its specific properties", "Spare will-change: only transform, opacity, or filter — only when a stutter was observed" ], "verified_against": "Live CSS audit (47,680 bytes) — all transitions, scales, will-change, radii, outlines parsed", "verification": [ "https://www.designesy.org/labs/takt", "https://www.designesy.org/review/takt" ], "unverified": [ "Image outline rule — no image surfaces on designesy.org yet", "Mobile hit area 44px — desktop 40px confirmed only" ] }, "acoustic": { "engine": "Cuelume v0.1.0 (MIT)", "preference_key": "designesy:sound", "reduced_motion_proxy": true, "token_type": "Custom $type: sound via $extensions.designesy — net-new relative to W3C DTCG 2025.10", "cues": [ { "token": "--cue:brand", "cue": "sparkle", "role": "Brand wordmark contact" }, { "token": "--cue:nav", "cue": "tick", "role": "Navigation and wayfinding" }, { "token": "--cue:invite", "cue": "chime", "role": "Primary invitation / machine surfaces" }, { "token": "--cue:action", "cue": "press", "role": "Pointer-down on actionable surfaces" }, { "token": "--cue:resolve", "cue": "release", "role": "Pointer-up default resolve" }, { "token": "--cue:complete", "cue": "success", "role": "High-value resolve" }, { "token": "--cue:reveal", "cue": "bloom", "role": "Content / experiment reveal" }, { "token": "--cue:list", "cue": "whisper", "role": "Dense list / surface scan" }, { "token": "--cue:switch", "cue": "toggle", "role": "State toggle" }, { "token": "--cue:contact", "cue": "droplet", "role": "Contact / outbound mail" } ], "mapping_rules": [ "Brand marks earn sparkle — hero wordmark, topbar logo, footer mark", "One primary cue family per role — do not randomize per page", "Hover sounds are fine-pointer only; touch maps hover cue to single tap", "No ambient audio — Cuelume is interaction-only", "No focus sounds — sounds fire on pointer and click, not on focus", "Every cue must trace to the acoustic token document" ] }, "verification": { "checks": 34, "categories": 11, "a11y_floor": "60% (a11y < 60% caps score at C/70)", "standards": "WCAG 2.1 AA + APCA + DTCG 2025.10 + EU AI Act Art 50" } } } }