Green represents land-ownership in maps, and data in charts. It also serves to add a bit of color to the site here and there, and helps make hierarchy more distinct when used as a rule with some headers.

‘“Accessible” colors can be used as text fills over white backgrounds, since the contrast ratio between the color and white is at least 4.5:1.’

<div class="swatch">
    <div class="swatch-color bg-green-light"></div>
    <div class="label-primary">$green-light</div>
    <div class="label-secondary">#cde3c3</div>
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
<div class="swatch">
  <div class="swatch-color {{ className }}"></div>
  <div class="label-primary">${{ colorName }}</div>
  <div class="label-secondary">{{ colorCode }}</div>
  {{#if accessible }}
    <div class="icon-ok"></div>
    <div class="label-secondary">Accessible</div>
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
  "className": "bg-green-light",
  "colorName": "green-light",
  "colorCode": "#cde3c3",
  "accessible": null