{
  "generatedAt": "2026-04-10T07:14:04.518Z",
  "categories": {
    "space": {
      "description": "Spacing tokens for padding, margin, gap, and other spacing",
      "cssVariablePrefix": "--gds-sys-space-",
      "styleExpressionProperties": [
        "padding",
        "margin",
        "gap",
        "row-gap",
        "column-gap",
        "inset",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "styleExpressionUsage": "Use the short token name directly on layout components. Example: padding=\"m\" resolves to var(--gds-sys-space-m). Supports CSS shorthand: padding=\"xs m\" sets vertical xs, horizontal m. Also supports negative values with a leading dash: margin=\"-s\".",
      "tokens": [
        {
          "name": "0",
          "cssVariable": "--gds-sys-space-0",
          "value": "0"
        },
        {
          "name": "5xs",
          "cssVariable": "--gds-sys-space-5xs",
          "value": "1px"
        },
        {
          "name": "4xs",
          "cssVariable": "--gds-sys-space-4xs",
          "value": "2px"
        },
        {
          "name": "3xs",
          "cssVariable": "--gds-sys-space-3xs",
          "value": "4px"
        },
        {
          "name": "2xs",
          "cssVariable": "--gds-sys-space-2xs",
          "value": "6px"
        },
        {
          "name": "xs",
          "cssVariable": "--gds-sys-space-xs",
          "value": "8px"
        },
        {
          "name": "s",
          "cssVariable": "--gds-sys-space-s",
          "value": "12px"
        },
        {
          "name": "m",
          "cssVariable": "--gds-sys-space-m",
          "value": "16px"
        },
        {
          "name": "l",
          "cssVariable": "--gds-sys-space-l",
          "value": "20px"
        },
        {
          "name": "xl",
          "cssVariable": "--gds-sys-space-xl",
          "value": "24px"
        },
        {
          "name": "2xl",
          "cssVariable": "--gds-sys-space-2xl",
          "value": "32px"
        },
        {
          "name": "3xl",
          "cssVariable": "--gds-sys-space-3xl",
          "value": "40px"
        },
        {
          "name": "4xl",
          "cssVariable": "--gds-sys-space-4xl",
          "value": "48px"
        },
        {
          "name": "5xl",
          "cssVariable": "--gds-sys-space-5xl",
          "value": "64px"
        },
        {
          "name": "6xl",
          "cssVariable": "--gds-sys-space-6xl",
          "value": "80px"
        },
        {
          "name": "7xl",
          "cssVariable": "--gds-sys-space-7xl",
          "value": "96px"
        },
        {
          "name": "8xl",
          "cssVariable": "--gds-sys-space-8xl",
          "value": "112px"
        },
        {
          "name": "9xl",
          "cssVariable": "--gds-sys-space-9xl",
          "value": "120px"
        },
        {
          "name": "max",
          "cssVariable": "--gds-sys-space-max",
          "value": "999px"
        }
      ]
    },
    "radius": {
      "description": "Border radius tokens",
      "cssVariablePrefix": "--gds-sys-radius-",
      "styleExpressionProperties": [
        "border-radius"
      ],
      "styleExpressionUsage": "Use the short token name: border-radius=\"m\" resolves to var(--gds-sys-radius-m).",
      "tokens": [
        {
          "name": "0",
          "cssVariable": "--gds-sys-radius-0",
          "value": "0"
        },
        {
          "name": "none",
          "cssVariable": "--gds-sys-radius-none",
          "value": "0"
        },
        {
          "name": "5xs",
          "cssVariable": "--gds-sys-radius-5xs",
          "value": "1px"
        },
        {
          "name": "4xs",
          "cssVariable": "--gds-sys-radius-4xs",
          "value": "2px"
        },
        {
          "name": "3xs",
          "cssVariable": "--gds-sys-radius-3xs",
          "value": "4px"
        },
        {
          "name": "2xs",
          "cssVariable": "--gds-sys-radius-2xs",
          "value": "6px"
        },
        {
          "name": "xs",
          "cssVariable": "--gds-sys-radius-xs",
          "value": "8px"
        },
        {
          "name": "s",
          "cssVariable": "--gds-sys-radius-s",
          "value": "12px"
        },
        {
          "name": "m",
          "cssVariable": "--gds-sys-radius-m",
          "value": "16px"
        },
        {
          "name": "l",
          "cssVariable": "--gds-sys-radius-l",
          "value": "20px"
        },
        {
          "name": "xl",
          "cssVariable": "--gds-sys-radius-xl",
          "value": "24px"
        },
        {
          "name": "2xl",
          "cssVariable": "--gds-sys-radius-2xl",
          "value": "32px"
        },
        {
          "name": "3xl",
          "cssVariable": "--gds-sys-radius-3xl",
          "value": "40px"
        },
        {
          "name": "4xl",
          "cssVariable": "--gds-sys-radius-4xl",
          "value": "48px"
        },
        {
          "name": "5xl",
          "cssVariable": "--gds-sys-radius-5xl",
          "value": "64px"
        },
        {
          "name": "max",
          "cssVariable": "--gds-sys-radius-max",
          "value": "999px"
        }
      ]
    },
    "typography": {
      "description": "Typography tokens for text sizing and font weight. Use <gds-text> component with font and font-weight style expression properties.",
      "cssVariablePrefix": "--gds-sys-text-",
      "styleExpressionProperties": [
        "font",
        "font-weight"
      ],
      "styleExpressionUsage": "On <gds-text>, use font=\"heading-m\" which resolves to var(--gds-sys-text-heading-m). For weights, use font-weight=\"medium\" which resolves to var(--gds-sys-text-weight-medium). Do NOT use HTML heading elements (h1-h6); always use <gds-text> with the font property.",
      "meta": {
        "display": {
          "tone": "Expressive",
          "description": "Used for large, expressive text that highlights key messages and creates strong visual impact. Typically used in hero sections, landing pages, and promotional content. Display text is perfect when you need to raise the volume."
        },
        "heading": {
          "tone": "Structural",
          "description": "Used for structuring content and establishing a clear hierarchy across a page. Suitable for page titles, section headings, and titles in cards or content sections."
        },
        "preamble": {
          "tone": "Introductory",
          "description": "Used for introductory text placed below a display or a heading to provide context or summarize the content that follows. The preamble is generally larger than body text but smaller than headings."
        },
        "detail": {
          "tone": "Functional",
          "description": "Used for small UI text such as labels, metadata, helper text, and component text. Can also be used as an overline above headings or display text."
        },
        "body": {
          "tone": "Readable",
          "description": "Used for running text and longer passages of content such as paragraphs, articles, and descriptions."
        }
      },
      "tokens": [
        {
          "name": "display-l",
          "cssVariable": "--gds-sys-text-display-l",
          "fontSize": "64px",
          "lineHeight": "72px",
          "fontWeight": "book (450)",
          "pairings": [
            "preamble-xl",
            "body-m",
            "body-l"
          ]
        },
        {
          "name": "display-m",
          "cssVariable": "--gds-sys-text-display-m",
          "fontSize": "48px",
          "lineHeight": "56px",
          "fontWeight": "book (450)",
          "pairings": [
            "preamble-l",
            "body-m",
            "body-l"
          ]
        },
        {
          "name": "display-s",
          "cssVariable": "--gds-sys-text-display-s",
          "fontSize": "36px",
          "lineHeight": "44px",
          "fontWeight": "book (450)",
          "pairings": [
            "preamble-m",
            "body-m",
            "body-l"
          ]
        },
        {
          "name": "heading-xl",
          "cssVariable": "--gds-sys-text-heading-xl",
          "fontSize": "32px",
          "lineHeight": "38px",
          "fontWeight": "book (450)",
          "pairings": [
            "preamble-m",
            "body-m",
            "body-l"
          ]
        },
        {
          "name": "heading-l",
          "cssVariable": "--gds-sys-text-heading-l",
          "fontSize": "28px",
          "lineHeight": "34px",
          "fontWeight": "book (450)",
          "pairings": [
            "preamble-s",
            "body-m",
            "body-l"
          ]
        },
        {
          "name": "heading-m",
          "cssVariable": "--gds-sys-text-heading-m",
          "fontSize": "24px",
          "lineHeight": "30px",
          "fontWeight": "book (450)",
          "pairings": [
            "preamble-s",
            "body-m",
            "body-l"
          ]
        },
        {
          "name": "heading-s",
          "cssVariable": "--gds-sys-text-heading-s",
          "fontSize": "20px",
          "lineHeight": "26px",
          "fontWeight": "book (450)",
          "pairings": [
            "preamble-s",
            "body-l",
            "body-m",
            "body-s"
          ]
        },
        {
          "name": "heading-xs",
          "cssVariable": "--gds-sys-text-heading-xs",
          "fontSize": "16px",
          "lineHeight": "22px",
          "fontWeight": "book (450)",
          "pairings": [
            "body-m",
            "body-s"
          ]
        },
        {
          "name": "preamble-xl",
          "cssVariable": "--gds-sys-text-preamble-xl",
          "fontSize": "28px",
          "lineHeight": "36px",
          "fontWeight": "book (450)"
        },
        {
          "name": "preamble-l",
          "cssVariable": "--gds-sys-text-preamble-l",
          "fontSize": "24px",
          "lineHeight": "32px",
          "fontWeight": "book (450)"
        },
        {
          "name": "preamble-m",
          "cssVariable": "--gds-sys-text-preamble-m",
          "fontSize": "20px",
          "lineHeight": "28px",
          "fontWeight": "book (450)"
        },
        {
          "name": "preamble-s",
          "cssVariable": "--gds-sys-text-preamble-s",
          "fontSize": "18px",
          "lineHeight": "26px",
          "fontWeight": "book (450)"
        },
        {
          "name": "detail-l-regular",
          "cssVariable": "--gds-sys-text-detail-l-regular",
          "fontSize": "18px",
          "lineHeight": "22px",
          "fontWeight": "regular (400)"
        },
        {
          "name": "detail-l-book",
          "cssVariable": "--gds-sys-text-detail-l-book",
          "fontSize": "18px",
          "lineHeight": "22px",
          "fontWeight": "book (450)"
        },
        {
          "name": "detail-l-medium",
          "cssVariable": "--gds-sys-text-detail-l-medium",
          "fontSize": "18px",
          "lineHeight": "22px",
          "fontWeight": "medium (500)"
        },
        {
          "name": "detail-m-regular",
          "cssVariable": "--gds-sys-text-detail-m-regular",
          "fontSize": "16px",
          "lineHeight": "20px",
          "fontWeight": "regular (400)"
        },
        {
          "name": "detail-m-book",
          "cssVariable": "--gds-sys-text-detail-m-book",
          "fontSize": "16px",
          "lineHeight": "20px",
          "fontWeight": "book (450)"
        },
        {
          "name": "detail-m-medium",
          "cssVariable": "--gds-sys-text-detail-m-medium",
          "fontSize": "16px",
          "lineHeight": "20px",
          "fontWeight": "medium (500)"
        },
        {
          "name": "detail-s-regular",
          "cssVariable": "--gds-sys-text-detail-s-regular",
          "fontSize": "14px",
          "lineHeight": "18px",
          "fontWeight": "regular (400)"
        },
        {
          "name": "detail-s-book",
          "cssVariable": "--gds-sys-text-detail-s-book",
          "fontSize": "14px",
          "lineHeight": "18px",
          "fontWeight": "book (450)"
        },
        {
          "name": "detail-s-medium",
          "cssVariable": "--gds-sys-text-detail-s-medium",
          "fontSize": "14px",
          "lineHeight": "18px",
          "fontWeight": "medium (500)"
        },
        {
          "name": "detail-xs-regular",
          "cssVariable": "--gds-sys-text-detail-xs-regular",
          "fontSize": "12px",
          "lineHeight": "16px",
          "fontWeight": "regular (400)"
        },
        {
          "name": "detail-xs-book",
          "cssVariable": "--gds-sys-text-detail-xs-book",
          "fontSize": "12px",
          "lineHeight": "16px",
          "fontWeight": "book (450)"
        },
        {
          "name": "detail-xs-medium",
          "cssVariable": "--gds-sys-text-detail-xs-medium",
          "fontSize": "12px",
          "lineHeight": "16px",
          "fontWeight": "medium (500)"
        },
        {
          "name": "detail-2xs-regular",
          "cssVariable": "--gds-sys-text-detail-2xs-regular",
          "fontSize": "10px",
          "lineHeight": "14px",
          "fontWeight": "regular (400)"
        },
        {
          "name": "detail-2xs-book",
          "cssVariable": "--gds-sys-text-detail-2xs-book",
          "fontSize": "10px",
          "lineHeight": "14px",
          "fontWeight": "book (450)"
        },
        {
          "name": "detail-2xs-medium",
          "cssVariable": "--gds-sys-text-detail-2xs-medium",
          "fontSize": "10px",
          "lineHeight": "14px",
          "fontWeight": "medium (500)"
        },
        {
          "name": "body-l-regular",
          "cssVariable": "--gds-sys-text-body-l-regular",
          "fontSize": "18px",
          "lineHeight": "26px",
          "fontWeight": "regular (400)"
        },
        {
          "name": "body-l-regular-italic",
          "cssVariable": "--gds-sys-text-body-l-regular-italic",
          "fontSize": "18px",
          "lineHeight": "26px",
          "fontWeight": "regular (400)"
        },
        {
          "name": "body-l-book",
          "cssVariable": "--gds-sys-text-body-l-book",
          "fontSize": "18px",
          "lineHeight": "26px",
          "fontWeight": "book (450)"
        },
        {
          "name": "body-l-medium",
          "cssVariable": "--gds-sys-text-body-l-medium",
          "fontSize": "18px",
          "lineHeight": "26px",
          "fontWeight": "medium (500)"
        },
        {
          "name": "body-m-regular",
          "cssVariable": "--gds-sys-text-body-m-regular",
          "fontSize": "16px",
          "lineHeight": "24px",
          "fontWeight": "regular (400)"
        },
        {
          "name": "body-m-regular-italic",
          "cssVariable": "--gds-sys-text-body-m-regular-italic",
          "fontSize": "16px",
          "lineHeight": "24px",
          "fontWeight": "regular (400)"
        },
        {
          "name": "body-m-book",
          "cssVariable": "--gds-sys-text-body-m-book",
          "fontSize": "16px",
          "lineHeight": "24px",
          "fontWeight": "book (450)"
        },
        {
          "name": "body-m-medium",
          "cssVariable": "--gds-sys-text-body-m-medium",
          "fontSize": "16px",
          "lineHeight": "24px",
          "fontWeight": "medium (500)"
        },
        {
          "name": "body-s-regular",
          "cssVariable": "--gds-sys-text-body-s-regular",
          "fontSize": "14px",
          "lineHeight": "22px",
          "fontWeight": "regular (400)"
        },
        {
          "name": "body-s-regular-italic",
          "cssVariable": "--gds-sys-text-body-s-regular-italic",
          "fontSize": "14px",
          "lineHeight": "22px",
          "fontWeight": "regular (400)"
        },
        {
          "name": "body-s-book",
          "cssVariable": "--gds-sys-text-body-s-book",
          "fontSize": "14px",
          "lineHeight": "22px",
          "fontWeight": "book (450)"
        },
        {
          "name": "body-s-medium",
          "cssVariable": "--gds-sys-text-body-s-medium",
          "fontSize": "14px",
          "lineHeight": "22px",
          "fontWeight": "medium (500)"
        },
        {
          "name": "light",
          "cssVariable": "--gds-sys-text-weight-light",
          "value": "300"
        },
        {
          "name": "regular",
          "cssVariable": "--gds-sys-text-weight-regular",
          "value": "400"
        },
        {
          "name": "book",
          "cssVariable": "--gds-sys-text-weight-book",
          "value": "450"
        },
        {
          "name": "medium",
          "cssVariable": "--gds-sys-text-weight-medium",
          "value": "500"
        },
        {
          "name": "bold",
          "cssVariable": "--gds-sys-text-weight-bold",
          "value": "700"
        }
      ]
    },
    "color": {
      "description": "Color tokens organized by usage context. When using style expression properties, the color context (background, content, border) is inferred from the property name — you only need the short color name.",
      "subcategories": {
        "background": {
          "description": "Background color tokens organized in three levels (L1, L2, L3). The active level is controlled by the `level` attribute on layout components. Colors adapt automatically to light/dark mode.",
          "cssVariablePrefix": "--gds-sys-color-l{level}-",
          "styleExpressionProperties": [
            "background"
          ],
          "styleExpressionUsage": "Use background=\"positive-01\" on layout components. The component's current `level` attribute determines which level the color is resolved from. The full CSS variable includes the level: var(--gds-sys-color-l3-positive-01). You only need the short name in style expressions.",
          "levels": {
            "L1": {
              "tokens": [
                {
                  "name": "neutral-01",
                  "cssVariable": "--gds-sys-color-l1-neutral-01"
                },
                {
                  "name": "neutral-02",
                  "cssVariable": "--gds-sys-color-l1-neutral-02"
                },
                {
                  "name": "brand-01",
                  "cssVariable": "--gds-sys-color-l1-brand-01"
                },
                {
                  "name": "neutral-03",
                  "cssVariable": "--gds-sys-color-l1-neutral-03"
                }
              ]
            },
            "L2": {
              "tokens": [
                {
                  "name": "neutral-01",
                  "cssVariable": "--gds-sys-color-l2-neutral-01"
                },
                {
                  "name": "neutral-01-2",
                  "cssVariable": "--gds-sys-color-l2-neutral-01-2"
                },
                {
                  "name": "neutral-02",
                  "cssVariable": "--gds-sys-color-l2-neutral-02"
                },
                {
                  "name": "neutral-02-2",
                  "cssVariable": "--gds-sys-color-l2-neutral-02-2"
                },
                {
                  "name": "neutral-03",
                  "cssVariable": "--gds-sys-color-l2-neutral-03"
                },
                {
                  "name": "brand-01",
                  "cssVariable": "--gds-sys-color-l2-brand-01"
                },
                {
                  "name": "brand-02",
                  "cssVariable": "--gds-sys-color-l2-brand-02"
                },
                {
                  "name": "positive-01",
                  "cssVariable": "--gds-sys-color-l2-positive-01"
                },
                {
                  "name": "negative-01",
                  "cssVariable": "--gds-sys-color-l2-negative-01"
                },
                {
                  "name": "warning-01",
                  "cssVariable": "--gds-sys-color-l2-warning-01"
                },
                {
                  "name": "information-01",
                  "cssVariable": "--gds-sys-color-l2-information-01"
                },
                {
                  "name": "notice-01",
                  "cssVariable": "--gds-sys-color-l2-notice-01"
                }
              ]
            },
            "L3": {
              "tokens": [
                {
                  "name": "neutral-01",
                  "cssVariable": "--gds-sys-color-l3-neutral-01"
                },
                {
                  "name": "neutral-01-2",
                  "cssVariable": "--gds-sys-color-l3-neutral-01-2"
                },
                {
                  "name": "neutral-02",
                  "cssVariable": "--gds-sys-color-l3-neutral-02"
                },
                {
                  "name": "neutral-02-2",
                  "cssVariable": "--gds-sys-color-l3-neutral-02-2"
                },
                {
                  "name": "neutral-03",
                  "cssVariable": "--gds-sys-color-l3-neutral-03"
                },
                {
                  "name": "neutral-03-2",
                  "cssVariable": "--gds-sys-color-l3-neutral-03-2"
                },
                {
                  "name": "brand-01",
                  "cssVariable": "--gds-sys-color-l3-brand-01"
                },
                {
                  "name": "brand-02",
                  "cssVariable": "--gds-sys-color-l3-brand-02"
                },
                {
                  "name": "brand-02-2",
                  "cssVariable": "--gds-sys-color-l3-brand-02-2"
                },
                {
                  "name": "positive-01",
                  "cssVariable": "--gds-sys-color-l3-positive-01"
                },
                {
                  "name": "positive-02",
                  "cssVariable": "--gds-sys-color-l3-positive-02"
                },
                {
                  "name": "positive-03",
                  "cssVariable": "--gds-sys-color-l3-positive-03"
                },
                {
                  "name": "negative-01",
                  "cssVariable": "--gds-sys-color-l3-negative-01"
                },
                {
                  "name": "negative-02",
                  "cssVariable": "--gds-sys-color-l3-negative-02"
                },
                {
                  "name": "negative-03",
                  "cssVariable": "--gds-sys-color-l3-negative-03"
                },
                {
                  "name": "notice-01",
                  "cssVariable": "--gds-sys-color-l3-notice-01"
                },
                {
                  "name": "notice-02",
                  "cssVariable": "--gds-sys-color-l3-notice-02"
                },
                {
                  "name": "notice-03",
                  "cssVariable": "--gds-sys-color-l3-notice-03"
                },
                {
                  "name": "warning-01",
                  "cssVariable": "--gds-sys-color-l3-warning-01"
                },
                {
                  "name": "warning-02",
                  "cssVariable": "--gds-sys-color-l3-warning-02"
                },
                {
                  "name": "warning-03",
                  "cssVariable": "--gds-sys-color-l3-warning-03"
                },
                {
                  "name": "information-01",
                  "cssVariable": "--gds-sys-color-l3-information-01"
                },
                {
                  "name": "information-02",
                  "cssVariable": "--gds-sys-color-l3-information-02"
                },
                {
                  "name": "information-03",
                  "cssVariable": "--gds-sys-color-l3-information-03"
                },
                {
                  "name": "disabled-01",
                  "cssVariable": "--gds-sys-color-l3-disabled-01"
                },
                {
                  "name": "disabled-02",
                  "cssVariable": "--gds-sys-color-l3-disabled-02"
                },
                {
                  "name": "disabled-03",
                  "cssVariable": "--gds-sys-color-l3-disabled-03"
                }
              ]
            }
          }
        },
        "content": {
          "description": "Content (text/foreground) color tokens. Colors adapt automatically to light/dark mode.",
          "cssVariablePrefix": "--gds-sys-color-content-",
          "styleExpressionProperties": [
            "color"
          ],
          "styleExpressionUsage": "Use color=\"neutral-01\" on layout components. Resolves to var(--gds-sys-color-content-neutral-01). You only need the short name in style expressions.",
          "tokens": [
            {
              "name": "neutral-01",
              "cssVariable": "--gds-sys-color-content-neutral-01"
            },
            {
              "name": "neutral-02",
              "cssVariable": "--gds-sys-color-content-neutral-02"
            },
            {
              "name": "neutral-03",
              "cssVariable": "--gds-sys-color-content-neutral-03"
            },
            {
              "name": "neutral-04",
              "cssVariable": "--gds-sys-color-content-neutral-04"
            },
            {
              "name": "neutral-05",
              "cssVariable": "--gds-sys-color-content-neutral-05"
            },
            {
              "name": "brand-01",
              "cssVariable": "--gds-sys-color-content-brand-01"
            },
            {
              "name": "brand-02",
              "cssVariable": "--gds-sys-color-content-brand-02"
            },
            {
              "name": "positive-01",
              "cssVariable": "--gds-sys-color-content-positive-01"
            },
            {
              "name": "positive-02",
              "cssVariable": "--gds-sys-color-content-positive-02"
            },
            {
              "name": "positive-03",
              "cssVariable": "--gds-sys-color-content-positive-03"
            },
            {
              "name": "negative-01",
              "cssVariable": "--gds-sys-color-content-negative-01"
            },
            {
              "name": "negative-02",
              "cssVariable": "--gds-sys-color-content-negative-02"
            },
            {
              "name": "warning-01",
              "cssVariable": "--gds-sys-color-content-warning-01"
            },
            {
              "name": "warning-02",
              "cssVariable": "--gds-sys-color-content-warning-02"
            },
            {
              "name": "notice-01",
              "cssVariable": "--gds-sys-color-content-notice-01"
            },
            {
              "name": "notice-02",
              "cssVariable": "--gds-sys-color-content-notice-02"
            },
            {
              "name": "disabled-01",
              "cssVariable": "--gds-sys-color-content-disabled-01"
            },
            {
              "name": "disabled-02",
              "cssVariable": "--gds-sys-color-content-disabled-02"
            }
          ]
        },
        "border": {
          "description": "Border color tokens. Colors adapt automatically to light/dark mode.",
          "cssVariablePrefix": "--gds-sys-color-border-",
          "styleExpressionProperties": [
            "border-color"
          ],
          "styleExpressionUsage": "Border colors are used within the border style expression shorthand on layout components. Example: border=\"4xs 0 0 0 / neutral-01\" sets a top border with color neutral-01. Resolves to var(--gds-sys-color-border-neutral-01).",
          "tokens": [
            {
              "name": "neutral-01",
              "cssVariable": "--gds-sys-color-border-neutral-01"
            },
            {
              "name": "neutral-02",
              "cssVariable": "--gds-sys-color-border-neutral-02"
            },
            {
              "name": "neutral-03",
              "cssVariable": "--gds-sys-color-border-neutral-03"
            },
            {
              "name": "neutral-04",
              "cssVariable": "--gds-sys-color-border-neutral-04"
            },
            {
              "name": "neutral-05",
              "cssVariable": "--gds-sys-color-border-neutral-05"
            },
            {
              "name": "information-01",
              "cssVariable": "--gds-sys-color-border-information-01"
            },
            {
              "name": "information-02",
              "cssVariable": "--gds-sys-color-border-information-02"
            },
            {
              "name": "positive-01",
              "cssVariable": "--gds-sys-color-border-positive-01"
            },
            {
              "name": "positive-02",
              "cssVariable": "--gds-sys-color-border-positive-02"
            },
            {
              "name": "negative-01",
              "cssVariable": "--gds-sys-color-border-negative-01"
            },
            {
              "name": "negative-02",
              "cssVariable": "--gds-sys-color-border-negative-02"
            },
            {
              "name": "warning-01",
              "cssVariable": "--gds-sys-color-border-warning-01"
            },
            {
              "name": "warning-02",
              "cssVariable": "--gds-sys-color-border-warning-02"
            },
            {
              "name": "notice-01",
              "cssVariable": "--gds-sys-color-border-notice-01"
            },
            {
              "name": "notice-02",
              "cssVariable": "--gds-sys-color-border-notice-02"
            }
          ]
        },
        "state": {
          "description": "State color tokens for interactive states (hover, focus, active). These are typically used internally by components and rarely set directly via style expressions.",
          "cssVariablePrefix": "--gds-sys-color-state-",
          "styleExpressionProperties": [],
          "styleExpressionUsage": "State tokens are primarily used internally by components. Access them directly as CSS variables when needed: var(--gds-sys-color-state-neutral-03).",
          "tokens": [
            {
              "name": "neutral-01",
              "cssVariable": "--gds-sys-color-state-neutral-01"
            },
            {
              "name": "neutral-02",
              "cssVariable": "--gds-sys-color-state-neutral-02"
            },
            {
              "name": "neutral-03",
              "cssVariable": "--gds-sys-color-state-neutral-03"
            },
            {
              "name": "neutral-04",
              "cssVariable": "--gds-sys-color-state-neutral-04"
            },
            {
              "name": "neutral-05",
              "cssVariable": "--gds-sys-color-state-neutral-05"
            },
            {
              "name": "neutral-06",
              "cssVariable": "--gds-sys-color-state-neutral-06"
            },
            {
              "name": "brand-01",
              "cssVariable": "--gds-sys-color-state-brand-01"
            },
            {
              "name": "brand-02",
              "cssVariable": "--gds-sys-color-state-brand-02"
            },
            {
              "name": "brand-03",
              "cssVariable": "--gds-sys-color-state-brand-03"
            },
            {
              "name": "brand-04",
              "cssVariable": "--gds-sys-color-state-brand-04"
            },
            {
              "name": "brand-05",
              "cssVariable": "--gds-sys-color-state-brand-05"
            },
            {
              "name": "brand-06",
              "cssVariable": "--gds-sys-color-state-brand-06"
            },
            {
              "name": "brand-02-02",
              "cssVariable": "--gds-sys-color-state-brand-02-02"
            },
            {
              "name": "brand-02-03",
              "cssVariable": "--gds-sys-color-state-brand-02-03"
            },
            {
              "name": "positive-01",
              "cssVariable": "--gds-sys-color-state-positive-01"
            },
            {
              "name": "positive-02",
              "cssVariable": "--gds-sys-color-state-positive-02"
            },
            {
              "name": "positive-03",
              "cssVariable": "--gds-sys-color-state-positive-03"
            },
            {
              "name": "positive-04",
              "cssVariable": "--gds-sys-color-state-positive-04"
            },
            {
              "name": "positive-05",
              "cssVariable": "--gds-sys-color-state-positive-05"
            },
            {
              "name": "positive-06",
              "cssVariable": "--gds-sys-color-state-positive-06"
            },
            {
              "name": "negative-01",
              "cssVariable": "--gds-sys-color-state-negative-01"
            },
            {
              "name": "negative-02",
              "cssVariable": "--gds-sys-color-state-negative-02"
            },
            {
              "name": "negative-03",
              "cssVariable": "--gds-sys-color-state-negative-03"
            },
            {
              "name": "negative-04",
              "cssVariable": "--gds-sys-color-state-negative-04"
            },
            {
              "name": "negative-05",
              "cssVariable": "--gds-sys-color-state-negative-05"
            },
            {
              "name": "negative-06",
              "cssVariable": "--gds-sys-color-state-negative-06"
            },
            {
              "name": "notice-01",
              "cssVariable": "--gds-sys-color-state-notice-01"
            },
            {
              "name": "notice-02",
              "cssVariable": "--gds-sys-color-state-notice-02"
            },
            {
              "name": "notice-03",
              "cssVariable": "--gds-sys-color-state-notice-03"
            },
            {
              "name": "notice-04",
              "cssVariable": "--gds-sys-color-state-notice-04"
            },
            {
              "name": "notice-05",
              "cssVariable": "--gds-sys-color-state-notice-05"
            },
            {
              "name": "notice-06",
              "cssVariable": "--gds-sys-color-state-notice-06"
            },
            {
              "name": "warning-01",
              "cssVariable": "--gds-sys-color-state-warning-01"
            },
            {
              "name": "warning-02",
              "cssVariable": "--gds-sys-color-state-warning-02"
            },
            {
              "name": "warning-03",
              "cssVariable": "--gds-sys-color-state-warning-03"
            },
            {
              "name": "warning-04",
              "cssVariable": "--gds-sys-color-state-warning-04"
            },
            {
              "name": "warning-05",
              "cssVariable": "--gds-sys-color-state-warning-05"
            },
            {
              "name": "warning-06",
              "cssVariable": "--gds-sys-color-state-warning-06"
            }
          ]
        }
      }
    },
    "viewport": {
      "description": "Viewport breakpoint tokens used in responsive style expressions",
      "cssVariablePrefix": "--gds-sys-viewport-",
      "styleExpressionProperties": [],
      "styleExpressionUsage": "Viewport tokens define breakpoints for responsive style expressions. Use them in media query syntax: padding=\"xs; m {l}\" means padding is xs by default and l at the m breakpoint (1024px). Named breakpoints: 2xs (320px), xs (425px), s (768px), m (1024px), l (1280px), xl (1440px), 2xl (2560px).",
      "tokens": [
        {
          "name": "0",
          "cssVariable": "--gds-sys-viewport-0",
          "value": "0"
        },
        {
          "name": "2xs",
          "cssVariable": "--gds-sys-viewport-2xs",
          "value": "320px"
        },
        {
          "name": "xs",
          "cssVariable": "--gds-sys-viewport-xs",
          "value": "425px"
        },
        {
          "name": "s",
          "cssVariable": "--gds-sys-viewport-s",
          "value": "768px"
        },
        {
          "name": "m",
          "cssVariable": "--gds-sys-viewport-m",
          "value": "1024px"
        },
        {
          "name": "l",
          "cssVariable": "--gds-sys-viewport-l",
          "value": "1280px"
        },
        {
          "name": "xl",
          "cssVariable": "--gds-sys-viewport-xl",
          "value": "1440px"
        },
        {
          "name": "2xl",
          "cssVariable": "--gds-sys-viewport-2xl",
          "value": "2560px"
        },
        {
          "name": "3xl",
          "cssVariable": "--gds-sys-viewport-3xl",
          "value": "3840px"
        },
        {
          "name": "4xl",
          "cssVariable": "--gds-sys-viewport-4xl",
          "value": "4320px"
        },
        {
          "name": "5xl",
          "cssVariable": "--gds-sys-viewport-5xl",
          "value": "6016px"
        },
        {
          "name": "6xl",
          "cssVariable": "--gds-sys-viewport-6xl",
          "value": "7680px"
        }
      ]
    },
    "shadow": {
      "description": "Shadow tokens. Shadows come in pairs (-01 and -02) that are combined for the final effect.",
      "cssVariablePrefix": "--gds-sys-shadow-",
      "styleExpressionProperties": [
        "box-shadow"
      ],
      "styleExpressionUsage": "Shadow tokens can be used as CSS variables: box-shadow: var(--gds-sys-shadow-m-01), var(--gds-sys-shadow-m-02). Sizes: xs, s, m, l, xl, 2xl — each with a -01 (primary) and -02 (secondary) layer.",
      "tokens": [
        {
          "name": "xs-01",
          "cssVariable": "--gds-sys-shadow-xs-01",
          "value": "0px 1px 2px 0px rgba(10, 11, 10, 0.05)"
        },
        {
          "name": "xs-02",
          "cssVariable": "--gds-sys-shadow-xs-02",
          "value": "0px 0px 0px 0px transparent"
        },
        {
          "name": "s-01",
          "cssVariable": "--gds-sys-shadow-s-01",
          "value": "0px 1px 2px 0px rgba(10, 11, 10, 0.10)"
        },
        {
          "name": "s-02",
          "cssVariable": "--gds-sys-shadow-s-02",
          "value": "0px 1px 3px 0px rgba(10, 11, 10, 0.06)"
        },
        {
          "name": "m-01",
          "cssVariable": "--gds-sys-shadow-m-01",
          "value": "0px 2px 4px -2px rgba(10, 11, 10, 0.10)"
        },
        {
          "name": "m-02",
          "cssVariable": "--gds-sys-shadow-m-02",
          "value": "0px 4px 8px -2px rgba(10, 11, 10, 0.06)"
        },
        {
          "name": "l-01",
          "cssVariable": "--gds-sys-shadow-l-01",
          "value": "0px 4px 6px -2px rgba(10, 11, 10, 0.08)"
        },
        {
          "name": "l-02",
          "cssVariable": "--gds-sys-shadow-l-02",
          "value": "0px 12px 16px -4px rgba(10, 11, 10, 0.03)"
        },
        {
          "name": "xl-01",
          "cssVariable": "--gds-sys-shadow-xl-01",
          "value": "0px 20px 24px -4px rgba(10, 11, 10, 0.08)"
        },
        {
          "name": "xl-02",
          "cssVariable": "--gds-sys-shadow-xl-02",
          "value": "0px 0px 0px 0px rgba(10, 11, 10, 0.08)"
        },
        {
          "name": "2xl-01",
          "cssVariable": "--gds-sys-shadow-2xl-01",
          "value": "0px 24px 48px -12px rgba(10, 11, 10, 0.18)"
        },
        {
          "name": "2xl-02",
          "cssVariable": "--gds-sys-shadow-2xl-02",
          "value": "0px 0px 0px 0px transparent"
        }
      ]
    },
    "motion": {
      "description": "Motion tokens for animation easing and duration",
      "cssVariablePrefix": "--gds-sys-motion-",
      "styleExpressionProperties": [],
      "styleExpressionUsage": "Motion tokens are used as CSS variables for transitions and animations. Example: transition: opacity var(--gds-sys-motion-duration-fast) var(--gds-sys-motion-easing-ease-out).",
      "tokens": [
        {
          "name": "easing-ease-in",
          "cssVariable": "--gds-sys-motion-easing-ease-in",
          "value": "cubic-bezier(0.64, 0, 0.78, 0)"
        },
        {
          "name": "easing-ease-in-out",
          "cssVariable": "--gds-sys-motion-easing-ease-in-out",
          "value": "cubic-bezier(0.83, 0, 0.17, 1)"
        },
        {
          "name": "easing-ease-out",
          "cssVariable": "--gds-sys-motion-easing-ease-out",
          "value": "cubic-bezier(0.22, 1, 0.36, 1)"
        },
        {
          "name": "easing-linear",
          "cssVariable": "--gds-sys-motion-easing-linear",
          "value": "cubic-bezier(0, 0, 1, 1)"
        },
        {
          "name": "duration-fastest",
          "cssVariable": "--gds-sys-motion-duration-fastest",
          "value": ".2s"
        },
        {
          "name": "duration-fast",
          "cssVariable": "--gds-sys-motion-duration-fast",
          "value": ".4s"
        },
        {
          "name": "duration-default",
          "cssVariable": "--gds-sys-motion-duration-default",
          "value": ".5s"
        },
        {
          "name": "duration-slow",
          "cssVariable": "--gds-sys-motion-duration-slow",
          "value": "1s"
        },
        {
          "name": "duration-slowest",
          "cssVariable": "--gds-sys-motion-duration-slowest",
          "value": "1.5s"
        }
      ]
    }
  }
}