Design System

kickstartDS low-code CMS starters: Connecting a Design System to a CMS just got easierLearn more A low-code framework, UI development toolkit and comprehensive component library enabling digital teams to create consistent and brand compliant web frontends super efficiently. Easy like squeeeeezing a lemonGet started todayBrowse componentsStart smallBy following our 5-Steps guide explaining how to kickstart your own Design System.No vendor lock-in!You create your own repo having the code installed, so you’re not locked-in.You own it!It is your Design System. You own whatever you build. It’s yours to do what you want.CMS Starters A Design System is nothing without a System applying it All CMS starters come fully ready to use, with direct and instant deployment options. They also include a small getting started page, to surface possible next steps to take.Go to CMS StartersDesign System Concierge Meet your AI-powered Design System assistant! Our Design System Concierge can help by providing expert guidance and pointing you towards the right resources, whether it's implementation guides, architecture documents, adoption strategies, or other content.Try it, it's free!26ComponentsUse them as solid building blocks, adapt and improve them as needed. From design tokens to full customization. Read why our components are great.250PropertiesComponent properties encode decisions, rooted in reality, pre-solving everyday problems for you. Directly engage with components through Storybooks rich interface.500TokenOf course we have design token – colors, fonts, sizes and iconography. Additionally, component token provide a solid base layer of defaults for you to mutate.Rely on any framework you wantEvery 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 experienceA 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 performanceBuilt 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 defaultkickstartDS 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!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.See some exampleskickstartDS 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!Browse our StorybookTogether we identify if you need a Design System We offer services to check if your frontend inventory matches with the components kickstartDS offers. This is already the case for more than 90% of our users. We'll assist and empower you to use your Design System on a day to day basis.Our ServicesRead about the DS initiativeWith 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 Storyblok, Netlify Create, Sanity Studio or Wordpress through our CMS starters. Building a Next.js page? Use our auto-generated GraphQL API, including full documentation! Everything is SSR- and ESM-compatible, too! ... stellar performance included!Our integrations in detailOur Content Module boasts seven rich components that provide all the necessary building blocks for creating beautiful content experiences or enhancing your existing Design System with complex elements.Get accessSee all moduleskickstartDS 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 kickstartDS has saved us so much time scaling different white label frontends with the most performant framework I have ever seen.Leh, CEO @Taktsoft GmbHI have rarely seen such a passionated and dedicated team with one shared mission: enhance the developer experience and make frontend first again.Byron S., Senior Frontend Developer... as a developer?Ask how developers and dev teams can benefit by using kickstartDS.Start chat... as a designer?Ask how designers and design teams can benefit with kickstartDS.Ask us... as a product team?Ask how product teams can scale their products interfaces more easily by using kickstartDS.Enter conversationDiscord communityFollow on TwitterOur stackshare --- kickstartDS low-code CMS starters: Connecting a Design System to a CMS just got easierLearn more Design Systems - also known as "pattern libraries" or "component libraries" -  promote quality, consistent UX design across products; and expedite the work of designers, developers, and anyone else working on a digital service. NN/g: Nielsen Norman GroupDesign systems are expensive, hard to maintain, heavy to get started. We want companies to save time and budget by minimizing duplicate work and increasing speed-to-market. We want to improve your customer's experience, maintaining brand consistency, providing an accessible and seamless UX across all customer touch points. We help development teams to make it easier to collaborate. Don't you want to own a design system without spending years of development? Well, it is here. Let's kickstartDS it together!Discover our team's expertise and experiences in designing effective, scalable design systems through our appearances in podcasts, webinars, streams, and more.All our appearancesAfter 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 CTOOver two decades ago, I embarked on a journey of creating user interfaces, web style guides, and corporate design manuals. In recent years, I ventured into the realm of digital design systems, recognizing the need to address the growing challenges in maintaining UI consistency in today's tech industry. Through my extensive experience working in a large tech corporation and organizing regional UX meetups, I have heard countless design and development teams lamenting the same frontend problems. It was this realization that led me to co-found kickstartDS, with the goal of providing immense value to frontend creators and the companies they serve. I strongly believe that both parties stand to benefit greatly from incorporating our solution into their tool chain. I look forward to hearing your story and exploring how we can help you achieve your frontend goals. Daniel Ley, Co-Founder + UX Strategist with heart & soulkickstartDS is the design system starter kit in which we have already solved all core challenges. No need to setup all the basics before start working on the real stuff. Remove all the assumptions on building your design system, and reduce the risk and effort required to to get started. Let's talk about how kickstartDS can help you.Get in touchPodrocket: The starter kit for design systemsOctober 20th, 2022Listen nowAmplifyn: Design Systems - The New Normal in UI Design and Frontend DevelopmentNovember 2nd, 2022Watch WebinarCoding Design Systems: Specify Tokens in a Design SystemJune 21st, 2022Watch StreamDiscord communityFollow on TwitterOur stackshare --- kickstartDS low-code CMS starters: Connecting a Design System to a CMS just got easierLearn moreExplore all of the different modules and their components built on top of each other, to give you a seamless and smooth developer experienceBrowse componentsSpecial Content ModuleOpen Source Design System StarterDesign System Modules Forever free, no vendor lock-in, promised! What’s included? All Open Source Modules with 26 highly adaptable components Great documentation and starter guides Start in just 5 minutes Discuss questions in Discord Start with our guidesSingle Instance licenceContent Module Perfect addition to our Open Source base What’s included? 7 additional components for content unlimited usage time 24 Month of support and maintenance update guarantee maintenance + further developments Community support on Discord See details and pricingEnterprise needsCustom Module? If you have individual preferences What’s included? Custom development Design System Consultancy Technology training Exclusive support Expert advice Design System servicesCore Module Open Source The foundational layer of a kickstartDS instance is primarily the Core Module, which serves as the basis for every layout through its Container Component. Unlike other modules, it doesn't offer any grab-and-go components, but it does feature container queries as its unique attribute.Base Module Open Source Our kickstartDS Base Module provides a comprehensive component library that empowers digital teams to create efficient and brand-compliant web frontends with ease. It offers a solid set of default components that serve as the building blocks to craft a custom Design System from the ground up, using a code-first approach.Forms Module Open Source The Form Module contains all the form elements you need to be styled to create your form recipes on top of it.Blog Module Open Source A Design System is nothing without a system applying it. That's why we created a simple set of Blog components to empower you creating value to bring kickstartDS into action. The Blog Module contains five rich components.The perfect addition to our Open Source base The Content Module includes seven rich components.All the Design System components you need when building beautiful content experiences or to enrich your existing Design System.Get accessSave time and moneyLeave your internal dev resources dedicated to real, business critical problems, instead of letting them reinvent UI again and again, that should adhere to UX patterns learned by your end users anyway.Support Open SourceJoin the movement towards democratizing design systems by incorporating open-source software into your workflow and supporting the continued development of kickstartDS.Skip years of development With kickstartDS, skip the initial setup and get right to the real work. Our design system starter kit solves core challenges and minimizes risk and effort.Solid foundationWe have already solved all core challenges. No need to setup all the basics before start working on the real stuff.Discord CommunityFollow on TwitterOur stackshare --- kickstartDS low-code CMS starters: Connecting a Design System to a CMS just got easierLearn more 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 ...Storyblok CMS StarterStart your next website project with kickstartDS on board and create your next digital experience faster, more consistent, and sustainably than ever.Storyblok starterNetlify Create CMS StarterThe CMS starter for Netlify Create is an integration designed to facilitate the seamless use of kickstartDS within the Netlify environment.Netlify Create starterBackendAdapters and plugins for headless systems: Static CMS, Storyblok, Netlify Create / StackbitGo toGeneratorsThemes, Plugins & Generators for: 11ty, Next.js, GraphQLGo toDesign ToolingTemplates & Connectors for: Style Dictionary, Figma, BacklightGo toDerivativesTheme converters for: Bootstrap, Material UIGo toWhy 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!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!View StarterStatic CMSStoryblok 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.View StarterStoryblokWhen 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.View StarterNetlify CreateWordPress 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 exampleWhat 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.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.js11ty 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 11tyBased 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 GraphQLHow 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 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 DictionaryFigma 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/CDView our Design Token templateBacklight 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 BacklightStorybook 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!ControlsInteract with our rich component API through automatically configured Storybook controls.TokensView and change component tokens directly in Storybook with our own Storybook addon.CompositionWe enable Storybook composition, meaning you'll always get our docs inside your Storybooks.JSON SchemaInspect the JSON Schema defining the component APIs, or change values with typed auto-complete.Re-use your tokens to generate themes for other frameworks and libraries.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 themesAs 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