We are on a mission to democratize Design Systems. That's why we will go Open Source very soon.Get notified

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 theoretical value. This is why kickstartDS comes with ready-to-use integrations and adapters 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.

Jump directly to integrations for:

Backend

Adapters and plugins for headless systems: Sanity, WordPress, Contentful

Generators

Themes, Plugins & Generators for: Next.js, Gatsby, 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 setup 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.

Sanity for structured content

Sanitys approach to structured data gels really well with our way of creating components. The existing component JSON Schemas can be re-used with our tooling to create Sanity configurations in a generic way - always in sync with your Design System, without additional, manual overhead!

View Sanity example

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) with our Gatsby theme, you can leverate the editorial experience without losing out on a modern, performant and secure web stack!

View blog example

Marketing sites with Contentful

When building bigger pages, especially those with more of a page-builder like marketing experience, Contentful is a great solution to empower your digital team. It's also one of the contenders offering deep solutions for customers with enterprise needs.

View example

Generators and Jamstack

... multiplying existing value

What a generator can do for you:

Your Design System already has a really good knowledge about what a component is, how it is structured and how it behaves. We use that knowledge to provide a Gatsby theme, that already includes everything a website needs (for SEO, performance, etc). We even already have transformers for that theme for WordPress, Netlify CMS, Contentful, MDX. 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.

Plugin and starter for Next.js

Use our starter 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

Complete Gatsby theme

Our theme automates everything related to rendering your frontend (SEO, performance, etc), while also providing a common interface to implement your own transformers and resolvers. Or you just re-use one of those we've already written for: WordPress, Netlify CMS, Contentful, MDX

Learn about Gatsby

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, and, for example, powers the core of our Gatsby theme.

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

Don’t want to miss our release?

Sign up for a reminder as soon as we launch. You will only opt-in for two emails, a confirmation mail plus the release notification itself. Promised 🤞