Colors 

<div class="grid-container-full pl-color-palettes">
    <div class="grid-x pl-palette">
        <div class="cell medium-2">
            <h2 class="pl-heading02">Brand Colours</h2>
        </div>
        <div class="cell medium-10">
            <div class="grid-x grid-padding-x">
                <div class="cell medium-2">
                    <div class="pl-color-chip" style="background-color: #282828"></div>
                    <div class="text--secondary" style="font-weight: bold;">primary</div>
                    <div class="text--secondary">#282828</div>
                </div>
                <div class="cell medium-2">
                    <div class="pl-color-chip" style="background-color: #919191"></div>
                    <div class="text--secondary" style="font-weight: bold;">secondary</div>
                    <div class="text--secondary">#919191</div>
                </div>
                <div class="cell medium-2">
                    <div class="pl-color-chip" style="background-color: #f4f4f4"></div>
                    <div class="text--secondary" style="font-weight: bold;">tertiary</div>
                    <div class="text--secondary">#f4f4f4</div>
                </div>
                <div class="cell medium-2">
                    <div class="pl-color-chip" style="background-color: #00b81a"></div>
                    <div class="text--secondary" style="font-weight: bold;">success</div>
                    <div class="text--secondary">#00b81a</div>
                </div>
                <div class="cell medium-2">
                    <div class="pl-color-chip" style="background-color: #b80000"></div>
                    <div class="text--secondary" style="font-weight: bold;">error</div>
                    <div class="text--secondary">#b80000</div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="grid-container-full pl-color-palettes">
    {{#each palettes}}
    <div class="grid-x pl-palette">
        <div class="cell medium-2">
            <h2 class="pl-heading02">{{title}}</h2>
        </div>
        <div class="cell medium-10">
            <div class="grid-x grid-padding-x">
                {{#each colors}}
                {{#each this}}
                <div class="cell medium-2">
                    <div class="pl-color-chip" style="background-color: {{this}}"></div>
                    <div class="text--secondary" style="font-weight: bold;">{{@key}}</div>
                    <div class="text--secondary">{{this}}</div>
                </div>
                {{/each}}
                {{/each}}
            </div>
        </div>
    </div>
    {{/each}}
</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "palettes": [
    {
      "title": "Brand Colours",
      "colors": [
        {
          "primary": "#282828"
        },
        {
          "secondary": "#919191"
        },
        {
          "tertiary": "#f4f4f4"
        },
        {
          "success": "#00b81a"
        },
        {
          "error": "#b80000"
        }
      ]
    }
  ]
}

No notes defined.