Design System

We created our blok.ink design system to allow our customers to build great integrated experiences while maintaining Storyblok's overall design.

How to use

The design system is documented and kept up to date on our blok.ink website. Each component has a preview as well as documentation on how to use it. For detailed information on the implementation, you can have a look at the Github repository.

The easiest way to use the design system is to install it via npm:

npm install storyblok-design-system --save

If you want to try out the latest development version, you can also install it directly from the development branch on Github:

npm install git+https://github.com/storyblok/storyblok-design-system#develop --save

To use the different components in Vue, we need to register it and import the CSS:

import Vue from 'vue'
import BlokInk from 'storyblok-design-system'
import 'storyblok-design-system/dist/storyblok-design-system.css'

Vue.use(BlokInk)

After the Design System was registered, you can use the components and CSS classes in any page or component:

Loading.vue

<SbLoading type="spinner" size="x-large" color="primary" />

Nuxt

If you are using the Design System inside a Nuxt application, the easiest way to register is by creating a plugin file and turning off server-side rendering inside the nuxt.config.js

plugins: [{ src: '~/plugins/blok-ink.js', ssr: false }],

How to use it in custom field-types

It's also possible to use the design system in custom field-types. Read our FAQ How to use the Design System with custom field-types? if you want to know more.

Components

Our components are a collection of interface elements that can be reused across the Storyblok system. Once you open a component in the blok.ink website {1}. You can preview it under Canvas {2} or have a look at the documentation {3}. In the documentation, you can change the components' different settings {4} and finally show the code {5} that you will need for embedding it.

Blok Ink Components

Typography

Roboto is the primary brand typeface for Storyblok. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves.

Blok Ink Typography

Colors

Storyblok's brand color is teal. It combines the calming properties of blue with the renewal qualities of green. The color represents open communication and clarity of thought.

To complement it, the secondary color in Storyblok is a dark blue, which is called ink.

To allow for different activity colors, there are 5 alert colors in different nuances: red, orange, yellow, blue, and green.

Blok Ink Colors