static/shared/color/color.md

## Colors

---

Prefer the use of Color Intent over Color variables where possible. Color Intents are themed and
adjust for dark mode.

### Gray {#colors-gray}

<span style="display:contents;">
  <go-color id="--gray-1"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--gray-2"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--gray-3"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--gray-4"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--gray-5"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--gray-6"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--gray-7"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--gray-8"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--gray-9"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--gray-10"></go-color>
</span>

### Brand {#colors-brand}

<span style="display:contents;">
  <go-color id="--turq-light"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--turq-med"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--turq-dark"></go-color>
</span>

### Other {#colors-other}

<span style="display:contents;">
  <go-color id="--blue"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--blue-light"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--black"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--green"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--green-light"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--pink"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--pink-light"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--purple"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--purple-light"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--slate"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--white"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--yellow"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--yellow-light"></go-color>
</span>