Chocolatey Design System

Prioritizes the user experience and simplifies the design process, resulting in intuitive and seamless products that exceed customer expectations.

Contribute Get Started

Brand

Chocolatey Software's mission and values.

Explore All Brand

Values

At Chocolatey Software, we strive to uphold and balance the following core values in everything that we do and stand for.

Mission

Chocolatey Software enriches lives by empowering technologists with powerful and flexible yet simple solutions that automate the complexities of software deployment, configuration, and management.

Foundations

The core concepts of choco-theme that are used to create complex, yet simple and engaging user experiences.

Explore All Foundations

Linting

A set of tools used to enforce code style in choco-theme.

Layout

Learn how to organize a layout using containers, columns, and flex.

Colors

A set of colors used to represent the Chocolatey brand in web and print.

Utilities

Classes that are used to achieve repeatable styles and layouts.

Explore All Utilities

Theme Modes

Classes to show specific information on dark or light mode only.

Backgrounds

Set background colors with contacting foregrounds.

Aspect Ratios

Maintain aspect ratios of elements or embeds.

Components

A group of reusable code blocks that can be used to build complex yet flexible layouts.

Explore All Components

Cards

Cards are used to display information elevated from the main background.

Callouts

Callout are used to convey information to a user that needs to stand out from the rest of the information on the page. There are four callout types.

Buttons

Buttons are used throughout choco-theme with multiple sizes, states, and variants.

Content and Marketing

Usage on proper voice in marketing materials, from content in docs to graphics used to promote events.

Explore All Content and Marketing

Writing Documentation

Specific rules to remember when writing documentation.

Language and Grammar

A set of language and grammar rules for consistent messaging.

Resources

A home for all the resources used in choco-theme, including docs, fonts, and icons.

Explore All Resources

Media Kit

Downloadable Chocolatey assets including logos.

Fonts and Icons

Fonts and icons used for web and print.

Docs

Documentation from libraries choco-theme uses.