360Giving Design System - Components

Colours 

<h1 class="align-center">Colour Swatches</h1>

<ul class="card-list wrapper">
    <h2 class="align-center">Main Colours</h2>

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: #153634">
                    <h4>Base</h4>
                </div>
            </div>
            <div class="media-card__content">
                <pre class="css"><code>hex: #153634
hsla(243, 75%,  6%, 1)
rgba(21, 54, 52)
 Vars | $base, --base-hsl, --color-base
Alias | --color-default</code></pre>
            </div>
        </article>
    </li>

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: #DE6E26">
                    <h4>Orange</h4>
                </div>
            </div>
            <div class="media-card__content">
                <pre class="css"><code>hex: #DE6E26
hsla(23, 74%, 51%, 1)
rgba(222, 110, 38)
 Vars | $orange, --orange-hsl, --color-orange
Alias | --color-primary</code></pre>
            </div>
        </article>
    </li>

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: #4DACB6">
                    <h4>Teal</h4>
                </div>
            </div>
            <div class="media-card__content">
                <pre class="css"><code>hex: #4DACB6
hsla(186, 42%, 51%, 1)
rgba(77, 172, 182)
 Vars | $teal, --teal-hsl, --color-teal
Alias | --color-accent</code></pre>
            </div>
        </article>
    </li>

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: #EFC329">
                    <h4>Yellow</h4>
                </div>
            </div>
            <div class="media-card__content">
                <pre class="css"><code>hex: #EFC329
hsla(47, 86%, 55%, 1)
rgba(239, 195, 41)
 Vars | $yellow, --yellow-hsl, --color-yellow</code></pre>
            </div>
        </article>
    </li>

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: #BC2C26">
                    <h4>Red</h4>
                </div>
            </div>
            <div class="media-card__content">
                <pre class="css"><code>hex: #BC2C26
hsla(2, 66%, 44%, 1)
rgba(188, 44, 38)
 Vars | $red, --red-hsl, --color-red</code></pre>
            </div>
        </article>
    </li>

    <h2 class="align-center margin-top:3">Text Colours</h2>

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: #ffffff; color: #153634">
                    <h4>Base</h4>
                    <p style="margin: 0;font-size: 1.1rem;">
                        Some Base text.
                    </p>
                </div>
            </div>
            <div class="media-card__content">

                <pre class="css"><code>hex: #153634
hsla(243, 75%,  6%, 1)
rgba(21, 54, 52)
 Vars | $base, --base-hsl, --color-base
Alias | --color-default</code></pre>

        </article>
    </li>

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: #ffffff; color: #A7531D">
                    <h4>Orange</h4>
                    <p style="margin: 0;font-size: 1.1rem;">
                        Some Orange text.
                    </p>
                </div>
            </div>
            <div class="media-card__content">

                <pre class="css"><code>hex: #A7531D
hsla(24, 70%, 38%, 1)
rgba(166, 84, 29)
 Vars | $orange-dark, --orange-dark-hsl, --color-orange-dark</code></pre>
            </div>

        </article>
    </li>

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: #ffffff; color: #2e666b">
                    <h4>Teal</h4>
                    <p style="margin: 0;font-size: 1.1rem;">
                        Some Teal text.
                    </p>
                </div>
            </div>
            <div class="media-card__content">

                <pre class="css"><code>hex: #2e666b
hsla(185, 40%, 30%, 1)
rgba(46, 102, 107)
 Vars | $teal-dark, --teal-dark-hsl, --color-teal-dark</code></pre>
            </div>

        </article>
    </li>

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: #ffffff; color: #8f730c">
                    <h4>Yellow</h4>
                    <p style="margin: 0;font-size: 1.1rem;">
                        Some Yellow text.
                    </p>
                </div>
            </div>
            <div class="media-card__content">

                <pre class="css"><code>hex: #8f730c
hsla(47, 85%, 30%, 1)
rgba(143, 116, 12)
 Vars | $yellow-dark, --yellow-dark-hsl, --color-yellow-dark</code></pre>
            </div>

        </article>
    </li>

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: #ffffff; color: #BC2C26">
                    <h4>Red</h4>
                    <p style="margin: 0;font-size: 1.1rem;">
                        Some Red text.
                    </p>
                </div>
            </div>
            <div class="media-card__content">

                <pre class="css"><code>hex: #BC2C26
