{
 "$description": "The portfolio's own design tokens, in the Design Tokens Community Group format. Three tiers: primitives (raw values), theme (what each value means on this site) and component (where a value is reused). The build writes these into the top of site.css as the custom properties every rule uses, and check.py fails if a colour appears anywhere in site.css that is not here. There is one theme on purpose: the site has one fixed look, so the concepts' own design systems stand out against it.",
 "$extensions": {
  "target": "styles/site.css"
 },
 "primitive": {
  "color": {
   "$type": "color",
   "navy": {
    "900": {
     "$value": "#14202E",
     "$description": "Ink: text, lines and frames"
    },
    "700": {
     "$value": "#2E3A48"
    },
    "600": {
     "$value": "#56606C"
    },
    "550": {
     "$value": "#5F6976"
    }
   },
   "grey": {
    "500": {
     "$value": "#8A94A3",
     "$description": "Field outlines, 3 to 1 on white"
    },
    "400": {
     "$value": "#AEB6C1"
    },
    "350": {
     "$value": "#B7BFCA"
    },
    "300": {
     "$value": "#CBD2DA"
    },
    "250": {
     "$value": "#D5DAE1"
    },
    "150": {
     "$value": "#EDF0F4"
    },
    "120": {
     "$value": "#EEF1F5"
    },
    "50": {
     "$value": "#F7F8FA"
    }
   },
   "white": {
    "$value": "#FFFFFF"
   },
   "red": {
    "700": {
     "$value": "#C8102E",
     "$description": "The red pen"
    }
   },
   "scrim": {
    "$value": "rgba(20, 32, 46, .6)"
   }
  },
  "font": {
   "family": {
    "$type": "fontFamily",
    "sans": {
     "$value": [
      "Schibsted",
      "-apple-system",
      "BlinkMacSystemFont",
      "Segoe UI",
      "Roboto",
      "Arial",
      "sans-serif"
     ]
    }
   }
  },
  "size": {
   "$type": "dimension",
   "wrap": {
    "$value": "1180px"
   },
   "gutter": {
    "$value": "24px"
   },
   "frame": {
    "$value": "1.5px"
   }
  }
 },
 "theme": {
  "paper": {
   "$value": "{primitive.color.white}",
   "$description": "Page"
  },
  "band": {
   "$value": "{primitive.color.grey.50}",
   "$description": "Tinted bands on the home page"
  },
  "ink": {
   "$value": "{primitive.color.navy.900}",
   "$description": "Text, lines, frames"
  },
  "body": {
   "$value": "{primitive.color.navy.700}",
   "$description": "Running text"
  },
  "muted": {
   "$value": "{primitive.color.navy.600}",
   "$description": "Secondary text, still AA on white"
  },
  "faint": {
   "$value": "{primitive.color.navy.550}",
   "$description": "Faded figure text, still AA on white"
  },
  "rule": {
   "$value": "{primitive.color.grey.250}",
   "$description": "Thin dividers"
  },
  "soft": {
   "$value": "{primitive.color.grey.300}",
   "$description": "Card outlines inside figures"
  },
  "grid": {
   "$value": "{primitive.color.grey.150}",
   "$description": "Drafting grid lines"
  },
  "field": {
   "$value": "{primitive.color.grey.500}",
   "$description": "Outline of a text field or select"
  },
  "chip": {
   "$value": "{primitive.color.grey.350}",
   "$description": "Outline of a small suggestion button"
  },
  "ghost": {
   "$value": "{primitive.color.grey.400}",
   "$description": "A bar or value shown for comparison only"
  },
  "picked": {
   "$value": "{primitive.color.grey.120}",
   "$description": "Background of a picked option"
  },
  "scrim": {
   "$value": "{primitive.color.scrim}",
   "$description": "Behind a dialog"
  },
  "mark": {
   "$value": "{primitive.color.red.700}",
   "$description": "The red pen: only for what matters, and the focus ring"
  },
  "link": {
   "$value": "{theme.ink}"
  },
  "sans": {
   "$value": "{primitive.font.family.sans}"
  },
  "wrap": {
   "$value": "{primitive.size.wrap}"
  },
  "gutter": {
   "$value": "{primitive.size.gutter}"
  }
 },
 "component": {
  "frame": {
   "$value": "{primitive.size.frame} solid {theme.ink}",
   "$description": "Every frame and box border"
  }
 }
}