@cloudgrid-io/ui 0.0.1

package/dist/tokens/base.json

@@ -0,0 +1,1043 @@
+{
+  "$description": "CloudGrid tokens: the CloudGrid Web 2026 design language.\n\nThis is the @cloudgrid-io/ui copy, ported 2026-08-10 from the v0 library\n(atomicfuse/ui, src/styles/tokens.css), which was itself synced from\ncloudgrid-landing. That makes this the third copy in the chain, and three\ncopies is one too many: the intent is that this package becomes authoritative\nand the other two consume it. Until that migration happens, treat the SITE's\nsrc/styles/tokens.css as the source of truth and sync changes forward to here.\n\nThe site's copy carries a superset (a legacy alias shim, --bg/--ink/etc., for\nits unrebuilt surfaces) that is deliberately NOT part of this package.\n\nValues here are the real brand system. The setup guide's Step 2 sketch\n(cyan/magenta, dark-first, Nunito/DM Mono) does not describe this brand and\nwas not used.\n\nOriginally ported from the Claude Design project \"Cloudgrid\"\n(303a54ca-2f23-4906-8040-879e8d9a7b6f), token files colors/typography/fonts/\nspacing/radius/elevation/motion. Values marked SOURCE were sampled from the\nsupplied 1440px brand frames or given by the brand owner.\n\nThe system is light, flat and gradient-free. Containment is done with 1px\nhairlines, not elevation. The one dramatic move is the purple panel, which is\na token flip rather than a separate stylesheet: put data-cg-surface=\"panel\" on\nany container filled with --cg-surface-panel and every semantic token below\nswitches to its on-purple value.\n\nA theme change is a value swap in this file. Components consume custom\nproperties exclusively and must never hardcode a hex.",
+  "brand": {
+    "$description": "brand (SOURCE)",
+    "ink": {
+      "$value": "#222222",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-ink"
+        }
+      }
+    },
+    "primary": {
+      "$value": "#5a47f0",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-primary"
+        }
+      }
+    },
+    "secondary": {
+      "$value": "#b6de68",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-secondary"
+        }
+      }
+    },
+    "tertiary": {
+      "$value": "#60e9f0",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-tertiary"
+        }
+      }
+    }
+  },
+  "danger": {
+    "$description": "danger (PLACEHOLDER, not a brand value)\n\nOperator decision 2026-08-16, issue #62, stated as a placeholder in the\noperator's own words: \"its just a red i found. one day the brand designer\nmight change it, but until then this is it.\"\n\nIt lives here, beside the brand sources, because that is the one place a\ndesigner should have to edit. Nothing else in the system carries a red.\n\nMeasured against every surface before it was chosen, because a flat value\ncannot work on all three:\n\n#E53935 on white  #ffffff : 4.23:1\n#E53935 on panel  #5a47f0 : 1.38:1   <-- invisible, hence the override\n#E53935 on ink    #222222 : 3.76:1\n\n1.38:1 on purple is the #41 failure repeating: that issue found the primary\nbutton rendering the panel's own colour at 1:1. The per-surface values in\nthe panel and ink scopes below are derived from this red rather than being\nnew brand decisions.\n\nKNOWN, and deliberately not \"fixed\" by changing the operator's value: 4.23:1\non white clears the 3:1 bar for UI components and borders, and is just under\nthe 4.5:1 AA bar for body text. `text-destructive` has 5 uses. A future\nbrand pass can darken it; that is a decision, not a tidy-up.",
+    "danger": {
+      "$value": "#E53935",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger"
+        }
+      }
+    }
+  },
+  "brand-derived": {
+    "$description": "brand derived (interaction only)",
+    "primary-press": {
+      "$value": "#4b39db",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-primary-press"
+        }
+      }
+    },
+    "primary-tint": {
+      "$value": "#eeecfe",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-primary-tint"
+        }
+      }
+    },
+    "secondary-press": {
+      "$value": "#a6cf57",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-secondary-press"
+        }
+      }
+    },
+    "tertiary-press": {
+      "$value": "#4dd8e0",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-tertiary-press"
+        }
+      }
+    }
+  },
+  "neutrals": {
+    "neutral-0": {
+      "$value": "#ffffff",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-neutral-0"
+        }
+      }
+    },
+    "lavender-50": {
+      "$value": "#f2f1f7; /* SOURCE: alternate page wash */ --cg-neutral-100: #f1f1f1; /* SOURCE: hairline / card border */ --cg-neutral-200: #e3e3e3; /* SOURCE: control border, inactive pill fill */ --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-lavender-50"
+        }
+      }
+    },
+    "neutral-100": {
+      "$value": "#f1f1f1; /* SOURCE: hairline / card border */ --cg-neutral-200: #e3e3e3; /* SOURCE: control border, inactive pill fill */ --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-neutral-100"
+        }
+      }
+    },
+    "neutral-200": {
+      "$value": "#e3e3e3; /* SOURCE: control border, inactive pill fill */ --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-neutral-200"
+        }
+      }
+    },
+    "neutral-400": {
+      "$value": "#acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-neutral-400"
+        }
+      }
+    },
+    "neutral-500": {
+      "$value": "#8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-neutral-500"
+        }
+      }
+    },
+    "neutral-700": {
+      "$value": "#595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-neutral-700"
+        }
+      }
+    },
+    "neutral-900": {
+      "$value": "#222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-neutral-900"
+        }
+      }
+    }
+  },
+  "semantic-surfaces": {
+    "surface-page": {
+      "$value": "{neutrals.neutral-0}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-page"
+        }
+      }
+    },
+    "surface-page-alt": {
+      "$value": "{neutrals.lavender-50}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-page-alt"
+        }
+      }
+    },
+    "surface-card": {
+      "$value": "{neutrals.neutral-0}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-card"
+        }
+      }
+    },
+    "surface-subtle": {
+      "$value": "{neutrals.lavender-50}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-subtle"
+        }
+      }
+    },
+    "surface-control": {
+      "$value": "{neutrals.neutral-200}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-control"
+        }
+      }
+    },
+    "surface-panel": {
+      "$value": "{brand.primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-panel"
+        }
+      }
+    },
+    "surface-code": {
+      "$value": "{brand.ink}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-code"
+        }
+      }
+    }
+  },
+  "semantic-text": {
+    "text-primary": {
+      "$value": "{neutrals.neutral-900}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-primary"
+        }
+      }
+    },
+    "text-secondary": {
+      "$value": "{neutrals.neutral-700}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-secondary"
+        }
+      }
+    },
+    "text-muted": {
+      "$value": "{neutrals.neutral-500}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-muted"
+        }
+      }
+    },
+    "text-placeholder": {
+      "$value": "{neutrals.neutral-400}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-placeholder"
+        }
+      }
+    },
+    "text-accent": {
+      "$value": "{brand.primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-accent"
+        }
+      }
+    },
+    "text-inverse": {
+      "$value": "{neutrals.neutral-0}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-inverse"
+        }
+      }
+    },
+    "text-on-primary": {
+      "$value": "{neutrals.neutral-0}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-on-primary"
+        }
+      }
+    },
+    "text-on-accent": {
+      "$value": "{brand.ink}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-on-accent"
+        }
+      }
+    },
+    "text-on-code": {
+      "$value": "#e7e7e7",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-text-on-code"
+        }
+      }
+    }
+  },
+  "semantic-lines": {
+    "border-hairline": {
+      "$value": "{neutrals.neutral-100}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-hairline"
+        }
+      }
+    },
+    "border-control": {
+      "$value": "{neutrals.neutral-200}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-control"
+        }
+      }
+    },
+    "border-strong": {
+      "$value": "{brand.ink}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-strong"
+        }
+      }
+    },
+    "border-accent": {
+      "$value": "{brand.primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-accent"
+        }
+      }
+    },
+    "focus-ring": {
+      "$value": "rgba(90, 71, 240, 0.28)",
+      "$type": "color",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-focus-ring"
+        }
+      }
+    }
+  },
+  "link": {
+    "link": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-link"
+        }
+      }
+    },
+    "link-hover": {
+      "$value": "{brand.primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-link-hover"
+        }
+      }
+    }
+  },
+  "type-families": {
+    "$description": "H1 is Futura Condensed Extra Bold where it is installed. It is a licensed\nface, NOT a webfont, so Saira Semi Condensed 800 is the self-hosted\nfallback that keeps every H1 heavy and condensed everywhere else. Drop the\nlicensed woff2 in and it takes over with no other change.",
+    "font-display": {
+      "$value": "'Futura Condensed ExtraBold', 'Futura Condensed', 'Saira Semi Condensed Variable', 'Saira Semi Condensed', 'Arial Narrow', sans-serif",
+      "$type": "fontFamily",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-font-display"
+        }
+      }
+    },
+    "font-body": {
+      "$value": "'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      "$type": "fontFamily",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-font-body"
+        }
+      }
+    },
+    "font-mono": {
+      "$value": "'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
+      "$type": "fontFamily",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-font-mono"
+        }
+      }
+    }
+  },
+  "weights": {
+    "$description": "weights (Manrope ships 400/500/700)",
+    "weight-regular": {
+      "$value": "400",
+      "$type": "fontWeight",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-weight-regular"
+        }
+      }
+    },
+    "weight-medium": {
+      "$value": "500",
+      "$type": "fontWeight",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-weight-medium"
+        }
+      }
+    },
+    "weight-bold": {
+      "$value": "700",
+      "$type": "fontWeight",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-weight-bold"
+        }
+      }
+    },
+    "weight-display": {
+      "$value": "800",
+      "$type": "fontWeight",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-weight-display"
+        }
+      }
+    }
+  },
+  "h1-display-ramp": {
+    "$description": "H1 display ramp: uppercase, condensed, Primary or white\n\nStepped down one notch 2026-08-06 (operator: main headings read too\ndominant). The SOURCE values were xl 64 / lg 48 / md 42 / sm 32.",
+    "display-xl": {
+      "$value": "56px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-display-xl"
+        }
+      }
+    },
+    "display-lg": {
+      "$value": "44px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-display-lg"
+        }
+      }
+    },
+    "display-md": {
+      "$value": "38px; /* SOURCE: onboarding H1 (was 42px) */ --cg-display-sm: 30px",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-display-md"
+        }
+      }
+    },
+    "display-sm": {
+      "$value": "30px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-display-sm"
+        }
+      }
+    },
+    "display-line": {
+      "$value": "1.06",
+      "$type": "number",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-display-line"
+        }
+      }
+    },
+    "display-tracking": {
+      "$value": "0.012em",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-display-tracking"
+        }
+      }
+    }
+  },
+  "manrope-ramp": {
+    "heading-lg": {
+      "$value": "24px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-heading-lg"
+        }
+      }
+    },
+    "heading-md": {
+      "$value": "20px; /* SOURCE: card title */ --cg-heading-sm: 17px; /* SOURCE: step title */ --cg-heading-line: 1.3",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-heading-md"
+        }
+      }
+    },
+    "heading-sm": {
+      "$value": "17px; /* SOURCE: step title */ --cg-heading-line: 1.3",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-heading-sm"
+        }
+      }
+    },
+    "heading-line": {
+      "$value": "1.3",
+      "$type": "number",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-heading-line"
+        }
+      }
+    },
+    "body-lg": {
+      "$value": "19px; /* SOURCE: H1 subline */ --cg-body-md: 16px; /* SOURCE: default UI text */ --cg-body-sm: 15px; /* SOURCE: card body, legal */ --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-body-lg"
+        }
+      }
+    },
+    "body-md": {
+      "$value": "16px; /* SOURCE: default UI text */ --cg-body-sm: 15px; /* SOURCE: card body, legal */ --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-body-md"
+        }
+      }
+    },
+    "body-sm": {
+      "$value": "15px; /* SOURCE: card body, legal */ --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-body-sm"
+        }
+      }
+    },
+    "caption": {
+      "$value": "13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-caption"
+        }
+      }
+    },
+    "body-line": {
+      "$value": "1.5",
+      "$type": "number",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-body-line"
+        }
+      }
+    },
+    "body-tracking": {
+      "$value": "0em",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-body-tracking"
+        }
+      }
+    },
+    "mono-size": {
+      "$value": "14px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-mono-size"
+        }
+      }
+    },
+    "mono-line": {
+      "$value": "1.7",
+      "$type": "number",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-mono-line"
+        }
+      }
+    },
+    "label-size": {
+      "$value": "15px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-label-size"
+        }
+      }
+    },
+    "label-weight": {
+      "$value": "{weights.weight-medium}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-label-weight"
+        }
+      }
+    }
+  },
+  "spacing": {
+    "$description": "spacing: 4px base",
+    "space-1": {
+      "$value": "4px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-space-1"
+        }
+      }
+    },
+    "space-2": {
+      "$value": "8px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-space-2"
+        }
+      }
+    },
+    "space-3": {
+      "$value": "12px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-space-3"
+        }
+      }
+    },
+    "space-4": {
+      "$value": "16px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-space-4"
+        }
+      }
+    },
+    "space-5": {
+      "$value": "20px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-space-5"
+        }
+      }
+    },
+    "space-6": {
+      "$value": "24px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-space-6"
+        }
+      }
+    },
+    "space-8": {
+      "$value": "32px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-space-8"
+        }
+      }
+    },
+    "space-10": {
+      "$value": "40px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-space-10"
+        }
+      }
+    },
+    "space-12": {
+      "$value": "48px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-space-12"
+        }
+      }
+    },
+    "space-16": {
+      "$value": "64px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-space-16"
+        }
+      }
+    },
+    "space-20": {
+      "$value": "80px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-space-20"
+        }
+      }
+    },
+    "space-30": {
+      "$value": "120px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-space-30"
+        }
+      }
+    }
+  },
+  "layout": {
+    "$description": "layout (SOURCE measurements from the 1440px frames)",
+    "column-form": {
+      "$value": "414px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-column-form"
+        }
+      }
+    },
+    "column-wide": {
+      "$value": "920px; /* SOURCE 844px; widened 2026-08-06 with the container */ --cg-page-pad: 32px",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-column-wide"
+        }
+      }
+    },
+    "page-pad": {
+      "$value": "32px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-page-pad"
+        }
+      }
+    },
+    "header-height": {
+      "$value": "90px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-header-height"
+        }
+      }
+    },
+    "footer-height": {
+      "$value": "64px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-footer-height"
+        }
+      }
+    },
+    "stack-tight": {
+      "$value": "8px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-stack-tight"
+        }
+      }
+    },
+    "stack": {
+      "$value": "16px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-stack"
+        }
+      }
+    },
+    "stack-loose": {
+      "$value": "24px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-stack-loose"
+        }
+      }
+    },
+    "section-gap": {
+      "$value": "56px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-section-gap"
+        }
+      }
+    },
+    "container": {
+      "$value": "1280px",
+      "$type": "dimension",
+      "$description": "Marketing pages are wider than the onboarding frames the system was\nmeasured from, so the site adds one container width of its own.\n1120 -> 1280 on 2026-08-06 (operator: too much white space at the sides).",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-container"
+        }
+      }
+    },
+    "measure": {
+      "$value": "68ch",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-measure"
+        }
+      }
+    }
+  },
+  "corners": {
+    "radius-xs": {
+      "$value": "8px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-radius-xs"
+        }
+      }
+    },
+    "radius-sm": {
+      "$value": "10px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-radius-sm"
+        }
+      }
+    },
+    "radius-md": {
+      "$value": "12px; /* SOURCE: code block, OTP cell */ --cg-radius-lg: 14px; /* SOURCE: provider button, input, tool card */ --cg-radius-xl: 16px; /* SOURCE: option card */ --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-radius-md"
+        }
+      }
+    },
+    "radius-lg": {
+      "$value": "14px; /* SOURCE: provider button, input, tool card */ --cg-radius-xl: 16px; /* SOURCE: option card */ --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-radius-lg"
+        }
+      }
+    },
+    "radius-xl": {
+      "$value": "16px; /* SOURCE: option card */ --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-radius-xl"
+        }
+      }
+    },
+    "radius-2xl": {
+      "$value": "24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-radius-2xl"
+        }
+      }
+    },
+    "radius-pill": {
+      "$value": "999px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-radius-pill"
+        }
+      }
+    },
+    "border-width": {
+      "$value": "1px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-width"
+        }
+      }
+    },
+    "border-width-strong": {
+      "$value": "1.5px",
+      "$type": "dimension",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-border-width-strong"
+        }
+      }
+    }
+  },
+  "elevation": {
+    "$description": "elevation: hairlines first, shadow only on the wash or on hover",
+    "shadow-none": {
+      "$value": "none",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-shadow-none"
+        }
+      }
+    },
+    "shadow-card": {
+      "$value": "0 1px 2px rgba(34, 34, 34, 0.04)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-shadow-card"
+        }
+      }
+    },
+    "shadow-raised": {
+      "$value": "0 4px 14px rgba(34, 34, 34, 0.06)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-shadow-raised"
+        }
+      }
+    },
+    "shadow-hover": {
+      "$value": "0 8px 24px rgba(34, 34, 34, 0.08)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-shadow-hover"
+        }
+      }
+    },
+    "shadow-panel": {
+      "$value": "0 10px 40px rgba(90, 71, 240, 0.18)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-shadow-panel"
+        }
+      }
+    },
+    "ring-focus": {
+      "$value": "0 0 0 3px var(--cg-focus-ring)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-ring-focus"
+        }
+      }
+    }
+  },
+  "motion": {
+    "$description": "motion: small and quick, nothing slides in",
+    "duration-fast": {
+      "$value": "120ms",
+      "$type": "duration",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-duration-fast"
+        }
+      }
+    },
+    "duration": {
+      "$value": "180ms",
+      "$type": "duration",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-duration"
+        }
+      }
+    },
+    "duration-slow": {
+      "$value": "280ms",
+      "$type": "duration",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-duration-slow"
+        }
+      }
+    },
+    "ease-out": {
+      "$value": "cubic-bezier(0, 0, 0.2, 1)",
+      "$type": "cubicBezier",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-ease-out"
+        }
+      }
+    },
+    "ease-in-out": {
+      "$value": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "$type": "cubicBezier",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-ease-in-out"
+        }
+      }
+    },
+    "transition-control": {
+      "$value": "background-color var(--cg-duration) var(--cg-ease-out), border-color var(--cg-duration) var(--cg-ease-out), color var(--cg-duration) var(--cg-ease-out), box-shadow var(--cg-duration) var(--cg-ease-out)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-transition-control"
+        }
+      }
+    },
+    "lift-hover": {
+      "$value": "translateY(-1px)",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-lift-hover"
+        }
+      }
+    },
+    "press-scale": {
+      "$value": "0.985",
+      "$type": "number",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-press-scale"
+        }
+      }
+    }
+  }
+}