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-dark"></div>
    <div class="label-primary">$green-dark</div>
    <div class="label-secondary">#2f4d26</div>
    <div class="icon-ok"></div>
    <div class="label-secondary">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-dark",
  "colorName": "green-dark",
  "colorCode": "#2f4d26",
  "accessible": true