Greens

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.’

<!-- Green Dark -->
<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>

<!-- Green State -->
<div class="swatch">
    <div class="swatch-color bg-green-state-hex"></div>
    <div class="label-primary">$green-state-hex</div>
    <div class="label-secondary">#46653c</div>
    <div class="icon-ok"></div>
    <div class="label-secondary">Accessible</div>
</div>

<!-- Green -->
<div class="swatch">
    <div class="swatch-color bg-green"></div>
    <div class="label-primary">$green</div>
    <div class="label-secondary">#587f4c</div>
    <div class="icon-ok"></div>
    <div class="label-secondary">Accessible</div>
</div>

<!-- Green Land -->
<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>

<!-- Green Mid -->
<div class="swatch">
    <div class="swatch-color bg-green-mid"></div>
    <div class="label-primary">$green-mid</div>
    <div class="label-secondary">#9dbd92</div>
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
</div>

<!-- Green Light -->
<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>

<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>
/* Green Dark */
{
  "className": "bg-green-dark",
  "colorName": "green-dark",
  "colorCode": "#2f4d26",
  "accessible": true
}

/* Green State */
{
  "className": "bg-green-state-hex",
  "colorName": "green-state-hex",
  "colorCode": "#46653c",
  "accessible": true
}

/* Green */
{
  "className": "bg-green",
  "colorName": "green",
  "colorCode": "#587f4c",
  "accessible": true
}

/* Green Land */
{
  "className": "bg-green-land",
  "colorName": "green-land",
  "colorCode": "#69995a",
  "accessible": null
}

/* Green Mid */
{
  "className": "bg-green-mid",
  "colorName": "green-mid",
  "colorCode": "#9dbd92",
  "accessible": null
}

/* Green Light */
{
  "className": "bg-green-light",
  "colorName": "green-light",
  "colorCode": "#cde3c3",
  "accessible": null
}