hsla(2, 66%, 44%, 1)
rgba(188, 44, 38)
 Vars | $red, --red-hsl, --color-red</code></pre>

        </article>
    </li>

    <li class="card-list__item">
        <h2 class="align-center margin-top:3">Colour Shades and Tints</h2>
        <div class="base-card base-card--none base-card--spacious tints">
            <div class="color-variants">

                <div class="color-variants__col">

                    <div class="color-variants__item color-variants--shades" style="background-color: #050E0D">#050E0D</div>

                    <div class="color-variants__item color-variants--shades" style="background-color: #0B1B1A">#0B1B1A</div>

                    <div class="color-variants__item color-variants--shades" style="background-color: #102927">#102927</div>

                    <div class="color-variants__item color-variants--main" style="background-color: #153634">#153634</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #506867">#506867</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #8A9B99">#8A9B99</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #C5CDCC">#C5CDCC</div>

                </div>

                <div class="color-variants__col">

                    <div class="color-variants__item color-variants--shades" style="background-color: #381C0A">#381C0A</div>

                    <div class="color-variants__item color-variants--shades" style="background-color: #6F3713">#6F3713</div>

                    <div class="color-variants__item color-variants--shades" style="background-color: #A7531D">#A7531D</div>

                    <div class="color-variants__item color-variants--main" style="background-color: #DE6E26">#DE6E26</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #E6925C">#E6925C</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #EFB793">#EFB793</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #F7DBC9">#F7DBC9</div>

                </div>

                <div class="color-variants__col">

                    <div class="color-variants__item color-variants--shades" style="background-color: #132B2D">#132B2D</div>

                    <div class="color-variants__item color-variants--shades" style="background-color: #27565B">#27565B</div>

                    <div class="color-variants__item color-variants--shades" style="background-color: #3a8088">#3a8088</div>

                    <div class="color-variants__item color-variants--main" style="background-color: #4DACB6">#4DACB6</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #7AC1C8">#7AC1C8</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #A6D6DA">#A6D6DA</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #D3EAED">#D3EAED</div>

                </div>

                <div class="color-variants__col">

                    <div class="color-variants__item color-variants--shades" style="background-color: #3C310A">#3C310A</div>

                    <div class="color-variants__item color-variants--shades" style="background-color: #8e7419">#8e7419</div>

                    <div class="color-variants__item color-variants--shades" style="background-color: #B3921F">#B3921F</div>

                    <div class="color-variants__item color-variants--main" style="background-color: #EFC329">#EFC329</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #F3D25E">#F3D25E</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #F7E194">#F7E194</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #FBF0C9">#FBF0C9</div>

                </div>

                <div class="color-variants__col">

                    <div class="color-variants__item color-variants--shades" style="background-color: #2F0B0A">#2F0B0A</div>

                    <div class="color-variants__item color-variants--shades" style="background-color: #5E1613">#5E1613</div>

                    <div class="color-variants__item color-variants--shades" style="background-color: #8D211D">#8D211D</div>

                    <div class="color-variants__item color-variants--main" style="background-color: #BC2C26">#BC2C26</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #CD615C">#CD615C</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #DE9593">#DE9593</div>

                    <div class="color-variants__item color-variants--tints" style="background-color: #EECAC9">#EECAC9</div>

                </div>

            </div>
        </div>
    </li>
</ul>

<h2 class="align-center" style="padding-top: 64px;">Secondary Colours</h2>

<ul class="card-list wrapper" style="padding-bottom: 64px;">

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: hsla(140, 100%, 17%, 1)">
                    <h4>Success Green</h4>
                </div>
            </div>
            <div class="media-card__content">
                <pre class="css"><code>hex: #00571d
hsla(140, 100%, 17%, 1)
rgba(0, 87, 29, 1)
 Vars | $success, --success-green-hsl, --color-success</code></pre>
            </div>
        </article>
    </li>

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: hsla(2, 66%, 44%, 1)">
                    <h4>Error Red</h4>
                </div>
            </div>
            <div class="media-card__content">
                <pre class="css"><code>hex: #BC2C26
hsla(2, 66%, 44%, 1)
rgba(188, 44, 38)
 Vars | $error, --error-red-hsl, --color-error</code></pre>
            </div>
        </article>
    </li>

    <li class="card-list__item">
        <article class="media-card media-card--none media-card--minimal swatch">
            <div class="media-card__image-wrapper">
                <div class="swatch__color" style="background-color: hsla(47, 86%, 55%, 1)">
                    <h4>Warning Yellow</h4>
                </div>
            </div>
            <div class="media-card__content">
                <pre class="css"><code>hex: #EFC329
hsla(47, 86%, 55%, 1)
rgba(239, 195, 41)
 Vars | $warning, --warning-yellow-hsl, --color-warning</code></pre>
            </div>
        </article>
    </li>

