icon-arrow-downicon-arrow-lefticon-arrow-righticon-arrow-upicon-browsericon-chevron-downicon-chevron-lefticon-chevron-righticon-chevron-upicon-closeicon-contacticon-dateicon-downloadicon-emailicon-facebookicon-first-pageicon-homeicon-infoicon-instagramicon-last-pageicon-linkedinicon-loginicon-logouticon-mapicon-moveicon-personicon-phoneicon-placeicon-printicon-refreshicon-searchicon-shareicon-star-outlineicon-staricon-timeicon-twittericon-uploadicon-whatsappicon-xingicon-youtubeicon-zoom
decorative graphic displaying a lemon

The frontend first framework!

kickstartDS is a comprehensive component and pattern library

We enable web development teams to create consistent and brand compliant web frontends super efficiently. With a built-in Design System to serve all your digital touch points. Easy like squeeeeezing a lemon.

kickstartDS full flexibility in numbers

The foundation to scale your Design System across all your platforms and websites

33
Components

Use them as solid building blocks, adapt and improve them as needed. From tokens to full customization.

Benefit from 15+ years of frontend experience!

580
Properties

Component properties encode decisions, rooted in reality, pre-solving everyday problems for you.

Directly engage with components through Storybooks rich interface.

793
Tokens

Of course we have design tokens – colors, fonts, sizes and iconography.

Additionally, component tokens provide a solid base layer of defaults for you to mutate.

Leverage rich integrations with the modern web stack, refocus on what really matters!

Out-of-the-box kickstartDS lets you connect your interfaces to:

  • Gatsby
  • Next.js
  • React
  • Storybook
  • Contentful
  • netlifyCMS
  • Sanity headless CMS
  • Storyblok headless CMS
  • Wordpress
  • UXPin

Frontend first approach

... a holistic view of components; unifying content creators, developers, designers and stakeholders under one roof

Rely on any framework you want

Every kickstartDS component consists of semantic HTML(5), CSS Modules & Properties and JavaScript (ES6). This makes it easy to implement across any framework or even stand alone.

Alternatively, use our ready-to-use React components directly in your codebase!

Quality user experience

A quality UX is defined not only by relevant content and services, it is also a matter of a clear and consistent brand image, with intuitive and usable interaction patterns and features.

Use our experience to your advantage!

Best in class performance

Built for maximum performance. The kickstartDS components runtime, design token system and CSS framework are as lightweight as you need it to be.

Stop thinking about build tooling and bundling!

Accessible by default

kickstartDS provides support for W3C’s WCAG 2.1 spec. We take care that components support touch and keyboard navigation, screen readers and more.

And if needed, we can give you pointers for your content!

Easy peasy lemon squeezy

5 reasons why you should start with kickstartDS today!

kickstartDS is the foundation for your Design System, built with reusable components and tools, guided by clear standards, that can be assembled together to create your products: fast, flexible, responsive, accessible and the best of all:

👉 you can plug it onto every digital touch point you own.

kickstartDS helps developers and designers alike to independently deliver a consistent UX and engaging user interfaces.

With kickstartDS teams are able to design, build, and organize UI components better and faster. Using Storybook you make sure every element aligns with all the responsive scenarios your users may encounter!

Not every potential touchpoint can be run headless, and integration of HTML markup into backend templates still plays a very important role today. Be it your Rails-driven eCommerce site, a blog you run for your marketing department, or a fully custom backend-rendering based approach.

Changelogs with automatic markup change detection and documentation, copy-pasteable & configurable HTML-Snippets, and optimized bundles lighten your load!

kickstartDS is made to design all your frontends!

We offer consultancy to check if your frontend inventory matches with the components kickstartDS offers. This is already the case for more than 90% of our users.

Integrating kickstartDS, together with your design and dev teams, we'll assist and empower you to use your Design System on a day to day basis.

With a multitude of existing integrations, common tasks can be reduced to just adding the correct one to the mix!

Need a marketing- or landing-page? A blog?
Get the page-builder experience with Netlify CMS or Wordpress on our official Gatsby theme.

Building a Next.js page?
Use our auto-generated GraphQL API, including full documentation! Everything is SSR- and ESM-compatible, too! ... stellar performance included!

What our customers say

"kickstartDS is a game changer. Its Design System helped our team to improve our brand consistency, while it's pattern library boosted our developers building completely new frontend components.

Nicole Mentzen, Head of Marketing @maxcluster GmbH, 2021-03-29

"kickstartDS is a game changer. Its Design System helped our team to improve our brand consistency, while it's pattern library boosted our developers building completely new frontend components.

Nicole Mentzen, Head of Marketing @maxcluster GmbH, 2021-03-29

Still wondering, if kickstartDS could be a good fit for you?

We can help you get started, setting you up for success!

kickstartDS is made for productivity. And so are we!

Still unsure if kickstartDS suits you? We're offering a Design System sprint, where we, together with you and all important stakeholders, check your current frontend stack and design & development processes. Additionally we can help you to ...

  • set up an interface inventory
  • identify and set up pilot projects
  • create a roadmap for company-wide adoption

Learn to use kickstartDS with our custom training

Every development team and environment is unique. In order to increase your teams productivity and overall happiness, we can help you to get your devs familiar with our component library kickstartDS. We offer training for the following topics:

  • Frontend-frameworks & -technologies
  • Loading time performance
  • Frontend build pipelines and tool chains

Just ask us what kickstartDS can do for you, specifically ...

... as a developer?

Ask how developers and dev teams can benefit by using kickstartDS.

... as a designer?

Ask how designers and design teams can benefit with kickstartDS.

... as a product team?

Ask how product teams can scale their products interfaces more easily by using kickstartDS.

Origin story

20+ years of agency experience turned product

After 15 years building websites and UI's ourselves, we wanted to improve the way teams collaborate when creating web frontends. That's why we started kickstartDS.

We want to share our experience and offer a huge library of best practice patterns and well tested web components. All the while following the principles of the Atomic Design methodology.

That's why kickstartDS really is a ready to use framework, to support people and organizations building Design Systems and digital touchpoints.

It prevents developers from wasting time setting up the basics, while it enables designers to focus on tricky UI challenges.

Jonas Ulrich, Founder and CTO

More than 20 years ago I started creating user interfaces and web style guides, corporate design manuals and in the past years the first digital Design Systems.

After working in a large tech corporation for a long time I very well know todays problems in gaining and maintaining consistency in UIs. Whilst organizing the regional UX meetup I heard so many design and dev teams complaining about the same frontend problems.

That was the reason I co-founded kickstartDS. Knowing that we can create tremendous value for all these frontend creators and the companies they are working for.

I am convinced that both parties will benefit from using our solution within their tool chain. And I am more than happy to hear your story!

Daniel Ley, Co-Founder + UX Strategist with heart & soul

Get in contact!

We would love to hear from you! Every bit and piece of feedback is welcome as we want to learn from you, get to know you better, to evolve kickstartDS to meet your needs.