|

   Veteran Tools Platform - Developer Documentation

Color palette

There are no notes for this item.

PropRequired?TypeDefaultDescription
<h3>

    Defaults</h3>
<section class='palette-container'>

    <div class='palette-swatch'>
        <h6>$color-link-default</h6>
        <div class='swatch color-link-default'></div>
        <p><b>Hex: </b>#004795<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-visited</h6>
        <div class='swatch color-visited'></div>
        <p><b>Hex: </b>#4c2c92<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-focus</h6>
        <div class='swatch color-focus'></div>
        <p><b>Hex: </b>#3e94cf<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-base</h6>
        <div class='swatch color-base'></div>
        <p><b>Hex: </b>#212121<br>
            <b>Rating:</b> </p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-black</h6>
        <div class='swatch color-black'></div>
        <p><b>Hex: </b>#000000<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-white</h6>
        <div class='swatch color-white'></div>
        <p><b>Hex: </b>#ffffff<br>
            <b>Rating:</b> AAA</p>
    </div>

</section>

<h3>Primary</h3>
<section class='palette-container'>

    <div class='palette-swatch'>
        <h6>$color-primary</h6>
        <div class='swatch color-primary'></div>
        <p><b>Hex: </b>#0071bc<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-primary-darker</h6>
        <div class='swatch color-primary-darker'></div>
        <p><b>Hex: </b>#003E73<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-primary-darkest</h6>
        <div class='swatch color-primary-darkest'></div>
        <p><b>Hex: </b>#112e51<br>
            <b>Rating:</b> AAA</p>
    </div>

</section>

<h3>Primary Alt</h3>
<section class='palette-container'>

    <div class='palette-swatch'>
        <h6>$color-primary-lightest</h6>
        <div class='swatch color-primary-alt-lightest'></div>
        <p><b>Hex: </b>#e1f3f8<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-primary-alt-light</h6>
        <div class='swatch color-primary-alt-light'></div>
        <p><b>Hex: </b>#9bdaf1<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-primary-alt</h6>
        <div class='swatch color-primary-alt'></div>
        <p><b>Hex: </b>#02bfe7<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-primary-alt-dark</h6>
        <div class='swatch color-primary-alt-dark'></div>
        <p><b>Hex: </b>#00a6d2<br>
            <b>Rating:</b> </p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-primary-alt-darkest</h6>
        <div class='swatch color-primary-alt-darkest'></div>
        <p><b>Hex: </b>#046b99<br>
            <b>Rating:</b> AA</p>
    </div>

</section>

<h3>Secondary</h3>
<section class='palette-container'>

    <div class='palette-swatch'>
        <h6>$color-secondary-lightest</h6>
        <div class='swatch color-secondary-lightest'></div>
        <p><b>Hex: </b>#f9dede<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-secondary-light</h6>
        <div class='swatch color-secondary-light'></div>
        <p><b>Hex: </b>#e59393<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-secondary</h6>
        <div class='swatch color-secondary'></div>
        <p><b>Hex: </b>#e31c3d<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-secondary-dark</h6>
        <div class='swatch color-secondary-dark'></div>
        <p><b>Hex: </b>#cd2026<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-secondary-darkest</h6>
        <div class='swatch color-secondary-darkest'></div>
        <p><b>Hex: </b>#981b1e<br>
            <b>Rating:</b> AAA</p>
    </div>

</section>

<h3>Gray</h3>
<section class='palette-container'>

    <div class='palette-swatch'>
        <h6>$color-gray-lightest</h6>
        <div class='swatch color-gray-lightest'></div>
        <p><b>Hex: </b>#f1f1f1<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-gray-lighter</h6>
        <div class='swatch color-gray-lighter'></div>
        <p><b>Hex: </b>#d6d7d9<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-gray-light</h6>
        <div class='swatch color-gray-light'></div>
        <p><b>Hex: </b>#aeb0b5<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-gray</h6>
        <div class='swatch color-gray'></div>
        <p><b>Hex: </b>#5b616b<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-gray-dark</h6>
        <div class='swatch color-gray-dark'></div>
        <p><b>Hex: </b>#323a45<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-gray-medium</h6>
        <div class='swatch color-gray-medium'></div>
        <p><b>Hex: </b>#757575<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-gray-warm-dark</h6>
        <div class='swatch color-gray-warm-dark'></div>
        <p><b>Hex: </b>#494440<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-gray-warm-light</h6>
        <div class='swatch color-gray-warm-light'></div>
        <p><b>Hex: </b>#e4e2e0<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-gray-cool-light</h6>
        <div class='swatch color-gray-cool-light'></div>
        <p><b>Hex: </b>#dce4ef<br>
            <b>Rating:</b> AAA</p>
    </div>

</section>

<h3>Gold</h3>
<section class='palette-container'>

    <div class='palette-swatch'>
        <h6>$color-gold-lightest</h6>
        <div class='swatch color-gold-lightest'></div>
        <p><b>Hex: </b>#fff1d2<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-gold-lighter</h6>
        <div class='swatch color-gold-lighter'></div>
        <p><b>Hex: </b>#fad980<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-gold-light</h6>
        <div class='swatch color-gold-light'></div>
        <p><b>Hex: </b>#f9c642<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-gold</h6>
        <div class='swatch color-gold'></div>
        <p><b>Hex: </b>#fdb81e<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-gold-darker</h6>
        <div class='swatch color-gold-darker'></div>
        <p><b>Hex: </b>#988530<br>
            <b>Rating:</b> </p>
    </div>

</section>

