<commit_before>{% extends "layout.html" %}

{% block page_title %}
Style guide - Colour
{% endblock %}

{% block content %}

{% set active = "style_guide" %}
{% include "includes/top_nav.html" %}

<main class="font-ui" id="content" role="main">
  <div class="grid-row">
    <div class="column-full">
      <h1 class="heading-section">Colour</h1>
    </div>

    <div class="column-two-thirds">
      <p class="lede">Color should be used thoughtfully, have a real user need and any use backed by research.</p>
    </div>

    <div class="column-full">
      <section>
        <h2 class="font-ui heading-medium">Primary colours</h2>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#8F23B3"></span>
          <div class="hex">
            #8F23B3
          </div>
          <div class="colour-info">
            Purple should be used sparingly.
          </div>
        </div>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#0b0c0c"></span>
          <div class="hex">
            #0B0C0C
          </div>
          <div class="colour-info">
            Black is used for headings and body content on pages.
          </div>
        </div>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#F2F2F2"></span>
          <div class="hex">
            #F2F2F2
          </div>
          <div class="colour-info">
            Background colour.
          </div>
        </div>

      </section>

      <section>
        <h2 class="font-ui heading-medium">Secondary colours</h2>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#3D5C00"></span>
          <div class="hex">
            #3D5C00
          </div>
        </div>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#3B3B3B"></span>
          <div class="hex">
            #3B3B3B
          </div>
        </div>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#DADADA"></span>
          <div class="hex">
            #DADADA
          </div>
        </div>

      </section>
    </div>

    <div class="column-two-thirds">

      <section>
        <h2 class="heading-medium">Accessibility</h2>
        <p>Text and background colors need to meet the minimum contrast ratios specified by <a href="https://www.w3.org/TR/WCAG20-TECHS/general.html">WCAG 2.0</a>.</p>
      </section>

    </div><commit_msg>dev: add accessibility section to colour styles<commit_after>{% extends "layout.html" %}

{% block page_title %}
Style guide - Colour
{% endblock %}

{% block content %}

{% set active = "style_guide" %}
{% include "includes/top_nav.html" %}

<main class="font-ui" id="content" role="main">
  <div class="grid-row">
    <div class="column-full">
      <h1 class="font-ui heading-section">Colour</h1>
    </div>

    <div class="column-two-thirds">
      <p class="font-ui lede">Color should be used thoughtfully, have a real user need and any use backed by research.</p>
    </div>

    <div class="column-full">
      <section>
        <h2 class="font-ui heading-medium">Primary colours</h2>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#8F23B3"></span>
          <div class="hex">
            #8F23B3
          </div>
          <div class="colour-info">
            Purple should be used sparingly. It can be used as a keyline in headings.
          </div>
        </div>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#0b0c0c"></span>
          <div class="hex">
            #0B0C0C
          </div>
          <div class="colour-info">
            Black is used for headings and body content on pages.
          </div>
        </div>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#F2F2F2"></span>
          <div class="hex">
            #F2F2F2
          </div>
          <div class="colour-info">
            Light grey to be used as a background colour for the main body of content.
          </div>
        </div>

      </section>

      <section>
        <h2 class="font-ui heading-medium">Secondary colours</h2>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#3D5C00"></span>
          <div class="hex">
            #3D5C00
          </div>
        </div>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#3B3B3B"></span>
          <div class="hex">
            #3B3B3B
          </div>
        </div>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#DADADA"></span>
          <div class="hex">
            #DADADA
          </div>
        </div>

      </section>
    </div>

    <div class="column-two-thirds">

      <section>
        <h2 class="font-ui heading-medium">Accessibility</h2>
        <p>Text and background colors need to meet the minimum contrast ratios specified by <a href="https://www.w3.org/TR/WCAG20-TECHS/general.html">WCAG 2.0</a>.</p>

        <h3 class="font-ui heading-small" style="margin-top:30px;">Accessible text and background combinations</h3>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#F2F2F2">A</span>
          <div class="colour-info">
            Background: #F2F2F2<br>
            Foreground: #0B0C0C
          </div>
        </div>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#0B0C0C"><span style="color:#FFF;">A</span></span>
          <div class="colour-info">
            Background: #0B0C0C<br>
            Foreground: #FFF
          </div>
        </div>

        <div class="colour-swatch">
          <span class="app-swatch" style="background-color:#3D5C00"><span style="color:#FFF;">A</span></span>
          <div class="colour-info">
            Background: #3D5C00<br>
            Foreground: #FFF
          </div>
        </div>

      </section>

    </div>
{'fraction_non_alphanumeric': 0.15922014622258326, 'fraction_numerical': 0.019658813972380177, 'mean_word_length': 2.031019202363368, 'pattern_counts': {'":': 0, '<': 174, '<?xml version=': 0, '>': 174, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2210304', 'n_tokens_mistral': 2062, 'n_tokens_neox': 1926, 'n_words': 421}