{{cio}}

<h1>hello</h1>

<div class="space-25"></div>
<header class="row page-hl has-border">
	<div class="col-xl-9 col-lg-11 col-sm-12 no-padding">
		<h1>Colors</h1>
	</div>
</header>

<div class="row content internal-concept">
	<div class="col-xl-12">
		<p>To apply a color, follow the pattern: <code>#{color-name}</code> for 100% and <code>#{color-name}-#{percentage}</code> to get the available percentages (80, 60, 40, 20).</p>

		<p>To apply a background color to an element: <code>bg-#{color-name}</code> for 100% and <code>bg-#{color-name}-#{percentage}</code> to get the available percentages (80, 60, 40, 20).</p>

		<p><em>Note: The color name must be lower case and separated by hyphen.</em></p>

		<h3>Example:</h3>

		<p>Color name: <strong>Mid Gray</strong></p>

		<p><strong>Color (text elements)</strong></p>

		<ul>
			<li>.mid-gray - 100% (#8996a0)</li>
			<li>.mid-gray-80 - 80%(#a1abb3)</li>
			<li>.mid-gray-60 - 60%(#b8c0c6)</li>
			<li>.mid-gray-40 - 40%(#d0d5d9)</li>
			<li>.mid-gray-20 - 20%(#e7eaec)</li>
		</ul>

		<p><strong>Background color (block elements)</strong></p>

		<ul>
			<li>.bg-mid-gray - 100% (#8996a0)</li>
			<li>.bg-mid-gray-80 - 80%(#a1abb3)</li>
			<li>.bg-mid-gray-60 - 60%(#b8c0c6)</li>
			<li>.bg-mid-gray-40 - 40%(#d0d5d9)</li>
			<li>.bg-mid-gray-20 - 20%(#e7eaec)</li>
		</ul>
	</div>
</div>

<div class="space-16"></div>
<header class="teaser-header ">
	<h2 class="h2">Primary colors</h2>
</header>
{{ render "atoms/global/space" space=6 }}

<div class="row internal-concept">
	<div class="col-xl-4">
		<table class="sg-table-colors">
			<colgroup>
				<col class="col-xl-8">
				<col class="col-xl-4">
			</colgroup>
			<tbody>
				<tr>
					<td>
						<p>
							<strong>Pantone 8180</strong>
						</p>
						<p>#7c8796</p>
						<p>rgb 124 135 150</p>
					</td>
					<td>
						<span class="sg-swatch bg-pantone-8180"></span>

						<span class="pantone-8180">SAMPLE</span>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>White</strong>
						</p>
						<p>#ffffff</p>
						<p>rgb 255 255 255</p>
					</td>
					<td>
						<span class="sg-swatch bg-white"></span>

						<span class="white">SAMPLE</span>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>Black</strong>
						</p>
						<p>#000000</p>
						<p>rgb 0 0 0</p>
					</td>
					<td>
						<span class="sg-swatch bg-black"></span>
						<span class="black">SAMPLE</span>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>Pale gray</strong>
						</p>
						<p>#f4f6f7</p>
						<p>rgb 244 246 247</p>
					</td>
					<td>
						<span class="sg-swatch bg-pale-gray" style="border: 1px solid black;"></span>
						<span class="pale-gray bg-copy-text-gray">SAMPLE</span>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>Copy Text Gray</strong>
						</p>
						<p>#4f5356</p>
						<p>rgb 79 83 86</p>
					</td>
					<td>
						<span class="sg-swatch bg-copy-text-gray"></span>
						<span class="copy-text-gray">SAMPLE</span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<div class="space-16"></div>
<header class="teaser-header ">
	<h2 class="h2">Secondary colors</h2>
</header>
{{ render "atoms/global/space" space=6 }}

<div class="row internal-concept">
	<div class="col-xl-12">
		<table class="sg-table-colors">
			<colgroup>
				<col class="col-xl-2">
				<col class="col-xl-2">
				<col class="col-xl-2">
				<col class="col-xl-2">
				<col class="col-xl-2">
				<col class="col-xl-2">
			</colgroup>
			<thead>
				<tr>
					<th>Color</th>
					<th>100% opacity</th>
					<th>80% opacity</th>
					<th>60% opacity</th>
					<th>40% opacity</th>
					<th>20% opacity</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<p>
							<strong>Mid gray</strong>
						</p>
					</td>
					<td>
						<span class="sg-swatch bg-mid-gray"></span>

						<span class="mid-gray">SAMPLE</span>

						<p>#8996a0</p>

						<p>137 150 160</p>
					</td>
					<td>
						<span class="sg-swatch bg-mid-gray-80" style="background-color: #a1abb3;"></span>

						<span class="mid-gray-80">SAMPLE</span>

						<p>#a1abb3</p>

						<p>161 171 179</p>
					</td>
					<td>
						<span class="sg-swatch bg-mid-gray-60" style="background-color: #b8c0c6;"></span>

						<span class="mid-gray-69">SAMPLE</span>

						<p>#b8c0c6</p>

						<p>184 192 198</p>
					</td>
					<td>
						<span class="sg-swatch bg-mid-gray-40" style="background-color: #d0d5d9;"></span>

						<span class="mid-gray-40">SAMPLE</span>

						<p>#d0d5d9</p>

						<p>208 213 217</p>
					</td>
					<td>
						<span class="sg-swatch bg-mid-gray-20" style="background-color: #e7eaec;"></span>

						<span class="mid-gray-20">SAMPLE</span>

						<p>#e7eaec</p>

						<p>231 234 236</p>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>Dark gray</strong>
						</p>
					</td>
					<td>
						<span class="sg-swatch bg-dark-gray"></span>

						<span class="dark-gray">SAMPLE</span>

						<p>#666666</p>

						<p>102 102 102</p>
					</td>
					<td>
						<span class="sg-swatch bg-dark-gray-80"></span>

						<span class="dark-gray-80">SAMPLE</span>

						<p>#858585</p>

						<p>133 133 133</p>
					</td>
					<td>
						<span class="sg-swatch bg-dark-gray-60"></span>

						<span class="dark-gray-60">SAMPLE</span>

						<p>#a3a3a3</p>

						<p>163 163 163</p>
					</td>
					<td>
						<span class="sg-swatch bg-dark-gray-40"></span>

						<span class="dark-gray-40">SAMPLE</span>

						<p>#c2c2c2</p>

						<p>194 194 194</p>
					</td>
					<td>
						<span class="sg-swatch bg-dark-gray-20"></span>

						<span class="dark-gray-20">SAMPLE</span>

						<p>#e0e0e0</p>

						<p>224 224 224</p>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>Warm gray</strong>
						</p>
					</td>
					<td>
						<span class="sg-swatch bg-warm-gray"></span>

						<span class="warm-gray">SAMPLE</span>

						<p>#988f86</p>

						<p>152 143 134</p>
					</td>
					<td>
						<span class="sg-swatch bg-warm-gray-80"></span>

						<span class="warm-gray-80">SAMPLE</span>

						<p>#ada59e</p>

						<p>173 165 158</p>
					</td>
					<td>
						<span class="sg-swatch bg-warm-gray-60"></span>

						<span class="warm-gray-60">SAMPLE</span>

						<p>#c1bcb6</p>

						<p>193 188 182</p>
					</td>
					<td>
						<span class="sg-swatch bg-warm-gray-40"></span>

						<span class="warm-gray-40">SAMPLE</span>

						<p>#d6d2cf</p>

						<p>214 210 207</p>
					</td>
					<td>
						<span class="sg-swatch bg-warm-gray-20"></span>

						<span class="warm-gray-20">SAMPLE</span>

						<p>#eae9e7</p>

						<p>234 233 231</p>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>Dark blue</strong>
						</p>
					</td>
					<td>
						<span class="sg-swatch bg-dark-blue"></span>

						<span class="dark-blue">SAMPLE</span>

						<p>#002244</p>

						<p>0 34 68</p>
					</td>
					<td>
						<span class="sg-swatch bg-dark-blue-80"></span>

						<span class="dark-blue-80">SAMPLE</span>

						<p>#334e69</p>

						<p>51 78 105</p>
					</td>
					<td>
						<span class="sg-swatch bg-dark-blue-60"></span>

						<span class="dark-blue-60">SAMPLE</span>

						<p>#667a8f</p>

						<p>102 122 143</p>
					</td>
					<td>
						<span class="sg-swatch bg-dark-blue-40"></span>

						<span class="dark-blue-40">SAMPLE</span>

						<p>#99a7b4</p>

						<p>153 167 180</p>
					</td>
					<td>
						<span class="sg-swatch bg-dark-blue-20"></span>

						<span class="dark-blue-20">SAMPLE</span>

						<p>#ccd3da</p>

						<p>204 211 218</p>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>Blue gray</strong>
						</p>
					</td>
					<td>
						<span class="sg-swatch bg-blue-gray"></span>

						<span class="blue-gray">SAMPLE</span>

						<p>#3d4855</p>

						<p>61 73 85</p>
					</td>
					<td>
						<span class="sg-swatch bg-blue-gray-80"></span>

						<span class="blue-gray-80">SAMPLE</span>

						<p>#646d77</p>

						<p>100 109 119</p>
					</td>
					<td>
						<span class="sg-swatch bg-blue-gray-60"></span>

						<span class="blue-gray-60">SAMPLE</span>

						<p>#8b9299</p>

						<p>139 146 155</p>
					</td>
					<td>
						<span class="sg-swatch bg-blue-gray-40"></span>

						<span class="blue-gray-40">SAMPLE</span>

						<p>#b1b6bb</p>

						<p>177 182 187</p>
					</td>
					<td>
						<span class="sg-swatch bg-blue-gray-20"></span>

						<span class="blue-gray-20">SAMPLE</span>

						<p>#d8dbdd</p>

						<p>216 219 221</p>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<div class="space-16"></div>
<header class="teaser-header ">
	<h2 class="h2">Accent colors</h2>
</header>
{{ render "atoms/global/space" space=6 }}

<div class="row internal-concept">
	<div class="col-xl-4">
		<table class="sg-table-colors">
			<colgroup>
				<col class="col-xl-8">
				<col class="col-xl-4">
			</colgroup>
			<tbody>
				<tr>
					<td>
						<p>
							<strong>Amber</strong>
						</p>
						<p>#e29317</p>
						<p>rgb 226 147 23</p>
					</td>
					<td>
						<span class="sg-swatch bg-amber"></span>
						<span class="amber">SAMPLE</span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<div class="row internal-concept">
	<div class="col-xl-12">
		<table class="sg-table-colors">
			<colgroup>
				<col class="col-xl-2">
				<col class="col-xl-2">
				<col class="col-xl-2">
				<col class="col-xl-2">
				<col class="col-xl-2">
				<col class="col-xl-2">
			</colgroup>
			<thead>
				<tr>
					<th>Color</th>
					<th>100% opacity</th>
					<th>80% opacity</th>
					<th>60% opacity</th>
					<th>40% opacity</th>
					<th>20% opacity</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<p>
							<strong>Amber</strong>
						</p>
					</td>
					<td>
						<span class="sg-swatch bg-amber"></span>

						<span class="amber">SAMPLE</span>

						<p>#e29317</p>

						<p>226 147 23</p>
					</td>
					<td>
						<span class="sg-swatch bg-amber-80"></span>

						<span class="amber-80">SAMPLE</span>

						<p>#e8a945</p>

						<p>232 169 69</p>
					</td>
					<td>
						<span class="sg-swatch bg-amber-60"></span>

						<span class="amber-60">SAMPLE</span>

						<p>#eebe74</p>

						<p>238 190 116</p>
					</td>
					<td>
						<span class="sg-swatch bg-amber-40"></span>

						<span class="amber-40">SAMPLE</span>

						<p>#f3d4a2</p>

						<p>243 212 162</p>
					</td>
					<td>
						<span class="sg-swatch bg-amber-20"></span>

						<span class="amber-20">SAMPLE</span>

						<p>#f9e9d1</p>

						<p>249 233 209</p>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>Bright blue</strong>
						</p>
					</td>
					<td>
						<span class="sg-swatch bg-bright-blue"></span>

						<span class="bright-blue">SAMPLE</span>

						<p>#0098DB</p>

						<p>0 155 219</p>
					</td>
					<td>
						<span class="sg-swatch bg-bright-blue-80"></span>

						<span class="bright-blue-80">SAMPLE</span>

						<p>#33ade2</p>

						<p>51 173 226</p>
					</td>
					<td>
						<span class="sg-swatch bg-bright-blue-60"></span>

						<span class="bright-blue-60">SAMPLE</span>

						<p>#66c1e9</p>

						<p>102 193 233</p>
					</td>
					<td>
						<span class="sg-swatch bg-bright-blue-40"></span>

						<span class="bright-blue-40">SAMPLE</span>

						<p>#99d6f1</p>

						<p>153 214 241</p>
					</td>
					<td>
						<span class="sg-swatch bg-bright-blue-20"></span>

						<span class="bright-blue-20">SAMPLE</span>

						<p>#cceaf8</p>

						<p>204 234 248</p>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>Green</strong>
						</p>
					</td>
					<td>
						<span class="sg-swatch bg-green"></span>

						<span class="green">SAMPLE</span>

						<p>#7AB800</p>

						<p>122 184 219</p>
					</td>
					<td>
						<span class="sg-swatch bg-green-80"></span>

						<span class="green-80">SAMPLE</span>

						<p>#95c633</p>

						<p>149 198 51</p>
					</td>
					<td>
						<span class="sg-swatch bg-green-60"></span>

						<span class="green-60">SAMPLE</span>

						<p>#afd466</p>

						<p>175 212 102</p>
					</td>
					<td>
						<span class="sg-swatch bg-green-40"></span>

						<span class="green-40">SAMPLE</span>

						<p>#cae399</p>

						<p>202 227 153</p>
					</td>
					<td>
						<span class="sg-swatch bg-green-20"></span>

						<span class="green-20">SAMPLE</span>

						<p>#e4f1cc</p>

						<p>228 241 204</p>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>Purple</strong>
						</p>
					</td>
					<td>
						<span class="sg-swatch bg-purple"></span>

						<span class="purple">SAMPLE</span>

						<p>#57068C</p>

						<p>87 6 140</p>
					</td>
					<td>
						<span class="sg-swatch bg-purple-80"></span>

						<span class="purple-80">SAMPLE</span>

						<p>#7938a3</p>

						<p>121 56 163</p>
					</td>
					<td>
						<span class="sg-swatch bg-purple-60"></span>

						<span class="purple-60">SAMPLE</span>

						<p>#9a6aba</p>

						<p>154 106 186</p>
					</td>
					<td>
						<span class="sg-swatch bg-purple-40"></span>

						<span class="purple-40">SAMPLE</span>

						<p>#bc9bd1</p>

						<p>188 155 209</p>
					</td>
					<td>
						<span class="sg-swatch bg-purple-20"></span>

						<span class="purple-20">SAMPLE</span>

						<p>#ddcde8</p>

						<p>221 205 232</p>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>Pink</strong>
						</p>
					</td>
					<td>
						<span class="sg-swatch bg-pink"></span>

						<span class="pink">SAMPLE</span>

						<p>#d71f85</p>

						<p>215 31 133</p>
					</td>
					<td>
						<span class="sg-swatch bg-pink-80"></span>

						<span class="pink-80">SAMPLE</span>

						<p>#df4c9d</p>

						<p>223 76 157</p>
					</td>
					<td>
						<span class="sg-swatch bg-pink-60"></span>

						<span class="pink-60">SAMPLE</span>

						<p>#e779b6</p>

						<p>231 121 182</p>
					</td>
					<td>
						<span class="sg-swatch bg-pink-40"></span>

						<span class="pink-40">SAMPLE</span>

						<p>#efa5ce</p>

						<p>239 165 206</p>
					</td>
					<td>
						<span class="sg-swatch bg-pink-20"></span>

						<span class="pink-20">SAMPLE</span>

						<p>#f7d2e7</p>

						<p>247 210 23</p>
					</td>
				</tr>
				<tr>
					<td>
						<p>
							<strong>Bright red</strong>
						</p>
					</td>
					<td>
						<span class="sg-swatch bg-bright-red"></span>

						<span class="bright-red">SAMPLE</span>

						<p>#e00034</p>

						<p>224 0 52</p>
					</td>
					<td>
						<span class="sg-swatch bg-bright-red-80"></span>

						<span class="bright-red-80">SAMPLE</span>

						<p>#e6335d</p>

						<p>230 51 93</p>
					</td>
					<td>
						<span class="sg-swatch bg-bright-red-60"></span>

						<span class="bright-red-60">SAMPLE</span>

						<p>#ec6685</p>

						<p>236 102 133</p>
					</td>
					<td>
						<span class="sg-swatch bg-bright-red-40"></span>

						<span class="bright-red-40">SAMPLE</span>

						<p>#f399ae</p>

						<p>243 153 174</p>
					</td>
					<td>
						<span class="sg-swatch bg-bright-red-20"></span>

						<span class="bright-red-20">SAMPLE</span>

						<p>#f9ccd6</p>

						<p>249 204 214</p>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<div class="space-16"></div>
<header class="teaser-header ">
	<h2 class="h2">Accent colors for price and performance data</h2>
</header>
{{ render "atoms/global/space" space=6 }}

<div class="row internal-concept">
	<div class="col-xl-6">
		<table class="sg-table-colors">
			<colgroup>
				<col class="col-xl-6">
				<col class="col-xl-6">
			</colgroup>
			<thead>
				<tr>
					<th>Positive developments</th>
					<th>Negative developments</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<span class="sg-swatch bg-green"></span>

						<p class="text-center"><strong class="green">Green</strong></p>

						<p class="text-center">#7ab800</p>

						<p class="text-center">rgb 122 184 219</p>
					</td>
					<td>
						<span class="sg-swatch bg-bright-red"></span>

						<p><strong class="bright-red">Bright red</strong></p>

						<p>#e00034</p>

						<p>224 0 52</p>
					</td>
				</tr>
		</table>
	</div>
</div>
