Build with Diète

Diète is an open-source design system. Guided by an essential design approach, built with the highest usability standards, it lays great emphasis on accessibility and flexibility. UI components can be copy-pasted directly into your own code, easily customised and assembled together to build a wide variety of applications.

Get started

  1. Copy the diete.css file to your projects that contain shared variable definitions. You may customize this file (colors, fonts etc.) however you wish.
  2. Find the component you need and copy the necessary files from the Implement section to your project.
  3. Optional step: add the carbon-icons-svelte package as a dependency that contains necessary icons.

Why Diète

“Good design is as little design as possible. Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.” — Dieter Rams
Essential design
Diète aims for simplicity and timeless design by avoiding superfluous effects or trendy styles. Not merely the superficial simplicity that comes from a minimalist appearance, but the simplicity that stems from deeply understanding the underlying challenges of designing a product interface. Diète advocates for no-nonsense, unobtrusive design and clean elegance that efficiently help everyone using your app.
Fully accessible
Diète complies to the highest usability standards and strives to be as inclusive as possible. Color contrast, fonts and default components sizes all feature Triple-A conformance to the latest Web Content Accessibility Guidelines (WCAG 2.2). Furthermore, all components come with carefully designed, high-emphasis focused states allowing people to easily interact without a mouse — using the keyboard or voice control.
Flexible
All components come in 4 sizes (default, compact, small and large) and variants for vertical or horizontal layouts. Margins and spacing are built in the components themselves, so they can be perfectly assembled together to build advanced layouts. Moreover, Diète comes with a dynamic colour system that generates light or dark themes from any colour. You can also change the default system fonts and icon set to your preferences.
Minimum dependencies
Diète is not a dependency you install. You download the source code and copy the components into your own project, where they become the starting point for your own component system. This way, you remain independent and gain complete control over the code. Diète comes with high-quality defaults that you can use as is, but you have the freedom to decide how to use and customise each component to your own needs. Your app, your code.