<h3>Green</h3>
<section class='palette-container'>

    <div class='palette-swatch'>
        <h6>$color-green-lightest</h6>
        <div class='swatch color-green-lightest'></div>
        <p><b>Hex: </b>#e7f4e4<br>
            <b>Rating:</b> AAA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-green-lighter</h6>
        <div class='swatch color-green-lighter'></div>
        <p><b>Hex: </b>#94bfa2<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-green-light</h6>
        <div class='swatch color-green-light'></div>
        <p><b>Hex: </b>#4aa564<br>
            <b>Rating:</b> </p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-green</h6>
        <div class='swatch color-green'></div>
        <p><b>Hex: </b>#2e8540<br>
            <b>Rating:</b> AA</p>
    </div>

    <div class='palette-swatch'>
        <h6>$color-green-darker</h6>
        <div class='swatch color-green-darker'></div>
        <p><b>Hex: </b>#195c27<br>
            <b>Rating:</b> AAA</p>
    </div>

</section>
 
{% for f in family %}

<h3>{{ f.name }}</h3>
<section class='palette-container'>

  {% for c in f.color %}

  <div class='palette-swatch'>
    <h6>{{ c.name }}</h6>
    <div class='swatch {{ c.var }}'></div>
    <p><b>Hex: </b>{{ c.hex }}<br>
      <b>Rating:</b> {{ c.contrast }}</p>
  </div>

  {% endfor %}

</section>
{% endfor %}
 
package:
  name: department-of-veteran-affairs/jean-pants
  version: 0.1.0
assetPath: /design-system/
isProduction: true
family:
  - name: Defaults
    color:
      - var: color-link-default
        name: $color-link-default
        hex: '#004795'
        contrast: AA
      - var: color-visited
        name: $color-visited
        hex: '#4c2c92'
        contrast: AAA
      - var: color-focus
        name: $color-focus
        hex: '#3e94cf'
        contrast: AA
      - var: color-base
        name: $color-base
        hex: '#212121'
        contrast: null
      - var: color-black
        name: $color-black
        hex: '#000000'
        contrast: AAA
      - var: color-white
        name: $color-white
        hex: '#ffffff'
        contrast: AAA
  - name: Primary
    color:
      - var: color-primary
        name: $color-primary
        hex: '#0071bc'
        contrast: AA
      - var: color-primary-darker
        name: $color-primary-darker
        hex: '#003E73'
        contrast: AAA
      - var: color-primary-darkest
        name: $color-primary-darkest
        hex: '#112e51'
        contrast: AAA
  - name: Primary Alt
    color:
      - var: color-primary-alt-lightest
        name: $color-primary-lightest
        hex: '#e1f3f8'
        contrast: AAA
      - var: color-primary-alt-light
        name: $color-primary-alt-light
        hex: '#9bdaf1'
        contrast: AAA
      - var: color-primary-alt
        name: $color-primary-alt
        hex: '#02bfe7'
        contrast: AA
      - var: color-primary-alt-dark
        name: $color-primary-alt-dark
        hex: '#00a6d2'
        contrast: null
      - var: color-primary-alt-darkest
        name: $color-primary-alt-darkest
        hex: '#046b99'
        contrast: AA
  - name: Secondary
    color:
      - var: color-secondary-lightest
        name: $color-secondary-lightest
        hex: '#f9dede'
        contrast: AAA
      - var: color-secondary-light
        name: $color-secondary-light
        hex: '#e59393'
        contrast: AA
      - var: color-secondary
        name: $color-secondary
        hex: '#e31c3d'
        contrast: AA
      - var: color-secondary-dark
        name: $color-secondary-dark
        hex: '#cd2026'
        contrast: AA
      - var: color-secondary-darkest
        name: $color-secondary-darkest
        hex: '#981b1e'
        contrast: AAA
  - name: Gray
    color:
      - var: color-gray-lightest
        name: $color-gray-lightest
        hex: '#f1f1f1'
        contrast: AAA
      - var: color-gray-lighter
        name: $color-gray-lighter
        hex: '#d6d7d9'
        contrast: AAA
      - var: color-gray-light
        name: $color-gray-light
        hex: '#aeb0b5'
        contrast: AA
      - var: color-gray
        name: $color-gray
        hex: '#5b616b'
        contrast: AA
      - var: color-gray-dark
        name: $color-gray-dark
        hex: '#323a45'
        contrast: AAA
      - var: color-gray-medium
        name: $color-gray-medium
        hex: '#757575'
        contrast: AA
      - var: color-gray-warm-dark
        name: $color-gray-warm-dark
        hex: '#494440'
        contrast: AAA
      - var: color-gray-warm-light
        name: $color-gray-warm-light
        hex: '#e4e2e0'
        contrast: AAA
      - var: color-gray-cool-light
        name: $color-gray-cool-light
        hex: '#dce4ef'
        contrast: AAA
  - name: Gold
    color:
      - var: color-gold-lightest
        name: $color-gold-lightest
        hex: '#fff1d2'
        contrast: AAA
      - var: color-gold-lighter
        name: $color-gold-lighter
        hex: '#fad980'
        contrast: AAA
      - var: color-gold-light
        name: $color-gold-light
        hex: '#f9c642'
        contrast: AAA
      - var: color-gold
        name: $color-gold
        hex: '#fdb81e'
        contrast: AA
      - var: color-gold-darker
        name: $color-gold-darker
        hex: '#988530'
        contrast: null
  - name: Green
    color:
      - var: color-green-lightest
        name: $color-green-lightest
        hex: '#e7f4e4'
        contrast: AAA
      - var: color-green-lighter
        name: $color-green-lighter
        hex: '#94bfa2'
        contrast: AA
      - var: color-green-light
        name: $color-green-light
        hex: '#4aa564'
        contrast: null
      - var: color-green
        name: $color-green
        hex: '#2e8540'
        contrast: AA
      - var: color-green-darker
        name: $color-green-darker
        hex: '#195c27'
        contrast: AAA