{
  "color": {
    "white": {
      "value": "#FFFFFF",
      "role": "Background, cards, buttons"
    },
    "gray-1": {
      "value": "#F3F3F3",
      "role": "Surfaces: personal blocks, card headers, matrix labels, filter chips, photo background"
    },
    "gray-2": {
      "value": "#E4E4E4",
      "role": "Borders and dividers; also the fill of the free-shipping label in the cost summary"
    },
    "gray-3": {
      "value": "#C4C4C4",
      "role": "Borders of inputs and checkboxes, hover border of header buttons"
    },
    "gray-4": {
      "value": "#B0B0B0",
      "role": "Placeholders, such as the 0 in an empty matrix cell"
    },
    "gray-5": {
      "value": "#898989",
      "role": "Decorative gray: icons, struck-through prices"
    },
    "gray-6": {
      "value": "#5C5C5C",
      "role": "Secondary text"
    },
    "black": {
      "value": "#121212",
      "role": "Text, black bar, footer"
    },
    "searchbar": {
      "value": "#EDEDED",
      "role": "Exception: lighter than gray-1 so the search bar does not read as a surface"
    },
    "block-hover": {
      "value": "#E9E9E9",
      "role": "Exception: hover tint of the personal blocks"
    },
    "gold": {
      "value": "#B58521",
      "role": "ONLY cart and checkout, plus link hover in panels"
    },
    "gold-hover": {
      "value": "#9F751D",
      "role": "Hover of gold"
    },
    "red": {
      "value": "#D90606",
      "role": "Reduced: price and Outlet label; the Outlet nav link"
    },
    "green": {
      "value": "#46973A",
      "role": "Stock: indicator line, dot, label"
    },
    "green-tint": {
      "value": "#E4FDE1",
      "role": "Filled cell from stock; cart label Stock"
    },
    "orange": {
      "value": "#FD7E14",
      "role": "Size sold out, will be backordered: indicator line, dot"
    },
    "orange-tint": {
      "value": "#FFEDDD",
      "role": "Cell of a size that is sold out, also when empty"
    },
    "blue": {
      "value": "#1155CC",
      "role": "Preorder: indicator line, dot, counter"
    },
    "blue-tint": {
      "value": "#E3ECFB",
      "role": "Filled preorder cell; cart label Preorder"
    },
    "notice": {
      "value": "#FFF4C2",
      "role": "Notice that asks for a correction: the per-size maximum and the preorder minimum (light yellow, deliberately outside the status colours)"
    },
    "notice-border": {
      "value": "#F0DC8C",
      "role": "Border of a notice"
    }
  },
  "radius": {
    "round": {
      "value": "999px",
      "role": "Search bar, dots, swatches, category circles, counter badge, \"+N\" button"
    },
    "large": {
      "value": "10px",
      "role": "Header buttons, dropdown panels, personal blocks, toggle, cost summary"
    },
    "cell": {
      "value": "5px",
      "role": "Matrix cells, colour rows in the cart, shipment rows"
    },
    "small": {
      "value": "3px",
      "role": "Filled text buttons, labels, size buttons, chips, checkboxes, notices"
    }
  },
  "shadow": {
    "bar": {
      "value": "0 2px 6px rgba(18,18,18,.1)",
      "role": "White bar (header), only after scrolling"
    },
    "panel": {
      "value": "0 14px 30px -10px rgba(18,18,18,.28)",
      "role": "Dropdown panels: account, minicart, search"
    },
    "mega": {
      "value": "0 18px 30px -22px rgba(18,18,18,.4)",
      "role": "Mega menu, with border-bottom gray-2"
    },
    "cell": {
      "value": "0 1px 2px rgba(0,0,0,.16)",
      "role": "Matrix cell"
    },
    "button-active": {
      "value": "0 1px 2px rgba(0,0,0,.12)",
      "role": "Active button in the toggle"
    }
  },
  "text": {
    "11": {
      "value": "11px",
      "role": "Uppercase labels (700, letter-spacing .07em) and the stock line in a cell"
    },
    "12": {
      "value": "12px",
      "role": "Article number, RRP, meta"
    },
    "13": {
      "value": "13px",
      "role": "Links, chips, secondary lines"
    },
    "14": {
      "value": "14px",
      "role": "Tables, form labels, specifications"
    },
    "15": {
      "value": "15px",
      "role": "Base, line-height 1.6"
    },
    "16": {
      "value": "16px",
      "role": "Price on the tile"
    },
    "18": {
      "value": "18px",
      "role": "Card header in the cart"
    },
    "20": {
      "value": "20px",
      "role": "Amount in a card header"
    },
    "22": {
      "value": "22px",
      "role": "Section heading, line-height 32"
    },
    "26": {
      "value": "26px",
      "role": "Sub heading"
    },
    "30": {
      "value": "30px",
      "role": "Page heading, line-height 36"
    },
    "41": {
      "value": "41px",
      "role": "Banner heading, line-height 48"
    }
  },
  "size": {
    "wrap": {
      "value": "1320px",
      "role": "Maximum content width (content 1240 with the gutters)"
    },
    "wrap-gutter": {
      "value": "40px",
      "role": "Side gutter of the content on desktop"
    },
    "bar": {
      "value": "86px",
      "role": "Height of the white bar"
    },
    "button": {
      "value": "48px",
      "role": "Search bar and header buttons"
    },
    "navlink": {
      "value": "46px",
      "role": "Height of a nav link"
    },
    "cell": {
      "value": "45px",
      "role": "Input field in a matrix cell"
    },
    "cell-width": {
      "value": "105px",
      "role": "Width of a matrix cell from 768 px"
    }
  },
  "layer": {
    "bar": {
      "value": "20",
      "role": "White bar"
    },
    "search-panel": {
      "value": "26",
      "role": "Must come out above the shadow of the bar"
    }
  },
  "breakpoint": {
    "mobile": {
      "value": "0",
      "role": "up to 767"
    },
    "tablet": {
      "value": "768px",
      "role": "tablet portrait, up to 899"
    },
    "tablet-wide": {
      "value": "900px",
      "role": "tablet landscape, up to 1199"
    },
    "desktop": {
      "value": "1200px",
      "role": "desktop"
    }
  },
  "font": {
    "heading": "'Univers Black', 'Arial Black', Helvetica, sans-serif",
    "text": "'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif"
  }
}