{
 "name": "TopxAI Paper",
 "version": 1,
 "color": {
  "note": "Neutrals are warm white and warm charcoal; brand blue is kept for primary buttons, focus, selection and running states. Every colour has a light and a dark value.",
  "themes": [
   {
    "id": "light",
    "name": "Light"
   },
   {
    "id": "dark",
    "name": "Dark"
   }
  ],
  "tokens": [
   {
    "name": "bg-app",
    "value": {
     "light": "#f2f0eb",
     "dark": "#161513"
    },
    "usage": "Window ground; the sidebar sits directly on it."
   },
   {
    "name": "bg-canvas",
    "value": {
     "light": "#faf9f6",
     "dark": "#1b1a18"
    },
    "usage": "The session area and the content area of Settings."
   },
   {
    "name": "bg-raised",
    "value": {
     "light": "#fffefc",
     "dark": "#232220"
    },
    "usage": "Cards, inputs, menus, secondary buttons."
   },
   {
    "name": "bg-sunken",
    "value": {
     "light": "#f4f2ee",
     "dark": "#191816"
    },
    "usage": "Code blocks, the composer footer, the track of a segmented control."
   },
   {
    "name": "bg-hover",
    "value": {
     "light": "#ebe8e2",
     "dark": "#282724"
    },
    "usage": "Hover."
   },
   {
    "name": "bg-selected",
    "value": {
     "light": "#e6e2da",
     "dark": "#302e2a"
    },
    "usage": "Selected sidebar rows and tabs; the selected segment in the dark theme."
   },
   {
    "name": "bg-inverse",
    "value": {
     "light": "#1f1d1a",
     "dark": "#edebe6"
    },
    "usage": "Tooltips, the Stop button."
   },
   {
    "name": "bg-user",
    "value": {
     "light": "#eeebe4",
     "dark": "#2b2a27"
    },
    "usage": "Bubbles for messages you send."
   },
   {
    "name": "overlay",
    "value": {
     "light": "rgba(31, 29, 26, 0.32)",
     "dark": "rgba(0, 0, 0, 0.56)"
    },
    "usage": "The scrim behind a dialog. New in 1.1."
   },
   {
    "name": "border-subtle",
    "value": {
     "light": "#ebe8e1",
     "dark": "#282724"
    },
    "usage": "Dividers inside cards; the outline of blocks in the conversation."
   },
   {
    "name": "border",
    "value": {
     "light": "#dedad1",
     "dark": "#34322e"
    },
    "usage": "Outlines of cards, menus, buttons and the composer. Form controls use control-border."
   },
   {
    "name": "border-strong",
    "value": {
     "light": "#c8c3b8",
     "dark": "#48453f"
    },
    "usage": "The Idle status dot. Form controls now use control-border."
   },
   {
    "name": "control-border",
    "value": {
     "light": "#847f75",
     "dark": "#7c7870"
    },
    "usage": "Edges of text fields, checkboxes and radios, and a switch that is off. At least 3.08 / 3.08 on all six bg-* grounds, so control outlines reach 3:1. New in 1.1."
   },
   {
    "name": "text",
    "value": {
     "light": "#1f1d1a",
     "dark": "#edebe6"
    },
    "usage": "Body text and headings. Lowest contrast on bg-app, bg-canvas, bg-raised, bg-sunken, bg-hover and bg-selected: 13.02 (light) / 11.37 (dark)."
   },
   {
    "name": "text-2",
    "value": {
     "light": "#57534b",
     "dark": "#b5b1a8"
    },
    "usage": "Secondary text, sidebar rows. At least 5.92 / 6.34 on the six grounds."
   },
   {
    "name": "text-3",
    "value": {
     "light": "#69645b",
     "dark": "#99958b"
    },
    "usage": "Meta, placeholders, help text. At least 4.55 / 4.53 on the six grounds: the lightest level that may carry text people read."
   },
   {
    "name": "text-4",
    "value": {
     "light": "#a39e94",
     "dark": "#64605a"
    },
    "usage": "Only for disabled states and decorative icons. Below 4.5:1, so never for text people need to read."
   },
   {
    "name": "text-inverse",
    "value": {
     "light": "#faf9f6",
     "dark": "#1b1a18"
    },
    "usage": "Text on bg-inverse: 15.97 / 14.60."
   },
   {
    "name": "accent",
    "value": {
     "light": "#2458ef",
     "dark": "#2f62f0"
    },
    "usage": "Primary buttons, Send, a switch that is on, progress, Running. Text on it uses on-accent: 5.65 (light) / 5.09 (dark)."
   },
   {
    "name": "accent-hover",
    "value": {
     "light": "#1d4bd6",
     "dark": "#3767f0"
    },
    "usage": "Primary button hover. White text above 7.0 (light) / 4.82 (dark)."
   },
   {
    "name": "accent-pressed",
    "value": {
     "light": "#1a41b8",
     "dark": "#2552d8"
    },
    "usage": "Primary button pressed."
   },
   {
    "name": "accent-text",
    "value": {
     "light": "#1f4fd9",
     "dark": "#86a6ff"
    },
    "usage": "Blue text, file paths, links, the Running status at the end of a row. At least 5.11 / 5.75 on the six grounds."
   },
   {
    "name": "accent-soft",
    "value": {
     "light": "#ebf0fe",
     "dark": "#1f2640"
    },
    "usage": "Ground of a selected menu item, info tags, info banners and file-path chips."
   },
   {
    "name": "accent-soft-2",
    "value": {
     "light": "#dce5fd",
     "dark": "#27305a"
    },
    "usage": "The halo of the Running dot; the track of a spinner."
   },
   {
    "name": "selection",
    "value": "{accent-soft-2}",
    "usage": "Ground of selected text. New in 1.1."
   },
   {
    "name": "on-accent",
    "value": {
     "light": "#ffffff",
     "dark": "#ffffff"
    },
    "usage": "Text and icons on accent."
   },
   {
    "name": "focus",
    "value": "{accent-text}",
    "usage": "Keyboard focus: a 2px solid outline, offset 2px, following the corners, shown only on :focus-visible. Equals accent-text; at least 5.11 / 5.75 on the six grounds. New in 1.1."
   },
   {
    "name": "success",
    "value": {
     "light": "#2a7047",
     "dark": "#62c08a"
    },
    "usage": "Success text and icons. At least 4.64 / 6.08 (light / dark) on the six bg-* grounds and success-soft. 1.1 moved the light value from #2b7349 to #2a7047; the old value reached only 4.45 on bg-selected."
   },
   {
    "name": "success-soft",
    "value": {
     "light": "#e7f2ea",
     "dark": "#1b2a21"
    },
    "usage": "Ground of success tags."
   },
   {
    "name": "success-dot",
    "value": {
     "light": "#3b9a63",
     "dark": "#4fb179"
    },
    "usage": "Success dots and finished progress segments."
   },
   {
    "name": "warning",
    "value": {
     "light": "#8f5410",
     "dark": "#e2a853"
    },
    "usage": "Text and icons for Needs you and updates. At least 4.72 / 6.43 (light / dark) on the six bg-* grounds and warning-soft."
   },
   {
    "name": "warning-soft",
    "value": {
     "light": "#fbf1de",
     "dark": "#2b2418"
    },
    "usage": "Ground of warning tags, warning banners and the approval icon tile."
   },
   {
    "name": "warning-dot",
    "value": {
     "light": "#d98c1f",
     "dark": "#e09a37"
    },
    "usage": "The Needs you dot, favourite stars, the edge of warning banners."
   },
   {
    "name": "danger",
    "value": {
     "light": "#b8352a",
     "dark": "#f2847a"
    },
    "usage": "Text and icons for failures and deletions. At least 4.54 / 5.39 (light / dark) on the six bg-* grounds and danger-soft."
   },
   {
    "name": "danger-soft",
    "value": {
     "light": "#fbeae7",
     "dark": "#2f1c1a"
    },
    "usage": "Ground of failure tags and banners, and of danger buttons."
   },
   {
    "name": "danger-dot",
    "value": {
     "light": "#d9493c",
     "dark": "#e8665a"
    },
    "usage": "The edge of a field with an error; the edge of failure banners."
   },
   {
    "name": "code-bg",
    "value": {
     "light": "#efece6",
     "dark": "#2a2926"
    },
    "usage": "Ground of inline code."
   },
   {
    "name": "code-text",
    "value": {
     "light": "#3b372f",
     "dark": "#d9d5cc"
    },
    "usage": "Code text: 10.04 / 9.93 on code-bg and bg-sunken."
   },
   {
    "name": "syn-keyword",
    "value": {
     "light": "#8a3fa6",
     "dark": "#d59bf0"
    },
    "usage": "Keywords in code."
   },
   {
    "name": "syn-fn",
    "value": {
     "light": "#1f4fd9",
     "dark": "#86a6ff"
    },
    "usage": "Function names in code."
   },
   {
    "name": "syn-string",
    "value": {
     "light": "#2b7349",
     "dark": "#7ccb98"
    },
    "usage": "Strings in code."
   },
   {
    "name": "syn-type",
    "value": {
     "light": "#9a5b0b",
     "dark": "#e2a853"
    },
    "usage": "Types in code."
   },
   {
    "name": "syn-comment",
    "value": {
     "light": "#6e6a62",
     "dark": "#938f83"
    },
    "usage": "Comments in code: 4.57 / 4.50 on the code block ground."
   },
   {
    "name": "agent-1",
    "value": {
     "light": "#4f6bed",
     "dark": "#7d93ff"
    },
    "usage": "The first member to join a multi-agent run: avatar ground and chip. White avatar letters reach only 2.2 to 2.8:1 in the dark theme, and agent-2 (4.06) and agent-4 (3.64) stay below 4.5:1 in the light theme; the letter is only an initial and the member's name is always written beside it. Kept as in the original design."
   },
   {
    "name": "agent-2",
    "value": {
     "light": "#2a8c82",
     "dark": "#4fb8ac"
    },
    "usage": "The second member to join a multi-agent run."
   },
   {
    "name": "agent-3",
    "value": {
     "light": "#7a5cc7",
     "dark": "#a58bef"
    },
    "usage": "The third member to join a multi-agent run."
   },
   {
    "name": "agent-4",
    "value": {
     "light": "#b7791f",
     "dark": "#e0a64e"
    },
    "usage": "The fourth member to join a multi-agent run."
   },
   {
    "name": "agent-5",
    "value": {
     "light": "#c2456a",
     "dark": "#ef7d9c"
    },
    "usage": "The fifth member to join a multi-agent run."
   },
   {
    "name": "agent-6",
    "value": {
     "light": "#6f7d2c",
     "dark": "#a7b45a"
    },
    "usage": "The sixth member to join a multi-agent run."
   },
   {
    "name": "brand-panel-1",
    "value": {
     "light": "#2152e6",
     "dark": "#1a3ca8"
    },
    "usage": "Start of the brand panel gradient (0%). The sign-in poster and launch art fill with a 160° linear gradient."
   },
   {
    "name": "brand-panel-2",
    "value": {
     "light": "#1a40c0",
     "dark": "#132e86"
    },
    "usage": "Middle of the brand panel gradient (46%)."
   },
   {
    "name": "brand-panel-3",
    "value": {
     "light": "#0f2a84",
     "dark": "#0a1b52"
    },
    "usage": "End of the brand panel gradient (100%). The dark theme uses a deeper ink blue throughout."
   },
   {
    "name": "paper",
    "value": "#f4efe6",
    "usage": "Main text on the brand panel: the poster line and the quotes. 5.37 at the lightest point of the gradient (light brand-panel-1)."
   },
   {
    "name": "paper-2",
    "value": "rgba(244, 239, 230, 0.72)",
    "usage": "Secondary text on the brand panel: the second-language line (26px) and quote sources. 3.52 at the lightest point and 4.49 in the middle, which meets 3:1 for large text; 13px sources sit in the lower half of the gradient. Kept as in the original design."
   },
   {
    "name": "paper-3",
    "value": "rgba(244, 239, 230, 0.5)",
    "usage": "Page numbers and decorative lines on the brand panel: 2.42 at the lightest point, so never for text people need to read."
   }
  ]
 },
 "type": {
  "fonts": [
   {
    "family": "Noto Serif SC",
    "file": "fonts/NotoSerifSC-Variable-subset.woff2",
    "weight": "200 900",
    "style": "normal"
   },
   {
    "family": "Instrument Serif",
    "file": "fonts/InstrumentSerif-Regular.woff2",
    "weight": "400",
    "style": "normal"
   },
   {
    "family": "Instrument Serif",
    "file": "fonts/InstrumentSerif-Italic.woff2",
    "weight": "400",
    "style": "italic"
   },
   {
    "family": "JetBrains Mono",
    "file": "fonts/JetBrainsMono-latin-wght-normal.woff2",
    "weight": "100 800",
    "style": "normal"
   }
  ],
  "families": {
   "ui": "-apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", sans-serif",
   "display": "\"Noto Serif SC\", \"Songti SC\", serif",
   "latin": "\"Instrument Serif\", \"Noto Serif SC\", serif",
   "mono": "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, monospace"
  },
  "groups": [
   {
    "name": "Brand, Chinese interface",
    "family": "display",
    "note": "Only for launch, sign-in, the device code and the Home greeting, never in the workspace. Noto Serif SC ships as a subset of 4,695 common characters; a Chinese name in the greeting stays upright. English interfaces use the next group.",
    "styles": [
     {
      "name": "fs-poster",
      "fontSize": "66px",
      "lineHeight": "78px",
      "fontWeight": 300,
      "letterSpacing": "0.035em",
      "sample": "Begin anew.",
      "usage": "The sign-in poster line, its second line indented by one character; vertical quotes use 50 to 64px."
     },
     {
      "name": "fs-greet",
      "fontSize": "34px",
      "lineHeight": "42px",
      "fontWeight": 400,
      "letterSpacing": "0.01em",
      "sample": "Good afternoon",
      "usage": "The Home greeting; the name after it is font-latin italic."
     },
     {
      "name": "fs-display",
      "fontSize": "30px",
      "lineHeight": "38px",
      "fontWeight": 400,
      "letterSpacing": "-0.01em",
      "sample": "Sign in to TopxAI",
      "usage": "Titles of the sign-in and device-code screens."
     },
     {
      "name": "fs-latin",
      "family": "latin",
      "fontSize": "26px",
      "lineHeight": "31px",
      "fontWeight": 400,
      "fontStyle": "italic",
      "letterSpacing": "0.005em",
      "sample": "Begin anew, from here.",
      "usage": "A full English sentence on the Chinese poster and on covers."
     }
    ]
   },
   {
    "name": "Brand, English interface",
    "family": "latin",
    "note": "Instrument Serif for the same four places in English interfaces: launch, sign-in, the device code and the Home greeting. 1.1 English edition.",
    "styles": [
     {
      "name": "fs-poster-en",
      "fontSize": "92px",
      "lineHeight": "92px",
      "fontWeight": 400,
      "letterSpacing": "-0.01em",
      "sample": "Begin anew,",
      "usage": "The sign-in poster line: two lines, the second indented 64px and set in italic."
     },
     {
      "name": "fs-greet-en",
      "fontSize": "48px",
      "lineHeight": "54px",
      "fontWeight": 400,
      "letterSpacing": "-0.005em",
      "sample": "Good afternoon",
      "usage": "The Home greeting; the name after it is italic."
     },
     {
      "name": "fs-display-en",
      "fontSize": "38px",
      "lineHeight": "44px",
      "fontWeight": 400,
      "sample": "Sign in to TopxAI",
      "usage": "Titles of the sign-in and device-code screens."
     },
     {
      "name": "fs-tagline-en",
      "fontSize": "19px",
      "lineHeight": "24px",
      "fontWeight": 400,
      "fontStyle": "italic",
      "letterSpacing": "0.01em",
      "sample": "Begin anew, from here.",
      "usage": "The tagline under the wordmark on the launch screen."
     }
    ]
   },
   {
    "name": "Interface",
    "family": "ui",
    "note": "The system font (SF, PingFang for Chinese). Conversation text 15/26, interface text 13/20.",
    "styles": [
     {
      "name": "fs-title",
      "fontSize": "20px",
      "lineHeight": "28px",
      "fontWeight": 600,
      "sample": "Providers",
      "usage": "Page titles; the whole app uses this one."
     },
     {
      "name": "fs-heading",
      "fontSize": "15px",
      "lineHeight": "22px",
      "fontWeight": 600,
      "sample": "No sessions in this project yet",
      "usage": "Group headings and empty-state headings."
     },
     {
      "name": "fs-chat",
      "fontSize": "15px",
      "lineHeight": "26px",
      "fontWeight": 400,
      "sample": "Found it: the session kept its saved parameters as they were.",
      "usage": "Conversation text, your messages, text in the composer."
     },
     {
      "name": "fs-ui",
      "fontSize": "13px",
      "lineHeight": "20px",
      "fontWeight": 400,
      "sample": "Ask when risky",
      "usage": "Sidebar, buttons, menus, forms."
     },
     {
      "name": "fs-small",
      "fontSize": "12px",
      "lineHeight": "18px",
      "fontWeight": 400,
      "sample": "16:04 · 19k token · $0.06",
      "usage": "Meta, help text, the second line of a toast."
     },
     {
      "name": "fs-label",
      "fontSize": "11px",
      "lineHeight": "16px",
      "fontWeight": 600,
      "letterSpacing": "0.03em",
      "sample": "Projects",
      "usage": "Sidebar section names, table headers, menu section names."
     }
    ]
   },
   {
    "name": "Code",
    "family": "mono",
    "note": "JetBrains Mono, with its latin subset in the kit. Ligatures stay off in code (font-variant-ligatures: none).",
    "styles": [
     {
      "name": "fs-code",
      "fontSize": "12.5px",
      "lineHeight": "20px",
      "fontWeight": 400,
      "sample": "cargo test -p topxai",
      "usage": "Code blocks, commands, file paths."
     }
    ]
   }
  ]
 },
 "spacing": {
  "note": "Multiples of 4 only. Controls in a group sit close; groups sit apart.",
  "tokens": [
   {
    "name": "sp-1",
    "value": "4px",
    "usage": "Between an icon and its text."
   },
   {
    "name": "sp-2",
    "value": "8px",
    "usage": "Inside controls; between buttons in a group."
   },
   {
    "name": "sp-3",
    "value": "12px",
    "usage": "Card padding."
   },
   {
    "name": "sp-4",
    "value": "16px",
    "usage": "Between cards."
   },
   {
    "name": "sp-5",
    "value": "20px",
    "usage": "From the composer to the bottom of the window."
   },
   {
    "name": "sp-6",
    "value": "24px",
    "usage": "Left and right margin of the session area."
   },
   {
    "name": "sp-8",
    "value": "32px",
    "usage": "Between groups in Settings."
   },
   {
    "name": "sp-10",
    "value": "40px",
    "usage": "Above a page title."
   },
   {
    "name": "sp-12",
    "value": "48px",
    "usage": "Between large sections."
   }
  ]
 },
 "radius": {
  "note": "Corners follow size: the larger the surface, the rounder.",
  "tokens": [
   {
    "name": "r-xs",
    "value": "4px",
    "usage": "Inline code, file-path chips, key hints."
   },
   {
    "name": "r-sm",
    "value": "6px",
    "usage": "Small buttons, menu items, icon buttons, tooltips."
   },
   {
    "name": "r-md",
    "value": "8px",
    "usage": "Buttons, text fields, sidebar rows, segmented controls, banners."
   },
   {
    "name": "r-btn-lg",
    "value": "10px",
    "usage": "The 40px button. The only corner off the scale, as in the original design. Recorded in 1.1."
   },
   {
    "name": "r-lg",
    "value": "12px",
    "usage": "Cards, menus, the approval card, toasts, code blocks."
   },
   {
    "name": "r-xl",
    "value": "16px",
    "usage": "The composer."
   },
   {
    "name": "r-2xl",
    "value": "20px",
    "usage": "Dialogs and large popovers."
   },
   {
    "name": "r-full",
    "value": "999px",
    "usage": "Tags, avatars, agent chips, the Send button."
   }
  ]
 },
 "shadow": {
  "note": "Three levels of shadow. Dark-theme shadows are heavier and add a 1px inner highlight so cards separate from the ground.",
  "tokens": [
   {
    "name": "shadow-1",
    "value": {
     "light": "0 1px 0 rgba(31, 29, 26, 0.04)",
     "dark": "0 1px 0 rgba(0, 0, 0, 0.3)"
    },
    "usage": "Secondary buttons, the New session button."
   },
   {
    "name": "shadow-2",
    "value": {
     "light": "0 1px 2px rgba(31, 29, 26, 0.05), 0 8px 28px -10px rgba(31, 29, 26, 0.14)",
     "dark": "0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.035)"
    },
    "usage": "The composer, the approval card, tooltips."
   },
   {
    "name": "shadow-3",
    "value": {
     "light": "0 2px 6px rgba(31, 29, 26, 0.06), 0 22px 56px -14px rgba(31, 29, 26, 0.26)",
     "dark": "0 2px 8px rgba(0, 0, 0, 0.45), 0 24px 60px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.045)"
    },
    "usage": "Menus, toasts, the model menu, dialogs."
   },
   {
    "name": "focus-ring",
    "value": {
     "light": "0 0 0 3px rgba(36, 88, 239, 0.22)",
     "dark": "0 0 0 3px rgba(110, 150, 255, 0.32)"
    },
    "usage": "The glow around a focused field or composer, used together with the edge colour change. The glow reaches only 1.4:1 (light) / 1.7:1 (dark) on the ground, so it can never be the only focus signal; the focus outline uses focus."
   }
  ]
 },
 "layout": {
  "note": "The window is designed at 1440×900.",
  "tokens": [
   {
    "name": "sidebar-w",
    "value": "264px",
    "usage": "Sidebar width."
   },
   {
    "name": "header-h",
    "value": "52px",
    "usage": "Header height; the centres of the window's traffic lights sit on its midline."
   },
   {
    "name": "row-h",
    "value": "32px",
    "usage": "Sidebar rows. Menu items and the session rows under a project are 30px: see menu-item-h and row-sub-h in the size table."
   },
   {
    "name": "chat-w",
    "value": "720px",
    "usage": "Width of the conversation column; 680px with the side panel open."
   },
   {
    "name": "composer-w",
    "value": "760px",
    "usage": "The composer and the card above it; 700px with the side panel open."
   },
   {
    "name": "panel-w",
    "value": "380px",
    "usage": "The side panel."
   },
   {
    "name": "window-min-w",
    "value": "1040px",
    "usage": "Minimum window width: sidebar 264 + column 720 + margins 48. Narrower windows hide the sidebar. New in 1.1."
   },
   {
    "name": "window-min-h",
    "value": "640px",
    "usage": "Minimum window height. New in 1.1."
   },
   {
    "name": "panel-side-min-w",
    "value": "1372px",
    "usage": "From this width the side panel sits beside the column (264 + 680 + 48 + 380); in narrower windows it covers the session area with shadow-3. New in 1.1."
   }
  ]
 },
 "duration": {
  "note": "Animate only transform and opacity. With Reduce motion on, the composer sweep and the launch glow stand still.",
  "tokens": [
   {
    "name": "dur-fast",
    "value": "120ms",
    "usage": "Hover, press, switches."
   },
   {
    "name": "dur-base",
    "value": "180ms",
    "usage": "Menus opening, tab changes, the approval card and dialogs appearing."
   },
   {
    "name": "dur-slow",
    "value": "280ms",
    "usage": "The side panel sliding in; toasts coming and going."
   }
  ]
 },
 "easing": {
  "note": "An exit takes two thirds of its entrance.",
  "tokens": [
   {
    "name": "ease-out",
    "value": "cubic-bezier(0.22, 1, 0.36, 1)",
    "usage": "Every entrance in the interface."
   },
   {
    "name": "ease-in",
    "value": "cubic-bezier(0.4, 0, 1, 1)",
    "usage": "Exits."
   },
   {
    "name": "ease-expo",
    "value": "cubic-bezier(0.16, 1, 0.3, 1)",
    "usage": "Entrances of brand moments: launch, the sign-in poster, the device code, the Home greeting."
   }
  ]
 },
 "size": {
  "note": "Control heights, icon sizes and stroke width. Sizes inside a component follow that component's guide and are not bound by \"multiples of 4\". New in 1.1.",
  "tokens": [
   {
    "name": "control-sm-h",
    "value": "28px",
    "usage": "Small buttons, the answer buttons in the Dock."
   },
   {
    "name": "control-h",
    "value": "32px",
    "usage": "Buttons, the approval card buttons, the Send button."
   },
   {
    "name": "control-lg-h",
    "value": "40px",
    "usage": "Large buttons, such as \"Sign in with your browser\"."
   },
   {
    "name": "field-h",
    "value": "34px",
    "usage": "Text fields, the New session button."
   },
   {
    "name": "chip-h",
    "value": "30px",
    "usage": "Chips in the composer toolbar."
   },
   {
    "name": "chip-sm-h",
    "value": "24px",
    "usage": "Chips in the composer footer; segments of a segmented control."
   },
   {
    "name": "menu-item-h",
    "value": "30px",
    "usage": "Menu items."
   },
   {
    "name": "row-sub-h",
    "value": "30px",
    "usage": "Session rows under a project."
   },
   {
    "name": "icon-button",
    "value": "28px",
    "usage": "Icon-only buttons."
   },
   {
    "name": "tag-h",
    "value": "20px",
    "usage": "Tags."
   },
   {
    "name": "agent-chip-h",
    "value": "22px",
    "usage": "Agent chips."
   },
   {
    "name": "tooltip-h",
    "value": "26px",
    "usage": "Tooltips."
   },
   {
    "name": "card-head-h",
    "value": "38px",
    "usage": "Title rows of ToolGroup and DiffSummary."
   },
   {
    "name": "card-row-h",
    "value": "32px",
    "usage": "Detail rows of ToolGroup and DiffSummary."
   },
   {
    "name": "code-head-h",
    "value": "34px",
    "usage": "Code block header, composer footer."
   },
   {
    "name": "bar-h",
    "value": "44px",
    "usage": "The side panel tab bar, the model menu search bar."
   },
   {
    "name": "icon",
    "value": "16px",
    "usage": "Default icons."
   },
   {
    "name": "icon-sm",
    "value": "14px",
    "usage": "Icons in tight places."
   },
   {
    "name": "icon-lg",
    "value": "18px",
    "usage": "Icons that need emphasis."
   },
   {
    "name": "icon-stroke",
    "value": "1.6",
    "usage": "Stroke width of lucide icons, with round caps and joins."
   },
   {
    "name": "disabled-opacity",
    "value": "0.45",
    "usage": "Disabled buttons and switches drop to this opacity."
   }
  ]
 }
}