NCC Digital Design Guide

Colours 

<ul class="sg-colors">
    <li class="sg-color">
        <div class="sg-swatch color-brand-primary"></div>

        <div class="sg-label">$brand-primary <span class="sg-hex">#7f1183</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-brand-secondary"></div>

        <div class="sg-label">$brand-secondary <span class="sg-hex">#b65e00</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-brand-theme"></div>

        <div class="sg-label">$brand-theme <span class="sg-hex">#ffbf47</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-white"></div>

        <div class="sg-label">$white <span class="sg-hex">#ffffff</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-whitesmoke"></div>

        <div class="sg-label">$whitesmoke <span class="sg-hex">#f4f4f4</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-white-grey"></div>

        <div class="sg-label">$white-grey <span class="sg-hex">#eeeeee</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-ghost-gray"></div>

        <div class="sg-label">$ghost-gray <span class="sg-hex">#e9e8e8</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-light-grey"></div>

        <div class="sg-label">$light-grey <span class="sg-hex">#d6d6d6</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-mid-grey"></div>

        <div class="sg-label">$mid-grey <span class="sg-hex">#706f6f</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-dark-grey"></div>

        <div class="sg-label">$dark-grey <span class="sg-hex">#323232</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-black"></div>

        <div class="sg-label">$black <span class="sg-hex">#000000</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-success"></div>

        <div class="sg-label">$success <span class="sg-hex">#80ab25</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-fail"></div>

        <div class="sg-label">$fail <span class="sg-hex">#ff0000</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-highlight"></div>

        <div class="sg-label">$highlight <span class="sg-hex">#ecc202</span></div>
    </li>
    <li class="sg-color">
        <div class="sg-swatch color-blue"></div>

        <div class="sg-label">$blue <span class="sg-hex">#00a5db</span></div>
    </li>
</ul>
 
<ul class="sg-colors">
	{{#each colours}}
	<li class="sg-color">
		<div class="sg-swatch color-{{variable}}"></div>
	
		<div class="sg-label">${{variable}} <span class="sg-hex">#{{hex}}</span></div>
	</li>	
	{{/each}}
</ul>
 
{
  "colours": [
    {
      "hex": "7f1183",
      "variable": "brand-primary"
    },
    {
      "hex": "b65e00",
      "variable": "brand-secondary"
    },
    {
      "hex": "ffbf47",
      "variable": "brand-theme"
    },
    {
      "hex": "ffffff",
      "variable": "white"
    },
    {
      "hex": "f4f4f4",
      "variable": "whitesmoke"
    },
    {
      "hex": "eeeeee",
      "variable": "white-grey"
    },
    {
      "hex": "e9e8e8",
      "variable": "ghost-gray"
    },
    {
      "hex": "d6d6d6",
      "variable": "light-grey"
    },
    {
      "hex": "706f6f",
      "variable": "mid-grey"
    },
    {
      "hex": 323232,
      "variable": "dark-grey"
    },
    {
      "hex": "000000",
      "variable": "black"
    },
    {
      "hex": "80ab25",
      "variable": "success"
    },
    {
      "hex": "ff0000",
      "variable": "fail"
    },
    {
      "hex": "ecc202",
      "variable": "highlight"
    },
    {
      "hex": "00a5db",
      "variable": "blue"
    }
  ]
}
  • Content: 
    /**
 * Color Swatches
 */
.sg-colors {
	@include clearfix();
	margin: 0;
	list-style-type: none;
}

.sg-color {
	float: left;
	width: 14.285%;
	
	@media all and (max-width: 1000px) {
		width: 25%;
		width: 16.666667%;
	}

	@media all and (max-width: 760px) {
		width: 25%;
	}

	@media all and (max-width: 600px) {
		width: 50%;	
	}
}

.sg-swatch {
	height: 5em;
	width: 5em;
	margin: 0 auto 1em;
	@include prefix(border-radius, 100%);
}

.sg-label {
	text-align: center;
	padding: .5em 0;
}

.sg-hex {
	display: block;
}

.color-brand-primary {
	background-color: $brand-primary;
}
.color-brand-primary-lt {
	background-color: $brand-primary-lt;
}
/*
.color-brand-primary-dk {
	background-color: $brand-primary-dk;
}
*/
.color-brand-secondary {
	background-color: $brand-secondary;
}
.color-brand-secondary-lt {
	background-color: $brand-secondary-lt;
}
.color-brand-theme {
	background-color: $highlight;
}
.color-highlight {
	background-color: $highlight;
}
.color-fail {
	background-color: $fail;
}
.color-success {
	background-color: $success;
}
.color-black {
	background-color: $black;
}
.color-white {
	background-color: $white;
}
.color-light-grey {
	background-color: $light-grey;
}
.color-mid-grey {
	background-color: $mid-grey;
}
.color-dark-grey {
	background-color: $dark-grey;
}
.color-ghost-gray {
	background-color: $ghost-gray;
}
.color-whitesmoke {
	background-color: $whitesmoke;
}
.color-white-grey {
	background-color: $white-grey;
}
.color-blue {
	background-color: $blue;
}
  • URL: /components/raw/colours/_colours.scss
  • Filesystem Path: src/patterns/patterns/colours/_colours.scss
  • Size: 1.5 KB

Our Colours

Our main colour palette. These aren’t really components but just illustrating our Digital colour palette.