---
title: "Design systems"
description: "Introduction to design systems, style guides, and component libraries."
canonical_url: "https://www.codex.republic.se/design-systems"
section: "Pages"
---

# ⚜️ Design systems

Introduction to design systems, style guides, and component libraries.

A ***design system*** is a broader term usually consisting of a few sub-systems. Most people have their own definitions, but there is a common distinction between a *style guide* and a *component library*.

When creating a *style guide*, you usually take a broader approach, including branding, typography, colors, and components.

In contrast, a *component library* is often focused on the components themselves.

---

## What is a component library?

A component library gives developers and designers common ground to look at when discussing form and function.

It is a collection of code that documents UI patterns for a web-based project. It starts with the smallest possible components and builds up to larger page modules.

Examples of naming when talking about component libraries:

- atom, molecule, organism, page
- element, component, module, page
- element, module, blocks, page

---

## Design System generators

### Fractal

We have used *Fractal* on a few projects lately and are very happy with it. There is a Twig version so we can use it for production-ready components.

- **[Fractal](/design-systems/fractal)** - Twig support and an Open Source license

### KSS (Twig)

For smaller projects, a generator like [kss-node](https://github.com/kss-node/kss-node) is a good choice. The concept is to use comments in the CSS to generate a style guide.

It can support Twig and is, therefore, a good match to use with Craft CMS, but the implementation is more or less system agnostic. We have used it with Statamic, and in other scenarios, too.

### Other well-known alternatives that we haven’t tried (yet):

- [Storybook](https://storybook.js.org/) - frontend workshop for UI development
- [Pattern Lab](https://patternlab.io/) - create atomic design systems

### Or, a simpler alternative:

- [Eleventy Design System](https://eleventy-design-system.netlify.app/)

---

- [ Fractal ](/design-systems/fractal)

---

## Resources

### Videos

 ![](https://www.google.com/s2/favicons?domain=https://www.youtube.com/watch?v=FCMEG17wOxE&sz=128) [You have a Design System. Now What? with Ben Callahan](https://www.youtube.com/watch?v=FCMEG17wOxE) // 2025-06-17

### Articles and Sites

 ![](https://www.google.com/s2/favicons?domain=https://www.trysmudford.com/blog/i-think-im-a-design-engineer/&sz=128) [On Design Engineering: I think I might be a design engineer... | Trys Mudford](https://www.trysmudford.com/blog/i-think-im-a-design-engineer/) // 2025-06-17

 ![](https://www.google.com/s2/favicons?domain=https://atomicdesign.bradfrost.com/&sz=128) [Atomic Design by Brad Frost](https://atomicdesign.bradfrost.com/) // 2025-06-17

 ![](https://www.google.com/s2/favicons?domain=https://a11y-style-guide.com/style-guide/&sz=128) [A11Y Style Guide](https://a11y-style-guide.com/style-guide/) // 2025-06-17

 ![](https://www.google.com/s2/favicons?domain=http://styleguides.io/&sz=128) [Website Style Guide Resources](http://styleguides.io/) // 2025-06-17

 ![](https://www.google.com/s2/favicons?domain=https://component.gallery&sz=128) [The Component Gallery](https://component.gallery) // 2025-06-17

### Examples

 ![](https://www.google.com/s2/favicons?domain=https://nordhealth.design/&sz=128) [Nord Design System](https://nordhealth.design/) // 2025-06-17

 ![](https://www.google.com/s2/favicons?domain=https://design.duolingo.com/&sz=128) [Duolingo Brand Guidelines](https://design.duolingo.com/) // 2025-06-17

 ![](https://www.google.com/s2/favicons?domain=https://designsystem.porsche.com/v3/&sz=128) [Porsche Design System](https://designsystem.porsche.com/v3/) // 2025-06-17

 ![](https://www.google.com/s2/favicons?domain=https://atlassian.design/&sz=128) [Atlassian Design System](https://atlassian.design/) // 2025-06-17

 ![](https://www.google.com/s2/favicons?domain=https://developer.apple.com/design/&sz=128) [Human Interface Guidelines / Apple](https://developer.apple.com/design/) // 2025-06-17

 ![](https://www.google.com/s2/favicons?domain=https://carbondesignsystem.com/&sz=128) [Carbon Design System / IBM](https://carbondesignsystem.com/) // 2025-06-17

 ![](https://www.google.com/s2/favicons?domain=https://m3.material.io/&sz=128) [Material Design 3 / Google](https://m3.material.io/) // 2025-06-17

 ![](https://www.google.com/s2/favicons?domain=https://fluent2.microsoft.design/&sz=128) [Fluent 2 Design System / Microsoft](https://fluent2.microsoft.design/) // 2025-06-17

 ![](https://www.google.com/s2/favicons?domain=https://build.washingtonpost.com/&sz=128) [Washington Post Design System](https://build.washingtonpost.com/) // 2025-06-17