{
  "$description": "Tattva design tokens in the DTCG format (2025.10). Colors are in separate light and dark groups. Aliases to raw palette values are resolved to final colors. Dark inherits any light value it does not override.",
  "color": {
    "light": {
      "surfaces": {
        "$description": "What things sit on.",
        "bg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9804,
              0.9804,
              0.9765
            ],
            "alpha": 1,
            "hex": "#fafaf9"
          },
          "$description": "The page behind everything."
        },
        "surface": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "alpha": 1,
            "hex": "#ffffff"
          },
          "$description": "Cards, panels and inputs."
        },
        "surface-sunken": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9569,
              0.9569,
              0.949
            ],
            "alpha": 1,
            "hex": "#f4f4f2"
          },
          "$description": "Wells and the area behind a card."
        },
        "surface-raised": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "alpha": 1,
            "hex": "#ffffff"
          },
          "$description": "Menus and pop-ups that float above the page."
        },
        "surface-hover": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9255,
              0.9255,
              0.9176
            ],
            "alpha": 1,
            "hex": "#ececea"
          },
          "$description": "A row when the pointer is over it."
        },
        "pressed": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8745,
              0.8784,
              0.8784
            ],
            "alpha": 1,
            "hex": "#dfe0e0"
          },
          "$description": "Buttons and rows while pressed."
        }
      },
      "lines": {
        "$description": "Edges and the outline that shows where you are.",
        "border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.902,
              0.898,
              0.8863
            ],
            "alpha": 1,
            "hex": "#e6e5e2"
          },
          "$description": "Thin borders around cards and fields."
        },
        "border-strong": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7882,
              0.7843,
              0.7647
            ],
            "alpha": 1,
            "hex": "#c9c8c3"
          },
          "$description": "Borders that need more weight, such as a focused field."
        },
        "focus-ring": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1412,
              0.1569,
              0.1725
            ],
            "alpha": 1,
            "hex": "#24282c"
          },
          "$description": "The outline around whatever the keyboard is on."
        }
      },
      "text": {
        "$description": "Three weights of text. Contrast is measured against the page.",
        "fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1412,
              0.1569,
              0.1725
            ],
            "alpha": 1,
            "hex": "#24282c"
          },
          "$description": "Main text."
        },
        "fg-muted": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.3569,
              0.3686,
              0.3804
            ],
            "alpha": 1,
            "hex": "#5b5e61"
          },
          "$description": "Secondary text, such as descriptions."
        },
        "fg-subtle": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.4078,
              0.4235,
              0.4353
            ],
            "alpha": 1,
            "hex": "#686c6f"
          },
          "$description": "Hints, labels and captions."
        },
        "disabled-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.5725,
              0.5804,
              0.5922
            ],
            "alpha": 1,
            "hex": "#929497"
          },
          "$description": "Text on a disabled control."
        }
      },
      "actions": {
        "$description": "Dark ink is the main action. Lime is only ever a fill, never text.",
        "fg-on-accent": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "alpha": 1,
            "hex": "#ffffff"
          },
          "$description": "Text on the main action color."
        },
        "accent": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1843,
              0.4196,
              0.102
            ],
            "alpha": 1,
            "hex": "#2f6b1a"
          },
          "$description": "Main buttons and selected states."
        },
        "accent-hover": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1373,
              0.3255,
              0.0706
            ],
            "alpha": 1,
            "hex": "#235312"
          },
          "$description": "Primary buttons under the pointer."
        },
        "accent-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9216,
              0.9412,
              0.9137
            ],
            "alpha": 1,
            "hex": "#ebf0e9"
          },
          "$description": "A quiet background for a selected item."
        },
        "accent-soft-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8,
              0.8549,
              0.7804
            ],
            "alpha": 1,
            "hex": "#ccdac7"
          },
          "$description": "Border around the quiet accent background."
        },
        "accent-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1843,
              0.4196,
              0.102
            ],
            "alpha": 1,
            "hex": "#2f6b1a"
          },
          "$description": "Text on the quiet background."
        },
        "lime": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7608,
              0.9373,
              0.4471
            ],
            "alpha": 1,
            "hex": "#c2ef72"
          },
          "$description": "The AI mark and one positive highlight."
        },
        "lime-hover": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.698,
              0.8863,
              0.3333
            ],
            "alpha": 1,
            "hex": "#b2e255"
          },
          "$description": "Lime when the pointer is over it."
        },
        "lime-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9176,
              0.9608,
              0.8
            ],
            "alpha": 1,
            "hex": "#eaf5cc"
          },
          "$description": "A pale lime wash behind small markers."
        },
        "on-lime": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1412,
              0.1569,
              0.1725
            ],
            "alpha": 1,
            "hex": "#24282c"
          },
          "$description": "Text on lime. Always dark."
        },
        "lime-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8549,
              0.9647,
              0.6902
            ],
            "alpha": 1,
            "hex": "#daf6b0"
          },
          "$description": "A border around something the AI made."
        },
        "lime-soft-hover": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.898,
              0.9765,
              0.7843
            ],
            "alpha": 1,
            "hex": "#e5f9c8"
          },
          "$description": "The lime wash when the pointer is over it."
        }
      },
      "status": {
        "$description": "Success, error and information. Each ships with an icon and a word, never color alone.",
        "on-danger": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "alpha": 1,
            "hex": "#ffffff"
          },
          "$description": "Text on a solid danger button."
        },
        "success": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.3725,
              0.6039,
              0.0784
            ],
            "alpha": 1,
            "hex": "#5f9a14"
          },
          "$description": "Something worked."
        },
        "success-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9333,
              0.9647,
              0.8549
            ],
            "alpha": 1,
            "hex": "#eef6da"
          },
          "$description": "Background for a success message."
        },
        "success-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2471,
              0.4157,
              0.0431
            ],
            "alpha": 1,
            "hex": "#3f6a0b"
          },
          "$description": "Text on it."
        },
        "danger": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7216,
              0.2902,
              0.2588
            ],
            "alpha": 1,
            "hex": "#b84a42"
          },
          "$description": "Something failed or will delete."
        },
        "danger-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9765,
              0.9137,
              0.9059
            ],
            "alpha": 1,
            "hex": "#f9e9e7"
          },
          "$description": "Background for an error message."
        },
        "danger-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.5569,
              0.1843,
              0.1569
            ],
            "alpha": 1,
            "hex": "#8e2f28"
          },
          "$description": "Text on it."
        },
        "info": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.3529,
              0.4627,
              0.5686
            ],
            "alpha": 1,
            "hex": "#5a7691"
          },
          "$description": "Neutral information."
        },
        "info-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9137,
              0.9333,
              0.9529
            ],
            "alpha": 1,
            "hex": "#e9eef3"
          },
          "$description": "Background for a note."
        },
        "info-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2078,
              0.3137,
              0.4157
            ],
            "alpha": 1,
            "hex": "#35506a"
          },
          "$description": "Text on it."
        },
        "success-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7412,
              0.8431,
              0.6667
            ],
            "alpha": 1,
            "hex": "#bdd7aa"
          },
          "$description": "Border of a success box."
        },
        "warning-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9137,
              0.7647,
              0.6824
            ],
            "alpha": 1,
            "hex": "#e9c3ae"
          },
          "$description": "Border of a warning box."
        },
        "danger-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9098,
              0.7176,
              0.6941
            ],
            "alpha": 1,
            "hex": "#e8b7b1"
          },
          "$description": "Border of an error box."
        },
        "info-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7294,
              0.7765,
              0.8235
            ],
            "alpha": 1,
            "hex": "#bac6d2"
          },
          "$description": "Border of a note."
        }
      },
      "other": {
        "action": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1843,
              0.4196,
              0.102
            ],
            "alpha": 1,
            "hex": "#2f6b1a"
          }
        },
        "action-text": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1843,
              0.4196,
              0.102
            ],
            "alpha": 1,
            "hex": "#2f6b1a"
          }
        },
        "wf-ink": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2275,
              0.2471,
              0.2667
            ],
            "alpha": 1,
            "hex": "#3a3f44"
          }
        },
        "wf-line": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8235,
              0.8196,
              0.8
            ],
            "alpha": 1,
            "hex": "#d2d1cc"
          }
        },
        "wf-fill": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8941,
              0.8902,
              0.8745
            ],
            "alpha": 1,
            "hex": "#e4e3df"
          }
        },
        "wf-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9373,
              0.9373,
              0.9255
            ],
            "alpha": 1,
            "hex": "#efefec"
          }
        },
        "wf-paper": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "alpha": 1,
            "hex": "#ffffff"
          }
        },
        "wf-ai": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7608,
              0.9373,
              0.4471
            ],
            "alpha": 1,
            "hex": "#c2ef72"
          }
        },
        "on-success": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "alpha": 1,
            "hex": "#ffffff"
          }
        },
        "thumb": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "alpha": 1,
            "hex": "#ffffff"
          }
        }
      },
      "attention": {
        "$description": "Amber means one thing: a person has to act. Nothing else uses it.",
        "attention": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7882,
              0.4824,
              0.2902
            ],
            "alpha": 1,
            "hex": "#c97b4a"
          },
          "$description": "The dot and border that call for a person."
        },
        "attention-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9725,
              0.9216,
              0.8824
            ],
            "alpha": 1,
            "hex": "#f8ebe1"
          },
          "$description": "Background of a request that needs a person."
        },
        "attention-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.5608,
              0.3098,
              0.149
            ],
            "alpha": 1,
            "hex": "#8f4f26"
          },
          "$description": "Text on that background."
        },
        "warning": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7882,
              0.4824,
              0.2902
            ],
            "alpha": 1,
            "hex": "#c97b4a"
          },
          "$description": "Same as attention: a person has to act."
        },
        "warning-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9725,
              0.9216,
              0.8824
            ],
            "alpha": 1,
            "hex": "#f8ebe1"
          },
          "$description": "Same as attention-soft."
        },
        "warning-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.5608,
              0.3098,
              0.149
            ],
            "alpha": 1,
            "hex": "#8f4f26"
          },
          "$description": "Same as attention-fg."
        },
        "attention-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9137,
              0.7647,
              0.6824
            ],
            "alpha": 1,
            "hex": "#e9c3ae"
          },
          "$description": "Border of a request that needs a person."
        }
      },
      "direction": {
        "$description": "Up and down for prices, profit and loss, and any number that moves. Not the same as success and error. Always shown with an arrow or a sign. For readers who cannot tell green from red, set data-direction=\\",
        "up": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.0431,
              0.5412,
              0.4353
            ],
            "alpha": 1,
            "hex": "#0b8a6f"
          },
          "$description": "A value went up or is a gain."
        },
        "up-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8941,
              0.9569,
              0.9412
            ],
            "alpha": 1,
            "hex": "#e4f4f0"
          },
          "$description": "Background for an up value, such as a gain row."
        },
        "up-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.0431,
              0.4784,
              0.3882
            ],
            "alpha": 1,
            "hex": "#0b7a63"
          },
          "$description": "Text for an up value."
        },
        "down": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8392,
              0.1882,
              0.2471
            ],
            "alpha": 1,
            "hex": "#d6303f"
          },
          "$description": "A value went down or is a loss."
        },
        "down-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9922,
              0.9176,
              0.9255
            ],
            "alpha": 1,
            "hex": "#fdeaec"
          },
          "$description": "Background for a down value."
        },
        "down-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7686,
              0.1569,
              0.2275
            ],
            "alpha": 1,
            "hex": "#c4283a"
          },
          "$description": "Text for a down value."
        }
      },
      "reserved": {
        "$description": "Two reserved roles. Unsure is a calm neutral for \\",
        "unsure": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.4196,
              0.4196,
              0.4902
            ],
            "alpha": 1,
            "hex": "#6b6b7d"
          },
          "$description": "Not fully sure, or partly done."
        },
        "unsure-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9333,
              0.9294,
              0.9608
            ],
            "alpha": 1,
            "hex": "#eeedf5"
          },
          "$description": "Background for an unsure chip."
        },
        "unsure-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.3412,
              0.3412,
              0.4078
            ],
            "alpha": 1,
            "hex": "#575768"
          },
          "$description": "Text on it."
        },
        "celebrate": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7137,
              0.5137,
              0.1843
            ],
            "alpha": 1,
            "hex": "#b6832f"
          },
          "$description": "A goal fully reached. One place per product."
        },
        "celebrate-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9686,
              0.9373,
              0.8627
            ],
            "alpha": 1,
            "hex": "#f7efdc"
          },
          "$description": "Background for it."
        },
        "celebrate-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.5216,
              0.349,
              0.0588
            ],
            "alpha": 1,
            "hex": "#85590f"
          },
          "$description": "Text on it."
        }
      },
      "code": {
        "$description": "Always dark, in both themes.",
        "code-bg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1216,
              0.1373,
              0.149
            ],
            "alpha": 1,
            "hex": "#1f2326"
          },
          "$description": "Background of code and commands."
        },
        "code-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9255,
              0.9216,
              0.8941
            ],
            "alpha": 1,
            "hex": "#ecebe4"
          },
          "$description": "Code text."
        },
        "code-muted": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.6039,
              0.6157,
              0.6039
            ],
            "alpha": 1,
            "hex": "#9a9d9a"
          },
          "$description": "Quiet text inside code blocks."
        }
      },
      "charts": {
        "$description": "Checked so people with color-blindness can tell them apart. Use them in this order.",
        "chart-1": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1647,
              0.4353,
              0.749
            ],
            "alpha": 1,
            "hex": "#2a6fbf"
          },
          "$description": "Series 1, in a fixed order."
        },
        "chart-2": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7608,
              0.2706,
              0.3725
            ],
            "alpha": 1,
            "hex": "#c2455f"
          },
          "$description": "Series 2, in a fixed order."
        },
        "chart-3": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0,
              0.549,
              0.6196
            ],
            "alpha": 1,
            "hex": "#008c9e"
          },
          "$description": "Series 3, in a fixed order."
        },
        "chart-4": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.4353,
              0.5608,
              0.0627
            ],
            "alpha": 1,
            "hex": "#6f8f10"
          },
          "$description": "Series 4, in a fixed order."
        },
        "chart-5": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.5412,
              0.2392,
              0.5765
            ],
            "alpha": 1,
            "hex": "#8a3d93"
          },
          "$description": "Series 5, in a fixed order."
        },
        "chart-neutral": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.6039,
              0.6157,
              0.5961
            ],
            "alpha": 1,
            "hex": "#9a9d98"
          },
          "$description": "Everything else, grouped as Other."
        },
        "chart-seq-1": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.5804,
              0.7137,
              0.8745
            ],
            "alpha": 1,
            "hex": "#94b6df"
          },
          "$description": "Low to high amounts, step 1 of 5."
        },
        "chart-seq-2": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.4,
              0.5765,
              0.7961
            ],
            "alpha": 1,
            "hex": "#6693cb"
          },
          "$description": "Low to high amounts, step 2 of 5."
        },
        "chart-seq-3": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2275,
              0.4549,
              0.7216
            ],
            "alpha": 1,
            "hex": "#3a74b8"
          },
          "$description": "Low to high amounts, step 3 of 5."
        },
        "chart-seq-4": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1373,
              0.3529,
              0.6039
            ],
            "alpha": 1,
            "hex": "#235a9a"
          },
          "$description": "Low to high amounts, step 4 of 5."
        },
        "chart-seq-5": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.0784,
              0.251,
              0.4275
            ],
            "alpha": 1,
            "hex": "#14406d"
          },
          "$description": "Low to high amounts, step 5 of 5."
        },
        "chart-div-neg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7608,
              0.2706,
              0.3725
            ],
            "alpha": 1,
            "hex": "#c2455f"
          },
          "$description": "Below the middle."
        },
        "chart-div-mid": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8941,
              0.8824,
              0.8392
            ],
            "alpha": 1,
            "hex": "#e4e1d6"
          },
          "$description": "The middle."
        },
        "chart-div-pos": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1647,
              0.4353,
              0.749
            ],
            "alpha": 1,
            "hex": "#2a6fbf"
          },
          "$description": "Above the middle."
        },
        "chart-grid": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.902,
              0.898,
              0.8863
            ],
            "alpha": 1,
            "hex": "#e6e5e2"
          },
          "$description": "Faint grid lines."
        },
        "chart-axis": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.4078,
              0.4235,
              0.4353
            ],
            "alpha": 1,
            "hex": "#686c6f"
          },
          "$description": "Axis lines and labels."
        }
      },
      "states": {
        "$description": "Hover, selected, pressed and disabled each have their own color, so a chosen item never looks like one the pointer is passing over. Disabled is one look everywhere; a whole disabled row fades by --disabled-opacity.",
        "selected": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9137,
              0.9412,
              0.9059
            ],
            "alpha": 1,
            "hex": "#e9f0e7"
          },
          "$description": "A chosen row, option or range."
        },
        "selected-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.6235,
              0.7333,
              0.5961
            ],
            "alpha": 1,
            "hex": "#9fbb98"
          },
          "$description": "Border of a chosen item when it needs one."
        },
        "disabled-bg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9569,
              0.9569,
              0.949
            ],
            "alpha": 1,
            "hex": "#f4f4f2"
          },
          "$description": "Background of a control that cannot be used yet."
        },
        "disabled-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.902,
              0.898,
              0.8863
            ],
            "alpha": 1,
            "hex": "#e6e5e2"
          },
          "$description": "Its border."
        }
      },
      "inverse": {
        "$description": "A dark surface on a light page, and the reverse in dark mode. Overlay and glass sit on top of pictures and video.",
        "inverse": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1412,
              0.1569,
              0.1725
            ],
            "alpha": 1,
            "hex": "#24282c"
          },
          "$description": "Tooltips, value labels and small badges."
        },
        "inverse-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9804,
              0.9804,
              0.9765
            ],
            "alpha": 1,
            "hex": "#fafaf9"
          },
          "$description": "Text on it."
        },
        "inverse-muted": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.702,
              0.7098,
              0.7137
            ],
            "alpha": 1,
            "hex": "#b3b5b6"
          },
          "$description": "Quieter text on it."
        }
      }
    },
    "dark": {
      "surfaces": {
        "$description": "What things sit on.",
        "bg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.0941,
              0.1059,
              0.1176
            ],
            "alpha": 1,
            "hex": "#181b1e"
          },
          "$description": "The page behind everything."
        },
        "surface": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1255,
              0.1412,
              0.1569
            ],
            "alpha": 1,
            "hex": "#202428"
          },
          "$description": "Cards, panels and inputs."
        },
        "surface-sunken": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1098,
              0.1216,
              0.1373
            ],
            "alpha": 1,
            "hex": "#1c1f23"
          },
          "$description": "Wells and the area behind a card."
        },
        "surface-raised": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1608,
              0.1765,
              0.1961
            ],
            "alpha": 1,
            "hex": "#292d32"
          },
          "$description": "Menus and pop-ups that float above the page."
        },
        "surface-hover": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1686,
              0.1882,
              0.2118
            ],
            "alpha": 1,
            "hex": "#2b3036"
          },
          "$description": "A row when the pointer is over it."
        },
        "pressed": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2157,
              0.2314,
              0.2431
            ],
            "alpha": 1,
            "hex": "#373b3e"
          },
          "$description": "Buttons and rows while pressed."
        }
      },
      "lines": {
        "$description": "Edges and the outline that shows where you are.",
        "border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1922,
              0.2118,
              0.2314
            ],
            "alpha": 1,
            "hex": "#31363b"
          },
          "$description": "Thin borders around cards and fields."
        },
        "border-strong": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2824,
              0.3059,
              0.3294
            ],
            "alpha": 1,
            "hex": "#484e54"
          },
          "$description": "Borders that need more weight, such as a focused field."
        },
        "focus-ring": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.949,
              0.9451,
              0.9176
            ],
            "alpha": 1,
            "hex": "#f2f1ea"
          },
          "$description": "The outline around whatever the keyboard is on."
        }
      },
      "text": {
        "$description": "Three weights of text. Contrast is measured against the page.",
        "fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.949,
              0.9451,
              0.9176
            ],
            "alpha": 1,
            "hex": "#f2f1ea"
          },
          "$description": "Main text."
        },
        "fg-muted": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7059,
              0.7098,
              0.698
            ],
            "alpha": 1,
            "hex": "#b4b5b2"
          },
          "$description": "Secondary text, such as descriptions."
        },
        "fg-subtle": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.6039,
              0.6157,
              0.6235
            ],
            "alpha": 1,
            "hex": "#9a9d9f"
          },
          "$description": "Hints, labels and captions."
        },
        "disabled-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.4706,
              0.4824,
              0.4784
            ],
            "alpha": 1,
            "hex": "#787b7a"
          },
          "$description": "Text on a disabled control."
        }
      },
      "actions": {
        "$description": "Dark ink is the main action. Lime is only ever a fill, never text.",
        "fg-on-accent": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "alpha": 1,
            "hex": "#ffffff"
          },
          "$description": "Text on the main action color."
        },
        "accent": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2392,
              0.498,
              0.1333
            ],
            "alpha": 1,
            "hex": "#3d7f22"
          },
          "$description": "Main buttons and selected states."
        },
        "accent-hover": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.349,
              0.5686,
              0.2706
            ],
            "alpha": 1,
            "hex": "#599145"
          },
          "$description": "Primary buttons under the pointer."
        },
        "accent-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1294,
              0.1843,
              0.1373
            ],
            "alpha": 1,
            "hex": "#212f23"
          },
          "$description": "A quiet background for a selected item."
        },
        "accent-soft-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1686,
              0.2941,
              0.149
            ],
            "alpha": 1,
            "hex": "#2b4b26"
          },
          "$description": "Border around the quiet accent background."
        },
        "accent-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.651,
              0.851,
              0.5412
            ],
            "alpha": 1,
            "hex": "#a6d98a"
          },
          "$description": "Text on the quiet background."
        },
        "lime": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7608,
              0.9373,
              0.4471
            ],
            "alpha": 1,
            "hex": "#c2ef72"
          },
          "$description": "The AI mark and one positive highlight."
        },
        "lime-hover": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.698,
              0.8863,
              0.3333
            ],
            "alpha": 1,
            "hex": "#b2e255"
          },
          "$description": "Lime when the pointer is over it."
        },
        "lime-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1647,
              0.2,
              0.1255
            ],
            "alpha": 1,
            "hex": "#2a3320"
          },
          "$description": "A pale lime wash behind small markers."
        },
        "on-lime": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1412,
              0.1569,
              0.1725
            ],
            "alpha": 1,
            "hex": "#24282c"
          },
          "$description": "Text on lime. Always dark."
        },
        "lime-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.4863,
              0.5922,
              0.3412
            ],
            "alpha": 1,
            "hex": "#7c9757"
          },
          "$description": "A border around something the AI made."
        },
        "lime-soft-hover": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.3686,
              0.4471,
              0.2902
            ],
            "alpha": 1,
            "hex": "#5e724a"
          },
          "$description": "The lime wash when the pointer is over it."
        }
      },
      "status": {
        "$description": "Success, error and information. Each ships with an icon and a word, never color alone.",
        "on-danger": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1412,
              0.1569,
              0.1725
            ],
            "alpha": 1,
            "hex": "#24282c"
          },
          "$description": "Text on a solid danger button."
        },
        "success": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.549,
              0.7765,
              0.2471
            ],
            "alpha": 1,
            "hex": "#8cc63f"
          },
          "$description": "Something worked."
        },
        "success-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1373,
              0.1804,
              0.0902
            ],
            "alpha": 1,
            "hex": "#232e17"
          },
          "$description": "Background for a success message."
        },
        "success-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7059,
              0.8706,
              0.4706
            ],
            "alpha": 1,
            "hex": "#b4de78"
          },
          "$description": "Text on it."
        },
        "danger": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9176,
              0.4784,
              0.4471
            ],
            "alpha": 1,
            "hex": "#ea7a72"
          },
          "$description": "Something failed or will delete."
        },
        "danger-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2275,
              0.1216,
              0.1137
            ],
            "alpha": 1,
            "hex": "#3a1f1d"
          },
          "$description": "Background for an error message."
        },
        "danger-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9529,
              0.6549,
              0.6314
            ],
            "alpha": 1,
            "hex": "#f3a7a1"
          },
          "$description": "Text on it."
        },
        "info": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.5255,
              0.6471,
              0.7529
            ],
            "alpha": 1,
            "hex": "#86a5c0"
          },
          "$description": "Neutral information."
        },
        "info-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1216,
              0.1647,
              0.2039
            ],
            "alpha": 1,
            "hex": "#1f2a34"
          },
          "$description": "Background for a note."
        },
        "info-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.6667,
              0.7647,
              0.8471
            ],
            "alpha": 1,
            "hex": "#aac3d8"
          },
          "$description": "Text on it."
        },
        "success-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2824,
              0.3765,
              0.2235
            ],
            "alpha": 1,
            "hex": "#486039"
          },
          "$description": "Border of a success box."
        },
        "warning-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.4392,
              0.3294,
              0.2745
            ],
            "alpha": 1,
            "hex": "#705446"
          },
          "$description": "Border of a warning box."
        },
        "danger-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.4196,
              0.2745,
              0.2706
            ],
            "alpha": 1,
            "hex": "#6b4645"
          },
          "$description": "Border of an error box."
        },
        "info-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2745,
              0.3294,
              0.3765
            ],
            "alpha": 1,
            "hex": "#465460"
          },
          "$description": "Border of a note."
        }
      },
      "other": {
        "action": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2392,
              0.498,
              0.1333
            ],
            "alpha": 1,
            "hex": "#3d7f22"
          }
        },
        "action-text": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.651,
              0.851,
              0.5412
            ],
            "alpha": 1,
            "hex": "#a6d98a"
          }
        },
        "wf-ink": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.851,
              0.8471,
              0.8157
            ],
            "alpha": 1,
            "hex": "#d9d8d0"
          }
        },
        "wf-line": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2902,
              0.3137,
              0.3373
            ],
            "alpha": 1,
            "hex": "#4a5056"
          }
        },
        "wf-fill": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2275,
              0.2471,
              0.2706
            ],
            "alpha": 1,
            "hex": "#3a3f45"
          }
        },
        "wf-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1725,
              0.1882,
              0.2078
            ],
            "alpha": 1,
            "hex": "#2c3035"
          }
        },
        "wf-paper": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1412,
              0.1569,
              0.1725
            ],
            "alpha": 1,
            "hex": "#24282c"
          }
        },
        "wf-ai": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7608,
              0.9373,
              0.4471
            ],
            "alpha": 1,
            "hex": "#c2ef72"
          }
        },
        "on-success": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1412,
              0.1569,
              0.1725
            ],
            "alpha": 1,
            "hex": "#24282c"
          }
        },
        "thumb": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "alpha": 1,
            "hex": "#ffffff"
          }
        }
      },
      "attention": {
        "$description": "Amber means one thing: a person has to act. Nothing else uses it.",
        "attention": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8784,
              0.5804,
              0.4078
            ],
            "alpha": 1,
            "hex": "#e09468"
          },
          "$description": "The dot and border that call for a person."
        },
        "attention-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2275,
              0.1569,
              0.1098
            ],
            "alpha": 1,
            "hex": "#3a281c"
          },
          "$description": "Background of a request that needs a person."
        },
        "attention-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9373,
              0.698,
              0.549
            ],
            "alpha": 1,
            "hex": "#efb28c"
          },
          "$description": "Text on that background."
        },
        "warning": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8784,
              0.5804,
              0.4078
            ],
            "alpha": 1,
            "hex": "#e09468"
          },
          "$description": "Same as attention: a person has to act."
        },
        "warning-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2275,
              0.1569,
              0.1098
            ],
            "alpha": 1,
            "hex": "#3a281c"
          },
          "$description": "Same as attention-soft."
        },
        "warning-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9373,
              0.698,
              0.549
            ],
            "alpha": 1,
            "hex": "#efb28c"
          },
          "$description": "Same as attention-fg."
        },
        "attention-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.4392,
              0.3294,
              0.2745
            ],
            "alpha": 1,
            "hex": "#705446"
          },
          "$description": "Border of a request that needs a person."
        }
      },
      "direction": {
        "$description": "Up and down for prices, profit and loss, and any number that moves. Not the same as success and error. Always shown with an arrow or a sign. For readers who cannot tell green from red, set data-direction=\\",
        "up": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1843,
              0.7098,
              0.5804
            ],
            "alpha": 1,
            "hex": "#2fb594"
          },
          "$description": "A value went up or is a gain."
        },
        "up-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.0549,
              0.1686,
              0.149
            ],
            "alpha": 1,
            "hex": "#0e2b26"
          },
          "$description": "Background for an up value, such as a gain row."
        },
        "up-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2431,
              0.8275,
              0.6902
            ],
            "alpha": 1,
            "hex": "#3ed3b0"
          },
          "$description": "Text for an up value."
        },
        "down": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9412,
              0.3216,
              0.3725
            ],
            "alpha": 1,
            "hex": "#f0525f"
          },
          "$description": "A value went down or is a loss."
        },
        "down-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2275,
              0.102,
              0.1216
            ],
            "alpha": 1,
            "hex": "#3a1a1f"
          },
          "$description": "Background for a down value."
        },
        "down-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              1,
              0.4549,
              0.502
            ],
            "alpha": 1,
            "hex": "#ff7480"
          },
          "$description": "Text for a down value."
        }
      },
      "reserved": {
        "$description": "Two reserved roles. Unsure is a calm neutral for \\",
        "unsure": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.6627,
              0.6627,
              0.7412
            ],
            "alpha": 1,
            "hex": "#a9a9bd"
          },
          "$description": "Not fully sure, or partly done."
        },
        "unsure-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1451,
              0.1451,
              0.1843
            ],
            "alpha": 1,
            "hex": "#25252f"
          },
          "$description": "Background for an unsure chip."
        },
        "unsure-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7686,
              0.7686,
              0.8392
            ],
            "alpha": 1,
            "hex": "#c4c4d6"
          },
          "$description": "Text on it."
        },
        "celebrate": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8314,
              0.6353,
              0.3098
            ],
            "alpha": 1,
            "hex": "#d4a24f"
          },
          "$description": "A goal fully reached. One place per product."
        },
        "celebrate-soft": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1843,
              0.149,
              0.0784
            ],
            "alpha": 1,
            "hex": "#2f2614"
          },
          "$description": "Background for it."
        },
        "celebrate-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.902,
              0.7529,
              0.4784
            ],
            "alpha": 1,
            "hex": "#e6c07a"
          },
          "$description": "Text on it."
        }
      },
      "code": {
        "$description": "Always dark, in both themes.",
        "code-bg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.0706,
              0.0784,
              0.0863
            ],
            "alpha": 1,
            "hex": "#121416"
          },
          "$description": "Background of code and commands."
        },
        "code-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.9255,
              0.9216,
              0.8941
            ],
            "alpha": 1,
            "hex": "#ecebe4"
          },
          "$description": "Code text."
        },
        "code-muted": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.6039,
              0.6157,
              0.6039
            ],
            "alpha": 1,
            "hex": "#9a9d9a"
          },
          "$description": "Quiet text inside code blocks."
        }
      },
      "charts": {
        "$description": "Checked so people with color-blindness can tell them apart. Use them in this order.",
        "chart-1": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2902,
              0.549,
              0.8471
            ],
            "alpha": 1,
            "hex": "#4a8cd8"
          },
          "$description": "Series 1, in a fixed order."
        },
        "chart-2": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8471,
              0.3451,
              0.4549
            ],
            "alpha": 1,
            "hex": "#d85874"
          },
          "$description": "Series 2, in a fixed order."
        },
        "chart-3": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.0706,
              0.6275,
              0.6588
            ],
            "alpha": 1,
            "hex": "#12a0a8"
          },
          "$description": "Series 3, in a fixed order."
        },
        "chart-4": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.5098,
              0.6431,
              0.1255
            ],
            "alpha": 1,
            "hex": "#82a420"
          },
          "$description": "Series 4, in a fixed order."
        },
        "chart-5": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.6588,
              0.3843,
              0.7216
            ],
            "alpha": 1,
            "hex": "#a862b8"
          },
          "$description": "Series 5, in a fixed order."
        },
        "chart-neutral": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.4902,
              0.5059,
              0.5216
            ],
            "alpha": 1,
            "hex": "#7d8185"
          },
          "$description": "Everything else, grouped as Other."
        },
        "chart-seq-1": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2275,
              0.3922,
              0.6275
            ],
            "alpha": 1,
            "hex": "#3a64a0"
          },
          "$description": "Low to high amounts, step 1 of 5."
        },
        "chart-seq-2": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.3098,
              0.498,
              0.7529
            ],
            "alpha": 1,
            "hex": "#4f7fc0"
          },
          "$description": "Low to high amounts, step 2 of 5."
        },
        "chart-seq-3": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.4314,
              0.6196,
              0.8471
            ],
            "alpha": 1,
            "hex": "#6e9ed8"
          },
          "$description": "Low to high amounts, step 3 of 5."
        },
        "chart-seq-4": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.5961,
              0.7412,
              0.9255
            ],
            "alpha": 1,
            "hex": "#98bdec"
          },
          "$description": "Low to high amounts, step 4 of 5."
        },
        "chart-seq-5": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.7686,
              0.8549,
              0.9647
            ],
            "alpha": 1,
            "hex": "#c4daf6"
          },
          "$description": "Low to high amounts, step 5 of 5."
        },
        "chart-div-neg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.8471,
              0.3451,
              0.4549
            ],
            "alpha": 1,
            "hex": "#d85874"
          },
          "$description": "Below the middle."
        },
        "chart-div-mid": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2275,
              0.2471,
              0.2706
            ],
            "alpha": 1,
            "hex": "#3a3f45"
          },
          "$description": "The middle."
        },
        "chart-div-pos": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.2902,
              0.549,
              0.8471
            ],
            "alpha": 1,
            "hex": "#4a8cd8"
          },
          "$description": "Above the middle."
        },
        "chart-grid": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1922,
              0.2118,
              0.2314
            ],
            "alpha": 1,
            "hex": "#31363b"
          },
          "$description": "Faint grid lines."
        },
        "chart-axis": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.6039,
              0.6157,
              0.6235
            ],
            "alpha": 1,
            "hex": "#9a9d9f"
          },
          "$description": "Axis lines and labels."
        }
      },
      "states": {
        "$description": "Hover, selected, pressed and disabled each have their own color, so a chosen item never looks like one the pointer is passing over. Disabled is one look everywhere; a whole disabled row fades by --disabled-opacity.",
        "selected": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1373,
              0.1765,
              0.1647
            ],
            "alpha": 1,
            "hex": "#232d2a"
          },
          "$description": "A chosen row, option or range."
        },
        "selected-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1804,
              0.2941,
              0.1725
            ],
            "alpha": 1,
            "hex": "#2e4b2c"
          },
          "$description": "Border of a chosen item when it needs one."
        },
        "disabled-bg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1098,
              0.1216,
              0.1373
            ],
            "alpha": 1,
            "hex": "#1c1f23"
          },
          "$description": "Background of a control that cannot be used yet."
        },
        "disabled-border": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.1922,
              0.2118,
              0.2314
            ],
            "alpha": 1,
            "hex": "#31363b"
          },
          "$description": "Its border."
        }
      },
      "inverse": {
        "$description": "A dark surface on a light page, and the reverse in dark mode. Overlay and glass sit on top of pictures and video.",
        "inverse": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.949,
              0.9451,
              0.9176
            ],
            "alpha": 1,
            "hex": "#f2f1ea"
          },
          "$description": "Tooltips, value labels and small badges."
        },
        "inverse-fg": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.0941,
              0.1059,
              0.1176
            ],
            "alpha": 1,
            "hex": "#181b1e"
          },
          "$description": "Text on it."
        },
        "inverse-muted": {
          "$type": "color",
          "$value": {
            "colorSpace": "srgb",
            "components": [
              0.3176,
              0.3255,
              0.3294
            ],
            "alpha": 1,
            "hex": "#515354"
          },
          "$description": "Quieter text on it."
        }
      }
    }
  },
  "size": {
    "w-chat": {
      "$type": "dimension",
      "$value": {
        "value": 768,
        "unit": "px"
      },
      "$description": "Width of a conversation."
    },
    "w-home": {
      "$type": "dimension",
      "$value": {
        "value": 680,
        "unit": "px"
      },
      "$description": "Width of the start screen."
    },
    "w-page": {
      "$type": "dimension",
      "$value": {
        "value": 1120,
        "unit": "px"
      },
      "$description": "Width of a full page."
    }
  },
  "fontSize": {
    "text-display": {
      "$type": "dimension",
      "$value": {
        "value": 2.25,
        "unit": "rem"
      },
      "$description": "Page headings.",
      "$extensions": {
        "com.tattva.css": "clamp(2.25rem, 2vw + 1.5rem, 3.25rem)",
        "com.tattva.note": "The value is the smallest size. The CSS value grows with the screen."
      }
    },
    "text-headline": {
      "$type": "dimension",
      "$value": {
        "value": 1.625,
        "unit": "rem"
      },
      "$description": "Section headings.",
      "$extensions": {
        "com.tattva.css": "clamp(1.625rem, 1vw + 1.25rem, 2rem)",
        "com.tattva.note": "The value is the smallest size. The CSS value grows with the screen."
      }
    },
    "text-title": {
      "$type": "dimension",
      "$value": {
        "value": 1.25,
        "unit": "rem"
      },
      "$description": "Card and block titles.",
      "$extensions": {
        "com.tattva.css": "clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem)",
        "com.tattva.note": "The value is the smallest size. The CSS value grows with the screen."
      }
    }
  },
  "easing": {
    "ease-out": {
      "$type": "cubicBezier",
      "$value": [
        0.2,
        0,
        0,
        1
      ],
      "$description": "Things arriving: fast, then settling."
    },
    "ease-in": {
      "$type": "cubicBezier",
      "$value": [
        0.4,
        0,
        1,
        1
      ],
      "$description": "Things leaving: slow, then quick."
    },
    "ease-standard": {
      "$type": "cubicBezier",
      "$value": [
        0.2,
        0,
        0.38,
        0.9
      ],
      "$description": "Things that move and stay on screen."
    },
    "ease-sheet": {
      "$type": "cubicBezier",
      "$value": [
        0.32,
        0.72,
        0,
        1
      ],
      "$description": "A sheet or drawer sliding over the page."
    },
    "ease-arrive": {
      "$type": "cubicBezier",
      "$value": [
        0.16,
        1,
        0.3,
        1
      ],
      "$description": "A card or view arriving, with a long soft landing."
    }
  },
  "duration": {
    "dur-instant": {
      "$type": "duration",
      "$value": {
        "value": 70,
        "unit": "ms"
      },
      "$description": "Color changes you should not notice."
    },
    "dur-fast": {
      "$type": "duration",
      "$value": {
        "value": 150,
        "unit": "ms"
      },
      "$description": "Hover and press."
    },
    "dur-base": {
      "$type": "duration",
      "$value": {
        "value": 220,
        "unit": "ms"
      },
      "$description": "Things appearing."
    },
    "dur-slow": {
      "$type": "duration",
      "$value": {
        "value": 380,
        "unit": "ms"
      },
      "$description": "Panels sliding in."
    },
    "dur-page": {
      "$type": "duration",
      "$value": {
        "value": 520,
        "unit": "ms"
      }
    },
    "dur-ambient": {
      "$type": "duration",
      "$value": {
        "value": 2.4,
        "unit": "s"
      }
    }
  },
  "shadow": {
    "light": {
      "shadow-sm": {
        "$type": "shadow",
        "$value": {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1412,
              0.1569,
              0.1725
            ],
            "alpha": 0.05,
            "hex": "#24282c"
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        "$description": "A card that can be picked up."
      },
      "shadow-md": {
        "$type": "shadow",
        "$value": [
          {
            "color": {
              "colorSpace": "srgb",
              "components": [
                0.1412,
                0.1569,
                0.1725
              ],
              "alpha": 0.07,
              "hex": "#24282c"
            },
            "offsetX": {
              "value": 0,
              "unit": "px"
            },
            "offsetY": {
              "value": 6,
              "unit": "px"
            },
            "blur": {
              "value": 20,
              "unit": "px"
            },
            "spread": {
              "value": 0,
              "unit": "px"
            }
          },
          {
            "color": {
              "colorSpace": "srgb",
              "components": [
                0.1412,
                0.1569,
                0.1725
              ],
              "alpha": 0.04,
              "hex": "#24282c"
            },
            "offsetX": {
              "value": 0,
              "unit": "px"
            },
            "offsetY": {
              "value": 1,
              "unit": "px"
            },
            "blur": {
              "value": 2,
              "unit": "px"
            },
            "spread": {
              "value": 0,
              "unit": "px"
            }
          }
        ],
        "$description": "Menus and hovered cards."
      },
      "shadow-lg": {
        "$type": "shadow",
        "$value": [
          {
            "color": {
              "colorSpace": "srgb",
              "components": [
                0.1412,
                0.1569,
                0.1725
              ],
              "alpha": 0.12,
              "hex": "#24282c"
            },
            "offsetX": {
              "value": 0,
              "unit": "px"
            },
            "offsetY": {
              "value": 16,
              "unit": "px"
            },
            "blur": {
              "value": 40,
              "unit": "px"
            },
            "spread": {
              "value": 0,
              "unit": "px"
            }
          },
          {
            "color": {
              "colorSpace": "srgb",
              "components": [
                0.1412,
                0.1569,
                0.1725
              ],
              "alpha": 0.05,
              "hex": "#24282c"
            },
            "offsetX": {
              "value": 0,
              "unit": "px"
            },
            "offsetY": {
              "value": 2,
              "unit": "px"
            },
            "blur": {
              "value": 6,
              "unit": "px"
            },
            "spread": {
              "value": 0,
              "unit": "px"
            }
          }
        ],
        "$description": "Drawers and large pop-ups."
      }
    },
    "dark": {
      "shadow-sm": {
        "$type": "shadow",
        "$value": {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.4,
            "hex": "#000000"
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        "$description": "A card that can be picked up."
      },
      "shadow-md": {
        "$type": "shadow",
        "$value": {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.4,
            "hex": "#000000"
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 20,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        "$description": "Menus and hovered cards."
      },
      "shadow-lg": {
        "$type": "shadow",
        "$value": {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.5,
            "hex": "#000000"
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 16,
            "unit": "px"
          },
          "blur": {
            "value": 40,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        "$description": "Drawers and large pop-ups."
      }
    }
  },
  "radius": {
    "12": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "16": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "20": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "24": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  }
}