spark-joy

Easy ways to add design flair, user delight, and whimsy to your product!

The Spark Joy philosophy is explained in further detail in my book, check it out if you'd like to explore how this approach applies to a lot more than design utilities.

Table of Contents

Web Design in 4 minutes
CSS/UI Templates
Layout
Typography
Colors
Backgrounds
Icons and Favicons
Diagramming
Graphics and SVG Illustrations
Individual HTML Elements
Pure CSS Tricks
- SVG/Canvas Masking
Animations & Transitions
- Loading Spinners
- React Animation Tools
Ideas for Improving UX
- Onboarding
- Empty states
Design Software
Non-DOM Browser Technologies
- Canvas
- WebGL
- 3D
Interaction/Design Inspo
- Game design inspo
Random Stuff That Doesn't Fit Anywhere

Web Design in 4 minutes

Keep it simple: https://jgthms.com/web-design-in-4-minutes/

CSS/UI Templates

HTML/CSS nice templates

🆕 https://shuffle.dev/ tailwind/bootstrap/materialui randomly generated templates
https://www.free-css.com/
https://www.creative-tim.com/
https://wickedtemplates.com using Tailwind v2 (and wickedblocks) and https://wickedbackgrounds.com/
https://www.tailwind-kit.com/ free tailwind component kit
https://daisyui.com/ tailwind theme
https://themeselection.com/
https://html5up.net/
https://frontendor.com/ using bootstrap
https://preview.tabler.io/# using bootstrap
https://cruip.com/ HTML, React, Vue.js, and Tailwind templates
https://open-props.style/ design tokens using CSS variables

Serious CSS Frameworks

Professional Design Systems

https://designsystemsrepo.com/
Government
- G10
  - The UK: https://design-system.service.gov.uk/
    - New Zealand is heavily based https://design-system-alpha.digital.govt.nz/
  - The US: https://designsystem.digital.gov/
  - Canada: https://www.canada.ca/en/government/about/design-system.html
  - Russia: http://gov.design/
  - Australia: https://designsystemau.org/
  - France: https://www.systeme-de-design.gouv.fr/
  - Germany: https://produkt.gsb.bund.de/DE/Home/home_node.html and https://styleguide.bundesregierung.de/sg-de/
- Other
  - Argentina: https://argob.github.io/poncho/
  - Greece: https://guide.services.gov.gr/
  - Netherlands: https://www.rijkshuisstijl.nl/
  - Italy: https://designers.italia.it/
  - Singapore: https://www.designsystem.tech.gov.sg/
- Europe
  - Estonia: https://brand.estonia.ee/
  - Czech Republic: https://designsystem.gov.cz/
  - Ukraine: https://diia.fedoriv.com/

Heavier CSS Frameworks

bigger learning curve, may have js, but more OOTB)

Bootstrap
Foundation
Blaze UI
PatternFly
UIKit
Numl - A UI Design Language, UI Library of Web Components, and Runtime CSS Framework for rapidly building interfaces that follow your Design System
Utility CSS
- Bonsai CSS
- Tailwindcss
Web Components
- Weightless
- Shoelace

Drop-in CSS Frameworks

lighter, no js. preview some of these with https://sites.yax.com/, https://www.cssbed.com/, https://dohliam.github.io/dropin-minimal-css/ and https://github.com/dbohdan/classless-css

No CSS Classes - Pure HTML
- 🌟 https://andybrewer.github.io/mvp/ mvp.css
- https://yegor256.github.io/tacit/
- https://github.com/alvaromontoro/almond.css has thin fonts
- https://picocss.com/ Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.
- https://simplecss.org/demo 4kb incl dark mode
- https://watercss.kognise.dev/ Small size (< 2kb)
- https://github.com/xz/new.css (https://newcss.net/) 4.8kb
- https://github.com/oxalorg/sakura supports extremely easy theming using variables for duotone color scheming.
- https://github.com/susam/spcss
- https://neat.joeldare.com/ https://github.com/codazoda/neatcss
- https://concrete.style/ Tiny (< 1kb)
- https://github.com/zichy/fieber (new, wants feedback)
- https://mikemai.net/typesettings/index.html (new)
- https://css.winterveil.net/ magick.css is a minimalistic, (mostly) classless CSS framework that is designed to be easy to use and easy to understand. It is contained in a single file, and every choice is commented. The goal is to achieve an elegant, but magically playful look, while maximizing readability and the ability to convey information; somewhat akin to the notes of a wizard.
- https://github.com/neocities/element (inactive now)
Spectre.css lightweight (10kb), responsive and modern CSS framework for faster and extensible development.
https://purecss.io/ A set of small (3.7kb), responsive CSS modules that you can use in every web project.
https://gdcss.netlify.app/ (inspired by UK design system)
https://ajusa.github.io/lit/ lit has two modules: lit and util. lit contains all of the basics for a framework, such as a responsive grid, typography, and other elements. util has many CSS utility classes that can be used to extend lit, or any CSS framework.
https://luxacss.com/
https://jenil.github.io/chota/ good looking, lots of classes and utilities yet small
https://chr15m.github.io/DoodleCSS/ hand drawn look
https://codepen.io/web-dot-dev/pen/abpoXGZ the base classes for web.dev/learn/csss
https://open-props.style/ css variables framework - "tailwind without tailwind"id=30497165).
https://latex.vercel.app/ style your website like a LATEX document - (original version https://github.com/davidrzs/latexcss)
https://picnicss.com/ - lightweight bootstrap alternative (2014 HN)
https://github.com/gduverger/screen (inactive now)
Collections of even more:

Superlight: 100 bytes of css to look great nearly everywhere

html {
  max-width: 60ch;
  padding: 1.5rem;
  margin: auto;
  line-height: 1.5rem;
  font-size: 24px;
}

Fun CSS Frameworks

focus is fun

https://www.getpapercss.com/ (handrwritingey css similar to roughjs)
https://terminalcss.xyz/

focus is brutalism

https://secretgeek.github.io/html_wysiwyg/html.html This page is a truly naked, brutalist html quine.
https://mrcoles.com/demo/markdown-css/ CSS to make HTML markup look like plain-text markdown.

focus is fun/nostalgia

NES.css: NES.css is a NES-style(8bit-like) CSS Framework.
PSone.css: PS1 style CSS Framework, inspired by NES.css.
LaTeX.css
Operating System CSS
- React95
- 98.css: A Windows 98 inspired framework for building faithful recreations of old UIs.
  - Office 97 clipart in svg format
- XP.css: A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css.
- 7.css
- System.css Retro Apple-inspired UI
- Puppertino meant to mimic the look of macOS. demo
- Commodore 64 CSS
- DOS: BOOTSTRA.386: A vintage 1980s DOS inspired Twitter Bootstrap theme
- a2k: A Windows 2000 inspired web component library
Text UI CSS: bios like UI's
New Dawn: A mac classic After Dark inspired stylesheet.
Geocities Bootstrap theme
Metalmorphism: High-quality metallic UI kit
more https://dev.to/iainfreestone/10-resources-for-recreating-old-school-retro-user-interfaces-today-hkj

focus in futurism

Arwes - Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps https://arwes.dev/
http://augmented-ui.com/ - Futuristic, Sci-Fi shaping for any element