Goto 10

<div class="site__main" id="siteMain">
    <div class="site__main__content">
        <div class="wrapper">
            <div class="row justify-content-center">
                <div class="grid-18">
                    <div class="section section--tight">
                        <div class="row">
                            <div class="grid-18 grid-lg-12">
                                <main role="main" class="article">
                                    <h1 class="supersize">Goto 10</h1>

                                    <div class="article__content">
                                        <p class="preamble">Goto 10 är en mötesplats för att bygga nätverk, testa idéer, jobba med nya projekt, produkter, evenemang och utbildningar – allt som främjar internet i Sverige.</p>
                                        <p>Mötesplatsen är öppen för alla och medlemskap är kostnadsfritt. Goto 10 finns i Hammarby Sjöstad och på goto10.se samt på sociala medier.</p>
                                        <h2>Logotyp</h2>

                                        <figure class="wp-block-image">
                                            <img src="/assets/images/goto10_exempel1-1024x580.jpg" alt="Goto 10 logotyp">
                                            <figcaption>Logotyp med gul text mot grå botten.</figcaption>
                                        </figure>
                                        <figure class="wp-block-image">
                                            <img src="/assets/images/goto10_exempel2-1024x580.jpg" alt="Goto 10 logotyp stående">
                                            <figcaption>En stående version av logotypen finns tillgänglig. Används i undantagsfall.</figcaption>
                                        </figure>
                                        <figure class="wp-block-image">
                                            <img src="/assets/images/goto10_exempel3-1024x580.jpg" alt="Goto 10 logotyp, grå, vit och svartvit version">
                                            <figcaption>Grå, vit och svart version av logotypen.</figcaption>
                                        </figure>

                                        <div class="m-download">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="grid-auto">
                                                    <figure class="m-download__icon-file">
                                                        <svg class="icon">
                                                            <use xlink:href="#icon-file"></use>
                                                        </svg>
                                                    </figure>
                                                </div>
                                                <div class="grid u-position-static">
                                                    <div class="row flex-column">
                                                        <div class="grid-18 u-position-static">
                                                            <a href="/assets/zip/goto10-logo.zip" class="beta m-download__link" download>
                                                                Logotyp för nedladdning
                                                            </a>
                                                        </div>
                                                        <div class="grid-18  display-flex flex-column flex-sm-row justify-content-between align-items-start">
                                                            <p class="u-m-b-0">Ladda ner logotyp som EPS</p>
                                                            <div class="display-flex align-self-end flex-nowrap m-download__trigger">
                                                                <strong class="m-download__text">Ladda ner</strong>
                                                                <figure class="m-download__icon-download">
                                                                    <svg class="icon">
                                                                        <use xlink:href="#icon-download"></use>
                                                                    </svg>
                                                                </figure>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <h3>Logotypens anatomi</h3>
                                        <figure class="wp-block-image">
                                            <img src="/assets/images/goto10_grid-1024x580.jpg" alt="Logotypens anatomi vilandes på ett osynligt kvadratiskt rutsystem">
                                            <figcaption>Logotypens bokstäver vilar på ett osynligt kvadratiskt rutsystem.</figcaption>
                                        </figure>

                                        <h3>Rutmönster</h3>
                                        <figure class="wp-block-image">
                                            <img src="/assets/images/goto10_monster-1024x580.jpg" alt="Logotypen i form av ett mönster">
                                            <figcaption>Logotypen i form av ett mönster.</figcaption>
                                        </figure>

                                        <div class="m-download">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="grid-auto">
                                                    <figure class="m-download__icon-file">
                                                        <svg class="icon">
                                                            <use xlink:href="#icon-file"></use>
                                                        </svg>
                                                    </figure>
                                                </div>
                                                <div class="grid u-position-static">
                                                    <div class="row flex-column">
                                                        <div class="grid-18 u-position-static">
                                                            <a href="/assets/zip/Goto_10_monster.zip" class="beta m-download__link" download>
                                                                Mönster för nedladdning
                                                            </a>
                                                        </div>
                                                        <div class="grid-18  display-flex flex-column flex-sm-row justify-content-between align-items-start">
                                                            <p class="u-m-b-0">Ladda ner mönster som EPS</p>
                                                            <div class="display-flex align-self-end flex-nowrap m-download__trigger">
                                                                <strong class="m-download__text">Ladda ner</strong>
                                                                <figure class="m-download__icon-download">
                                                                    <svg class="icon">
                                                                        <use xlink:href="#icon-download"></use>
                                                                    </svg>
                                                                </figure>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </main>
                            </div>
                            <div class="grid-18 grid-lg-6">
                                <aside class="sidebar u-position-sticky-top-4">
                                    <div class="row">
                                        <div class="grid-18 grid-md-9 grid-lg-18 u-m-b-2">
                                            <section class="m-card m-card--padded">
                                                <div class="m-card__content">
                                                    <h1 class="beta">Brandbook</h1>
                                                    <div class="textwidget">
                                                        <dl>
                                                            <dt>Internetstiftelsen</dt>
                                                            <dd class="u-m-l-0">
                                                                <ol class="u-list-clean u-p-l-2">
                                                                    <li><a href="/components/preview/identitet.html" class="u-link">Identitét</a></li>
                                                                    <li><a href="/components/preview/bildmaner.html" class="u-link">Bildmanér</a></li>
                                                                    <li><a href="/components/preview/tonalitet-och-sprakbruk.html" class="u-link">Tonalitet och språkbruk</a></li>
                                                                </ol>
                                                            </dd>
                                                            <dd class="u-m-l-0">
                                                                <ol class="u-list-clean">
                                                                    <li><a href="/components/preview/goto10.html" class="u-link"><strong>Goto 10</strong></a></li>
                                                                </ol>
                                                            </dd>
                                                        </dl>
                                                    </div>
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </aside>
                            </div>
                            <div class="row">
                                <div class="grid-18">
                                    <h2 class="alpha">Primära färger</h2>
                                    <div class="colors">
                                        <div class="color">
                                            <div class="background-lemon"></div>
                                            <p class="beta color-name">lemon</p>
                                            <p><strong>SASS:</strong> $color-lemon</p>
                                            <p><strong>HEX:</strong> #ffce2e</p>
                                            <p><strong>RGB:</strong> 255 206 46</p>
                                            <p><strong>CMYK:</strong> 0 20 86 0</p>
                                            <p><strong>PMS:</strong> 120U</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-lemon-light"></div>
                                            <p class="beta color-name">lemon-light</p>
                                            <p><strong>SASS:</strong> $color-lemon-light</p>
                                            <p><strong>HEX:</strong> #ffe696</p>
                                            <p><strong>RGB:</strong> 255 230 150</p>
                                            <p><strong>CMYK:</strong> 0 9 50 0</p>
                                            <p><strong>PMS:</strong> 1215UP</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-cyberspace"></div>
                                            <p class="beta color-name">cyberspace</p>
                                            <p><strong>SASS:</strong> $color-cyberspace</p>
                                            <p><strong>HEX:</strong> #1f2a36</p>
                                            <p><strong>RGB:</strong> 31 42 54</p>
                                            <p><strong>CMYK:</strong> 88 71 52 41</p>
                                            <p><strong>PMS:</strong> PMS 289U</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-dark"></div>
                                            <p class="beta color-name">dark</p>
                                            <p><strong>SASS:</strong> $color-dark</p>
                                            <p><strong>HEX:</strong> #4c4c4c</p>
                                            <p><strong>RGB:</strong> 76 76 76</p>
                                            <p><strong>CMYK:</strong> 66 58 57 37</p>
                                            <p><strong>PMS:</strong> PMS Warm Gray 11</p>
                                        </div>
                                    </div>
                                    <h2 class="alpha">Sekundära färger</h2>
                                    <div class="colors">
                                        <div class="color">
                                            <div class="background-ruby"></div>
                                            <p class="beta color-name">ruby</p>
                                            <p><strong>SASS:</strong> $color-ruby</p>
                                            <p><strong>HEX:</strong> #ff4069</p>
                                            <p><strong>RGB:</strong> 255 64 105</p>
                                            <p><strong>CMYK:</strong> 0 84 38 0</p>
                                            <p><strong>PMS:</strong> 1925U</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-ruby-light"></div>
                                            <p class="beta color-name">ruby-light</p>
                                            <p><strong>SASS:</strong> $color-ruby-light</p>
                                            <p><strong>HEX:</strong> #ff9fb4</p>
                                            <p><strong>RGB:</strong> 255 109 180</p>
                                            <p><strong>CMYK:</strong> 0 51 13 0</p>
                                            <p><strong>PMS:</strong> 708UP</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-peacock"></div>
                                            <p class="beta color-name">peacock</p>
                                            <p><strong>SASS:</strong> $color-peacock</p>
                                            <p><strong>HEX:</strong> #c27fec</p>
                                            <p><strong>RGB:</strong> 194 127 236</p>
                                            <p><strong>CMYK:</strong> 41 54 0 0</p>
                                            <p><strong>PMS:</strong> 2655U</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-peacock-light"></div>
                                            <p class="beta color-name">peacock-light</p>
                                            <p><strong>SASS:</strong> $color-peacock-light</p>
                                            <p><strong>HEX:</strong> #e0bff5</p>
                                            <p><strong>RGB:</strong> 224 191 245</p>
                                            <p><strong>CMYK:</strong> 17 30 0 0</p>
                                            <p><strong>PMS:</strong> 2635U</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-jade"></div>
                                            <p class="beta color-name">jade</p>
                                            <p><strong>SASS:</strong> $color-jade</p>
                                            <p><strong>HEX:</strong> #55c7b4</p>
                                            <p><strong>RGB:</strong> 85 199 180</p>
                                            <p><strong>CMYK:</strong> 58 0 30 0</p>
                                            <p><strong>PMS:</strong> 325U</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-jade-light"></div>
                                            <p class="beta color-name">jade-light</p>
                                            <p><strong>SASS:</strong> $color-jade-light</p>
                                            <p><strong>HEX:</strong> #aae3d9</p>
                                            <p><strong>RGB:</strong> 170 227 217</p>
                                            <p><strong>CMYK:</strong> 28 0 20 0</p>
                                            <p><strong>PMS:</strong> 324U</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-sandstone"></div>
                                            <p class="beta color-name">sandstone</p>
                                            <p><strong>SASS:</strong> $color-sandstone</p>
                                            <p><strong>HEX:</strong> #f99963</p>
                                            <p><strong>RGB:</strong> 249 153 99</p>
                                            <p><strong>CMYK:</strong> 0 39 50 0</p>
                                            <p><strong>PMS:</strong> 473U</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-sandstone-light"></div>
                                            <p class="beta color-name">sandstone-light</p>
                                            <p><strong>SASS:</strong> $color-sandstone-light</p>
                                            <p><strong>HEX:</strong> #fcccb1</p>
                                            <p><strong>RGB:</strong> 249 153 99</p>
                                            <p><strong>CMYK:</strong> 1 20 30 0</p>
                                            <p><strong>PMS:</strong> 719UP</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-ocean"></div>
                                            <p class="beta color-name">ocean</p>
                                            <p><strong>SASS:</strong> $color-ocean</p>
                                            <p><strong>HEX:</strong> #50b2fc</p>
                                            <p><strong>RGB:</strong> 80 178 256</p>
                                            <p><strong>CMYK:</strong> 69 10 0 0</p>
                                            <p><strong>PMS:</strong> 299U</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-ocean-light"></div>
                                            <p class="beta color-name">ocean-light</p>
                                            <p><strong>SASS:</strong> $color-ocean-light</p>
                                            <p><strong>HEX:</strong> #a7d8fd</p>
                                            <p><strong>RGB:</strong> 167 216 253</p>
                                            <p><strong>CMYK:</strong> 35 5 1 0</p>
                                            <p><strong>PMS:</strong> 2830U</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-black"></div>
                                            <p class="beta color-name">black</p>
                                            <p><strong>SASS:</strong> $color-black</p>
                                            <p><strong>HEX:</strong> #000000</p>
                                            <p><strong>RGB:</strong> 0 0 0</p>
                                            <p><strong>CMYK:</strong> 50 50 50 100</p>
                                            <p><strong>PMS:</strong> n/a</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-granit"></div>
                                            <p class="beta color-name">granit</p>
                                            <p><strong>SASS:</strong> $color-granit</p>
                                            <p><strong>HEX:</strong> #8E9297</p>
                                            <p><strong>RGB:</strong> n/a</p>
                                            <p><strong>CMYK:</strong> n/a</p>
                                            <p><strong>PMS:</strong> n/a</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-concrete"></div>
                                            <p class="beta color-name">concrete</p>
                                            <p><strong>SASS:</strong> $color-concrete</p>
                                            <p><strong>HEX:</strong> #d8d8d8</p>
                                            <p><strong>RGB:</strong> n/a</p>
                                            <p><strong>CMYK:</strong> n/a</p>
                                            <p><strong>PMS:</strong> n/a</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-ash has_border"></div>
                                            <p class="beta color-name">ash</p>
                                            <p><strong>SASS:</strong> $color-ash</p>
                                            <p><strong>HEX:</strong> #ededed</p>
                                            <p><strong>RGB:</strong> n/a</p>
                                            <p><strong>CMYK:</strong> n/a</p>
                                            <p><strong>PMS:</strong> n/a</p>
                                        </div>
                                        <div class="color">
                                            <div class="background-snow"></div>
                                            <p class="beta color-name">snow</p>
                                            <p><strong>SASS:</strong> $color-snow</p>
                                            <p><strong>HEX:</strong> #ffffff</p>
                                            <p><strong>RGB:</strong> 255 255 255</p>
                                            <p><strong>CMYK:</strong> 0 0 0 0</p>
                                            <p><strong>PMS:</strong> n/a</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .colors {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 2em;
    }

    .color {
        flex: 100% 1 0;
        max-width: 100vw;
    }

    @media (min-width: 768px) {
        .color {
            flex: 50% 1 0;
        }

        .color-33 {
            flex: 33.333333% 1 0;
        }
    }

    .color div {
        width: 100%;
        height: 80px;
        margin-bottom: 10px;
    }

    .has_border {
        border: 1px solid #d8d8d8;
    }

    .color p {
        line-height: 1.25;
        margin: 0 10px;
    }

    .color p:last-child {
        margin-bottom: 40px;
    }

    .color p strong {
        font-family: 'Roboto Mono Regular', monotype;
    }

    .color-name::first-letter {
        text-transform: uppercase;
    }
