kickstartDS is an open-source starter kit for creating design systems. It offers components, tokens, and integration options to help you build and scale design systems efficiently.
Features
Open Source Design System
Provides an open-source starter kit for creating design systems, allowing customization and development flexibility.
CMS Starters
Utilizes Content Management Systems like WordPress, Drupal and others, to kickstart the creation of design systems.
Design System Concierge
Offers personalized support services to help with design system customization and implementation.
Rich Integrations
Offers integrations with modern web technologies such as React, Storybook, and Gatsby, to enhance functionality and utility.
Design Tokens
Encode your main brand identity, including colors, fonts, and typography. Allows you to explore all defined values, which can be copied and used in your project.
Controls
Provides explorative access to JSON Schema-defined structural options, giving designers, developers, and content editors control.
Foundations
Learn about design tokens, component basics, and other foundational concepts for a strong understanding of design systems.
Integration
Explore using kickstartDS components with various tools like prototyping, implementation, and integration frameworks.
Guides
Access guides for creating a design system, solving focused problems, and understanding solutions with kickstartDS.
Concepts (Coming Soon)
Read about architectural concepts of kickstartDS, including tokens and usage.
Feedback
Access FAQs and contact support via Discord, Twitter, or email for personalized assistance.
Roadmap
View the development roadmap, upcoming releases, and documentation of contributions to the project.
Core Module
The foundational layer of a kickstartDS instance, serving as the basis for every layout. It doesn't offer any standard components but does feature container quere as its unique attribute.
Base Module
An open-source Base Module providing a comprehensive component library, empowering digital teams to create efficient and brand-compliant web frontends. It's useful for building custom Design Systems from the ground up using a code-first approach.
Forms Module
Contains all the form elements needed to create styled form recipes.
Blog Module
Includes a simple set of Blog components to create user-engaging use cases, providing the necessary components for rich content creation.
Content Module
Includes seven rich components, adding essential Design System elements for building beautiful customer experiences and enhancing existing Design Systems.
Storyblok Integration
Enables seamless handling of CMS content within your projects, supporting content management directly through Storyblok’s user-friendly interface.
Tool Integrations
Connects with a variety of popular tools to enhance project workflows, allowing efficient processes and team collaboration.
CMS Integration
Immediate integration capabilities with popular CMS backends like WordPress, streamlining content management tasks.
Generative Jamstack Support
Facilitates integration with Jamstack generators for building fast and secure websites through modern development practices.
Design Tool Connectors
Integrates with design tooling platforms to synchronize design assets, ensuring consistent design implementation across projects.
Effortless Website and CMS Setup for Lughausen
Lughausen, a tax advisory firm, upgraded its digital presence using kickstartDS and Storyblok CMS Starter, providing streamlined content management and cost-effective online presence.
encore.de 2.0 Integration into Sanity Studio
Development of a Sanity.io driven website with a headless stack and kickstartDS for front-end integration using complex and custom components.
Encore Experience Engine Collaboration
Collaboration with Tain5oft to develop an application on Encore Cloud’s backend, enhancing seamless editor experience.
Sanity Driven Website for encore v1
Sanity.io driven website with a headless stack and kickstartDS for integrating complex and custom front-end components.
Design System for German University
Design System initiative creating a scalable system on kickstartDS for a large German University using the Content Module.
maxcluster UI and Component Consistency
Framework for Design System creation providing consistent UI inventory and component library.
Design System Optimization
Provides expertise and experience to establish design systems from scratch and enhance existing ones. Aids in minimizing duplicate work and increasing speed to market.
Community Engagement
Engagement through media and insights to improve design systems expertise and experience. Provides connections through podcasts, webinars, and streams.
Design System Initiative
A service for SMEs and large organizations to know the scale of their design system and learn how to implement it correctly. It involves workshops to analyze the inventory, web ecosystem, toolchain, and build processes. Key actions include setting up a user interface inventory, creating an implementation strategy, identifying a pilot project, and mapping UI components along kickstartDS.
Knowledge Transmission
Targeted at frontend developers and UI teams, this service aims to increase team productivity, developer experience, and overall happiness. It uses trainings and pair programming to help developers become familiar with kickstartDS. Topics include frontend frameworks, technologies, loading time performance, frontend build pipelines, tool chains, and accessibility.
Concierge Service
An AI-powered concierge service to answer questions related to Design Systems. Users can ask questions and receive contextual and sourced responses. The service aims to provide accurate and relevant answers by utilizing a knowledge database.
Knowledge Database
A collection of sources used to provide answers to questions asked through the concierge service. It aims to be a community resource to drive people to credible sources for their queries.
Brand Integration
kickstartDS offers components that can integrate multiple brands, logos, and colors while ensuring a uniform look and feel across projects.
Scalable Design System
The system allows for scalable and flexible design components that can be tailored to different project needs while maintaining consistency.
Theming and Styling
Allows for changes in visual presentation through theming, adapting the style without altering core functionalities.
Design System Initiative Workshop Series
A series of workshops designed to help customers decide whether to build a design system by discussing needs, challenges, and suitable strategies.
Stakeholder Engagement
Involves identifying and engaging with stakeholders to align their goals with the design system objectives.
Hands-on Activities
Provides practical experiences for participants to understand processes and practice skills necessary for building a design system.
Technology Consultation
Includes discussions about technologies to be used in the design system and how they align with the company's capabilities.
Design Token
Automatically integrates the Design Token format, ensuring consistent design.
Storybook Integration
All components are configured to be accessible in your Storybook for better showcase and usability testing.
Developer Friendly
Consumers are able to create content-rich web experiences with reusable components.
Framework Agnostic
kickstartDS supports modern frontend frameworks, supporting React and its ecosystem, and providing easy integration with other frameworks.
Quality UX
Built with accessibility and readiness for different platforms in mind, providing tools for creating a consistent experience across devices.
Performance
Optimized for performance with solutions like CSS variables and performant design principles.
Accessibility
Committed to accessibility using the WCAG 2.1 AA standard, providing tools and guidelines for accessible design.
kickstartDS CLI
A Command Line Interface to assist developers with scaffolding projects, maintaining consistency, and speeding up development processes.
Figma Integration
Supports importing designs from Figma into the Design System Theme to streamline the design workflow.
Token
Tokens are design decisions encoded in your Design System. kickstartDS differentiates between Branding, Design, and Component Tokens, helping you build custom specifics based on all three.
Components
Components are the main building blocks for any user interface. kickstartDS provides a variety of components, and includes a Component API to extend and work efficiently with them.
Layout
kickstartDS uses specific layout solutions to present and structure your content, utilizing sections and Bedrock to manage different design setups.
Modules
kickstartDS is structured with different component modules, each built on top of the other. These modules help organize complex web components for easier use and customization.