{ "schemaVersion": 1, "brandId": "cursor", "source": { "componentsHtml": "components.html", "tokensCss": "tokens.css" }, "fixture": { "title": "Cursor — reference components", "description": "Reference fixture for design-systems/cursor. Every visible value comes from tokens.css; if the agent paste-replaces the :root block and reuses the component selectors below verbatim, the artifact passes lint without further audit. Cursor's signature moves: warm cream surfaces, three typographic voices (CursorGothic / jjannon / berkeleyMono), oklab borders rendered as rgba fallback, hover-text shifts to --danger crimson, and diffused atmospheric shadows.", "styleBlockCount": 1, "selectorCount": 65, "classCount": 37, "elementCount": 25 }, "tokens": { "declared": [ "--accent", "--accent-active", "--accent-hover", "--accent-on", "--bg", "--border", "--border-soft", "--container-gutter-desktop", "--container-gutter-phone", "--container-gutter-tablet", "--container-max", "--danger", "--ease-standard", "--elev-flat", "--elev-raised", "--elev-ring", "--fg", "--fg-2", "--focus-ring", "--font-body", "--font-display", "--font-mono", "--leading-body", "--leading-tight", "--meta", "--motion-base", "--motion-fast", "--muted", "--radius-lg", "--radius-md", "--radius-pill", "--radius-sm", "--section-y-desktop", "--section-y-phone", "--section-y-tablet", "--space-1", "--space-12", "--space-2", "--space-3", "--space-4", "--space-5", "--space-6", "--space-8", "--success", "--surface", "--surface-warm", "--text-2xl", "--text-3xl", "--text-4xl", "--text-base", "--text-lg", "--text-sm", "--text-xl", "--text-xs", "--tracking-display", "--warn" ], "referenced": [ "--accent", "--accent-active", "--accent-hover", "--accent-on", "--bg", "--border", "--container-gutter-desktop", "--container-gutter-phone", "--container-gutter-tablet", "--container-max", "--danger", "--ease-standard", "--elev-raised", "--fg", "--fg-2", "--focus-ring", "--font-body", "--font-display", "--font-mono", "--leading-body", "--leading-tight", "--meta", "--motion-base", "--motion-fast", "--muted", "--radius-md", "--radius-pill", "--radius-sm", "--section-y-desktop", "--section-y-phone", "--section-y-tablet", "--space-12", "--space-2", "--space-3", "--space-4", "--space-5", "--space-6", "--space-8", "--success", "--surface", "--surface-warm", "--text-2xl", "--text-3xl", "--text-4xl", "--text-base", "--text-lg", "--text-sm", "--text-xs", "--tracking-display" ], "unusedDeclared": [ "--border-soft", "--elev-flat", "--elev-ring", "--radius-lg", "--space-1", "--text-xl", "--warn" ], "undeclaredReferenced": [] }, "selectors": [ ".badge", ".badge-dot", ".badge-muted", ".badge-success", ".body-mono", ".body-muted", ".body-sm", ".btn", ".btn-accent", ".btn-accent:active", ".btn-accent:hover", ".btn-primary", ".btn-primary:active", ".btn-primary:hover", ".btn-secondary", ".btn-secondary:hover", ".btn:focus-visible", ".card", ".card-featured", ".card:hover", ".container", ".eyebrow", ".features-grid", ".field", ".field input", ".field input::placeholder", ".field input:focus-visible", ".field label", ".field-help", ".filter-row", ".form", ".form-actions", ".form-row", ".hero-actions", ".hero-grid", ".hero-meta", ".icon", ".lead", ".pill", ".pill-active", ".row-between", ".stack-3 > * + *", ".stack-4 > * + *", ".stack-6 > * + *", ".timeline", ".timeline-dot", ".timeline-edit .timeline-dot", ".timeline-grep .timeline-dot", ".timeline-read .timeline-dot", ".timeline-step", ".timeline-thinking .timeline-dot", "*", "*::after", "*::before", "a", "a:hover", "body", "h1", "h2", "h3", "html", "kbd", "p", "section", "section + section" ], "classes": [ "badge", "badge-dot", "badge-success", "body-muted", "body-sm", "btn", "btn-accent", "btn-primary", "btn-secondary", "card", "card-featured", "container", "eyebrow", "features-grid", "field", "field-help", "filter-row", "form", "form-actions", "form-row", "hero-actions", "hero-grid", "hero-meta", "icon", "lead", "pill", "pill-active", "row-between", "stack-3", "stack-4", "timeline", "timeline-dot", "timeline-edit", "timeline-grep", "timeline-read", "timeline-step", "timeline-thinking" ], "elements": [ "a", "article", "aside", "body", "button", "div", "form", "h1", "h2", "h3", "head", "html", "input", "kbd", "label", "main", "meta", "p", "path", "section", "span", "style", "svg", "time", "title" ], "groups": [ { "id": "buttons", "label": "Buttons and calls to action", "present": true, "selectors": [ ".btn", ".btn-accent", ".btn-accent:active", ".btn-accent:hover", ".btn-primary", ".btn-primary:active", ".btn-primary:hover", ".btn-secondary", ".btn-secondary:hover", ".btn:focus-visible" ], "classes": [ "btn", "btn-accent", "btn-primary", "btn-secondary" ], "elements": [ "button" ], "tokenReferences": [ "--accent", "--accent-active", "--accent-on", "--border", "--danger", "--focus-ring", "--muted", "--radius-pill" ] }, { "id": "inputs", "label": "Form fields and controls", "present": true, "selectors": [ ".field", ".field input", ".field input::placeholder", ".field input:focus-visible", ".field label", ".field-help" ], "classes": [ "field", "field-help", "form", "form-actions", "form-row" ], "elements": [ "form", "input", "label" ], "tokenReferences": [ "--fg", "--focus-ring", "--font-body", "--font-display", "--muted", "--text-sm" ] }, { "id": "cards", "label": "Cards and panels", "present": true, "selectors": [ ".card", ".card-featured", ".card:hover" ], "classes": [ "card", "card-featured" ], "elements": [], "tokenReferences": [ "--elev-raised" ] }, { "id": "badges", "label": "Badges, chips, and status labels", "present": true, "selectors": [ ".badge", ".badge-dot", ".badge-muted", ".badge-success", ".pill", ".pill-active" ], "classes": [ "badge", "badge-dot", "badge-success", "pill", "pill-active" ], "elements": [], "tokenReferences": [ "--fg", "--font-display", "--muted", "--radius-pill", "--space-2", "--space-3", "--text-xs" ] }, { "id": "links", "label": "Links and inline actions", "present": true, "selectors": [ "a", "a:hover" ], "classes": [], "elements": [ "a" ], "tokenReferences": [ "--accent" ] }, { "id": "keyboard", "label": "Keyboard hints", "present": true, "selectors": [ "kbd" ], "classes": [], "elements": [ "kbd" ], "tokenReferences": [ "--border", "--font-mono", "--muted", "--surface", "--text-xs" ] }, { "id": "icons", "label": "Icon slots", "present": true, "selectors": [ ".icon" ], "classes": [ "icon" ], "elements": [ "svg" ], "tokenReferences": [] }, { "id": "typography", "label": "Typography scale and text utilities", "present": true, "selectors": [ ".body-muted", ".body-sm", ".eyebrow", ".lead", "h1", "h2", "h3" ], "classes": [ "body-muted", "body-sm", "eyebrow", "lead" ], "elements": [ "h1", "h2", "h3", "p" ], "tokenReferences": [ "--font-display", "--leading-tight", "--muted", "--text-3xl" ] }, { "id": "layout", "label": "Layout primitives", "present": true, "selectors": [ ".container", ".row-between", ".stack-3 > * + *", ".stack-4 > * + *", ".stack-6 > * + *", "section", "section + section" ], "classes": [ "container", "features-grid", "hero-grid", "row-between", "stack-3", "stack-4" ], "elements": [ "main", "section" ], "tokenReferences": [ "--border", "--container-gutter-desktop", "--container-gutter-phone", "--container-gutter-tablet", "--container-max", "--space-3", "--space-6" ] } ], "literals": { "colorExpressions": 9, "pixelValues": 33, "hardcodedFontFamilies": 13 } }