Kesko Design System CDN hosts a copy of every package we publish. Each release lives at its own permanent URL, so you can load an asset with a single tag, without installing anything.

Reach for the Kesko Design System CDN when you want to prototype something quickly, when you are working with a stack that has no build step, or when several apps should share one cached copy of an asset.

Quick start #

The fastest way to get started is to include the CSS Framework directly into your webpage from the Kesko Design System CDN:

<link rel="stylesheet" href="https://cdn.kesko.design/css/1.0.0-rc.3/kesko.min.css" integrity="sha384-+nXisOl3c1677FsguFAVqmER5VVvNO4CB7DFiQARPhNecGhBrHTh6IYxNIrHFb5L" crossorigin="anonymous" />

The above code snippet ships the design tokens, webfonts, default theme, and utility classes, so you can start building things immediately. If you also want the component styles for usage with plain HTML, include the following:

<link rel="stylesheet" href="https://cdn.kesko.design/css/1.0.0-rc.3/components.min.css" integrity="sha384-imnKXxqZm5Ch9M+niBAuFJHSwXQAMJQr8OXi2qX+o65Ln/9GNeFV82IU0C6aLcyA" crossorigin="anonymous" />

To theme the webpage, load a stylesheet from the themes package:

<link rel="stylesheet" href="https://cdn.kesko.design/themes/1.0.0-rc.3/kesko.css" integrity="sha384-deqG4+BbUxF7uCKWAEXN3B75/3poUykt+OsA43ShJWT/MjFgL47pqrHg3ngwGVXC" crossorigin="anonymous" />

Available packages #

Every package is served under its npm name, without the @kesko/ scope:

PackageBase URL
Componentshttps://cdn.kesko.design/components/
CSS Frameworkhttps://cdn.kesko.design/css/
Design Tokenshttps://cdn.kesko.design/tokens/
Iconographyhttps://cdn.kesko.design/iconography/
Webfontshttps://cdn.kesko.design/fonts/
Themeshttps://cdn.kesko.design/themes/
Color Utilitieshttps://cdn.kesko.design/color/

Each one publishes the same files you would find in that package’s dist/ directory.

URL structure #

Assets are addressed by package, exact version, and file path:

https://cdn.kesko.design/<package>/<version>/<file>

To fetch e.g. the CSS Framework’s minified stylesheet using the above format, you would write it like:

https://cdn.kesko.design/css/1.0.0-rc.3/kesko.min.css

Any file a package ships is reachable the same way, not only the bundled entry points. To preload a single webfont:

<link
  rel="preload"
  as="font"
  type="font/woff2"
  href="https://cdn.kesko.design/fonts/1.4.0/SkattaSansUI_TT-Regular.woff2"
  crossorigin="anonymous"
/>

Or to use one icon as an image, without loading the whole icon library:

<img
  src="https://cdn.kesko.design/iconography/2.1.2/assets/arrow-down.svg"
  alt=""
  width="24"
  height="24"
/>

There is no latest alias on purpose. Pinning an exact version keeps a release from changing your app’s appearance without you choosing it, and it is what makes the integrity hashes below work.

Subresource Integrity #

Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match (source: MDN).

Every stylesheet and script tag on this page already carries an integrity hash for the version it points at, and the fetch example passes one as an option. The accompanying crossorigin="anonymous" attribute is required. Without it the browser cannot read the response to verify it, and the asset is blocked.

CSS framework #

<link
  rel="stylesheet"
  href="https://cdn.kesko.design/css/1.0.0-rc.3/kesko.min.css"
  integrity="sha384-+nXisOl3c1677FsguFAVqmER5VVvNO4CB7DFiQARPhNecGhBrHTh6IYxNIrHFb5L"
  crossorigin="anonymous"
/>

Component styles #

<link
  rel="stylesheet"
  href="https://cdn.kesko.design/css/1.0.0-rc.3/components.min.css"
  integrity="sha384-imnKXxqZm5Ch9M+niBAuFJHSwXQAMJQr8OXi2qX+o65Ln/9GNeFV82IU0C6aLcyA"
  crossorigin="anonymous"
/>

Components schema #

Lists details about components in a format that AI understands natively. It is data rather than a stylesheet or a script, so pass the hash to fetch instead of putting it in a tag:

const response = await fetch("https://cdn.kesko.design/components/1.0.0-alpha.15/components.json", {
  integrity: "sha384-fjqsxcevYssLDIa+99xthXG3bRX2PlRF7DDjuWQfVB5qmU+5RMf+KCjyxFBR6PV3",
});

