Design System 🐥

My personal design system: a amall, opinionated CSS framework to make sites look alright with minimal effort—think CSS reset with some extra styling based on semantic HTML!

⚠️ Work in progress. Things are most certainly incomplete and/or broken, and will definitely change.

• 🔥 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 with no runtime dependencies or build step required
• 🌈 Automatic color system that reduces time spent fiddling with color palettes
• 🪗 Fully responsive

Usage

The package is not currently on npm, but you can install it from this repository:

npm install github:andreasphil/design-system#<tag>

Then import it in your project:

// JavaScript
import "@andreasphil/design-system/style.css";

or

/* CSS */
@import "@andreasphil/design-system/style.css" layer(theme);

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

Development

The library is built with PostCSS. Packages are managed by npm. The following commands are available for developing and running the demo:

npm run dev       # Compile stylesheets
npm run docs      # Run playground/documentation
npm build         # Re-builds the stylesheet

Credits

Apart from the open source packages listed in package.json, this package uses:

• Icons from Lucide
• Favicons generated with IconKitchen
• Inspiration from Pico.css

Thanks 🙏