{ "schemaVersion": 1, "brandId": "minimax", "source": { "componentsHtml": "components.html", "tokensCss": "tokens.css" }, "fixture": { "title": "MiniMax — reference components", "description": "Reference fixture for design-systems/minimax. Every visible value comes from tokens.css. MiniMax / Hailuo (海螺) signature moves: white-dominant gallery, Outfit display + DM Sans body with CJK fallbacks, pill nav, brand-blue accent, near-black CTA per the MiniMax button system, purple-tinted glow on the featured product card.", "styleBlockCount": 1, "selectorCount": 62, "classCount": 33, "elementCount": 31 }, "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", "--bg", "--border", "--border-soft", "--container-gutter-desktop", "--container-gutter-phone", "--container-gutter-tablet", "--container-max", "--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-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-4xl", "--text-base", "--text-lg", "--text-sm", "--text-xs", "--tracking-display" ], "unusedDeclared": [ "--accent-active", "--accent-hover", "--accent-on", "--danger", "--elev-flat", "--elev-ring", "--text-3xl", "--text-xl", "--warn" ], "undeclaredReferenced": [] }, "selectors": [ ".body-muted", ".body-sm", ".btn", ".btn-ghost", ".btn-ghost:hover", ".btn-primary", ".btn-primary:active", ".btn-primary:hover", ".btn-secondary", ".btn-secondary:hover", ".btn:focus-visible", ".card", ".card-product", ".card-product-tag", ".card-product-title", ".card:hover", ".chip", ".chip-accent", ".chip-success", ".container", ".dot", ".eyebrow", ".features-grid", ".field", ".field input", ".field input::placeholder", ".field input:focus", ".field label", ".field textarea", ".field textarea:focus", ".field-help", ".form", ".form-actions", ".form-row", ".hero-actions", ".hero-grid", ".icon", ".lead", ".row-between", ".stack-3 > * + *", ".stack-4 > * + *", ".stack-6 > * + *", ".topnav", ".topnav-brand", ".topnav-right", ".topnav-tabs", ".topnav-tabs a", ".topnav-tabs a:hover", ".topnav-tabs a[aria-current=\"page\"]", "*", "*::after", "*::before", "body", "code", "h1", "h2", "h3", "html", "kbd", "p", "section", "section + section" ], "classes": [ "body-muted", "body-sm", "btn", "btn-ghost", "btn-primary", "btn-secondary", "card", "card-product", "card-product-tag", "card-product-title", "chip", "chip-accent", "chip-success", "container", "dot", "eyebrow", "features-grid", "field", "field-help", "form", "form-actions", "form-row", "hero-actions", "hero-grid", "icon", "lead", "row-between", "stack-3", "stack-4", "topnav", "topnav-brand", "topnav-right", "topnav-tabs" ], "elements": [ "a", "article", "aside", "body", "button", "code", "div", "form", "h1", "h2", "h3", "head", "header", "html", "input", "kbd", "label", "li", "main", "meta", "nav", "p", "path", "section", "span", "strong", "style", "svg", "textarea", "title", "ul" ], "groups": [ { "id": "buttons", "label": "Buttons and calls to action", "present": true, "selectors": [ ".btn", ".btn-ghost", ".btn-ghost:hover", ".btn-primary", ".btn-primary:active", ".btn-primary:hover", ".btn-secondary", ".btn-secondary:hover", ".btn:focus-visible" ], "classes": [ "btn", "btn-ghost", "btn-primary", "btn-secondary" ], "elements": [ "button" ], "tokenReferences": [ "--border", "--fg-2", "--focus-ring", "--surface-warm" ] }, { "id": "inputs", "label": "Form fields and controls", "present": true, "selectors": [ ".field", ".field input", ".field input::placeholder", ".field input:focus", ".field label", ".field textarea", ".field textarea:focus", ".field-help" ], "classes": [ "field", "field-help", "form", "form-actions", "form-row" ], "elements": [ "form", "input", "label", "textarea" ], "tokenReferences": [ "--fg-2", "--meta", "--muted", "--text-sm", "--text-xs" ] }, { "id": "cards", "label": "Cards and panels", "present": true, "selectors": [ ".card", ".card-product", ".card-product-tag", ".card-product-title", ".card:hover" ], "classes": [ "card", "card-product", "card-product-tag", "card-product-title" ], "elements": [], "tokenReferences": [ "--bg", "--border-soft", "--ease-standard", "--fg-2", "--font-display", "--motion-base", "--radius-lg", "--radius-md", "--space-3", "--space-6", "--space-8" ] }, { "id": "badges", "label": "Badges, chips, and status labels", "present": true, "selectors": [ ".chip", ".chip-accent", ".chip-success" ], "classes": [ "chip", "chip-accent", "chip-success" ], "elements": [], "tokenReferences": [ "--muted", "--radius-pill", "--space-2", "--success", "--surface-warm", "--text-xs" ] }, { "id": "links", "label": "Links and inline actions", "present": true, "selectors": [ ".topnav-tabs a", ".topnav-tabs a:hover", ".topnav-tabs a[aria-current=\"page\"]" ], "classes": [], "elements": [ "a" ], "tokenReferences": [ "--fg" ] }, { "id": "keyboard", "label": "Keyboard hints", "present": true, "selectors": [ "kbd" ], "classes": [], "elements": [ "kbd" ], "tokenReferences": [ "--border", "--font-mono", "--muted", "--radius-sm", "--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": [ "--accent", "--fg", "--font-body", "--font-display", "--muted", "--text-2xl", "--text-xs" ] }, { "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": [ "header", "main", "nav", "section" ], "tokenReferences": [ "--border-soft", "--container-gutter-desktop", "--container-gutter-phone", "--container-gutter-tablet", "--container-max", "--space-4" ] } ], "literals": { "colorExpressions": 7, "pixelValues": 39, "hardcodedFontFamilies": 11 } }