<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 grid-lg-12">
                                <div class="article__content">
                                    <h2>Typografi</h2>
                                    <div class="row u-m-y-6">
                                        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch display-flex justify-content-md-center">
                                            <span class="meta u-m-b-1">Rubriker</span>
                                        </div>
                                        <div class="grid-18 grid-md-14">
                                            <h1>HK Grotesk Semibold</h1>
                                        </div>
                                    </div>
                                    <div class="row u-m-b-6">
                                        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch display-flex justify-content-md-center">
                                            <p class="meta">Brödtext</p>
                                        </div>
                                        <div class="grid-18 grid-md-14">
                                            <p>HK Grotesk Regular</p>
                                        </div>
                                    </div>
                                    <div class="row u-m-b-6">
                                        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch display-flex justify-content-md-center">
                                            <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 grid-lg-12">
								<div class="article__content">
									<h2>Typografi</h2>
									<div class="row u-m-y-6">
										<div class="grid-md-3 display-flex align-items-md-center align-self-stretch display-flex justify-content-md-center">
											<span class="meta u-m-b-1">Rubriker</span>
										</div>
										<div class="grid-18 grid-md-14">
											<h1>HK Grotesk Semibold</h1>
										</div>
									</div>
									<div class="row u-m-b-6">
										<div class="grid-md-3 display-flex align-items-md-center align-self-stretch display-flex justify-content-md-center">
											<p class="meta">Brödtext</p>
										</div>
										<div class="grid-18 grid-md-14">
											<p>HK Grotesk Regular</p>
										</div>
									</div>
									<div class="row u-m-b-6">
										<div class="grid-md-3 display-flex align-items-md-center align-self-stretch display-flex justify-content-md-center">
											<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.