<div class="grid-container-full sg-color-palettes">
<div class="grid-x sg-palette">
<div class="cell medium-2">
<h2>Primary</h2>
</div>
<div class="cell medium-10">
<div class="grid-x">
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: #0C6144"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">Jewel</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">#0C6144</div>
</div>
</div>
</div>
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: #00875A"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">Deep sea</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">#00875A</div>
</div>
</div>
</div>
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: #5FBD00"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">Limeade</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">#5FBD00</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-x sg-palette">
<div class="cell medium-2">
<h2>Secondary</h2>
</div>
<div class="cell medium-10">
<div class="grid-x">
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: #491D6E"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">Honey flower</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">#491D6E</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-x sg-palette">
<div class="cell medium-2">
<h2>Support</h2>
</div>
<div class="cell medium-10">
<div class="grid-x">
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: #111317"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">Woodsmoke</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">#111317</div>
</div>
</div>
</div>
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: #767676"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">Boulder</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">#767676</div>
</div>
</div>
</div>
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: #C9C9C9"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">Silver</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">#C9C9C9</div>
</div>
</div>
</div>
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: #EBEBEB"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">Gallery</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">#EBEBEB</div>
</div>
</div>
</div>
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: #F8F8F8"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">Alabaster</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">#F8F8F8</div>
</div>
</div>
</div>
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: #FFFFFF"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">White</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">#FFFFFF</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-x sg-palette">
<div class="cell medium-2">
<h2>Information</h2>
</div>
<div class="cell medium-10">
<div class="grid-x">
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: #C8349E"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">Medium Red Violet</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">#C8349E</div>
</div>
</div>
</div>
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: #FBED4F"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">Gorse</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">#FBED4F</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-container-full sg-color-palettes">
{{#each palettes}}
<div class="grid-x sg-palette">
<div class="cell medium-2">
<h2>{{title}}</h2>
</div>
<div class="cell medium-10">
<div class="grid-x">
{{#each colours}}
{{#each this}}
<div class="sg-color cell medium-3">
<div class="grid-x">
<div class="sg-color-chip" style="background-color: {{this}}"></div>
</div>
<div class="grid-x">
<div class="cell medium-6">
<div class="text--secondary color-name">{{@key}}</div>
</div>
<div class="cell medium-6">
<div class="text--secondary color-code">{{this}}</div>
</div>
</div>
</div>
{{/each}}
{{/each}}
</div>
</div>
</div>
{{/each}}
</div>
{
"palettes": [
{
"title": "Primary",
"colours": [
{
"Jewel": "#0C6144"
},
{
"Deep sea": "#00875A"
},
{
"Limeade": "#5FBD00"
}
]
},
{
"title": "Secondary",
"colours": [
{
"Honey flower": "#491D6E"
}
]
},
{
"title": "Support",
"colours": [
{
"Woodsmoke": "#111317"
},
{
"Boulder": "#767676"
},
{
"Silver": "#C9C9C9"
},
{
"Gallery": "#EBEBEB"
},
{
"Alabaster": "#F8F8F8"
},
{
"White": "#FFFFFF"
}
]
},
{
"title": "Information",
"colours": [
{
"Medium Red Violet": "#C8349E"
},
{
"Gorse": "#FBED4F"
}
]
}
]
}
There are no notes for this item.