@setsquare/ui 0.1.0

package/dist/tokens.json

@@ -0,0 +1,982 @@
+{
+  "name": "Setsquare UI",
+  "version": 1,
+  "color": {
+    "themes": [
+      {
+        "id": "light",
+        "name": "Light · AA"
+      },
+      {
+        "id": "dark",
+        "name": "Dark · AA"
+      },
+      {
+        "id": "light-aaa",
+        "name": "Light · AAA"
+      },
+      {
+        "id": "dark-aaa",
+        "name": "Dark · AAA"
+      }
+    ],
+    "tokens": [
+      {
+        "name": "brand",
+        "value": {
+          "light": "#2f47c9",
+          "dark": "#8fa3ff",
+          "light-aaa": "#22369f",
+          "dark-aaa": "#b0beff"
+        },
+        "usage": "Placeholder product hue — Docuccino and Setsquare each override it. Primary actions, current-page marker, links, focus ring. As text: on background, card, sidebar and brand-subtle."
+      },
+      {
+        "name": "brand-subtle",
+        "value": {
+          "light": "#eceffc",
+          "dark": "#1b2246",
+          "light-aaa": "#e6eafb",
+          "dark-aaa": "#1a2148"
+        },
+        "usage": "Tinted ground behind brand text: the current nav item, selected table rows, info notices."
+      },
+      {
+        "name": "background",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#0e1116",
+          "light-aaa": "#ffffff",
+          "dark-aaa": "#07090c"
+        },
+        "usage": "Page ground and the main content region."
+      },
+      {
+        "name": "foreground",
+        "value": {
+          "light": "#161a1f",
+          "dark": "#e7eaee",
+          "light-aaa": "#0c0e11",
+          "dark-aaa": "#f5f7f9"
+        },
+        "usage": "Primary text and icons, on every surface token (background, card, popover, muted, secondary, accent, sidebar, sidebar-accent, brand-subtle)."
+      },
+      {
+        "name": "card",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#151a21",
+          "light-aaa": "#ffffff",
+          "dark-aaa": "#0e1217"
+        },
+        "usage": "Cards, the right panel and table containers."
+      },
+      {
+        "name": "card-foreground",
+        "value": {
+          "light": "{foreground}",
+          "dark": "{foreground}",
+          "light-aaa": "{foreground}",
+          "dark-aaa": "{foreground}"
+        },
+        "usage": "Text on card (alias of foreground)."
+      },
+      {
+        "name": "popover",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#1a2029",
+          "light-aaa": "#ffffff",
+          "dark-aaa": "#12171e"
+        },
+        "usage": "Menus, the search results listbox, popovers, dialogs."
+      },
+      {
+        "name": "popover-foreground",
+        "value": {
+          "light": "{foreground}",
+          "dark": "{foreground}",
+          "light-aaa": "{foreground}",
+          "dark-aaa": "{foreground}"
+        },
+        "usage": "Text on popover (alias of foreground)."
+      },
+      {
+        "name": "muted",
+        "value": {
+          "light": "#f2f4f6",
+          "dark": "#1b212a",
+          "light-aaa": "#f1f3f5",
+          "dark-aaa": "#151a21"
+        },
+        "usage": "Quiet fills: table header row, search field rest state, skeletons."
+      },
+      {
+        "name": "muted-foreground",
+        "value": {
+          "light": "#59626d",
+          "dark": "#9ba5b1",
+          "light-aaa": "#3c444e",
+          "dark-aaa": "#c5ccd4"
+        },
+        "usage": "Secondary text — metadata, helper text, placeholders, section labels — on background, card, muted, popover and sidebar."
+      },
+      {
+        "name": "secondary",
+        "value": {
+          "light": "#eceff3",
+          "dark": "#202731",
+          "light-aaa": "#e9ecf0",
+          "dark-aaa": "#1a2029"
+        },
+        "usage": "Secondary button fill."
+      },
+      {
+        "name": "secondary-foreground",
+        "value": {
+          "light": "{foreground}",
+          "dark": "{foreground}",
+          "light-aaa": "{foreground}",
+          "dark-aaa": "{foreground}"
+        },
+        "usage": "Text on secondary (alias of foreground)."
+      },
+      {
+        "name": "accent",
+        "value": {
+          "light": "#e7ebf0",
+          "dark": "#232b36",
+          "light-aaa": "#e3e7ec",
+          "dark-aaa": "#1f2630"
+        },
+        "usage": "Hover and pressed fill for ghost buttons, menu items and table rows. Not a brand colour: shadcn's name for the hover ground."
+      },
+      {
+        "name": "accent-foreground",
+        "value": {
+          "light": "{foreground}",
+          "dark": "{foreground}",
+          "light-aaa": "{foreground}",
+          "dark-aaa": "{foreground}"
+        },
+        "usage": "Text on accent (alias of foreground)."
+      },
+      {
+        "name": "primary",
+        "value": {
+          "light": "{brand}",
+          "dark": "{brand}",
+          "light-aaa": "{brand}",
+          "dark-aaa": "{brand}"
+        },
+        "usage": "Primary button fill — one per view, for the thing the page is for. Alias of brand."
+      },
+      {
+        "name": "primary-foreground",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#0e1116",
+          "light-aaa": "#ffffff",
+          "dark-aaa": "#07090c"
+        },
+        "usage": "Label and icon on a primary fill."
+      },
+      {
+        "name": "border",
+        "value": {
+          "light": "#e0e4e9",
+          "dark": "#28303a",
+          "light-aaa": "#7f8792",
+          "dark-aaa": "#6c7580"
+        },
+        "usage": "Dividers and card edges. Decorative in AA (no contrast floor); in AAA themes it meets 3:1 so regions read by edge, not by shade."
+      },
+      {
+        "name": "input",
+        "value": {
+          "light": "#7a838e",
+          "dark": "#6b7582",
+          "light-aaa": "#5d6570",
+          "dark-aaa": "#8c96a3"
+        },
+        "usage": "Boundary of every form control (search, inputs, selects, checkboxes). At least 3:1 on background, card, muted and sidebar (WCAG 1.4.11). 4.5:1 in the AAA themes is a house rule: WCAG sets no enhanced level for 1.4.11."
+      },
+      {
+        "name": "ring",
+        "value": {
+          "light": "{brand}",
+          "dark": "{brand}",
+          "light-aaa": "{brand}",
+          "dark-aaa": "{brand}"
+        },
+        "usage": "Focus indicator colour, drawn as an outline of focus-width at focus-offset. At least 3:1 on every surface it lands on. Alias of brand — re-check if a product changes brand."
+      },
+      {
+        "name": "destructive",
+        "value": {
+          "light": "#bf2a2a",
+          "dark": "#f47a70",
+          "light-aaa": "#8c1818",
+          "dark-aaa": "#ffa39b"
+        },
+        "usage": "Destructive button fill and error text/icons, on background, card and destructive-subtle."
+      },
+      {
+        "name": "destructive-foreground",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#0e1116",
+          "light-aaa": "#ffffff",
+          "dark-aaa": "#07090c"
+        },
+        "usage": "Label on a destructive fill."
+      },
+      {
+        "name": "destructive-subtle",
+        "value": {
+          "light": "#fdecec",
+          "dark": "#3a1616",
+          "light-aaa": "#fbe7e7",
+          "dark-aaa": "#3a1313"
+        },
+        "usage": "Ground behind error text: inline alerts, error badges."
+      },
+      {
+        "name": "success",
+        "value": {
+          "light": "#0a6f61",
+          "dark": "#4fd3b8",
+          "light-aaa": "#06544a",
+          "dark-aaa": "#86e6d0"
+        },
+        "usage": "Success text and icons (a blue-leaning teal so it never relies on red/green hue alone), on background, card and success-subtle."
+      },
+      {
+        "name": "success-subtle",
+        "value": {
+          "light": "#e2f4f0",
+          "dark": "#0f2c27",
+          "light-aaa": "#ddf1ec",
+          "dark-aaa": "#0d2a25"
+        },
+        "usage": "Ground behind success text."
+      },
+      {
+        "name": "warning",
+        "value": {
+          "light": "#8a4f00",
+          "dark": "#f0b45c",
+          "light-aaa": "#663a00",
+          "dark-aaa": "#f8cd8c"
+        },
+        "usage": "Warning text and icons, on background, card and warning-subtle."
+      },
+      {
+        "name": "warning-subtle",
+        "value": {
+          "light": "#fdf0da",
+          "dark": "#2f230f",
+          "light-aaa": "#fcecd2",
+          "dark-aaa": "#2c200c"
+        },
+        "usage": "Ground behind warning text."
+      },
+      {
+        "name": "overlay",
+        "value": {
+          "light": "#0c0e1166",
+          "dark": "#000000a6",
+          "light-aaa": "#0c0e1180",
+          "dark-aaa": "#000000b3"
+        },
+        "usage": "Scrim behind Sheets and the search dialog. Dims the page in every theme; never used for text."
+      },
+      {
+        "name": "sidebar",
+        "value": {
+          "light": "#f6f7f9",
+          "dark": "#11151b",
+          "light-aaa": "#f4f6f8",
+          "dark-aaa": "#0b0e12"
+        },
+        "usage": "Sidebar ground and the canvas around the inset surface."
+      },
+      {
+        "name": "sidebar-foreground",
+        "value": {
+          "light": "{foreground}",
+          "dark": "{foreground}",
+          "light-aaa": "{foreground}",
+          "dark-aaa": "{foreground}"
+        },
+        "usage": "Nav labels and icons on sidebar and sidebar-accent."
+      },
+      {
+        "name": "sidebar-primary",
+        "value": {
+          "light": "{brand}",
+          "dark": "{brand}",
+          "light-aaa": "{brand}",
+          "dark-aaa": "{brand}"
+        },
+        "usage": "Current-page marker bar and the workspace avatar fill."
+      },
+      {
+        "name": "sidebar-primary-foreground",
+        "value": {
+          "light": "{primary-foreground}",
+          "dark": "{primary-foreground}",
+          "light-aaa": "{primary-foreground}",
+          "dark-aaa": "{primary-foreground}"
+        },
+        "usage": "Text on sidebar-primary."
+      },
+      {
+        "name": "sidebar-accent",
+        "value": {
+          "light": "#e8ebf0",
+          "dark": "#1f2630",
+          "light-aaa": "#e3e7ec",
+          "dark-aaa": "#1b222b"
+        },
+        "usage": "Hover fill for nav items."
+      },
+      {
+        "name": "sidebar-accent-foreground",
+        "value": {
+          "light": "{foreground}",
+          "dark": "{foreground}",
+          "light-aaa": "{foreground}",
+          "dark-aaa": "{foreground}"
+        },
+        "usage": "Text on sidebar-accent."
+      },
+      {
+        "name": "sidebar-border",
+        "value": {
+          "light": "{border}",
+          "dark": "{border}",
+          "light-aaa": "{border}",
+          "dark-aaa": "{border}"
+        },
+        "usage": "Sidebar edge and section dividers."
+      },
+      {
+        "name": "sidebar-ring",
+        "value": {
+          "light": "{ring}",
+          "dark": "{ring}",
+          "light-aaa": "{ring}",
+          "dark-aaa": "{ring}"
+        },
+        "usage": "Focus ring inside the sidebar."
+      }
+    ]
+  },
+  "type": {
+    "fonts": [],
+    "families": {
+      "sans": "\"Atkinson Hyperlegible Next\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
+      "mono": "\"Atkinson Hyperlegible Mono\", ui-monospace, \"SF Mono\", Menlo, monospace"
+    },
+    "groups": [
+      {
+        "name": "Interface",
+        "family": "sans",
+        "note": "Atkinson Hyperlegible Next from Google Fonts (next/font/google in code). One family, weights 400–700.",
+        "styles": [
+          {
+            "name": "text-title",
+            "fontSize": "24px",
+            "lineHeight": "32px",
+            "fontWeight": 700,
+            "letterSpacing": "-0.01em",
+            "sample": "Projects",
+            "usage": "The page h1, once per page."
+          },
+          {
+            "name": "text-heading",
+            "fontSize": "18px",
+            "lineHeight": "28px",
+            "fontWeight": 600,
+            "sample": "Customer portal",
+            "usage": "h2: card and panel titles, section headings."
+          },
+          {
+            "name": "text-subheading",
+            "fontSize": "16px",
+            "lineHeight": "24px",
+            "fontWeight": 600,
+            "sample": "Recent activity",
+            "usage": "h3 inside cards and the right panel."
+          },
+          {
+            "name": "text-body",
+            "fontSize": "15px",
+            "lineHeight": "24px",
+            "fontWeight": 400,
+            "sample": "Changes you make here apply to everyone in the workspace.",
+            "usage": "Prose: descriptions, help text, empty states. Line height 1.6 meets the line-spacing part of 1.4.8; set on measure."
+          },
+          {
+            "name": "text-ui",
+            "fontSize": "14px",
+            "lineHeight": "20px",
+            "fontWeight": 400,
+            "sample": "Updated 2 hours ago",
+            "usage": "Interface text: table cells, nav labels, inputs."
+          },
+          {
+            "name": "text-ui-strong",
+            "fontSize": "14px",
+            "lineHeight": "20px",
+            "fontWeight": 600,
+            "sample": "New project",
+            "usage": "Button labels, the current nav item (700), table links."
+          },
+          {
+            "name": "text-caption",
+            "fontSize": "13px",
+            "lineHeight": "20px",
+            "fontWeight": 400,
+            "sample": "Owner · Priya Shah",
+            "usage": "Metadata and timestamps in muted-foreground. The smallest text size in the system."
+          },
+          {
+            "name": "text-caption-strong",
+            "fontSize": "13px",
+            "lineHeight": "20px",
+            "fontWeight": 600,
+            "sample": "Workspace",
+            "usage": "Sidebar section labels, table headers, badges. Sentence case, never uppercase."
+          }
+        ]
+      },
+      {
+        "name": "Display",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "text-display",
+            "fontSize": "64px",
+            "lineHeight": 1.05,
+            "fontWeight": 700,
+            "letterSpacing": "-0.02em",
+            "fluid": {
+              "min": "36px",
+              "max": "64px"
+            },
+            "sample": "API docs that know their history",
+            "usage": "The h1 of a public page's hero, once per page. Fluid from 36px at 320px to 64px at 1280px; fontSize is the largest."
+          },
+          {
+            "name": "text-display-page",
+            "fontSize": "48px",
+            "lineHeight": 1.1,
+            "fontWeight": 700,
+            "letterSpacing": "-0.015em",
+            "fluid": {
+              "min": "32px",
+              "max": "48px"
+            },
+            "sample": "Privacy notice",
+            "usage": "The h1 of a public page led by prose: a legal page, a guide. Fluid from 32px to 48px."
+          },
+          {
+            "name": "text-display-section",
+            "fontSize": "36px",
+            "lineHeight": 1.15,
+            "fontWeight": 700,
+            "letterSpacing": "-0.01em",
+            "fluid": {
+              "min": "24px",
+              "max": "36px"
+            },
+            "sample": "How it works",
+            "usage": "A section's h2 on a public page. Fluid from 24px to 36px. Dashboards keep text-title and text-heading."
+          },
+          {
+            "name": "text-lead",
+            "fontSize": "20px",
+            "lineHeight": 1.5,
+            "fontWeight": 400,
+            "fluid": {
+              "min": "17px",
+              "max": "20px"
+            },
+            "sample": "Your application in, a document that knows its own history out.",
+            "usage": "The intro paragraph under a display heading, inside --measure. Fluid from 17px to 20px, with 1.5 line spacing."
+          }
+        ]
+      },
+      {
+        "name": "Code",
+        "family": "mono",
+        "styles": [
+          {
+            "name": "text-code",
+            "fontSize": "13px",
+            "lineHeight": "20px",
+            "fontWeight": 400,
+            "sample": "prj_7f3a21",
+            "usage": "IDs, keys, keyboard hints and code."
+          }
+        ]
+      }
+    ]
+  },
+  "spacing": {
+    "note": "4px grid. Spacing that a conformance level governs lives in Conformance, not here.",
+    "tokens": [
+      {
+        "name": "space-1",
+        "value": "4px",
+        "usage": "Icon-to-label gap inside badges."
+      },
+      {
+        "name": "space-2",
+        "value": "8px",
+        "usage": "Icon-to-label gap in buttons and nav rows; tight stacks."
+      },
+      {
+        "name": "space-3",
+        "value": "12px",
+        "usage": "Nav row padding; gap between related fields."
+      },
+      {
+        "name": "space-4",
+        "value": "16px",
+        "usage": "Header padding; card padding; panel section padding."
+      },
+      {
+        "name": "space-5",
+        "value": "20px",
+        "usage": "Gap between a heading and the content it introduces."
+      },
+      {
+        "name": "space-6",
+        "value": "24px",
+        "usage": "Page gutter; gap between cards."
+      },
+      {
+        "name": "space-8",
+        "value": "32px",
+        "usage": "Between page sections."
+      },
+      {
+        "name": "space-10",
+        "value": "40px",
+        "usage": "Empty-state padding."
+      },
+      {
+        "name": "space-12",
+        "value": "48px",
+        "usage": "Top of long-form pages."
+      },
+      {
+        "name": "space-16",
+        "value": "64px",
+        "usage": "Large empty states and onboarding."
+      }
+    ]
+  },
+  "radius": {
+    "note": "Soft corners that step up with the size of the surface.",
+    "tokens": [
+      {
+        "name": "radius-sm",
+        "value": "4px",
+        "usage": "Keyboard hints, table-cell tags, cut tiles."
+      },
+      {
+        "name": "radius-md",
+        "value": "6px",
+        "usage": "Buttons, inputs, nav rows."
+      },
+      {
+        "name": "radius-lg",
+        "value": "8px",
+        "usage": "Cards, the right panel, popovers."
+      },
+      {
+        "name": "radius-xl",
+        "value": "12px",
+        "usage": "The inset content surface and the search dialog."
+      },
+      {
+        "name": "radius-full",
+        "value": "9999px",
+        "usage": "Badges, avatars, the notification count."
+      }
+    ]
+  },
+  "shadow": {
+    "note": "Floating things only. AAA themes drop resting shadows and rely on 3:1 borders.",
+    "tokens": [
+      {
+        "name": "shadow-sm",
+        "value": {
+          "light": "0 1px 2px #161a1f0f, 0 1px 3px #161a1f14",
+          "dark": "0 1px 3px #000000a6",
+          "light-aaa": "none",
+          "dark-aaa": "none"
+        },
+        "usage": "The inset content surface and raised cards. None in AAA themes: borders do the separating."
+      },
+      {
+        "name": "shadow-lg",
+        "value": {
+          "light": "0 4px 8px #161a1f14, 0 16px 32px -4px #161a1f29",
+          "dark": "0 16px 32px -4px #000000cc",
+          "light-aaa": "0 4px 8px #0c0e1129, 0 16px 32px -4px #0c0e1140",
+          "dark-aaa": "0 16px 32px -4px #000000e6"
+        },
+        "usage": "Anything floating: menus, search results, sheets. Always paired with a border."
+      }
+    ]
+  },
+  "conformance": {
+    "note": "Every value a WCAG level governs, as an -aa / -aaa pair, set by data-conformance on <html>. Controls have three layers: the target (Layer 1, transparent, at least --target-min), the painted box (Layer 2) and the content (Layer 3). The level changes targets, gaps and focus. Paint is the same size at both levels by default, so AAA looks like AA; for bigger paint at AAA, raise the -aaa value.",
+    "tokens": [
+      {
+        "name": "target-min-aa",
+        "value": "24px",
+        "usage": "Layer 1: the WCAG 2.5.8 floor for every pointer target (resolved as --target-min). The interactive element itself is at least this in both axes; the painted box inside it can be smaller."
+      },
+      {
+        "name": "target-min-aaa",
+        "value": "44px",
+        "usage": "Layer 1 at AAA: WCAG 2.5.5 Target Size (Enhanced). Resolved as --target-min when data-conformance=\"aaa\"."
+      },
+      {
+        "name": "target-floor",
+        "value": "24px",
+        "usage": "The 2.5.8 minimum, at every level. Only for a target that 2.5.5's Equivalent exception covers at AAA: calendar days on a screen too narrow for seven 44px days, where the typed date field beside them is the 44px equivalent."
+      },
+      {
+        "name": "control-height-aa",
+        "value": "36px",
+        "usage": "Layer 2: the painted height of buttons, inputs, selects, the header search and segments (resolved as --control-height). The target around it is max(--target-min, --control-height)."
+      },
+      {
+        "name": "control-height-aaa",
+        "value": "36px",
+        "usage": "Equal to AA by default: at AAA the same 36px box sits in a 44px target."
+      },
+      {
+        "name": "control-height-sm-aa",
+        "value": "28px",
+        "usage": "Layer 2 for dense icon buttons: table row actions, panel close, calendar paging (resolved as --control-height-sm)."
+      },
+      {
+        "name": "control-height-sm-aaa",
+        "value": "28px",
+        "usage": "Equal to AA by default: at AAA the 28px box sits in a 44px target."
+      },
+      {
+        "name": "control-height-lg-aa",
+        "value": "44px",
+        "usage": "Layer 2 for large buttons: a page's call to action on a marketing page (resolved as --control-height-lg). The same at AA and AAA, like the other painted sizes."
+      },
+      {
+        "name": "control-height-lg-aaa",
+        "value": "44px",
+        "usage": "The painted height of a large button at AAA. Raise it to paint large buttons bigger at AAA."
+      },
+      {
+        "name": "control-pad-x-aa",
+        "value": "12px",
+        "usage": "Horizontal padding inside the painted box of buttons and inputs (resolved as --control-pad-x)."
+      },
+      {
+        "name": "control-pad-x-aaa",
+        "value": "12px",
+        "usage": "Equal to AA: the painted box is the same size, so it keeps the same padding."
+      },
+      {
+        "name": "control-gap-aa",
+        "value": "8px",
+        "usage": "Gap between adjacent controls in a toolbar or button group (resolved as --control-gap)."
+      },
+      {
+        "name": "control-gap-aaa",
+        "value": "12px",
+        "usage": "Larger gap at AAA to cut accidental activation of a neighbour."
+      },
+      {
+        "name": "nav-item-height-aa",
+        "value": "36px",
+        "usage": "Layer 2: the painted row in the sidebar, menus and lists (resolved as --nav-item-height). The row's target is at least --target-min."
+      },
+      {
+        "name": "nav-item-height-aaa",
+        "value": "36px",
+        "usage": "Equal to AA by default: at AAA the 36px highlight sits in a 44px row."
+      },
+      {
+        "name": "nav-item-gap-aa",
+        "value": "2px",
+        "usage": "Vertical gap between nav rows (resolved as --nav-item-gap)."
+      },
+      {
+        "name": "nav-item-gap-aaa",
+        "value": "4px",
+        "usage": "Clearer separation between stacked targets at AAA."
+      },
+      {
+        "name": "choice-size-aa",
+        "value": "20px",
+        "usage": "Checkbox, radio, switch-thumb and slider-thumb indicator (resolved as --choice-size). The whole labelled row is the target, at least --target-min tall."
+      },
+      {
+        "name": "choice-size-aaa",
+        "value": "20px",
+        "usage": "Equal to AA by default; the row around it grows to the 44px target."
+      },
+      {
+        "name": "field-gap-aa",
+        "value": "20px",
+        "usage": "Vertical space between fields in a form (resolved as --field-gap)."
+      },
+      {
+        "name": "field-gap-aaa",
+        "value": "28px",
+        "usage": "More room between fields at AAA so each label clearly belongs to one control."
+      },
+      {
+        "name": "toast-timeout-aa",
+        "value": "8000ms",
+        "usage": "How long a routine toast stays (resolved as --toast-timeout); paused while hovered or focused. Toasts with an action, and errors, never time out (WCAG 2.2.1)."
+      },
+      {
+        "name": "toast-timeout-aaa",
+        "value": "0ms",
+        "usage": "0 = toasts stay until dismissed (WCAG 2.2.3 No Timing)."
+      },
+      {
+        "name": "focus-width-aa",
+        "value": "2px",
+        "usage": "Focus outline thickness (resolved as --focus-width): meets 2.4.7 and already the 2px perimeter 2.4.13 asks for."
+      },
+      {
+        "name": "focus-width-aaa",
+        "value": "3px",
+        "usage": "Thicker outline at AAA, comfortably inside 2.4.13 Focus Appearance."
+      },
+      {
+        "name": "focus-offset",
+        "value": "2px",
+        "usage": "Gap between a control and its focus outline, so the ring sits on the surrounding surface — which is why ring is checked against every surface."
+      },
+      {
+        "name": "paragraph-gap-aa",
+        "value": "1em",
+        "usage": "Space after a paragraph in prose (resolved as --paragraph-gap)."
+      },
+      {
+        "name": "paragraph-gap-aaa",
+        "value": "1.5lh",
+        "usage": "WCAG 1.4.8: paragraph spacing at least 1.5× the line spacing."
+      },
+      {
+        "name": "measure-aa",
+        "value": "75ch",
+        "usage": "Max line length for prose: help text, descriptions, empty states (resolved as --measure)."
+      },
+      {
+        "name": "measure-aaa",
+        "value": "64ch",
+        "usage": "WCAG 1.4.8 caps lines at 80 characters; 64ch leaves margin because ch is the width of a zero, wider than average text."
+      },
+      {
+        "name": "motion-distance-aa",
+        "value": "8px",
+        "usage": "How far view-transition content travels (resolved as --motion-distance). Always 0 under prefers-reduced-motion."
+      },
+      {
+        "name": "motion-distance-aaa",
+        "value": "0px",
+        "usage": "WCAG 2.3.3: at AAA transitions fade only — opacity is not motion — so no interaction moves content."
+      }
+    ]
+  },
+  "layout": {
+    "note": "Shell dimensions, paired where they follow target size, plus breakpoints (use in Tailwind config; CSS variables cannot drive media queries).",
+    "tokens": [
+      {
+        "name": "header-height-aa",
+        "value": "56px",
+        "usage": "Top bar height (resolved as --header-height); also the scroll-padding-top that keeps focus clear of the sticky header (2.4.11)."
+      },
+      {
+        "name": "header-height-aaa",
+        "value": "56px",
+        "usage": "Equal to AA: the 44px targets fit the 56px bar, and the painted controls are the same size."
+      },
+      {
+        "name": "sidebar-width-aa",
+        "value": "256px",
+        "usage": "Expanded sidebar (resolved as --sidebar-width)."
+      },
+      {
+        "name": "sidebar-width-aaa",
+        "value": "256px",
+        "usage": "Equal to AA: rows paint at the same size; only their targets grow."
+      },
+      {
+        "name": "sidebar-width-collapsed-aa",
+        "value": "56px",
+        "usage": "Icon-only sidebar (resolved as --sidebar-width-collapsed): one target plus padding."
+      },
+      {
+        "name": "sidebar-width-collapsed-aaa",
+        "value": "72px",
+        "usage": "Collapsed width that fits a 44px target plus padding."
+      },
+      {
+        "name": "rail-width-aa",
+        "value": "72px",
+        "usage": "Labelled icon rail (resolved as --rail-width) — kept from layout option C for products that outgrow one nav list."
+      },
+      {
+        "name": "rail-width-aaa",
+        "value": "88px",
+        "usage": "Rail at AAA: 44px icon target plus its label."
+      },
+      {
+        "name": "subnav-width-aa",
+        "value": "224px",
+        "usage": "Contextual sub-navigation beside a rail (resolved as --subnav-width) — kept from layout option C."
+      },
+      {
+        "name": "subnav-width-aaa",
+        "value": "240px",
+        "usage": "Sub-navigation at AAA."
+      },
+      {
+        "name": "panel-width-aa",
+        "value": "320px",
+        "usage": "Right panel inside the content area (resolved as --panel-width)."
+      },
+      {
+        "name": "panel-width-aaa",
+        "value": "360px",
+        "usage": "Right panel at AAA."
+      },
+      {
+        "name": "gutter",
+        "value": "24px",
+        "usage": "Page padding around main content and the panel's inner padding at wide sizes."
+      },
+      {
+        "name": "content-max",
+        "value": "1440px",
+        "usage": "Max width of the main column's content before it centres."
+      },
+      {
+        "name": "site-max",
+        "value": "1180px",
+        "usage": "Width of a public page's content: the site container holds it and centres it, with site-gutter either side. A product may re-point it (docuccino.app's is 1280px)."
+      },
+      {
+        "name": "site-max-narrow",
+        "value": "768px",
+        "usage": "Width of narrow bands on a public page: a centred call to action, a heading on its own."
+      },
+      {
+        "name": "site-gutter",
+        "value": "clamp(20px, calc(3.2 * var(--site-vw, 1vw)), 44px)",
+        "usage": "Space either side of a public page's content: 20px on a phone, growing to 44px on a wide screen. Spacing, not text, so the zoom rule for fluid type doesn't bind it."
+      },
+      {
+        "name": "section-y",
+        "value": "clamp(56px, calc(7 * var(--site-vw, 1vw)), 112px)",
+        "usage": "Space above and below a section of a public page, fluid from 56px to 112px."
+      },
+      {
+        "name": "section-y-tight",
+        "value": "clamp(40px, calc(5 * var(--site-vw, 1vw)), 80px)",
+        "usage": "Space above and below a section in a dense run of sections, fluid from 40px to 80px."
+      },
+      {
+        "name": "bp-md",
+        "value": "768px",
+        "usage": "Below this (phones, and 400% zoom) the sidebar becomes a Sheet opened from the header, search becomes an icon button and the inset goes edge to edge."
+      },
+      {
+        "name": "bp-lg",
+        "value": "1024px",
+        "usage": "Below this the right panel opens as a Sheet instead of a column."
+      },
+      {
+        "name": "bp-xl",
+        "value": "1280px",
+        "usage": "Below this the sidebar starts collapsed to icons (a person can still expand it)."
+      }
+    ]
+  },
+  "duration": {
+    "note": "Durations and easing. Distance is motion-distance in Conformance.",
+    "tokens": [
+      {
+        "name": "duration-fast",
+        "value": "120ms",
+        "usage": "Hover and pressed colour changes."
+      },
+      {
+        "name": "duration-exit",
+        "value": "150ms",
+        "usage": "Outgoing view-transition snapshot: leave quickly."
+      },
+      {
+        "name": "duration-enter",
+        "value": "210ms",
+        "usage": "Incoming view-transition snapshot, delayed by duration-exit."
+      },
+      {
+        "name": "duration-panel",
+        "value": "200ms",
+        "usage": "Sheets opening, and the sidebar collapsing (no width animation at AAA or with reduced motion)."
+      },
+      {
+        "name": "duration-loading-delay",
+        "value": "400ms",
+        "usage": "Wait before showing a spinner or skeleton, so fast responses never flash one."
+      },
+      {
+        "name": "duration-spin",
+        "value": "900ms",
+        "usage": "One turn of the spinner. At AAA and under reduced motion it pulses instead of turning."
+      },
+      {
+        "name": "ease-standard",
+        "value": "cubic-bezier(0.2, 0, 0, 1)",
+        "usage": "Default easing for every transition."
+      }
+    ]
+  },
+  "zIndex": {
+    "tokens": [
+      {
+        "name": "z-header",
+        "value": "30",
+        "usage": "Sticky header."
+      },
+      {
+        "name": "z-sidebar",
+        "value": "40",
+        "usage": "Sidebar when it overlays content below bp-md."
+      },
+      {
+        "name": "z-sheet",
+        "value": "50",
+        "usage": "Sheets and dialogs (right panel below bp-xl)."
+      },
+      {
+        "name": "z-popover",
+        "value": "60",
+        "usage": "Menus, search results, tooltips."
+      }
+    ]
+  }
+}