IOP Nucleus

Colour palette 

<h2 class="sg-subtitle">Primary colours</h2>
<div class="row">

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="sg-colour" style="background-color: #ed1c24">
            <code class="sg-colour__label" contenteditable="true">#ed1c24</code>
        </div>
        <div class="buffer-lg"></div>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="sg-colour" style="background-color: #8fa2ba">
            <code class="sg-colour__label" contenteditable="true">#8fa2ba</code>
        </div>
        <div class="buffer-lg"></div>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="sg-colour" style="background-color: #000000">
            <code class="sg-colour__label" contenteditable="true">#000000</code>
        </div>
        <div class="buffer-lg"></div>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="sg-colour" style="background-color: #ffffff">
            <code class="sg-colour__label" contenteditable="true">#ffffff</code>
        </div>
        <div class="buffer-lg"></div>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="sg-colour" style="background-color: #0085c8">
            <code class="sg-colour__label" contenteditable="true">#0085c8</code>
        </div>
        <div class="buffer-lg"></div>
    </div>

</div>

<h2 class="sg-subtitle">Secondary colours</h2>
<div class="row">

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="sg-colour" style="background-color: #ca981a">
            <code class="sg-colour__label" contenteditable="true">#ca981a</code>
        </div>
        <div class="buffer-lg"></div>
    </div>

</div>
 
<h2 class="sg-subtitle">Primary colours</h2>
<div class="row">
  {% for colour in colours.primary %}
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
      <div class="sg-colour" style="background-color: {{ colour.hex }}">
        <code class="sg-colour__label" contenteditable="true">{{ colour.hex }}</code>
      </div>
      <div class="buffer-lg"></div>
    </div>
  {% endfor %}
</div>

<h2 class="sg-subtitle">Secondary colours</h2>
<div class="row">
  {% for colour in colours.secondary %}
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
      <div class="sg-colour" style="background-color: {{ colour.hex }}">
        <code class="sg-colour__label" contenteditable="true">{{ colour.hex }}</code>
      </div>
      <div class="buffer-lg"></div>
    </div>
  {% endfor %}
</div>
 
{
  "colours": {
    "primary": [
      {
        "name": "Red",
        "hex": "#ed1c24"
      },
      {
        "name": "Blue-grey",
        "hex": "#8fa2ba"
      },
      {
        "name": "Black",
        "hex": "#000000"
      },
      {
        "name": "White",
        "hex": "#ffffff"
      },
      {
        "name": "Blue",
        "hex": "#0085c8"
      }
    ],
    "secondary": [
      {
        "name": "Yellow",
        "hex": "#ca981a"
      }
    ]
  }
}

There are no notes for this item.