</style>
<div class="site__main" id="siteMain">
	<div class="site__main__content">
		<div class="wrapper">
			<div class="row justify-content-center">
				<div class="grid-18">
					<div class="section section--tight">
						<div class="row">
							<div class="grid-18 grid-lg-12">
								<main role="main" class="article">
									<h1 class="supersize">Goto 10</h1>

									<div class="article__content">
										<p class="preamble">Goto 10 är en mötesplats för att bygga nätverk, testa idéer, jobba med nya projekt, produkter, evenemang och utbildningar – allt som främjar internet i Sverige.</p>
										<p>Mötesplatsen är öppen för alla och medlemskap är kostnadsfritt. Goto 10 finns i Hammarby Sjöstad och på goto10.se samt på sociala medier.</p>
										<h2>Logotyp</h2>

										<figure class="wp-block-image">
											<img src="/assets/images/goto10_exempel1-1024x580.jpg" alt="Goto 10 logotyp">
											<figcaption>Logotyp med gul text mot grå botten.</figcaption>
										</figure>
										<figure class="wp-block-image">
											<img src="/assets/images/goto10_exempel2-1024x580.jpg" alt="Goto 10 logotyp stående">
											<figcaption>En stående version av logotypen finns tillgänglig. Används i undantagsfall.</figcaption>
										</figure>
										<figure class="wp-block-image">
											<img src="/assets/images/goto10_exempel3-1024x580.jpg" alt="Goto 10 logotyp, grå, vit och svartvit version">
											<figcaption>Grå, vit och svart version av logotypen.</figcaption>
										</figure>

										<div class="m-download">
											<div class="row align-items-center justify-content-center">
												<div class="grid-auto">
													<figure class="m-download__icon-file">
														<svg class="icon">
															<use xlink:href="#icon-file"></use>
														</svg>
													</figure>
												</div>
												<div class="grid u-position-static">
													<div class="row flex-column">
														<div class="grid-18 u-position-static">
															<a href="/assets/zip/goto10-logo.zip" class="beta m-download__link" download>
																Logotyp för nedladdning
															</a>
														</div>
														<div class="grid-18  display-flex flex-column flex-sm-row justify-content-between align-items-start">
															<p class="u-m-b-0">Ladda ner logotyp som EPS</p>
															<div class="display-flex align-self-end flex-nowrap m-download__trigger">
																<strong class="m-download__text">Ladda ner</strong>
																<figure class="m-download__icon-download">
																	<svg class="icon">
																		<use xlink:href="#icon-download"></use>
																	</svg>
																</figure>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>

										<h3>Logotypens anatomi</h3>
										<figure class="wp-block-image">
											<img src="/assets/images/goto10_grid-1024x580.jpg" alt="Logotypens anatomi vilandes på ett osynligt kvadratiskt rutsystem">
											<figcaption>Logotypens bokstäver vilar på ett osynligt kvadratiskt rutsystem.</figcaption>
										</figure>

										<h3>Rutmönster</h3>
										<figure class="wp-block-image">
											<img src="/assets/images/goto10_monster-1024x580.jpg" alt="Logotypen i form av ett mönster">
											<figcaption>Logotypen i form av ett mönster.</figcaption>
										</figure>

										<div class="m-download">
											<div class="row align-items-center justify-content-center">
												<div class="grid-auto">
													<figure class="m-download__icon-file">
														<svg class="icon">
															<use xlink:href="#icon-file"></use>
														</svg>
													</figure>
												</div>
												<div class="grid u-position-static">
													<div class="row flex-column">
														<div class="grid-18 u-position-static">
															<a href="/assets/zip/Goto_10_monster.zip" class="beta m-download__link" download>
																Mönster för nedladdning
															</a>
														</div>
														<div class="grid-18  display-flex flex-column flex-sm-row justify-content-between align-items-start">
															<p class="u-m-b-0">Ladda ner mönster som EPS</p>
															<div class="display-flex align-self-end flex-nowrap m-download__trigger">
																<strong class="m-download__text">Ladda ner</strong>
																<figure class="m-download__icon-download">
																	<svg class="icon">
																		<use xlink:href="#icon-download"></use>
																	</svg>
																</figure>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</main>
							</div>
							<div class="grid-18 grid-lg-6">
								<aside class="sidebar u-position-sticky-top-4">
									<div class="row">
										<div class="grid-18 grid-md-9 grid-lg-18 u-m-b-2">
											<section class="m-card m-card--padded">
												<div class="m-card__content">
													<h1 class="beta">Brandbook</h1>
													<div class="textwidget">
														<dl>
															<dt>Internetstiftelsen</dt>
															<dd class="u-m-l-0">
																<ol class="u-list-clean u-p-l-2">
																	<li><a href="/components/preview/identitet.html" class="u-link">Identitét</a></li>
																	<li><a href="/components/preview/bildmaner.html" class="u-link">Bildmanér</a></li>
																	<li><a href="/components/preview/tonalitet-och-sprakbruk.html" class="u-link">Tonalitet och språkbruk</a></li>
																</ol>
															</dd>
															<dd class="u-m-l-0">
																<ol class="u-list-clean">
																	<li><a href="/components/preview/goto10.html" class="u-link"><strong>Goto 10</strong></a></li>
																</ol>
															</dd>
														</dl>
													</div>
												</div>
											</section>
										</div>
									</div>
								</aside>
							</div>
							<div class="row">
								<div class="grid-18">
									<h2 class="alpha">Primära färger</h2>
									<div class="colors">
										{{#each colors}}
										<div class="color">
											<div class="background-{{name}}{{#if hasBorder}} has_border{{/if}}"></div>
											<p class="beta color-name">{{name}}</p>
											<p><strong>{{../sass}}:</strong> {{title}}</p>
											<p><strong>{{../hex}}:</strong> {{hex}}</p>
											<p><strong>{{../rgb}}:</strong> {{rgb}}</p>
											<p><strong>{{../cmyk}}:</strong> {{cmyk}}</p>
											<p><strong>{{../pms}}:</strong> {{pms}}</p>
										</div>
										{{/each}}
									</div>
									<h2 class="alpha">Sekundära färger</h2>
									<div class="colors">
										{{#each secondaryColors}}
										<div class="color">
											<div class="background-{{name}}{{#if hasBorder}} has_border{{/if}}"></div>
											<p class="beta color-name">{{name}}</p>
											<p><strong>{{../sass}}:</strong> {{title}}</p>
											<p><strong>{{../hex}}:</strong> {{hex}}</p>
											<p><strong>{{../rgb}}:</strong> {{rgb}}</p>
											<p><strong>{{../cmyk}}:</strong> {{cmyk}}</p>
											<p><strong>{{../pms}}:</strong> {{pms}}</p>
										</div>
										{{/each}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
	.colors {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 2em;
	}

	.color {
		flex: 100% 1 0;
		max-width: 100vw;
	}

	@media (min-width: 768px) {
		.color {
			flex: 50% 1 0;
		}
		.color-33 {
			flex: 33.333333% 1 0;
		}
	}

	.color div {
		width: 100%;
		height: 80px;
		margin-bottom: 10px;
	}

	.has_border {
		border: 1px solid #d8d8d8;
	}

	.color p {
		line-height: 1.25;
		margin: 0 10px;
	}

	.color p:last-child {
		margin-bottom: 40px;
	}

	.color p strong {
		font-family: 'Roboto Mono Regular', monotype;
	}

	.color-name::first-letter {
		text-transform: uppercase;
	}
</style>
{
  "sass": "SASS",
  "hex": "HEX",
  "rgb": "RGB",
  "cmyk": "CMYK",
  "pms": "PMS",
  "colors": [
    {
      "name": "lemon",
      "title": "$color-lemon",
      "hex": "#ffce2e",
      "rgb": "255 206 46",
      "cmyk": "0 20 86 0",
      "pms": "120U"
    },
    {
      "name": "lemon-light",
      "title": "$color-lemon-light",
      "hex": "#ffe696",
      "rgb": "255 230 150",
      "cmyk": "0 9 50 0",
      "pms": "1215UP",
      "hasBorder": false
    },
    {
      "name": "cyberspace",
      "title": "$color-cyberspace",
      "hex": "#1f2a36",
      "rgb": "31 42 54",
      "cmyk": "88 71 52 41",
      "pms": "PMS 289U",
      "hasBorder": false
    },
    {
      "name": "dark",
      "title": "$color-dark",
      "hex": "#4c4c4c",
      "rgb": "76 76 76",
      "cmyk": "66 58 57 37",
      "pms": "PMS Warm Gray 11",
      "hasBorder": false
    }
  ],
  "secondaryColors": [
    {
      "name": "ruby",
      "title": "$color-ruby",
      "hex": "#ff4069",
      "rgb": "255 64 105",
      "cmyk": "0 84 38 0",
      "pms": "1925U",
      "hasBorder": false
    },
    {
      "name": "ruby-light",
      "title": "$color-ruby-light",
      "hex": "#ff9fb4",
      "rgb": "255 109 180",
      "cmyk": "0 51 13 0",
      "pms": "708UP",
      "hasBorder": false
    },
    {
      "name": "peacock",
      "title": "$color-peacock",
      "hex": "#c27fec",
      "rgb": "194 127 236",
      "cmyk": "41 54 0 0",
      "pms": "2655U",
      "hasBorder": false
    },
    {
      "name": "peacock-light",
      "title": "$color-peacock-light",
      "hex": "#e0bff5",
      "rgb": "224 191 245",
      "cmyk": "17 30 0 0",
      "pms": "2635U",
      "hasBorder": false
    },
    {
      "name": "jade",
      "title": "$color-jade",
      "hex": "#55c7b4",
      "rgb": "85 199 180",
      "cmyk": "58 0 30 0",
      "pms": "325U",
      "hasBorder": false
    },
    {
      "name": "jade-light",
      "title": "$color-jade-light",
      "hex": "#aae3d9",
      "rgb": "170 227 217",
      "cmyk": "28 0 20 0",
      "pms": "324U",
      "hasBorder": false
    },
    {
      "name": "sandstone",
      "title": "$color-sandstone",
      "hex": "#f99963",
      "rgb": "249 153 99",
      "cmyk": "0 39 50 0",
      "pms": "473U"
    },
    {
      "name": "sandstone-light",
      "title": "$color-sandstone-light",
      "hex": "#fcccb1",
      "rgb": "249 153 99",
      "cmyk": "1 20 30 0",
      "pms": "719UP",
      "hasBorder": false
    },
    {
      "name": "ocean",
      "title": "$color-ocean",
      "hex": "#50b2fc",
      "rgb": "80 178 256",
      "cmyk": "69 10 0 0",
      "pms": "299U",
      "hasBorder": false
    },
    {
      "name": "ocean-light",
      "title": "$color-ocean-light",
      "hex": "#a7d8fd",
      "rgb": "167 216 253",
      "cmyk": "35 5 1 0",
      "pms": "2830U",
      "hasBorder": false
    },
    {
      "name": "black",
      "title": "$color-black",
      "hex": "#000000",
      "rgb": "0 0 0",
      "cmyk": "50 50 50 100",
      "pms": "n/a",
      "hasBorder": false
    },
    {
      "name": "granit",
      "title": "$color-granit",
      "hex": "#8E9297",
      "rgb": "n/a",
      "cmyk": "n/a",
      "pms": "n/a",
      "hasBorder": false
    },
    {
      "name": "concrete",
      "title": "$color-concrete",
      "hex": "#d8d8d8",
      "rgb": "n/a",
      "cmyk": "n/a",
      "pms": "n/a",
      "hasBorder": false
    },
    {
      "name": "ash",
      "title": "$color-ash",
      "hex": "#ededed",
      "rgb": "n/a",
      "cmyk": "n/a",
      "pms": "n/a",
      "hasBorder": true
    },
    {
      "name": "snow",
      "title": "$color-snow",
      "hex": "#ffffff",
      "rgb": "255 255 255",
      "cmyk": "0 0 0 0",
      "pms": "n/a",
      "hasBorder": false
    }
  ]
}

No notes defined.