kickstartDS low-code CMS starters: Connecting a Design System to a CMS just got easier
Learn more

Leverage rich integrations...

... to ease setup and everyday tasks


Focus on the stuff that really matters:

While having a solid Design System is the necessary start, without projects using it this is of theoretical value.

This is why kickstartDS comes with ready-to-use integrations, adapters and even CMS starters for a lot of common scenarios you might encounter while thinking about a project - like your main marketing site, your blog or the way you want to integrate design decisions into an automated process, because ...

... a Design System is nothing without a System applying it!

Storyblok CMS Starter

Start your next website project with kickstartDS on board and create your next digital experience faster, more consistent, and sustainably than ever.

Netlify Create CMS Starter

The CMS starter for Netlify Create is an integration designed to facilitate the seamless use of kickstartDS within the Netlify environment.

Jump directly to integrations for:

Backend

Adapters and plugins for headless systems: Static CMS, Storyblok, Netlify Create / Stackbit

Generators

Themes, Plugins & Generators for: 11ty, Next.js, GraphQL

Design Tooling

Templates & Connectors for: Style Dictionary, Figma, Backlight

Derivatives

Theme converters for: Bootstrap, Material UI

Immediate integration with your favorite CMS backend

... because you shouldn't start from zero here, either

Why good integrations matter:

Instead of doing the legwork to set up a project with these headless CMS yourself, you can use our plugins and starters to hit the ground running... while also having your Design System automatically integrated from the get-go. And best thing, with automatic conversion of component API to CMS configuration, everything stays in sync, always! Without additional development time needed!

Static CMS to start small

Get a content management approach that works right inside your existing Git workflows. Static CMS, as a successor to Netlify CMS, is completely Open Source and the editor interface can be statically hosted wherever you like!

Visual Editing with Storyblok

Storyblok proves to be an all-rounder with an innovative visual editor. kickstartDS components can be integrated very quickly via our component API. This optimizes the user experience (UX) and makes your brand team happy. A decisive advantage here is the permanent synchronization between the frontend and your design system.

Enterprise pages with Netlify Create

When wanting to build bigger pages visually, especially those with the need for multiple CMS sources, Netlify Create is a great solution to empower your digital team. It's also one of the contenders offering deep solutions for customers with enterprise needs.

WordPress for blogs

WordPress shines for blog content, and many editors have a really solid working knowledge of it! By using WordPress in a headless way (using wpgraphql), you can leverage the editorial experience without losing out on a modern, performant and secure web stack!

View blog example

Generators and Jamstack

... multiplying existing value

What a generator can do for you:

Your Design System already has really good knowledge about what a component is, how it is structured and how it behaves. We use that knowledge to provide starters that include everything a website needs (for SEO, performance, etc). Those are based on schema tooling (utilizing JSON Schema under the hood) we wrote to enable those starters. And if you're using Next.js we have some plugins to use your components in a performant way there too, without writing glue code yourself.

Finally: being able to use our GraphQL tooling to generate TypeScript types for your components and GraphQL types and fragments for usage in Gatsby and Next, all while including component documentation automatically.

Starter for Next.js

Use one of our starters to have a project running in mere minutes, or use our plugins directly to configure everything the way you like... while still profiting from work already done. All components are completely SSR-compatible, too.

Learn about Next.js

Ready to deploy 11ty starter

11ty is an easy-to-use static site generator that prioritizes simplicity and speed, allowing you to build fast and efficient websites without a heavy build process. Our kickstartDS-specific plugin integrates JSX into your 11ty build seamlessly.

Learn about 11ty

GraphQL types and fragments

Based on our component API we have tooling (based on GraphQL Tools) to automatically generate types and fragments for GraphQL. This can be the perfect building block to creating your shared API between frontend and backend.

Learn about GraphQL

Connect to Design Tooling

... to help bridge the dev-design divide

How Design Tokens enable better processes:

Tokens are the perfect starting ground when establishing shared processes and responsibilities between designers and developers, as they encode the most atomic design decisions of your Design System. Connecting design tools like Figma through Style Dictionary, or using complementary services to manage your Design System like Backlight, helps set up a baseline for your team, without requiring you to do everything by yourself!

Style Dictionary

Style Dictionary is a tool developed by Amazon to help with establishing a dependable structure for your Design Tokens. This includes defining them in a well-defined way (JSON) and then converting them to different target formats: CSS Properties, iOS definitions or themes. All our tokens are defined in a Style Dictionary.

Learn about Style Dictionary

Figma

Figma is currently taking the design space by storm. We offer a Figma template with all our semantic Design Tokens encoded in a visual way. You can even change values in Figma, and use one of our connectors to integrate them back into your code base automatically... for example as part of your CI/CD

View our Design Token template

Backlight

Backlight can function as your teams whole-in-one platform for Design System management / DesignOps. kickstartDS is wholly compatible with Backlight, and its features like the Style Dictionary integration, bundling and packaging, etc. You can even use our starter to cut even more corners in getting your first Design System release live!.

Learn about Backlight

Integration with

Storybook is the de-facto standard for writing high-quality, isolated components. This is why we've not only invested a lot of time on making sure that everything between kickstartDS and Storybook integrates as nicely as possible, but also already written two addons ourselves!

Controls

Interact with our rich component API through automatically configured Storybook controls.

Tokens

View and change component tokens directly in Storybook with our own Storybook addon.

Composition

We enable Storybook composition, meaning you'll always get our docs inside your Storybooks.

JSON Schema

Inspect the JSON Schema defining the component APIs, or change values with typed auto-complete.

Derivatives

... generate low-code integration points

Re-use your tokens to generate themes for other frameworks and libraries.

Bootstrap

Generate a Bootstrap theme automatically, based on our semantic Design Tokens by utilizing the Style Dictionary integration. Themes can be a great way to achieve a 80% solution immediately; and build from there.

Learn about Bootstrap themes

Material UI / MUI

As with the Bootstrap theme, it makes a lot of sense to leverage your existing Design Tokens and our Style Dictionary configuration to automatically generate a fitting Material UI / MUI theme, even as part of your connected CI/CD in a continuous way!

Learn about Material UI themes