# CDN > 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](/css/) directly into your webpage from the Kesko Design System CDN: ```html ``` The above code snippet ships the [design tokens](/tokens/), [webfonts](/webfonts/), [default theme](/themes/), and [utility classes](/css/), so you can start building things immediately. If you also want the component styles for usage with plain HTML, include the following: ```html ``` To theme the webpage, load a stylesheet from the [themes package](/themes/): ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` > Note: While this is the fastest way to get started, it is not always the best fit for production. If your app already bundles its dependencies, install the packages from npm instead, so you get tree-shaking, type definitions, and updates through your usual dependency tooling. --- ## Available packages Every package is served under its npm name, without the `@kesko/` scope: | Package | Base URL | | --------------------------- | ------------------------------ | | [Components](/components/) | `https://cdn.kesko.design/components/` | | [CSS Framework](/css/) | `https://cdn.kesko.design/css/` | | [Design Tokens](/tokens/) | `https://cdn.kesko.design/tokens/` | | [Iconography](/icons/) | `https://cdn.kesko.design/iconography/` | | [Webfonts](/webfonts/) | `https://cdn.kesko.design/fonts/` | | [Themes](/themes/) | `https://cdn.kesko.design/themes/` | | [Color Utilities](/colors/) | `https://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: ```html https://cdn.kesko.design/// ``` To fetch e.g. the CSS Framework’s minified stylesheet using the above format, you would write it like: ```html 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: ```html ``` Or to use one icon as an image, without loading the whole icon library: ```html

``` 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](#subresource-integrity) below work. > Note: A preload only helps when its URL is exactly the one the stylesheet will request: the CSS framework references the font files next to itself under /css/1.0.0-rc.3/, while the fonts package references them under /fonts/1.4.0/. --- ## 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](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)). 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 ```html ``` #### Component styles ```html ``` #### 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: ```js 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 ```html ``` #### Webfonts ```html ``` #### Icons ```html ``` #### Brand themes ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` We publish `integrity` hashes for the latest release of each package, but you can generate them yourself for any other version: ```sh [Remote file] curl -s https://cdn.kesko.design/css/1.0.0-rc.3/kesko.min.css | openssl dgst -sha384 -binary | openssl base64 -A ``` ```sh [Local file] openssl dgst -sha384 -binary node_modules/@kesko/css/dist/kesko.min.css | 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: ```diff ``` 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. 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](https://aws.amazon.com/cloudfront/features/#Global_Edge_Network) page.