Introduction

Welcome to the documentation for Concord, my personal design system. This project is the result of over 2 years of learning, experimenting, and meticulously tweaking details. While I designed it to use in my own projects, it’s open-source and MIT-licensed, so you can use it too.

I built this design system with the following principles in mind:

• Make applications visually appealing, accessible, and cohesive.
• Encourage simple, semantic HTML with modern elements like dialog and details.
• Embrace progressive enhancement and responsive design.
• Allow users to use whatever framework they prefer, or none at all.

Concord is written in pure CSS, plus a small script that provides some subtle UX enhancements for users with JavaScript enabled.

This site includes documentation for the design tokens, components, and utility classes included in the design system, as well as instructions on how to get started.