Greens

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-land"></div>
    <div class="label-primary">$green-land</div>
    <div class="label-secondary">#69995a</div>
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
</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>
  {{else}}
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
  {{/if}}
</div>
{
  "className": "bg-green-land",
  "colorName": "green-land",
  "colorCode": "#69995a",
  "accessible": null
}