Design System 🐥

A small, opinionated CSS framework to make sites look good with minimal effort

• 🔥 Embraces semantic HTML to make native elements look great out of the box, without classes
• 😎 Small set of utilities for additional states and convenience
• 🐛 Tiny footprint (~6 kB min+gzip) with no runtime dependencies and no build step required
• 🌈 Automatic color system that reduces time spent fiddling with color palettes
• 🪗 Fully responsive

Installation

From a CDN:

@import url("https://esm.sh/gh/andreasphil/design-system@<tag>/dist/design-system.css") layer(theme);

/* Optional: import utilities */
@import url("https://esm.sh/gh/andreasphil/design-system@<tag>/dist/design-system-utils.css");

With a package manager:

pnpm add github:andreasphil/design-system#<tag>

Usage

Find the demo at https://andreasphil.github.io/design-system/.

First, import the CSS. I recommend using layers to avoid conflicts and specificity chaos when customizing.

@layer base, utils;

@import "@andreasphil/design-system/style.css" layer(base);
@import "@andreasphil/design-system/utils.css" layer(utils);

@layer base {
  /* You can add customizations and override variables here. */
}

The CSS loosely follows CUBE CSS:

• Global, high-level styles: Most of the styling is global styling of plain HTML elements. src/base/variables.css contains design tokens for colors, fonts, shared spacing, and more. You can use them to customize the Design System or apply them to your own components.

• Blocks: The framework includes opinionated styling for almost all common HTML elements.

• Exceptions: Some blocks, such as buttons, come with variants (also called exceptions). According to CUBE CSS, you apply variants with attributes.

• Composition & utilities: Apart from a few utilities, these are outside the scope of the framework.

Development

Design System is built with Lightning CSS and uses pnpm for package management. The following commands are available:

node --run dev    # Compile stylesheets in watch mode
node --run build  # Bundle for production

For a demo, open index.html in a browser.

Credits

This framework uses several open-source packages listed in package.json. Icons are from Lucide. The framework was inspired by Pico.css.

Thanks 🙏