</ul>
 
<h1 class="align-center">Colour Swatches</h1>

<ul class="card-list wrapper">
<h2 class="align-center">Main Colours</h2>
{% for color in main_colors %}
<li class="card-list__item">
  <article class="media-card media-card--none media-card--minimal swatch">
    <div class="media-card__image-wrapper">
      <div class="swatch__color" style="background-color: {{ color.values.hex }}">
        <h4>{{ color.name }}</h4>
      </div>
    </div>
    <div class="media-card__content">
  <pre class="css"><code>hex: {{color.values.hex}}
hsla({{color.values.hsl}}, 1)
rgba({{color.values.rgba}})
 Vars | {{color.vars.sass}}, {{color.vars.css_hsl}}, {{color.vars.css_hsla}}{% if color.alias %}
Alias | {% for a in color.alias %}{{ a }}{% endfor %}{% endif %}</code></pre>
    </div>
  </article>
</li>
{% endfor %}

<h2 class="align-center margin-top:3">Text Colours</h2>

{% for color in main_colors %}
<li class="card-list__item">
  <article class="media-card media-card--none media-card--minimal swatch">
    <div class="media-card__image-wrapper">
      <div class="swatch__color" style="background-color: #ffffff; color: {% if color.text %}{{ color.text.values.hex }}{% else %}{{ color.values.hex }}{% endif %}">
        <h4>{{ color.name }}</h4>
        <p style="margin: 0;font-size: 1.1rem;">
          Some {{ color.name }} text.
        </p>
      </div>
    </div>
    <div class="media-card__content">
      {% if color.text %}
  <pre class="css"><code>hex: {{color.text.values.hex}}
hsla({{color.text.values.hsl}}, 1)
rgba({{color.text.values.rgba}})
 Vars | {{color.text.vars.sass}}, {{color.text.vars.css_hsl}}, {{color.text.vars.css_hsla}}{% if color.text.alias %}
Alias | {% for a in color.text.alias %}{{ a }}{% endfor %}{% endif %}</code></pre>
    </div>
    {% else %}
  <pre class="css"><code>hex: {{color.values.hex}}
hsla({{color.values.hsl}}, 1)
rgba({{color.values.rgba}})
 Vars | {{color.vars.sass}}, {{color.vars.css_hsl}}, {{color.vars.css_hsla}}{% if color.alias %}
Alias | {% for a in color.alias %}{{ a }}{% endfor %}{% endif %}</code></pre>
    {% endif %}
  </article>
</li>
{% endfor %}

<li class="card-list__item">
  <h2 class="align-center margin-top:3">Colour Shades and Tints</h2>
  <div class="base-card base-card--none base-card--spacious tints">   
    <div class="color-variants">
      {% for color in main_colors %}
      <div class="color-variants__col">
        {% for shade in color.shades %}
        <div class="color-variants__item color-variants--shades" style="background-color: {{shade}}">{{shade}}</div>
        {% endfor %}
        
        <div class="color-variants__item color-variants--main" style="background-color: {{color.values.hex}}">{{color.values.hex}}</div>

        {% for tint in color.tints %}
        <div class="color-variants__item color-variants--tints" style="background-color: {{tint}}">{{tint}}</div>
        {% endfor %}
      </div>
      {% endfor %}
    </div>
  </div>
</li>
</ul>

<h2 class="align-center" style="padding-top: 64px;">Secondary Colours</h2>

<ul class="card-list wrapper" style="padding-bottom: 64px;">
{% for color in secondary_colors %}
<li class="card-list__item">
  <article class="media-card media-card--none media-card--minimal swatch">
    <div class="media-card__image-wrapper">
      <div class="swatch__color" style="background-color: hsla({{ color.values.hsl }}, 1)">
        <h4>{{ color.name }}</h4>
      </div>
    </div>
    <div class="media-card__content">
  <pre class="css"><code>hex: {{color.values.hex}}
hsla({{color.values.hsl}}, 1)
rgba({{color.values.rgba}})
 Vars | {{color.vars.sass}}, {{color.vars.css_hsl}}, {{color.vars.css_hsla}}{% if color.alias %}
Alias | {% for a in color.alias %}{{ a }}{% endfor %}{% endif %}</code></pre>
    </div>
  </article>
</li>
{% endfor %}
</ul>

