<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">
<h1 class="supersize">Identitet for Internetstiftelsen</h1>
<div class="article__content">
<h2>Logotyp</h2>
<svg class="logotype">
<use xlink:href="#logotype-default"></use>
</svg>
<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/Internetstiftelsen-logotyp.zip" class="beta m-download__link" download>
Ladda ner logotyp
</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, SVG och PNG</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>
<h2>Namn</h2>
<p>Vi använder "Internetstiftelsen" i löpande text. Vi använder inte förkortningar som "IIS" eller "NIC" eller andra tidigare använda begrepp.</p>
<p>På engelska kallar vi oss "The Swedish Internet Foundation", versaliserat på just detta sätt.</p>
</div>
</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"><strong>Identitet</strong></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">Goto 10</a></li>
</ol>
</dd>
</dl>
</div>
</div>
</section>
</div>
</div>
</aside>
</div>
</div>
<div class="row">
<div class="grid-18">
<h2>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> 252 204 177</p>
<p><strong>CMYK:</strong> 1 20 30 0</p>
<p><strong>PMS:</strong> 719UP</p>
</div>
<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-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-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-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>
<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 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>
</div>
<div class="row">
<div class="grid-18">
<div class="article__content">
<h2>Typografi</h2>
<div class="row u-m-y-6 u-m-r-0" style="max-width: none;">
<div class="grid-18">
<span class="meta u-m-b-1">Rubriker</span>
</div>
<div class="grid-18">
<h1 class="supersize">Supersize - HK Grotesk Bold</h1>
<h1>H1 - HK Grotesk Semibold</h1>
<h2>H2 - HK Grotesk Semibold</h2>
<h3>H3 - HK Grotesk Regular</h3>
<h4>H4 - HK Grotesk Semibold</h4>
</div>
</div>
<div class="row u-m-b-6">
<div class="grid-18">
<span class="meta u-m-b-1">Brödtext</span>
</div>
<div class="grid-18">
<p>HK Grotesk Regular</p>
</div>
</div>
<div class="row u-m-b-6">
<div class="grid-18">
<span class="meta u-m-b-1">Accent</span>
</div>
<div class="grid-18 grid-md-14">
<span class="a-meta">Roboto Mono</a>
</div>
</div>
<div class="m-info-box">
<h3>Typsnitt för nedladdning</h3>
<ul>
<li>
<a href="https://hanken.co/collections/free/products/hk-grotesk" target="_blank">HK Grotesk
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a>
</li>
<li>
<a href="https://fonts.google.com/specimen/Roboto+Mono" target="_blank">Roboto Mono
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-18">
<h2>Undervarumärken</h2>
<div class="row background-snow u-m-b-4">
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Svenskarna och internet" src="https://static.internetstiftelsen.se/images/logotypes/svenskarna-och-internet.svg">
</div>
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Internetdagarna" src="https://static.internetstiftelsen.se/images/logotypes/internetdagarna.svg">
</div>
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Goto10" src="https://static.internetstiftelsen.se/images/logotypes/goto-10.svg">
</div>
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Bredbandskollen" src="https://static.internetstiftelsen.se/images/logotypes/bredbandskollen.svg">
</div>
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Internetmuseum" src="https://static.internetstiftelsen.se/images/logotypes/internetmuseum.svg">
</div>
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Digitala lektioner" src="https://static.internetstiftelsen.se/images/logotypes/digitala-lektioner.svg">
</div>
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Internetkunskap" src="https://static.internetstiftelsen.se/images/logotypes/internetkunskap.svg">
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-18 grid-lg-12">
<div class="article__content">
<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/undervarumarken.zip" class="beta m-download__link" download>
Varumärkeslogotyper 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 logotyper som EPS, SVG och PNG</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>
<h2>Placering logotyp</h2>
<img class="u-m-b-4" src="/assets/images/placeringsriktlinjer.png" alt="Placeringsregler för Internetstiftelsens logotyp">
<h2>Friutrymme, logotyp</h2>
<img class="u-m-b-4" src="/assets/images/Friutrymme-logotyp.png" alt="Friutrymme för Internetstiftelsens logotyp">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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">
<h1 class="supersize">Identitet for Internetstiftelsen</h1>
<div class="article__content">
<h2>Logotyp</h2>
<svg class="logotype">
<use xlink:href="#logotype-default"></use>
</svg>
<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/Internetstiftelsen-logotyp.zip" class="beta m-download__link" download>
Ladda ner logotyp
</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, SVG och PNG</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>
<h2>Namn</h2>
<p>Vi använder "Internetstiftelsen" i löpande text. Vi använder inte förkortningar som "IIS" eller "NIC" eller andra tidigare använda begrepp.</p>
<p>På engelska kallar vi oss "The Swedish Internet Foundation", versaliserat på just detta sätt.</p>
</div>
</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"><strong>Identitet</strong></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">Goto 10</a></li>
</ol>
</dd>
</dl>
</div>
</div>
</section>
</div>
</div>
</aside>
</div>
</div>
<div class="row">
<div class="grid-18">
<h2>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> 252 204 177</p>
<p><strong>CMYK:</strong> 1 20 30 0</p>
<p><strong>PMS:</strong> 719UP</p>
</div>
<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-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-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-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>
<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 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>
</div>
<div class="row">
<div class="grid-18">
<div class="article__content">
<h2>Typografi</h2>
<div class="row u-m-y-6 u-m-r-0" style="max-width: none;">
<div class="grid-18">
<span class="meta u-m-b-1">Rubriker</span>
</div>
<div class="grid-18">
<h1 class="supersize">Supersize - HK Grotesk Bold</h1>
<h1>H1 - HK Grotesk Semibold</h1>
<h2>H2 - HK Grotesk Semibold</h2>
<h3>H3 - HK Grotesk Regular</h3>
<h4>H4 - HK Grotesk Semibold</h4>
</div>
</div>
<div class="row u-m-b-6">
<div class="grid-18">
<span class="meta u-m-b-1">Brödtext</span>
</div>
<div class="grid-18">
<p>HK Grotesk Regular</p>
</div>
</div>
<div class="row u-m-b-6">
<div class="grid-18">
<span class="meta u-m-b-1">Accent</span>
</div>
<div class="grid-18 grid-md-14">
<span class="a-meta">Roboto Mono</a>
</div>
</div>
<div class="m-info-box">
<h3>Typsnitt för nedladdning</h3>
<ul>
<li>
<a href="https://hanken.co/collections/free/products/hk-grotesk" target="_blank">HK Grotesk
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a>
</li>
<li>
<a href="https://fonts.google.com/specimen/Roboto+Mono" target="_blank">Roboto Mono
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-18">
<h2>Undervarumärken</h2>
<div class="row background-snow u-m-b-4">
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Svenskarna och internet" src="https://static.internetstiftelsen.se/images/logotypes/svenskarna-och-internet.svg">
</div>
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Internetdagarna" src="https://static.internetstiftelsen.se/images/logotypes/internetdagarna.svg">
</div>
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Goto10" src="https://static.internetstiftelsen.se/images/logotypes/goto-10.svg">
</div>
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Bredbandskollen" src="https://static.internetstiftelsen.se/images/logotypes/bredbandskollen.svg">
</div>
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Internetmuseum" src="https://static.internetstiftelsen.se/images/logotypes/internetmuseum.svg">
</div>
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Digitala lektioner" src="https://static.internetstiftelsen.se/images/logotypes/digitala-lektioner.svg">
</div>
<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
<img alt="Internetkunskap" src="https://static.internetstiftelsen.se/images/logotypes/internetkunskap.svg">
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-18 grid-lg-12">
<div class="article__content">
<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/undervarumarken.zip" class="beta m-download__link" download>
Varumärkeslogotyper 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 logotyper som EPS, SVG och PNG</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>
<h2>Placering logotyp</h2>
<img class="u-m-b-4" src="/assets/images/placeringsriktlinjer.png" alt="Placeringsregler för Internetstiftelsens logotyp">
<h2>Friutrymme, logotyp</h2>
<img class="u-m-b-4" src="/assets/images/Friutrymme-logotyp.png" alt="Friutrymme för Internetstiftelsens logotyp">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* No context defined. */
No notes defined.