<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.