{# 
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js">
  new ClipboardJS('.js-clipboard');
</script>
 #}
 
{
  "main_colors": [
    {
      "name": "Base",
      "values": {
        "hex": "#153634",
        "rgba": "21, 54, 52",
        "hsl": "243, 75%,  6%"
      },
      "vars": {
        "css_hsl": "--base-hsl",
        "css_hsla": "--color-base",
        "sass": "$base"
      },
      "alias": [
        "--color-default"
      ],
      "shades": [
        "#050E0D",
        "#0B1B1A",
        "#102927"
      ],
      "tints": [
        "#506867",
        "#8A9B99",
        "#C5CDCC"
      ]
    },
    {
      "name": "Orange",
      "values": {
        "hex": "#DE6E26",
        "rgba": "222, 110, 38",
        "hsl": "23, 74%, 51%"
      },
      "vars": {
        "css_hsl": "--orange-hsl",
        "css_hsla": "--color-orange",
        "sass": "$orange"
      },
      "alias": [
        "--color-primary"
      ],
      "shades": [
        "#381C0A",
        "#6F3713",
        "#A7531D"
      ],
      "tints": [
        "#E6925C",
        "#EFB793",
        "#F7DBC9"
      ],
      "text": {
        "values": {
          "hex": "#A7531D",
          "rgba": "166, 84, 29",
          "hsl": "24, 70%, 38%"
        },
        "vars": {
          "css_hsl": "--orange-dark-hsl",
          "css_hsla": "--color-orange-dark",
          "sass": "$orange-dark"
        }
      }
    },
    {
      "name": "Teal",
      "values": {
        "hex": "#4DACB6",
        "rgba": "77, 172, 182",
        "hsl": "186, 42%, 51%"
      },
      "vars": {
        "css_hsl": "--teal-hsl",
        "css_hsla": "--color-teal",
        "sass": "$teal"
      },
      "alias": [
        "--color-accent"
      ],
      "shades": [
        "#132B2D",
        "#27565B",
        "#3a8088"
      ],
      "tints": [
        "#7AC1C8",
        "#A6D6DA",
        "#D3EAED"
      ],
      "text": {
        "values": {
          "hex": "#2e666b",
          "rgba": "46, 102, 107",
          "hsl": "185, 40%, 30%"
        },
        "vars": {
          "css_hsl": "--teal-dark-hsl",
          "css_hsla": "--color-teal-dark",
          "sass": "$teal-dark"
        }
      }
    },
    {
      "name": "Yellow",
      "values": {
        "hex": "#EFC329",
        "rgba": "239, 195, 41",
        "hsl": "47, 86%, 55%"
      },
      "vars": {
        "css_hsl": "--yellow-hsl",
        "css_hsla": "--color-yellow",
        "sass": "$yellow"
      },
      "shades": [
        "#3C310A",
        "#8e7419",
        "#B3921F"
      ],
      "tints": [
        "#F3D25E",
        "#F7E194",
        "#FBF0C9"
      ],
      "text": {
        "values": {
          "hex": "#8f730c",
          "rgba": "143, 116, 12",
          "hsl": "47, 85%, 30%"
        },
        "vars": {
          "css_hsl": "--yellow-dark-hsl",
          "css_hsla": "--color-yellow-dark",
          "sass": "$yellow-dark"
        }
      }
    },
    {
      "name": "Red",
      "values": {
        "hex": "#BC2C26",
        "rgba": "188, 44, 38",
        "hsl": "2, 66%, 44%"
      },
      "vars": {
        "css_hsl": "--red-hsl",
        "css_hsla": "--color-red",
        "sass": "$red"
      },
      "shades": [
        "#2F0B0A",
        "#5E1613",
        "#8D211D"
      ],
      "tints": [
        "#CD615C",
        "#DE9593",
        "#EECAC9"
      ]
    }
  ],
  "secondary_colors": [
    {
      "name": "Success Green",
      "values": {
        "hex": "#00571d",
        "rgba": "0, 87, 29, 1",
        "hsl": "140, 100%, 17%"
      },
      "vars": {
        "css_hsl": "--success-green-hsl",
        "css_hsla": "--color-success",
        "sass": "$success"
      }
    },
    {
      "name": "Error Red",
      "values": {
        "hex": "#BC2C26",
        "rgba": "188, 44, 38",
        "hsl": "2, 66%, 44%"
      },
      "vars": {
        "css_hsl": "--error-red-hsl",
        "css_hsla": "--color-error",
        "sass": "$error"
      }
    },
    {
      "name": "Warning Yellow",
      "values": {
        "hex": "#EFC329",
        "rgba": "239, 195, 41",
        "hsl": "47, 86%, 55%"
      },
      "vars": {
        "css_hsl": "--warning-yellow-hsl",
        "css_hsla": "--color-warning",
        "sass": "$warning"
      }
    }
  ]
}

No notes defined.