const { components } = await response.json();

Design tokens #

<link
  rel="stylesheet"
  href="https://cdn.kesko.design/tokens/1.0.0-rc.2/tokens.min.css"
  integrity="sha384-+GJJWXpHnw62UmmBP36pLRJaTjVtk/YnfwmRpnAgaJAExdztNHyAV9vzJmqsWiW1"
  crossorigin="anonymous"
/>

Webfonts #

<link
  rel="stylesheet"
  href="https://cdn.kesko.design/fonts/1.4.0/fonts.css"
  integrity="sha384-A0eOfKcNfSzeIy9Apx4mIBkE+qYt9JrbXsRiiBWPtoRKxEO0Dh2qIuHXi9DYWCFV"
  crossorigin="anonymous"
/>

Icons #

<script
  type="module"
  src="https://cdn.kesko.design/iconography/2.1.2/icons.js"
  integrity="sha384-lMuCDi8yGS064u3OOqGrizufERDZhLgTxXms6X6nHhGcHAvwdxo+KJiWlF4R+Dfy"
  crossorigin="anonymous"
></script>

Brand themes #

<link
  rel="stylesheet"
  href="https://cdn.kesko.design/themes/1.0.0-rc.3/kesko.css"
  integrity="sha384-deqG4+BbUxF7uCKWAEXN3B75/3poUykt+OsA43ShJWT/MjFgL47pqrHg3ngwGVXC"
  crossorigin="anonymous"
/>

We publish integrity hashes for the latest release of each package, but you can generate them yourself for any other version:

curl -s https://cdn.kesko.design/css/1.0.0-rc.3/kesko.min.css | openssl dgst -sha384 -binary | openssl base64 -A

Prefix the result with sha384- to get the value for the integrity attribute.

Available versions #

The CDN carries releases published after each package joined it, so these are the earliest versions you can request:

  • @kesko/components: 1.0.0-alpha.13 and newer
  • @kesko/css: 1.0.0-rc.1 and newer
  • @kesko/color: 1.0.0-rc.1 and newer
  • @kesko/fonts: 1.3.0 and newer
  • @kesko/themes: 1.0.0-rc.1 and newer
  • @kesko/tokens: 1.0.0-rc.1 and newer
  • @kesko/iconography: 2.1.1 and newer

Caching #

Existing assets on the Kesko Design System CDN are never replaced. A URL that includes a version number always returns exactly the same asset, so we serve it with a one-year cache lifetime and browsers download it only once.

To move to a newer release, change the version number in the URL you use. The integrity hash changes with it, so swap both lines together:

  <link
    rel="stylesheet"
-   href="https://cdn.kesko.design/css/<your current version>/kesko.min.css"
-   integrity="<your current hash>"
+   href="https://cdn.kesko.design/css/1.0.0-rc.3/kesko.min.css"
+   integrity="sha384-+nXisOl3c1677FsguFAVqmER5VVvNO4CB7DFiQARPhNecGhBrHTh6IYxNIrHFb5L"
    crossorigin="anonymous"
  />

Updating only the URL leaves the old hash in place, and the browser blocks the asset rather than loading it.

Edge locations #

The CDN delivers files from a network of servers across Europe and North America. When someone opens your app, the browser fetches each file from the server closest to them, so the files arrive quickly wherever your users are.

European cities the Kesko Design System CDN serves files fromA map of Europe with a dot on each city that keeps a copy of the files. The files are stored in Dublin, Ireland.Vienna, AustriaBrussels, BelgiumSofia, BulgariaZagreb, CroatiaPrague, Czech RepublicCopenhagen, DenmarkHelsinki, FinlandMarseille, FranceParis, FranceBerlin, GermanyDüsseldorf, GermanyFrankfurt, GermanyHamburg, GermanyMunich, GermanyAthens, GreeceBudapest, HungaryDublin, Ireland (the files are stored here)Milan, ItalyRome, ItalyAmsterdam, NetherlandsOslo, NorwayWarsaw, PolandLisbon, PortugalBucharest, RomaniaBarcelona, SpainMadrid, SpainStockholm, SwedenZurich, SwitzerlandLondon, United KingdomManchester, United Kingdom
The European part of the network. Each dot is a city that keeps a copy of the files.

The map shows the European part of the network at the time of writing. It grows over time, and the current list of cities is on our provider’s edge locations page.