cloud.gov pattern library

color palette

Colors

Needs documentation…

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-red"></div>
    <div class="sans-s5 fw700">red</div>
    <div class="pattern-vars sans-s2 fw700">$color-red</div>
    <div class="mono-s3 fw300">#be4900</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-blue"></div>
    <div class="sans-s5 fw700">blue</div>
    <div class="pattern-vars sans-s2 fw700">$color-blue</div>
    <div class="mono-s3 fw300">#056dd4</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-gold"></div>
    <div class="sans-s5 fw700">gold</div>
    <div class="pattern-vars sans-s2 fw700">$color-gold</div>
    <div class="mono-s3 fw300">#f4b400</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-green"></div>
    <div class="sans-s5 fw700">green</div>
    <div class="pattern-vars sans-s2 fw700">$color-green</div>
    <div class="mono-s3 fw300">#0baf00</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-brightmint"></div>
    <div class="sans-s5 fw700">brightmint</div>
    <div class="pattern-vars sans-s2 fw700">$color-brightmint</div>
    <div class="mono-s3 fw300">#00df99</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-cream"></div>
    <div class="sans-s5 fw700">cream</div>
    <div class="pattern-vars sans-s2 fw700">$color-cream</div>
    <div class="mono-s3 fw300">#f5f5f3</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-trueblack"></div>
    <div class="sans-s5 fw700">trueblack</div>
    <div class="pattern-vars sans-s2 fw700">$color-trueblack</div>
    <div class="mono-s3 fw300">#000000</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-textblack"></div>
    <div class="sans-s5 fw700">textblack</div>
    <div class="pattern-vars sans-s2 fw700">$color-textblack</div>
    <div class="mono-s3 fw300">#333333</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-darkgray"></div>
    <div class="sans-s5 fw700">darkgray</div>
    <div class="pattern-vars sans-s2 fw700">$color-darkgray</div>
    <div class="mono-s3 fw300">#555555</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-mediumgray"></div>
    <div class="sans-s5 fw700">mediumgray</div>
    <div class="pattern-vars sans-s2 fw700">$color-mediumgray</div>
    <div class="mono-s3 fw300">#8e8e8e</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-mediumgray-trans"></div>
    <div class="sans-s5 fw700">mediumgray-trans</div>
    <div class="pattern-vars sans-s2 fw700">$color-mediumgray-trans</div>
    <div class="mono-s3 fw300">rgba(0, 0, 0, .4)</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-lightgray"></div>
    <div class="sans-s5 fw700">lightgray</div>
    <div class="pattern-vars sans-s2 fw700">$color-lightgray</div>
    <div class="mono-s3 fw300">#d3d3d3</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-lightestgray"></div>
    <div class="sans-s5 fw700">lightestgray</div>
    <div class="pattern-vars sans-s2 fw700">$color-lightestgray</div>
    <div class="mono-s3 fw300">#f5f5f3</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color bg-white"></div>
    <div class="sans-s5 fw700">white</div>
    <div class="pattern-vars sans-s2 fw700">$color-white</div>
    <div class="mono-s3 fw300">#ffffff</div>
</div>
 
{% for color in colors %}
  <div class="swatch h20 mb8">
    <div class="example swatch-color bg-{{ color.colorName }}"></div>
    <div class="sans-s5 fw700">{{ color.colorName }}</div>
    <div class="pattern-vars sans-s2 fw700">$color-{{ color.colorName }}</div>
    <div class="mono-s3 fw300">{{ color.colorCode }}</div>
  </div>
{% endfor %}
 
{
  "colors": [
    {
      "color": null,
      "colorName": "red",
      "colorCode": "#be4900"
    },
    {
      "color": null,
      "colorName": "blue",
      "colorCode": "#056dd4"
    },
    {
      "color": null,
      "colorName": "gold",
      "colorCode": "#f4b400"
    },
    {
      "color": null,
      "colorName": "green",
      "colorCode": "#0baf00"
    },
    {
      "color": null,
      "colorName": "brightmint",
      "colorCode": "#00df99"
    },
    {
      "color": null,
      "colorName": "cream",
      "colorCode": "#f5f5f3"
    },
    {
      "color": null,
      "colorName": "trueblack",
      "colorCode": "#000000"
    },
    {
      "color": null,
      "colorName": "textblack",
      "colorCode": "#333333"
    },
    {
      "color": null,
      "colorName": "darkgray",
      "colorCode": "#555555"
    },
    {
      "color": null,
      "colorName": "mediumgray",
      "colorCode": "#8e8e8e"
    },
    {
      "color": null,
      "colorName": "mediumgray-trans",
      "colorCode": "rgba(0, 0, 0, .4)"
    },
    {
      "color": null,
      "colorName": "lightgray",
      "colorCode": "#d3d3d3"
    },
    {
      "color": null,
      "colorName": "lightestgray",
      "colorCode": "#f5f5f3"
    },
    {
      "color": null,
      "colorName": "white",
      "colorCode": "#ffffff"
    }
  ]
}