@franco_roura/module-01 0.0.0-stage → 1.0.1

package/tokens/tokens.json

@@ -0,0 +1,739 @@
+{
+  "name": "Module/01",
+  "version": 3,
+  "color": {
+    "themes": [
+      {
+        "id": "light",
+        "name": "Light"
+      }
+    ],
+    "tokens": [
+      {
+        "name": "graphite-50",
+        "value": "#f3f4f6",
+        "usage": "Neutral scale with a cool cast: the plastic, its seams and the ink. This step is canvas."
+      },
+      {
+        "name": "graphite-100",
+        "value": "#e7e9ec",
+        "usage": "Neutral scale with a cool cast: the plastic, its seams and the ink. This step is shell-recess."
+      },
+      {
+        "name": "graphite-200",
+        "value": "#d8dadf",
+        "usage": "Neutral scale with a cool cast: the plastic, its seams and the ink. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "graphite-300",
+        "value": "#c9ccd2",
+        "usage": "Neutral scale with a cool cast: the plastic, its seams and the ink. This step is seam."
+      },
+      {
+        "name": "graphite-400",
+        "value": "#a3a7ae",
+        "usage": "Neutral scale with a cool cast: the plastic, its seams and the ink. This step is visor-mark."
+      },
+      {
+        "name": "graphite-500",
+        "value": "#7c818a",
+        "usage": "Neutral scale with a cool cast: the plastic, its seams and the ink. This step is hud-mark."
+      },
+      {
+        "name": "graphite-600",
+        "value": "#676c74",
+        "usage": "Neutral scale with a cool cast: the plastic, its seams and the ink. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "graphite-700",
+        "value": "#53575e",
+        "usage": "Neutral scale with a cool cast: the plastic, its seams and the ink. This step is ink-soft."
+      },
+      {
+        "name": "graphite-800",
+        "value": "#36393e",
+        "usage": "Neutral scale with a cool cast: the plastic, its seams and the ink. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "graphite-900",
+        "value": "#1c1e21",
+        "usage": "Neutral scale with a cool cast: the plastic, its seams and the ink. This step is ink, visor."
+      },
+      {
+        "name": "signal-50",
+        "value": "#ffe9dd",
+        "usage": "Signal orange scale: the trim color of the system. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "signal-100",
+        "value": "#ffd9c7",
+        "usage": "Signal orange scale: the trim color of the system. This step is signal-tint."
+      },
+      {
+        "name": "signal-200",
+        "value": "#ffbda2",
+        "usage": "Signal orange scale: the trim color of the system. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "signal-300",
+        "value": "#ffa17d",
+        "usage": "Signal orange scale: the trim color of the system. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "signal-400",
+        "value": "#ff8255",
+        "usage": "Signal orange scale: the trim color of the system. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "signal-500",
+        "value": "#ff5f1f",
+        "usage": "Signal orange scale: the trim color of the system. This step is signal."
+      },
+      {
+        "name": "signal-600",
+        "value": "#d94a12",
+        "usage": "Signal orange scale: the trim color of the system. This step is signal-shade."
+      },
+      {
+        "name": "signal-700",
+        "value": "#b93d0a",
+        "usage": "Signal orange scale: the trim color of the system. This step is signal-ink."
+      },
+      {
+        "name": "signal-800",
+        "value": "#8c2e08",
+        "usage": "Signal orange scale: the trim color of the system. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "signal-900",
+        "value": "#612005",
+        "usage": "Signal orange scale: the trim color of the system. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "green-50",
+        "value": "#dff2e5",
+        "usage": "Green scale: live and available states, income. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "green-100",
+        "value": "#cdead5",
+        "usage": "Green scale: live and available states, income. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "green-200",
+        "value": "#a8d9b6",
+        "usage": "Green scale: live and available states, income. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "green-300",
+        "value": "#83c797",
+        "usage": "Green scale: live and available states, income. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "green-400",
+        "value": "#59b679",
+        "usage": "Green scale: live and available states, income. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "green-500",
+        "value": "#1fa45a",
+        "usage": "Green scale: live and available states, income. This step is led-on."
+      },
+      {
+        "name": "green-600",
+        "value": "#1f8f55",
+        "usage": "Green scale: live and available states, income. This step is chart-income."
+      },
+      {
+        "name": "green-700",
+        "value": "#0f6e38",
+        "usage": "Green scale: live and available states, income. This step is income-ink."
+      },
+      {
+        "name": "green-800",
+        "value": "#0d552b",
+        "usage": "Green scale: live and available states, income. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "green-900",
+        "value": "#093d1f",
+        "usage": "Green scale: live and available states, income. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "red-50",
+        "value": "#feedeb",
+        "usage": "Red scale: danger, errors and expenses. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "red-100",
+        "value": "#fde4e1",
+        "usage": "Red scale: danger, errors and expenses. This step is danger-tint."
+      },
+      {
+        "name": "red-200",
+        "value": "#f8bfb5",
+        "usage": "Red scale: danger, errors and expenses. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "red-300",
+        "value": "#f19989",
+        "usage": "Red scale: danger, errors and expenses. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "red-400",
+        "value": "#e6715e",
+        "usage": "Red scale: danger, errors and expenses. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "red-500",
+        "value": "#d9442e",
+        "usage": "Red scale: danger, errors and expenses. This step is chart-expense."
+      },
+      {
+        "name": "red-600",
+        "value": "#c63423",
+        "usage": "Red scale: danger, errors and expenses. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "red-700",
+        "value": "#b42318",
+        "usage": "Red scale: danger, errors and expenses. This step is danger, expense-ink."
+      },
+      {
+        "name": "red-800",
+        "value": "#8a1b12",
+        "usage": "Red scale: danger, errors and expenses. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "red-900",
+        "value": "#62120c",
+        "usage": "Red scale: danger, errors and expenses. Reach for the named tokens first; use a raw step only when none fits."
+      },
+      {
+        "name": "canvas",
+        "value": "{graphite-50}",
+        "usage": "Page background: glossy white plastic with a faint cool cast. Never pure white for the page."
+      },
+      {
+        "name": "shell",
+        "value": "#ffffff",
+        "usage": "Molded part surface: panels, cards, nav, secondary buttons. Sits on canvas, lifted by shadow-mold."
+      },
+      {
+        "name": "shell-recess",
+        "value": "{graphite-100}",
+        "usage": "Sunken areas: tag fills, grill slots, pressed states, input wells."
+      },
+      {
+        "name": "seam",
+        "value": "{graphite-300}",
+        "usage": "Panel seams and dividers between molded parts. Decorative line, never text."
+      },
+      {
+        "name": "ink",
+        "value": "{graphite-900}",
+        "usage": "Graphite. All headings and body text on canvas (15.2:1), shell and shell-recess (13.7:1), and on signal (5.5:1)."
+      },
+      {
+        "name": "ink-soft",
+        "value": "{graphite-700}",
+        "usage": "Secondary text: captions, descriptions, metadata on canvas (6.6:1) and shell-recess (5.97:1)."
+      },
+      {
+        "name": "hud-mark",
+        "value": "{graphite-500}",
+        "usage": "HUD markings: tick rulers, crosshairs, corner brackets, decorative microprint. Readable microprint that carries meaning uses ink-soft instead."
+      },
+      {
+        "name": "signal",
+        "value": "{signal-500}",
+        "usage": "Signal orange, used generously as a part color: primary buttons, hinge tabs, code chips, meter fills, feature blocks. Text on it is always ink, never white (white is 3.04:1)."
+      },
+      {
+        "name": "signal-ink",
+        "value": "{signal-700}",
+        "usage": "Orange as text and focus ring: links, HUD codes, active nav (5.11:1 on canvas, 5.62:1 on shell)."
+      },
+      {
+        "name": "signal-shade",
+        "value": "{signal-600}",
+        "usage": "Slots and seams cut into a signal surface (grill on the call-to-action block). Decorative only."
+      },
+      {
+        "name": "signal-tint",
+        "value": "{signal-100}",
+        "usage": "Soft orange fill: highlighted tags, LED halo, selection. Text on it is ink (12.7:1)."
+      },
+      {
+        "name": "studio",
+        "value": "#b9bccd",
+        "usage": "Lavender-grey studio backdrop behind images, screenshots and media; ink text on it is 8.9:1."
+      },
+      {
+        "name": "visor",
+        "value": "{graphite-900}",
+        "usage": "Black-glass surface (the car's windows): terminal snippets and dark inset screens. Text on it is shell (16.7:1); HUD on it is visor-mark."
+      },
+      {
+        "name": "visor-mark",
+        "value": "{graphite-400}",
+        "usage": "HUD markings and secondary text on visor (6.9:1)."
+      },
+      {
+        "name": "glass",
+        "value": "rgba(255,255,255,0.62)",
+        "usage": "Frosted clear plastic (the dome, the clear case): nav bar and glass panels, always with a backdrop blur."
+      },
+      {
+        "name": "glass-edge",
+        "value": "rgba(255,255,255,0.95)",
+        "usage": "1px inner highlight on glass and molded edges."
+      },
+      {
+        "name": "led-on",
+        "value": "{green-500}",
+        "usage": "Status LED for 'available' and 'live'. Always paired with a word; 3.3:1 on shell as a mark."
+      },
+      {
+        "name": "income-ink",
+        "value": "{green-700}",
+        "usage": "Income amounts and positive balances as text (6.35:1 on shell, 5.77:1 on canvas, 5.22:1 on shell-recess). Always shown with a + sign; never the only cue."
+      },
+      {
+        "name": "expense-ink",
+        "value": "{red-700}",
+        "usage": "Expense amounts and negative balances as text (6.6:1 on shell, 6.0:1 on canvas, 5.4:1 on shell-recess). Always shown with a − sign; never the only cue."
+      },
+      {
+        "name": "danger",
+        "value": "{red-700}",
+        "usage": "Destructive actions: delete buttons (shell text on it, 6.6:1) and error text on shell/canvas."
+      },
+      {
+        "name": "danger-tint",
+        "value": "{red-100}",
+        "usage": "Soft error fill: invalid input wells, destructive confirm panels. Text on it is ink or danger."
+      },
+      {
+        "name": "overlay",
+        "value": "rgba(28,30,33,0.36)",
+        "usage": "Scrim behind dialogs and sheets."
+      },
+      {
+        "name": "cat-red",
+        "value": "#f2706a",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-orange",
+        "value": "#ff8a4c",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-amber",
+        "value": "#f5b43a",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-yellow",
+        "value": "#f2d24b",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-lime",
+        "value": "#b5d65a",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-green",
+        "value": "#5cc98a",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-teal",
+        "value": "#4cc4b4",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-cyan",
+        "value": "#5cc6e0",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-sky",
+        "value": "#7fb8f5",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-blue",
+        "value": "#6f9ef2",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-indigo",
+        "value": "#8f95f0",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-violet",
+        "value": "#b08cf0",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-pink",
+        "value": "#f08cc8",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-rose",
+        "value": "#f58ca0",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-brown",
+        "value": "#c9a27a",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "cat-slate",
+        "value": "#a3abb8",
+        "usage": "Category and label palette: the disc behind a category icon or a label dot. Icon glyphs on it are ink (≥5.8:1). Decorative fill, never text."
+      },
+      {
+        "name": "chart-income",
+        "value": "{green-600}",
+        "usage": "Chart marks for income (bars above the baseline). Validated with chart-expense: CVD ΔE 7.4, so always pair with position (up/down) and a legend. Marks only, never text."
+      },
+      {
+        "name": "chart-expense",
+        "value": "{red-500}",
+        "usage": "Chart marks for expenses (bars below the baseline). See chart-income. Marks only, never text."
+      },
+      {
+        "name": "chart-line",
+        "value": "{signal-ink}",
+        "usage": "Single-series lines such as the balance line (signal-ink, 5.6:1 on shell). The area under it uses signal-tint."
+      }
+    ]
+  },
+  "type": {
+    "fonts": [],
+    "families": {
+      "display": "Michroma, \"Eurostile\", \"Microgramma\", system-ui, sans-serif",
+      "sans": "Manrope, system-ui, \"Segoe UI\", sans-serif",
+      "mono": "\"Space Mono\", ui-monospace, Menlo, Consolas, monospace"
+    },
+    "groups": [
+      {
+        "name": "Display",
+        "family": "display",
+        "styles": [
+          {
+            "name": "display-xl",
+            "fontSize": "56px",
+            "fontWeight": 400,
+            "lineHeight": 1.1,
+            "letterSpacing": "-0.01em",
+            "usage": "The one hero title on a page: the page title or product name.",
+            "sample": "Northwind Atlas"
+          },
+          {
+            "name": "display-lg",
+            "fontSize": "36px",
+            "fontWeight": 400,
+            "lineHeight": 1.15,
+            "letterSpacing": "-0.01em",
+            "usage": "Section and page headings: plain words like Overview, Settings.",
+            "sample": "Overview"
+          },
+          {
+            "name": "display-md",
+            "fontSize": "24px",
+            "fontWeight": 400,
+            "lineHeight": 1.25,
+            "letterSpacing": "0",
+            "usage": "Feature block headlines, large card titles.",
+            "sample": "Start building"
+          },
+          {
+            "name": "display-sm",
+            "fontSize": "17px",
+            "fontWeight": 400,
+            "lineHeight": 1.35,
+            "letterSpacing": "0.01em",
+            "usage": "Card and entry titles, the nav mark.",
+            "sample": "Signal Weather"
+          }
+        ]
+      },
+      {
+        "name": "Body",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "body-lg",
+            "fontSize": "19px",
+            "fontWeight": 400,
+            "lineHeight": 1.55,
+            "letterSpacing": "0",
+            "usage": "Intro lines and lead paragraphs.",
+            "sample": "Collect field readings anywhere, even offline."
+          },
+          {
+            "name": "body-md",
+            "fontSize": "16px",
+            "fontWeight": 400,
+            "lineHeight": 1.6,
+            "letterSpacing": "0",
+            "usage": "Default paragraphs and bullets.",
+            "sample": "Led the redesign of the device setup flow."
+          },
+          {
+            "name": "body-sm",
+            "fontSize": "14px",
+            "fontWeight": 400,
+            "lineHeight": 1.5,
+            "letterSpacing": "0",
+            "usage": "Card descriptions, captions, secondary details.",
+            "sample": "A tiny weather station on a microcontroller."
+          },
+          {
+            "name": "label",
+            "fontSize": "14px",
+            "fontWeight": 700,
+            "lineHeight": 1.2,
+            "letterSpacing": "0.01em",
+            "usage": "Buttons, nav links, spec values.",
+            "sample": "View details"
+          }
+        ]
+      },
+      {
+        "name": "HUD",
+        "family": "mono",
+        "styles": [
+          {
+            "name": "hud",
+            "fontSize": "12px",
+            "fontWeight": 400,
+            "lineHeight": 1.3,
+            "letterSpacing": "0.12em",
+            "usage": "Uppercase labels and codes: section codes, spec labels, tags. Set uppercase.",
+            "sample": "SEC-02 // FEATURES"
+          },
+          {
+            "name": "hud-sm",
+            "fontSize": "10px",
+            "fontWeight": 400,
+            "lineHeight": 1.2,
+            "letterSpacing": "0.16em",
+            "usage": "Microprint: serials, coordinates, ruler numbers. Uppercase; decorative or ink-soft.",
+            "sample": "MOD-01 · REV.B · 34.90S 56.16W"
+          },
+          {
+            "name": "hud-num",
+            "fontSize": "13px",
+            "fontWeight": 400,
+            "lineHeight": 1.3,
+            "letterSpacing": "0.04em",
+            "usage": "Dates, ranges and small figures.",
+            "sample": "2022.03 — 2024.08"
+          },
+          {
+            "name": "code",
+            "fontSize": "14px",
+            "fontWeight": 400,
+            "lineHeight": 1.6,
+            "letterSpacing": "0",
+            "usage": "Inline code and terminal snippets on visor.",
+            "sample": "npm run build"
+          }
+        ]
+      },
+      {
+        "name": "Figures",
+        "family": "mono",
+        "styles": [
+          {
+            "name": "amount-xl",
+            "fontSize": "32px",
+            "fontWeight": 400,
+            "lineHeight": 1.15,
+            "letterSpacing": "-0.01em",
+            "usage": "Headline figure on a summary tile or an account.",
+            "sample": "+1,234.56 USD"
+          },
+          {
+            "name": "amount-lg",
+            "fontSize": "22px",
+            "fontWeight": 400,
+            "lineHeight": 1.2,
+            "letterSpacing": "0",
+            "usage": "Summary tile figures and card balances.",
+            "sample": "-2,480.15 USD"
+          },
+          {
+            "name": "amount-md",
+            "fontSize": "15px",
+            "fontWeight": 700,
+            "lineHeight": 1.3,
+            "letterSpacing": "0",
+            "usage": "Amounts in transaction rows and day totals.",
+            "sample": "-10.76"
+          }
+        ]
+      }
+    ]
+  },
+  "spacing": {
+    "tokens": [
+      {
+        "name": "space-1",
+        "value": "4px",
+        "usage": "Icon-to-label gaps; microprint offsets."
+      },
+      {
+        "name": "space-2",
+        "value": "8px",
+        "usage": "Tag padding, tight stacks, tick minor pitch."
+      },
+      {
+        "name": "space-3",
+        "value": "12px",
+        "usage": "Gap between HUD label and heading."
+      },
+      {
+        "name": "space-4",
+        "value": "16px",
+        "usage": "Button horizontal padding, list gaps."
+      },
+      {
+        "name": "space-6",
+        "value": "24px",
+        "usage": "Panel padding, grid gutters."
+      },
+      {
+        "name": "space-8",
+        "value": "32px",
+        "usage": "Large panel padding, gap between cards."
+      },
+      {
+        "name": "space-12",
+        "value": "48px",
+        "usage": "Gap between a section header and its content; page side padding on desktop."
+      },
+      {
+        "name": "space-16",
+        "value": "64px",
+        "usage": "Hero padding."
+      },
+      {
+        "name": "space-24",
+        "value": "96px",
+        "usage": "Gap between page sections."
+      }
+    ]
+  },
+  "radius": {
+    "tokens": [
+      {
+        "name": "radius-xs",
+        "value": "4px",
+        "usage": "Code chips and HUD code blocks."
+      },
+      {
+        "name": "radius-sm",
+        "value": "8px",
+        "usage": "Small frames, inline wells, image thumbnails."
+      },
+      {
+        "name": "radius-md",
+        "value": "14px",
+        "usage": "Media frames inside cards, inputs."
+      },
+      {
+        "name": "radius-lg",
+        "value": "24px",
+        "usage": "Panels, cards, glass panels: the main molded part."
+      },
+      {
+        "name": "radius-xl",
+        "value": "36px",
+        "usage": "Hero and feature blocks."
+      },
+      {
+        "name": "radius-full",
+        "value": "999px",
+        "usage": "Stadium shapes: buttons, tags, grill slots, hinge tabs, the nav bar."
+      }
+    ]
+  },
+  "notch": {
+    "note": "The hard cut in a soft part: one chamfered corner (top-right by default) on panels, cards and blocks.",
+    "tokens": [
+      {
+        "name": "notch-sm",
+        "value": "10px",
+        "usage": "Tags and small chips that take a notch."
+      },
+      {
+        "name": "notch-md",
+        "value": "20px",
+        "usage": "Panels and cards."
+      },
+      {
+        "name": "notch-lg",
+        "value": "36px",
+        "usage": "Hero and feature blocks."
+      }
+    ]
+  },
+  "shadow": {
+    "tokens": [
+      {
+        "name": "shadow-mold",
+        "value": "inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -2px 0 rgba(28,30,33,0.06), 0 2px 4px rgba(28,30,33,0.06), 0 10px 24px rgba(28,30,33,0.08)",
+        "usage": "Molded plastic: buttons and small parts. Highlight on top, shade at the bottom edge."
+      },
+      {
+        "name": "shadow-press",
+        "value": "inset 0 2px 5px rgba(28,30,33,0.16)",
+        "usage": "Pressed buttons and sunken grill slots."
+      },
+      {
+        "name": "shadow-float",
+        "value": "0 4px 10px rgba(28,30,33,0.06), 0 24px 48px rgba(28,30,33,0.10)",
+        "usage": "Panels and cards resting on canvas (applied as a drop-shadow so notches keep it)."
+      },
+      {
+        "name": "shadow-glass",
+        "value": "inset 0 0 0 1px rgba(255,255,255,0.95), 0 10px 30px rgba(28,30,33,0.10)",
+        "usage": "Glass panels and the nav bar: edge highlight plus a soft float."
+      }
+    ]
+  },
+  "size": {
+    "tokens": [
+      {
+        "name": "content-max",
+        "value": "1120px",
+        "usage": "Max page content width."
+      },
+      {
+        "name": "nav-height",
+        "value": "64px",
+        "usage": "Height of the glass nav bar."
+      },
+      {
+        "name": "control-height",
+        "value": "44px",
+        "usage": "Buttons and inputs (also the minimum touch target)."
+      },
+      {
+        "name": "sheet-max",
+        "value": "560px",
+        "usage": "Max width of side sheets and the transaction editor on desktop."
+      }
+    ]
+  }
+}