https://github.com/swyxio/spark-joy
✨😂 2000+ ways to add design flair, user delight, and whimsy to your product.
https://github.com/swyxio/spark-joy
List: spark-joy
awesome-list css design
Last synced: about 1 year ago
JSON representation
✨😂 2000+ ways to add design flair, user delight, and whimsy to your product.
- Host: GitHub
- URL: https://github.com/swyxio/spark-joy
- Owner: swyxio
- License: mit
- Created: 2019-05-02T04:21:03.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-03-19T00:51:00.000Z (over 1 year ago)
- Last Synced: 2025-05-11T05:49:44.931Z (about 1 year ago)
- Topics: awesome-list, css, design
- Homepage: https://www.learninpublic.org/
- Size: 1.69 MB
- Stars: 9,510
- Watchers: 99
- Forks: 338
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- StarryDivineSky - swyxio/spark-joy
- ultimate-awesome - spark-joy - ✨😂 2000+ ways to add design flair, user delight, and whimsy to your product. (Other Lists / TeX Lists)
- awesome-github-repos - swyxio/spark-joy - ✨😂 2000+ ways to add design flair, user delight, and whimsy to your product. (Others)
- stars - spark-joy
- awesome-github-projects - spark-joy - ✨😂 2000+ ways to add design flair, user delight, and whimsy to your product. ⭐9,766 🔥 (📚 Learning & Resources)
README
> **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](https://learninpublic.org/), 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](#web-design-in-4-minutes)
- [CSS/UI Templates](#cssui-templates)
- [Serious CSS Frameworks](#serious-css-frameworks)
- [Drop-in CSS Frameworks](#drop-in-css-frameworks)
- [Fun CSS Frameworks](#fun-css-frameworks)
- [No Framework](#no-framework)
- [CSS Resets](#css-resets)
- [CSS A11y Checkers](#css-a11y-checkers)
- [Tailwind Component Libraries](#tailwind-component-libraries)
- [React Component Libraries](#react-component-libraries)
- [Layout](#layout)
- [Stacking and Elevation](#stacking-and-elevation)
- [2D Spacing](#2d-spacing)
- [Responsive Layout Breakpoints](#responsive-layout-breakpoints)
- [Layout Bleed](#layout-bleed)
- [Other Layout Tools and tips](#other-layout-tools-and-tips)
- [Typography](#typography)
- [Fonts](#fonts)
- [Line Height](#line-height)
- [Line Width](#line-width)
- [Kerning and char spacing](#kerning-and-char-spacing)
- [Font Sizing](#font-sizing)
- [Typography Talks](#typography-talks)
- [Other Typography Resources](#other-typography-resources)
- [Colors](#colors)
- [Palette Generators](#palette-generators)
- [Color Gradients](#color-gradients)
- [Color Theory](#color-theory)
- [Color Theory for Data Visualization](#color-theory-for-data-visualization)
- [Backgrounds](#backgrounds)
- [Background Gradients and Patterns](#background-gradients-and-patterns)
- [Background Illustrations](#background-illustrations)
- [Background SVG texture](#background-svg-texture)
- [Misc Backgroundy Stuff](#misc-backgroundy-stuff)
- [Icons and Favicons](#icons-and-favicons)
- [Favicons](#favicons)
- [`` tags and opengraph](#link-rel-tags-and-opengraph)
- [Icons](#icons)
- [Diagramming](#diagramming)
- [General Purpose Diagramming](#general-purpose-diagramming)
- [Software Arch Diagrams](#software-arch-diagrams)
- [Sequence Diagrams](#sequence-diagrams)
- [Entity Relationship Diagrams](#entity-relationship-diagrams)
- [Cloud Architecture diagrams](#cloud-architecture-diagrams)
- [Code-based Graph tools](#code-based-graph-tools)
- [Graphics and SVG Illustrations](#graphics-and-svg-illustrations)
- [Wireframing](#wireframing)
- [Device Mocks](#device-mocks)
- [Illustrations](#illustrations)
- [3D illustrations](#3d-illustrations)
- [Handwritten Look](#handwritten-look)
- [Pixel Art](#pixel-art)
- [ASCII Art](#ascii-art)
- [matrix8967's list](#matrix8967s-list)
- [DIY Graphic Design](#diy-graphic-design)
- [Stock Photos and Videos](#stock-photos-and-videos)
- [Stock Videos](#stock-videos)
- [Video creation tools](#video-creation-tools)
- [Avatars](#avatars)
- [Individual HTML Elements](#individual-html-elements)
- [Anything But Dropdowns](#anything-but-dropdowns)
- [Buttons](#buttons)
- [Forms](#forms)
- [Tables](#tables)
- [Datepickers](#datepickers)
- [Sound](#sound)
- [Lightweight Charts/Dataviz](#lightweight-chartsdataviz)
- [Dashboarding](#dashboarding)
- [Nice React Components](#nice-react-components)
- [React Toasting](#react-toasting)
- [React Gamification](#react-gamification)
- [Misc Weird fun stuff](#misc-weird-fun-stuff)
- [Pure CSS Tricks](#pure-css-tricks)
- [SVG/Canvas Masking](#svgcanvas-masking)
- [Animations & Transitions](#animations--transitions)
- [Loading Spinners](#loading-spinners)
- [React Animation Tools](#react-animation-tools)
- [Ideas for Improving UX](#ideas-for-improving-ux)
- [Onboarding](#onboarding)
- [Empty states](#empty-states)
- [Design Software](#design-software)
- [Figma](#figma)
- [Sketch](#sketch)
- [Generative Design Tools](#generative-design-tools)
- [Non-DOM Browser Technologies](#non-dom-browser-technologies)
- [Canvas](#canvas)
- [WebGL](#webgl)
- [3D](#3d)
- [Interaction/Design Inspo](#interactiondesign-inspo)
- [Game design inspo](#game-design-inspo)
- [Random Stuff That Doesn't Fit Anywhere](#random-stuff-that-doesnt-fit-anywhere)
- [Mock APIs](#mock-apis)
- [Useful big datasets](#useful-big-datasets)
- [Copy and Emails](#copy-and-emails)
- [UI Design Challenges and Copywork](#ui-design-challenges-and-copywork)
- [Other Lists like this one](#other-lists-like-this-one)
- [Helpful podcasts/talks/articles](#helpful-podcaststalksarticles)
- [More Free Stuff](#more-free-stuff)
- [Paid Design Services of Note](#paid-design-services-of-note)
- [Courses](#courses)
## 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](https://blocks.wickedtemplates.com/)) 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](https://getbootstrap.com/)
- [Foundation](https://get.foundation/sites/docs/)
- [Blaze UI](https://www.blazeui.com/)
- [PatternFly](https://www.patternfly.org/v4)
- [UIKit](https://getuikit.com/docs/introduction)
- [Numl](https://numl.design/#getting-started) - 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](https://www.bonsaicss.com/)
- [Tailwindcss](https://tailwindcss.com/)
- Web Components
- [Weightless](https://github.com/andreasbm/weightless)
- [Shoelace](https://shoelace.style/)
### 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](https://picturepan2.github.io/spectre/index.html) 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://news.ycombinator.com/item?id=8315616))
- https://github.com/gduverger/screen (inactive now)
- Collections of even more:
- https://github.com/dohliam/dropin-minimal-css
- https://github.com/dbohdan/classless-css
- https://github.com/ubershmekel/cssbed (https://www.cssbed.com/)
- https://thesephist.github.io/paper.css/ and https://thesephist.github.io/blocks.css/
Superlight: [100 bytes of css to look great nearly everywhere](https://dev.to/swyx/100-bytes-of-css-to-look-great-everywhere-19pd)
```css
html {
max-width: 60ch;
padding: 1.5rem;
margin: auto;
line-height: 1.5rem;
font-size: 24px;
}
```
see also http://bettermotherfuckingwebsite.com/
### 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](https://github.com/nostalgic-css/NES.css): NES.css is a NES-style(8bit-like) CSS Framework.
- [PSone.css](https://github.com/micah5/PSone.css): PS1 style CSS Framework, inspired by NES.css.
- [LaTeX.css](https://latex.now.sh/)
- Operating System CSS
- [React95](https://react95.github.io/React95/)
- [98.css](https://github.com/jdan/98.css): A Windows 98 inspired framework for building faithful recreations of old UIs.
- [Office 97 clipart in svg format](https://archive.org/details/mso97clipart)
- [XP.css](https://github.com/botoxparty/XP.css): A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css.
- [7.css](https://khang-nd.github.io/7.css/)
- [System.css](https://sakofchit.github.io/system.css/) Retro Apple-inspired UI
- [Puppertino](https://github.com/codedgar/Puppertino) meant to mimic the look of macOS. [demo](https://codedgar.github.io/Puppertino/)
- [Commodore 64 CSS](http://pixelambacht.nl/2013/css3-c64/)
- DOS: [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386): A vintage 1980s DOS inspired Twitter Bootstrap theme
- [a2k](https://a2000-docs.netlify.app/): A Windows 2000 inspired web component library
- [Text UI CSS](https://github.com/vinibiavatti1/TuiCss): bios like UI's
- [New Dawn](https://github.com/npjg/new-dawn): A mac classic After Dark inspired stylesheet.
- [Geocities Bootstrap theme](https://code.divshot.com/geo-bootstrap/)
- [Metalmorphism](https://www.metalmorphism.com): 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
### No Framework
Instead of using a framework, [consider not using one](https://www.smashingmagazine.com/2022/05/you-dont-need-ui-framework/).
### CSS Resets
more control in exchange for more work on your part.
- eric meyer v2 https://meyerweb.com/eric/tools/css/reset/
- josh comeau reset https://www.joshwcomeau.com/css/custom-css-reset/ - [Chris Coyier comments](https://css-tricks.com/notes-on-josh-comeaus-custom-css-reset/)
- https://github.com/jensimmons/cssremedy css working group's reset if it didnt have to worry about tech debt
- https://github.com/tiaanduplessis/nanoreset
- https://nicolas-cusan.github.io/destyle.css/
- https://hankchizljaw.com/wrote/a-modern-css-reset/
- udpated https://andy-bell.co.uk/a-more-modern-css-reset/
- commentary https://chriscoyier.net/2023/10/03/being-picky-about-a-css-reset-for-fun-pleasure/
- https://gist.github.com/DavidWells/18e73022e723037a50d6
- http://necolas.github.io/normalize.css/ (yes, technically does more than a reset)
- https://github.com/sindresorhus/modern-normalize is a smaller version that just supports latest Chrome, Firefox, and Safari
- Tailwind's https://tailwindcss.com/docs/preflight/ is built atop normalize
- https://github.com/kripod/css-homogenizer - a modern take on Eric Meyer's Reset, based upon direct comparison between user agent style sheets.
- Jamie Kyle CSS preset https://twitter.com/buildsghost/status/1360343126510981122?s=20
### CSS A11y Checkers
- https://github.com/jackdomleo7/Checka11y.css
- https://ffoodd.github.io/a11y.css/
- https://github.com/mike-engel/a11y-css-reset
- chrome extension https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=en
### Tailwind Component Libraries
- https://github.com/thedevdojo/tails
- http://tailwindcomponents.com/
- https://tailwindui.com/components
- https://merakiui.com/
- https://www.gust-ui.com/
- https://flowbite.com/docs/getting-started/introduction/
- https://mertjf.github.io/tailblocks/
- 🌟 https://www.hyperui.dev/
- Tailwind visual builder
- https://devdojo.com/tails
- https://shuffle.dev/
- https://daisyui.com/
- https://www.tailwind-kit.com/
### React Component Libraries
- [Recent comparison/discussion](https://www.reddit.com/r/reactjs/comments/vtgbai/comparison_of_ui_libraries_for_react/) of:
- DaisyUI
- React Bootstrap
- ChakraUI
- Tailwind UI
- Flowbite React
- Material UI
- https://www.tremor.so/ Simple and modular components to build dashboards in a breeze. Fully open-source, made by data scientists and software engineers with a sweet spot for design.
- [Radix UI](https://www.radix-ui.com/) Unstyled, accessible components for building high‑quality design systems and web apps in React.
- [Mantine](https://mantine.dev/) More than 120 customizable components and hooks to cover you in any situation.
- https://nextui.org/ uses Stitches, includes light and dark UI components out-of-the-box along with a default color palette that might be good for quickly building landing pages or other content that’s not initially tied to any branding.
- https://akaspanion.github.io/ui-neumorphism/
- https://component.gallery/
- https://headlessui.dev/
- https://ui.supabase.io/
- https://ui.shadcn.com/ Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- https://magicui.design/ 20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
- [Fancy Components](https://www.fancycomponents.dev/) ([tweet](https://x.com/nonzeroexitcode/status/1871259468597702962))): a collection full of fancy, fun, edgy and useless React components!
## Layout
### Stacking and Elevation
Good idea to have an elevation system in place. Material's is pretty good: https://material.io/design/environment/elevation.html
| Component | Default elevation values (dp) |
| --------------------------------------------------------- | ----------------------------- |
| Dialog | 24 |
| Modal bottom sheet Modal side sheet | 16 |
| Navigation drawer | 16 |
| Floating action button (FAB - pressed) | 12 |
| Standard bottom sheet Standard side sheet | 8 |
| Bottom navigation bar | 8 |
| Bottom app bar | 8 |
| Menus and sub menus | 8 |
| Card (when picked up) | 8 |
| Contained button (pressed state) | 8 |
| Floating action button (FAB - resting elevation) Snackbar | 6 |
| Top app bar (scrolled state) | 4 |
| Top app bar (resting elevation) | 0 or 4 |
| Refresh indicator Search bar (scrolled state) | 3 |
| Contained button (resting elevation) | 2 |
| Search bar (resting elevation) | 1 |
| Card (resting elevation) | 1 |
| Switch | 1 |
| Text button | 0 |
| Standard side sheet | 0 |
More notes on FAB implementation- https://youtu.be/RXopH5t2Kww
### 2D Spacing
More. Spacing. Please.
[Double your whitespace](https://learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html#rule-3-double-your-whitespace)
### Responsive Layout Breakpoints
When in doubt, use Material Layout: https://material.io/design/layout/responsive-layout-grid.html#breakpoints
| Screen size | Margin | Body | Layout columns |
| ------------------- | ------- | ------- | -------------- |
| Extra-small (phone) | | | |
| 0-599dp | 16dp | Scaling | 4 |
| Small (tablet) | | | |
| 600-904 | 32dp | Scaling | 8 |
| 905-1239 | Scaling | 840dp | 12 |
| Medium (laptop) | | | |
| 1240-1439 | 200dp | Scaling | 12 |
| Large (desktop) | | | |
| 1440+ | Scaling | 1040 | 12 |
- https://piccalil.li/tutorial/build-a-responsive-media-browser-with-css/
- [Tailwind's breakpoints](https://tailwindcss.com/docs/breakpoints) don't come with layout recommendations but here they are:
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- 2xl: 1536px
### Layout Bleed
A nice bleed lets you put emphasis on things selectively.
You want a normal width, a popout width, and a "full bleed" width. Optional for an intermediate one.
This is the best version of bleed implementation https://ryanmulligan.dev/blog/layout-breakouts/
(borrows from https://joshwcomeau.com/css/full-bleed/)
This is adapted to be responsive
```css
/* https://ryanmulligan.dev/blog/layout-breakouts/ */
.swyxcontent {
--gap: clamp(1rem, 6vw, 3rem);
--full: minmax(var(--gap), 1fr);
--content: min(65ch, 100% - var(--gap) * 2);
--popout: minmax(0, 2rem);
--feature: minmax(0, 5rem);
display: grid;
grid-template-columns:
[full-start]
[feature-start]
[popout-start]
[content-start] var(--content) [content-end]
[feature-end]
[popout-end]
[feature-end]
[full-end]
}
@media (min-width: 640px) {
.swyxcontent {
grid-template-columns:
[full-start] var(--full)
[feature-start] var(--feature)
[popout-start] var(--popout)
[content-start] var(--content) [content-end]
var(--popout) [popout-end]
var(--feature) [feature-end]
var(--full) [full-end];
}
}
:global(.swyxcontent > *) {
grid-column: content;
}
article :global(pre) {
grid-column: feature;
}
```
Then you can selectively use the `popout`, `feature`, and `full` classes as needed
```css
.content > * {
grid-column: content;
}
.popout {
grid-column: popout;
}
.feature {
grid-column: feature;
}
.full {
grid-column: full;
}
```
### Other Layout Tools and tips
- 🌟 https://every-layout.dev/
- https://web.dev/patterns/layout/
- https://gedd.ski/post/article-grid-layout/
- CSS grid generator tools
- https://grid.layoutit.com/
- https://cssgrid-generator.netlify.app/
- https://layout.bradwoods.io/
- https://uisual.com/
- https://csslayout.io/ ([github](https://github.com/phuoc-ng/csslayout))
- Visual Hierarchy https://youtu.be/qZWDJqY27bw
## Typography
typography matters! https://twitter.com/kvncnls/status/1399077512014086150?s=21
### Fonts
-
For speed, use [System Font Stacks](https://systemfontstack.com/) (incl. Segoe and Roboto)
([what are these?](https://css-tricks.com/snippets/css/system-font-stack/))
- GitHub: `font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";`
- [VS Code Autocomplete](https://twitter.com/kudapara/status/1093553125661773825?s=20): `font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`
- [`font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;`](https://twitter.com/_etiennemartin/status/1221114860479696896?s=20)
- [`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;`](https://twitter.com/laurosilvacom/status/1221138641923141632)
- [`font-family: ‘system-ui’, sans-serif;`](https://twitter.com/esojrafael/status/1221107296127729664?s=20)
- the ['system-ui' generic font family is new, standardizing name across Safari, Firefox and Blink](https://www.chromestatus.com/feature/5640395337760768)
- [StackOverflow almost-system-font stack](https://news.ycombinator.com/item?id=31544613):
```css
@ff-sans:
-apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
"Segoe UI", // Windows
"Liberation Sans", // Linux
sans-serif; // The final fallback for rendering in sans-serif.
@ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
@ff-mono:
ui-monospace, // San Francisco Mono on macOS and iOS
"Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
"Liberation Mono", // Linux
Menlo, Monaco, Consolas, // A few sensible system font choices
monospace; // The final fallback for rendering in monospace.
```
- [Sanitize.css](https://github.com/csstools/sanitize.css#typography-uses-the-default-system-font):
```css
html {
font-family:
system-ui,
/* macOS 10.11-10.12 */ -apple-system,
/* Windows 6+ */ Segoe UI,
/* Android 4+ */ Roboto,
/* Ubuntu 10.10+ */ Ubuntu,
/* Gnome 3+ */ Cantarell,
/* KDE Plasma 5+ */ Noto Sans,
/* fallback */ sans-serif,
/* macOS emoji */ "Apple Color Emoji",
/* Windows emoji */ "Segoe UI Emoji",
/* Windows emoji */ "Segoe UI Symbol",
/* Linux emoji */ "Noto Color Emoji";
}
code, kbd, pre, samp {
font-family:
/* macOS 10.10+ */ Menlo,
/* Windows 6+ */ Consolas,
/* Android 4+ */ Roboto Mono,
/* Ubuntu 10.10+ */ Ubuntu Monospace,
/* KDE Plasma 5+ */ Noto Mono,
/* KDE Plasma 4+ */ Oxygen Mono,
/* Linux/OpenOffice fallback */ Liberation Mono,
/* fallback */ monospace;
}
```
- [Some systems come with good premium fonts](https://twitter.com/MatiasEduardoPR/status/1093508700378144768?s=20) - Apple OSes have `“avenir next”, “avenir”, “proxima-nova”`See also [Modern Font Stacks](https://modernfontstacks.com/) - [discussion](https://news.ycombinator.com/item?id=35168652)
- Simple: `font-family: system-ui, -apple-system, sans-serif;` ([has issues on old browsers + asian langauges]([url](https://news.ycombinator.com/item?id=31544075) - github and bootstrap have removed it fwiw))
- Sans-serif `font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;`
- Serif: `font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;`
- Mono: `font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;`
- Consider your site personality
- Elegant/Classic: serif like [`Freight Text`](https://fonts.adobe.com/fonts/freight-text), [`Adobe Garamond`](https://fonts.adobe.com/fonts/adobe-garamond), [`PT Serif`](https://fonts.google.com/specimen/PT+Serif)
- Playful: rounded sans serif like [`Proxima Soft`](https://fonts.adobe.com/fonts/proxima-soft)
- Plain/Safe: neutral sans serif like [`Freight Sans`](https://fonts.adobe.com/fonts/freight-sans), [`Inter`](https://rsms.me/inter/), [`Proxima Nova`](https://fonts.adobe.com/fonts/proxima-nova)
- Sciency/technical: squared off (geometric) sans like [`DIN`](https://fonts.adobe.com/fonts/din-2014), [`Industry`](https://fonts.adobe.com/fonts/industry)
- monospace fonts
- https://devfonts.gafi.dev/
- https://coding-fonts.css-tricks.com/
- Programming fonts
- https://www.programmingfonts.org/ ([discussion](https://news.ycombinator.com/item?id=32032029))
- [14 free programming fonts](https://twitter.com/zenorocha/status/1359508613606199301?s=20)
- Variable fonts: https://whirlybirdie.com/
- Erik Kennedy font https://mobile.twitter.com/erikdkennedy/status/1575135945359097864
- Novelty: http://velvetyne.fr/
- [use a Uniwidth font (not monospace) for interface design](https://uxdesign.cc/uniwidth-typefaces-for-interface-design-b6e8078dc0f7)
- Fonts have [fashions/trends](https://twitter.com/jgulden/status/1507467476807806979?s=21). current vogue is Inter.
- Free fonts that are great with examples (thanks [@edadams](https://github.com/sw-yx/spark-joy/issues/22))
- Google Fonts - ([see Harry Roberts on Google Font loading perf](https://csswizardry.com/2020/05/the-fastest-google-fonts/) - you should [self host this](https://wicki.io/posts/2020-11-goodbye-google-fonts/))
- https://www.colorsandfonts.com/font-pairing
- https://www.nngroup.com/articles/pairing-typefaces/
- https://fontflipper.com/upload Just upload an image, write some sample copy. And flip through 500 Google fonts one by one.
- https://bueltge.de/free-web-font-combinations/
- [40 best google fonts by Typewolf](https://www.typewolf.com/google-fonts)
- [50 selections of google fonts](https://www.notion.so/e873b52e0cc54f2981acc430417ba61d?v=05acdd40b0564920be69f5347f619bc3)
- [Noto Sans](https://www.google.com/get/noto/)
- [Fira Sans](https://fonts.google.com/specimen/Fira+Sans) - related to [Fira Code](https://github.com/tonsky/FiraCode) for devvy stuff
- [Raleway](https://fonts.google.com/specimen/Raleway)
- [Open Sans](https://fonts.google.com/specimen/Open+Sans)
- [Recursive](https://www.recursive.design/) - 1 variable font that can handle both monospace and UI usecases, very versatile
- Cavivanar https://twitter.com/atav1k/status/1178096244490723328?s=19
- Jack Butcher faves
- Rubik
- Work Sans
- IBM Plex Family (Mono, Sans, Serif)
- Fontshare 50 free fonts https://www.fontshare.com/
- [Erik Kennedy picks from these](https://twitter.com/erikdkennedy/status/1374382006658723840?s=20)
- Premium-looking Free Fonts https://learnui.design/blog/ultimate-guide-similar-fonts.html
- Apercu · Avenir · Circular · DIN · Futura · Gotham · Helvetica · Proxima Nova · Times New Roman
- https://beautifulwebtype.com/
- Chivo https://www.latinxswhodesign.com/
- [Lato](http://www.latofonts.com/) Well known, very readable, pretty, client favorite
- [Libre Franklin](https://beautifulwebtype.com/libre-franklin/) Elegant and thin
- [IBM Plex Sans](https://www.ibm.com/plex/) Loads of weights, beautifully done - example: https://thesephist.com/posts/inc/
- [Clear Sans](https://01.org/clear-sans)
- [Atkinson Hyperlegible](https://brailleinstitute.org/freefont) from Braille institue
- [Inter](https://rsms.me/inter/) [Rasmus'](https://rsms.me/) typeface carefully crafted & designed for computer screens.
- [Jetbrains Mono](https://www.jetbrains.com/lp/mono/) - Monospace font for devvy stuff
- Handwritten Fonts - great for presentations, annotated illustrations
- https://www.urbanfonts.com/fonts/handwritten-fonts.htm
- Caveat and Reenie Beanie on google fonts https://twitter.com/round/status/1178090890004455424?s=19
- https://fontsarena.com/
- https://uncut.wtf/ 90 typefaces with a focus on contemporary, or modern, type.
- "Open Source Beautiful Fonts" [by Gontijo](https://twitter.com/gontijodesign/status/1394624373823348737)
- Font Pairing
- https://fontpair.co/
- https://fontjoy.com/
- https://fontsinuse.com/ - see how [Steve Schoger uses it](https://youtu.be/S6-q5BheEYU)
- http://femmebot.github.io/google-type/
- https://www.boldwebdesign.com.au/
- https://justmytype.co/
- https://bueltge.de/free-web-font-combinations/
- Canva has a great tool: https://www.canva.com/font-combinations/
- https://www.colorsandfonts.com/font-pairings
- Read: https://www.nngroup.com/articles/pairing-typefaces/
- [Font variants and oldstyle numbers](https://www.jonathan-harrell.com/blog/better-typography-with-font-variants/)
- steve schoger blessed typekit fonts **for UI's**
- proxima nova
- aktiv grotesk
- acumin pro
- Museo Sans ([example](https://youtu.be/ZJj7uNdzPpM?t=566)) and similar from [TypeKit](https://fonts.adobe.com/fonts?browse_mode=default&filters=cl:ss,rc:p,ns:uc)
- https://practicaltypography.com/system-fonts.html
- https://practicaltypography.com/free-fonts.html
- eye catching fun fonts
- https://www.haleyfiege.fun/fonts
- pixel fonts https://twitter.com/castpixel/status/1281345373336985612?s=20
- CSS 3D text https://markdotto.com/playground/3d-text/
- JS 3D text https://bennettfeely.com/ztext/
- TypeSpiration https://typespiration.com/ premade font pairings for you
- more opinions places
- https://muffingroup.com/blog/best-free-fonts/
- https://type-scale.com/
- https://practicaltypography.com
- http://thinkingwithtype.com/
- https://typographyforlawyers.com/
- http://webtypography.net/intro/
- https://www.youtube.com/watch?v=Vd6jZR-GknA
- [6 ways to justify font choices in your designs](https://learnui.design/blog/justifying-font-choices.html)
- [statistical data on font usage](https://dribbble.com/stories/2021/04/26/web-design-data-fonts)
- Study of best font for online reading - inconclusive https://news.ycombinator.com/item?id=31156018
Premium fonts and some examples
- Proxima Nova https://a16z.com/ (on Typekit)
- Graphik https://type.today/en/Graphik
- https://www.typewolf.com/
- MD Prime - used on CSS tricks https://www.youtube.com/watch?v=mTIatvwm1MM
- Arida Black (maggie's font) https://www.myfonts.com/fonts/latinotype/arida/black/
- [Dank Mono](https://dank.sh/)
- Tekton https://twitter.com/round/status/1178090204562968576?s=19
you can learn more about proofing premium fonts here https://www.typography.com/blog/text-for-proofing-fonts
#### Font Loading Strategy
- https://github.com/zachleat/web-font-loading-recipes
- https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/
- Everything [Harry Roberts](https://twitter.com/csswizardry) writes
- [Google Fonts strategy](https://csswizardry.com/2020/05/the-fastest-google-fonts/)
```html
```
- `font-display: optional` [may be good](https://css-tricks.com/a-font-display-setting-for-slow-connections/)
- but harry roberts [doesnt like it](https://csswizardry.com/2020/05/the-fastest-google-fonts/#comparisons-and-visualisations)
- don't load fonts if `prefers-reduced-data` [see Kilian Valkhof](https://css-tricks.com/responsible-conditional-loading/)
### Line Height
https://www.thegoodlineheight.com
### Line Width
Don't forget setting `max-width` - betweeen 60-75chars is good.
- https://pearsonified.com/characters-per-line/
- https://grtcalculator.com/
- https://www.charactercountonline.com/
- https://charcounter.com/en/
You may wish to use `max-width: 60ch` on content. [Note on the `ch` unit not being EXACTLY 60 chars](https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/)
### Kerning and char spacing
Don't forget setting Leading (line height) on your h1 text and minding kerning:
- https://creativemarket.com/blog/whats-the-difference-between-leading-kerning-and-tracking
- https://99designs.com/blog/tips/11-kerning-tips/
When you use allcaps section titles, set the tracking (`letting-spacing`) a little wider. ([Example from Steve Schoger](https://www.youtube.com/watch?v=S6-q5BheEYU))
### Font Sizing
- DON'T GO CRAZY WITH FONT SIZES. Try to use 1-2 sizes and vary other things like weight, space/leading, color, casing.
- Don't rely on varying fontsize to control hierarchy - also use font weight (normal = 400/500, heavy = 600/700) and color
- Don't go under font weight 400, use a lighter color or smaller fontsize instead
- Fluid typography with [`clamp`](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp): `font-size: clamp(1.125rem, 1rem + 2vw, 1.5rem)`
- [CSS Tricks](https://css-tricks.com/design-v18/) v18: `font-size: clamp(2rem, calc(2rem + 1.2vw), 3rem);`
- Another responsive typography fallback - [`font-size: calc(1rem + 2px + ((100vw - 550px) / 250))`](https://twitter.com/Kikobeats/status/1093620157912616966?s=20) - you can [fit text to screen width](https://twitter.com/shshaw/status/1240647643388395521?s=20)
- demo it with this https://fluid-typography.netlify.app/
- [Inter/Tailwind font-size combo](https://twitter.com/samselikoff/status/1204412222593568769?s=20)
- [BAD, SLOW fontsize calc](https://twitter.com/drewml/status/1115339490179072000?s=20)
- Note: `vw` has known a11y issues: Preserve Zooming. [Sara Soueidan](https://twitter.com/SaraSoueidan/status/1121645149983891457?s=20) recommends wrapping with `calc`, e.g. `font-size: calc(16px + .3vw);`
- [Complete font-size notes](https://manishearth.github.io/blog/2017/08/10/font-size-an-unexpectedly-complex-css-property/)
- the `hanging-punctuation` property in CSS https://news.ycombinator.com/item?id=38441747
- Establishing your own type scale https://typescale.com/
### Typography Talks
- Typography for Developers (2hrs) https://www.youtube.com/watch?v=agbh1wbfJt8
- Adam Argyle on Typography https://www.youtube.com/watch?v=aaro26rK61o&t=874s
- Web Typography (48mins) https://www.youtube.com/watch?v=hbIZX6tE9JY
1. Don't trust computers
2. Use the default font size for paragraph text
3. Adjust type size according to reading distance
4. Adjust the font size if the typeface requires it
5. Set tables to be read
6. Resize display text as you would an image
7. Reduce your playload
8. Optimise page render timing
- https://www.youtube.com/watch?v=OgsHSVsNRdg
### Other Typography Resources
- 5 minute guide to Typography https://www.pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography
- Typography in 10 minutes https://medium.com/nextux/become-a-typography-nerd-in-under-10-minutes-5a7eda093cb3
- Quick Guide to Typography for webdevs https://sinja.io/blog/web-typography-quick-guide
- typography for long form articles - https://css-tricks.com/designing-for-long-form-articles/
- Font smoothing - [explained](https://szafranek.net/blog/2009/02/22/font-smoothing-explained/), [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth)
- Tool for learning what fonts other people use https://fontanello.oktavilla.se/
- [FlowType.js](https://simplefocus.com/flowtype/)
- [FitText](https://css-tricks.com/viewport-sized-typography/)
- https://wh0.github.io/glitter/ It’s a generator that produces text in a glitter-like style, which you can save as SVG. Definitely not for 99% of your projects, but a pretty cool text effect.
- if all letters at the same height all caps this is called [Majuscule](https://www.wordgenius.com/words/majuscule)
- International fonts stack https://www.figma.com/blog/when-fonts-fall/
- In future, try out [leading-trim](https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202)
- https://piccalil.li/tutorial/improve-the-readability-of-the-content-on-your-website
- css podcast primer on typography https://thecsspodcast.libsyn.com/tcp036-v2
- https://www.typewolf.com/checklist
If building a collaborative design tool that offers font choice, see how Figma does it https://youtu.be/kVD-sjtFoEI
## Colors
Pick a primary "brand" color to match your personality. [DO NOT OVERUSE IT.](https://twitter.com/steveschoger/status/1299372332579008515)
- Blue: safe, familiar
- Gold: expensive, sophisticated ([Examples](https://twitter.com/erikdkennedy/status/948914185596960768), [again](https://twitter.com/erikdkennedy/status/1331236629571362816?s=20))
- Pink: fun, not so serious
You can also have a grey for secondary content, and lighter grey for tertiary content.
Don't use system default/named colors, too brutal. Soften it a bit. "[Never use black](https://ianstormtaylor.com/design-tip-never-use-black/)" has been proposed as a rule, but [this is debated](https://news.ycombinator.com/item?id=24303042).
Here's a [more complete primer on color personalities](https://99designs.com/blog/tips/logo-color-meanings/) with more examples.
**Mind accessibility**. 1 in 12 men and 1 in 200 women have color blindness. Make sure to check that important distinctions can be perceived.
- https://twitter.com/LoanReads/status/1313974210151305218?s=20
- https://www.colourblindawareness.org/colour-blindness/
- use the concept of "luminance contrast" https://twitter.com/swyx/status/1351566026090053632
- https://randoma11y.com/?color=springgreen
Example blueish palette
Monotone:
- White-ish Card background: #FCFCFC
- Blueish-Black icons: #1C1E20
- Lighter text on white: #485963
- Bluish background: #202D34
Multicolor:
- Black: #1d1d1d.
- purple: #b066ff;
- blue: #203447;
- lightblue: #1f4662;
- blue2: #1C2F40;
- yellow: #ffc600;
- pink: #EB4471;
- white: #d7d7d7;
You may or may not want to use generic names if you want it swappable for dark mode:
Example [yellowish palette](https://codepen.io/oliviale/full/XyqQYL):
- primary-light: #FFD151 mustard
- primary-dark: #FFAE03 UCLA gold
- secondary-success: #20A39E light sea green
- secondary-warning: #EF5B5B sunset orange
- secondary-info: #08D377 dark cerulean
- grays: #E8E9E9, #D1D3D4, #BABDBF, #808488, #666A6D, #4D5052, #333537, #1C1D1E
Examples: https://dev.to/dcodeyt/add-dark-mode-to-your-websites-with-css-5bh4
**Note - THIS IS DISPUTED!!!** Even Slack's impl has separate light and dark theming.
> The problem is "primary" isn't a color, it's a measure of contrast in the current context. On the same page you might have a white panel with a black button and a black panel with a white button, and both of those buttons are "primary" even though they are different colors. - [Adam Wathan](https://twitter.com/adamwathan/status/1291724757402976257?s=20)
One liner dark mode (careful about perf!): `filter: invert(100%) hue-rotate(180deg);` - more [filters here](https://svelte.dev/repl/defc901c5f434ed4a76161605cf1db76?version=3.29.0)
https://workos.com/blog/5-lessons-we-learned-adding-dark-mode-to-our-platform?ref=sidebar
### Palette Generators
- https://atmos.style A toolbox to create better UI color palettes.
- https://colorgen.dev/
- https://color.adobe.com/create
- https://www.colorsandfonts.com/
- https://colorswall.com/
- https://coolors.co/
- https://colorpalettes.earth/ displays color palettes sourced from images of nature (taken from Unsplash)
- https://colorsinspo.com
- https://huey.design/ Rapid color palettes across the rainbow
- https://duo.alexpate.uk/
- https://colorhunt.co/
- https://2colors.colorion.co/
- https://meodai.github.io/poline/ Poline - enigmatic color palette generator
- https://www.colorsandfonts.com/color-palettes
- https://dribbble.com/colors/4030e8
- https://palettte.app/ (advanced tool; try importing the default palettes)
- https://www.paletter.app/ - Create Professional Color Palettes from a Single Color
- http://colours.neilorangepeel.com/category/red/
- https://www.colorbox.io (by Lyft Design https://design.lyft.com/)
- Consider [darker/lighter color variations](https://learnui.design/blog/color-in-ui-design-a-practical-framework.html)
- https://croncolor.com/color-tool
- https://leonardocolor.io/?colorKeys=%236fa7ff&base=ffffff&ratios=3%2C4.5&mode=CAM02
- https://happyhues.co/
- https://www.colourlovers.com/ _recommended by Tracy Osborn_
- https://flatuicolors.com/
- https://colorsupplyyy.com/
- [chroma.js color palette helper](https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1)
- https://palx.jxnblk.com/
- https://hotpot.ai/assistant/color_assistant Get suggestions for palettes, gradients, and text colors. Hit the space bar for ML-powered ideas.
- https://yeun.github.io/open-color/
- http://khroma.co/ neural network generated color palettes
- https://learnui.design/tools/data-color-picker.html Color picker for data visualizations
- https://learnui.design/tools/accessible-color-generator.html Accessible color generator
- https://maketintsandshades.com/ Generate tint and shades from hex code
- http://paletton.com/
- Tailwind:
- https://tailwind.ink/
- https://www.tailwindshades.com/
- https://tailwind.simeongriggs.dev
- https://javisperez.github.io/tailwindcolorshades/
- https://tailwind-color-picker.jessarcher.com
- https://www.tints.dev/ ([HN](https://news.ycombinator.com/item?id=39227831))
- Special usecases:
- Mix colors in pure CSS https://css-tricks.com/mixing-colors-in-pure-css/
- [HSLuv](https://www.hsluv.org/comparison/) color space is preferable to HSL. [Palette generator](https://colors.madscience.design/)
- why not hsl https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems
- https://colors.lol/ Overly descriptive color palettes (fun)
- English color names:
- https://hexwords.netlify.app/
- https://colornames.org/
- https://c0ffee.surge.sh/
### Color Gradients
Note: Default gradients often have "hard edges" that are too rough. ([example](https://twitter.com/JoshWComeau/status/1401926170589863946), [example](https://twitter.com/finmoorhouse/status/1543580508508065794?s=21&t=PBDS5C7C4FeqBA0wctOaCQ)). [Add a third color stop in the middle and boost saturation](https://twitter.com/erikdkennedy/status/1612867685192466432?s=20). You can use [esaing gradients](https://larsenwork.com/easing-gradients/) in future.
- Gradient Generator https://www.learnui.design/tools/gradient-generator.html - create linear, radial, or conic gradients in 8 color spaces, all avoiding [the "gray dead zone" problem](https://css-tricks.com/the-gray-dead-zone-of-gradients/))
- https://www.joshwcomeau.com/gradient-generator/
- gradients https://mybrandnewlogo.com/color-gradient-generator
- CSS Gradient Text https://twitter.com/argyleink/status/1281623252662489088/photo/2
- 🌟 https://mycolor.space/gradient Generate a CSS Color Gradient
- https://huemint.com/ Huemint uses machine learning to create unique color schemes for your brand, website or graphic
- https://webgradients.com/ free collection of 180 linear gradients
- https://uigradients.com/#Petrichor
- https://gradient-king.vercel.app/
- Adam Argyle conic CSS gradient examples https://www.conic.style/
- https://www.grabient.com/
- https://www.colorsandfonts.com/color-gradients
- ANIMATED GRADIENTS https://www.gradient-animator.com/
- Subtle gradients by bumping only saturation on HSL (thanks [argyleink](https://twitter.com/argyleink/status/1197205254623780864)) - You can [really take this to the extreme](https://twitter.com/argyleink/status/1216815958917992450?s=20)!
- Tailwind
- https://hypercolor.dev/
- Gradient designer with interpolation in various color spaces https://akx.github.io/gradient/
### Color Theory
Not tools but still important so here they are
- [A Beginner’s Guide to Applying Color in UI Design](https://georgefrancis.dev/writing/a-beginners-guide-to-applying-color-in-ui-design/?ref=sidebar)
- [Sarah Drasner on Color](https://css-tricks.com/nerds-guide-color-web/)
- [Louisa Barret on Color](https://www.youtube.com/watch?v=NdKAUXAvt8E)
- [Erik Kennedy on HSB](https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html)
- [Erik Kennedy on color variations](https://learnui.design/blog/color-in-ui-design-a-practical-framework.html)
- [JustinMezzell on Color](https://medium.com/@JustinMezzell/how-i-work-with-color-8439c98ae5ed) - advanced stuff on picking color tone/temperature. [Basic version by Steve Schoger](https://twitter.com/steveschoger/status/1502318105124646924)
- [Justin Baker on Color Theory](https://medium.muz.li/the-ultimate-ux-guide-to-color-design-4d0a18a706ed)
- [Convertkit on Color Theory](https://convertkit.com/color-theory)
- [Josh Comeau on Color Palettes](https://courses.joshwcomeau.com/css-for-js/treasure-trove/014-color-palettes)
- [Stripe - Designing accessible color systems](https://stripe.com/blog/accessible-color-systems)
- [How to do Dark Mode right](https://darkmodedesign.xyz/)
- Zeno Rocha 5 tips for dark mode https://workos.com/blog/5-lessons-we-learned-adding-dark-mode-to-our-platform?ref=sidebar
- [Inventorying and naming a Color Palette at UXPin](https://medium.com/@marcintreder/design-system-sprint-2-one-color-palette-to-rule-them-all-d0114ed1f659)
- [Reasoning about Color](http://notes.neeasade.net/color-spaces.html) some light reading on color spaces and transforms (eg "pastelize" operation)
- [Refactoring UI on Building Your Color Palette](https://refactoringui.com/previews/building-your-color-palette/)
- [Numeric systems of color palettes explained](https://n8d.at/the-numeric-colour-palettes-in-modern-web-frameworks-explained)
- [Monochromatic color scheme guide](https://www.vectornator.io/blog/monochromatic-colors)
- [Canva's color wheel has a color theory guide](https://www.canva.com/colors/color-wheel/)
- https://youtu.be/Co75kmQtbaA
- (fun) [history of primary colors](https://publicdomainreview.org/essay/primary-sources)
- big list of color names: https://github.com/meodai/color-names
- [RGM to Lab color space math](https://observablehq.com/@mbostock/lab-and-rgb)
- (way too detailed) history and guide to color pickers https://bottosson.github.io/posts/colorpicker/
### Color Theory for Data Visualization
Dataviz is a special category since it's not just design, but information. Credit to [Teej's thread](https://twitter.com/teej_m/status/1566158539868889088?s=20&t=BlqyJ1CxiiLTND7AQA0Qag).
- [Color Use Guidelines for Data Representation. Cynthia Brewer. Proc. Section on Statistical Graphics, American Statistical Association, pp. 55-60, 1999. Color Scheme Explorer.](http://www.personal.psu.edu/cab38/ColorSch/ASApaper.html)
- [How to pick more beautiful colors for your data visualizations. Lisa Charlotte Rost](http://idl.cs.washington.edu/papers/quantitative-color/)
- [Color Use Guidelines for Data Representation - Cynthia A. Brewer](http://www.personal.psu.edu/cab38/ColorSch/ASApaper.html)
- [How to pick the least wrong colors - An algorithm for creating color palettes for data visualization](https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors) - ([HN](https://news.ycombinator.com/item?id=31639009))
- [Paul Tol's INTRODUCTION TO COLOUR SCHEMES](https://personal.sron.nl/~pault/)
- https://blog.datawrapper.de/category/color-in-data-vis/
- [How to pick more beautiful colors for your data visualizations](https://blog.datawrapper.de/beautifulcolors/)
- Open source libraries
- [D3 Color scales](https://github.com/d3/d3-scale-chromatic)
- [Colorbrewer schemes](https://colorbrewer2.org/#type=sequential&scheme=YlOrBr&n=3)
- [Matplotlib colormaps](https://matplotlib.org/stable/tutorials/colors/colormaps.html)
- Books
- Chapter 4: [Storytelling with Data](https://www.amazon.com/Storytelling-Data-Visualization-Business-Professionals-ebook/dp/B016DHQSM2/)
- [Art + Data: A Collection of Tableau Dashboards](https://www.amazon.com/dp/0998105740/ref=cm_sw_r_apa_i_D67GCR5WN3E1AS56PJQ3_0)
- [A Dictionary of Color Combinations](https://www.amazon.com/dp/4861522471/ref=cm_sw_r_api_i_WWRZD5HZMPK1PBHE79WV_0)
- [Visualize This: The FlowingData Guide to Design, Visualization, and Statistics](https://www.amazon.com/Visualize-This-FlowingData-Visualization-Statistics-ebook/dp/B005CCT19M)
- Misc recommended papers
- [Somewhere Over the Rainbow: An Empirical Assessment of Quantitative Colormaps. Yang Liu, Jeffrey Heer. ACM CHI 2018.](http://idl.cs.washington.edu/papers/quantitative-color/)
- [Colorgorical: Creating Discriminable and Preferable Color Palettes for Information Visualization. Connor Gramazio, David Laidlaw & Karen Schloss. IEEE Transactions on Visualization and Computer Graphics. 2017.](http://gramaz.io/pdf/gramazio-2016-ccd.pdf)
## Backgrounds
### Background Gradients and Patterns
Not just for background backgrounds - applying gradients and background images to text is super underrated. Examples:
- [https://philcoffman.com/](https://user-images.githubusercontent.com/6764957/64589989-7985f500-d374-11e9-9d8a-2a8888df6981.png)
- [https://css-tricks.com/](https://user-images.githubusercontent.com/6764957/64590103-beaa2700-d374-11e9-8a84-95ab4826a577.png)
- https://magicmind.co/ very subtle texture
- https://increase.com/
Background Radial Bursts behind images:
- https://cssgradient.io/
- https://youtu.be/U4z-wph1NyI
- https://onepagelove.com/tag/gradients
#### Background Gradients
Make sure to see the [Color Gradients](#color-gradients) section to generate gradients
```css
background-image: linear-gradient(
120deg,
hsl(200 50% 90%) 0%,
hsl(200 100% 90%) 100%
);
```
Linear gradients can be "eased" to be smoother: https://css-tricks.com/easing-linear-gradients/
- https://meshgradient.com/ swirly backgrounds like apple
- https://meshgradient.in/ generate mesh gradient backgrounds
- noise textures https://x.com/kubadesign/status/1883884665448325356/photo/1
#### Background Patterns
- https://trianglify.io/ low polly pattern generator
- https://leaverou.github.io/css3patterns/
- https://github.com/bansal-io/pattern.css
- http://www.heropatterns.com/ SVG Repeating Patterns Generator
- https://doodad.dev/pattern-generator/
- https://www.wowpatterns.com/free-vector-art thousands of freevector patterns, based on shapes, organic shapes as well as themes, such as animals, beach, city and people, festivals, florals etc.
- https://wickedbackgrounds.com/?ref=producthunt svg background waves
- https://www.svgbackgrounds.com/
- https://www.transparenttextures.com/
- https://www.toptal.com/designers/subtlepatterns/ (exports png though :( )
- https://www.flaticon.com/pattern/ (create a bg pattern of icons)
- https://coolbackgrounds.io/
- https://tabbied.com/ abstract Doodles with generated patterns
- https://css-doodle.com/
- https://hero-generator.netlify.app/ hero picture CSS generator
- https://www.gradientmagic.com/
- https://kumiko-generator.netlify.app/
- http://thepatternlibrary.com/
- https://msurguy.github.io/flow-lines/ produces random geometric lines, and we can adjust the formulas and distances between the shapes drawn
- http://svgbackgrounds.com/
- https://haikei.app/ - web app to generate unique SVG shapes, backgrounds, and patterns
- https://pattern.monster/ 180 patterns, and you can filter them by mode and color, and search
- http://iros.github.io/patternfills/ - plenty of black-and-white patterns, also available from the command line
- https://www.kennethcachia.com/plain-pattern/ allows you to upload an SVG shape (or use one of the existing ones) and it creates a repeating pattern which can be exported as SVG.
- http://www.patternify.com/ CSS Pattern generator that allows you to define a pattern in a 10×10 grid
- https://www.magicpattern.design/tools/css-backgrounds library of pure CSS background patterns like ZigZag or diagonal ones.
- https://bgjar.com/
- https://products.ls.graphics/paaatterns/
- https://notchr.is/patterns/ (Really simple SVG Patterns using single unicode characters.)
- https://doodad.dev/pattern-generator/ (Pattern generator that exports to png, jpg and svg.)
- https://creatica.app/backgrounds/ (Generate unique SVG Backgrounds and patterns for your websites)
- https://mossaik.app/ SVG Pattern generator, waves, and blobs.
- wave dividers
- https://www.shapedivider.app/ generate custom shape dividers
- https://svgwave.in/
- https://getwaves.io/ generate SVG waves
- https://wavelry.vercel.app/ choose between sharp, linear and smooth waves
- https://www.outpan.com/app/9aaaf27303/svg-gradient-wave-generator adjust amplitudes, smoothness, saturation and hues
- https://loading.io/background/m-wave/ generate waves, and even animate them
- https://haikei.app/ full fledged generate SVG assets, from layered waves to stacked waves and blob scenes
- svg waves generator https://codepen.io/jh3y/full/poEvKxo
- https://wweb.dev/resources/css-separator-generator
### Background Illustrations
- https://freeillustrations.xyz/
### Background SVG texture
- for increase.com https://twitter.com/bdc/status/1443557247813099522?s=20
- https://www.transparenttextures.com/
### Misc Backgroundy Stuff
- CSS Doodle https://css-doodle.com/
- CSS backgroundy patterns https://leaverou.github.io/css3patterns/
- this guy https://twitter.com/yuanchuan23
- super advanced pokemon shiny card gradients https://github.com/simeydotme/pokemon-cards-css
- Generative Gradients http://generative-placeholders.glitch.me/
- Generateive SVG https://dev.to/georgedoescode/a-generative-svg-starter-kit-5cm1
- Image Placeholders - blurring - https://blurha.sh/ (and gatsby image and nextjs image)
- Dimming/coloring text on background images https://coder-coder.com/background-image-opacity/
- [True Grit Texture Supply](https://www.truegrittexturesupply.com/) PNG textures (paid)
- Remove backgrounds
- this is [now native in iOS/macOS](https://news.ycombinator.com/item?id=36509175)
- https://www.remove.bg/ from images - but has been monetized to shit. see below for better alternatives
- https://github.com/imgly/background-removal-js open source Background Removal in the Browser
- https://pixian.ai/remove-image-backgrounds
- https://www.photoroom.com/background-remover
- https://backgroundremoverai.com/
- source https://github.com/nadermx/backgroundremover
- https://www.inpixio.com/remove-background/
- https://express.adobe.com/tools/remove-background
- https://baseline.is/tools/background-remover/ from images
- https://www.unscreen.com/ for gif/video
- Remove ANYTHING (AMAZING)
- https://cleanup.pictures/
- https://cleanupphotos.com/
- colorizing black and white images
- https://demos.algorithmia.com/colorize-photos
- relight images https://clipdrop.co/relight https://twitter.com/dh7net/status/1567813168990232578
- edit photo in browser no BS https://edit.photo/
- AI Colorizer https://palette.fm/
- https://animatedbackgrounds.me/
- Remove backgrounds and modify faces (for photos, videos and real time camera)
- https://studio.banuba.net/, https://www.banuba.com/webar-sdk#webar-player (commercial SDK that adds teeth whitening, eye and hair color changer, and other face touch-up features).
## Icons and Favicons
### Favicons
Don't forget them!
- [How to Favicon in 2021](https://css-tricks.com/how-to-favicon-in-2021/)
```html
```
```json
// manifest.webmanifest
{
"icons": [
{ "src": "/192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/512.png", "type": "image/png", "sizes": "512x512" }
]
}
```
- [the 6 favicon types you need](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)
- 🌟 **[Favicon InBrowser.App](https://favicon.inbrowser.app)** - A modern pure-frontend favicon generator. Support SVG, maskable and dark mode. Optimize PNG and SVG outputs.
- [Real Favicon generator](https://realfavicongenerator.net/) - pop in an image, get back a favicon! The most comprehensive one for all platforms (Windows, iOS, Android)
- [Favicon.io](https://favicon.io/) - Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats
- [FontIcon](https://gauger.io/fonticon/) - Generate favicons and images from Font Awesome icons
- [Favicon Generator](http://tools.dynamicdrive.com/favicon/) - another one
- https://textmoji.app/ small text icons meant for Slack but also can use for faviconning
- [SVG Favicon maker](https://formito.com/tools/favicon) - supports emojis and 2 letter favicons with custom fonts
- SVG favicons are modifiable by scroll percentage
- you can https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/
- put the scroll percentage! https://css-tricks.com/how-i-put-the-scroll-percentage-in-the-browser-title-bar/
### `` tags and opengraph
Ideas of things you can include based on my own site.
```html
{frontmatter.title} ∊ swyx.io
{#if frontmatter.cover_image}
{/if}
```
other boilerplates to use
- https://css-tricks.com/explain-the-first-10-lines-of-twitter-source-code/
- https://github.com/joshbuchea/HEAD
- https://www.matuzo.at/blog/html-boilerplate/
- maybe think about adding JSON+LD too.
### Icons
#### Logos (incl company logos)
- https://logosear.ch/ superfast metasearch of 200k svg logos from GitHub
- https://svgl.vercel.app/ fast search of svg logos, user submitted and categorized
- https://seeklogo.com/
- https://www.iconfinder.com/iconsets/payment-method-1
- https://www.logology.co/ We’ve designed a catalog of 500+ logos. Take a brand identity test and we’ll instantly match you with the best ones, paired with the right fonts & colors.
- https://www.svgrepo.com/ Browse 300.000+ SVG Vectors and Icons
- https://iconsear.ch/ instant search of 50k svg icons from GitHub and GitLab
- https://macosicons.com/ icons intended to replace mac desktop icons
- https://awsicons.dev/ AWS icons and https://aws-icons.com/
- https://az-icons.com/ Azure icons
#### General & Misc
**Important**: Note on [icon accessibility](https://css-tricks.com/accessible-svg-icons/). [Don't use icon fonts.](https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/)
- Icon + text: use ``
- Icon only: `foo...`
> Note you can put gradients on SVG icons manually https://play.tailwindcss.com/yM2N8GpEUK
- ⭐ https://www.heroicons.com/ Steve schoger's (somewhat limited) svg iconset. another viewer: https://heroicons.dev/
- ⭐ https://phosphoricons.com/ 3000+ fully customizable free SVG and PNG icons. style, variations, easy to consume
- ⭐ https://tablericons.com/ 937 Fully customizable free SVG icons
- ⭐ https://icons.modulz.app/ Radix Icons - >250 15×15 icons designed by the Modulz team. - some great app icons
- ⭐ https://lucide.dev/, Lucide, a fork of [Feather Icons](https://feathericons.com/) with Clean, consistent, customizable SVG icons available as treeshakable packages in all frameworks.
- "[Lucide](https://lucide.dev/) is a very active fork of Feather and what I’ve been using for the past few years instead. Feather is great as are their design guidelines, but it needs way way more icons. Lucide picks up beautifully where it left off."
- [rauchg feature](https://x.com/rauchg/status/1746938271807226203?s=20)
- https://iconoir.com/ free open source library with 1000+ SVG Icons, designed on a 24x24 pixels grid
- https://iconic.app/
- https://teenyicons.com/ tiny minimal 1px icons
- Google icons https://fonts.google.com/icons
- Material Design https://materialdesignicons.com/ https://material.io/resources/icons/?style=baseline
- Circum Icons https://circumicons.com Consistent open source icons as SVG for React, Vue and Svelte.
- **icon metasearch** (list of lists of icons)
- https://icones.netlify.app/
- https://www.iconbolt.com/
- https://iconduck.com/ 104,808 free open source icons
- https://thenounproject.com/ Every icon you can think of, in PNG or SVG formats. They offer over 20 million icons, with built-in customization colors like size and color. Requires login, needs creative commons attribution or $3 download
- https://www.snoweb-svg.com/
- https://nucleoapp.com/ Nucleo is a beautiful library of 30635 icons, and a powerful application to collect, customize and export all your icons. $99 lifetime purchase.
- https://nucleoapp.com/tool/icon-transition SVG Icon Transitions Generator
- https://hotpot.ai/free_icons 5,000+ free icons. Customize colors, size, and other properties. PNG, JPG, iOS, Android, PDF. No svg.
- **https://iconmonstr.com/** Discover 4486+ free icons in 310 collections. SVG, EPS, PSD, PNG. [OK without attribution, don't sell it](https://iconmonstr.com/license/).
- https://icomoon.io/ - 450 icons, SVG, PDF, EPS, Ai, PSD. Paid tier goes up to 1600 icons.
- https://orioniconlibrary.com/ has customizable colors and packs eg for ecommerce
- https://github.com/edent/SuperTinyIcons Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. The average size is under 465 bytes!
- https://github.com/Remix-Design/RemixIcon neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 2200+ icons are all elaborately crafted so that they are born with the gene of readability, consistency and perfect pixels. Each icon was designed in "Outlined" and "Filled" styles based on a 24x24 grid.
- https://icons8.com/l/fluent/ colored "microsoft style" icons
- https://icons8.com/emoji emoji style customizable icons
- https://icons8.com/line-awesome fontawesome-like icons
- https://iconsvg.xyz/ Quick customizable icons for your projects
- http://www.entypo.com/
- https://simpleicons.org/
- http://github.com/propublica/weepeople A typeface of people sillhouettes, to make it easy to build web graphics featuring little people instead of dots.
- Bootstrap Icons https://github.com/twbs/icons, https://icons.getbootstrap.com/
- https://systemuicons.com/
- https://github.com/microsoft/fluentui-system-icons Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft.
- https://www.streamlinehq.com/elements/memes a few dozen popular meme icons as svg
- https://icons.mono.company/
- https://iconscout.com/unicons and https://github.com/Iconscout/react-unicons
- https://www.zondicons.com/
- https://linearicons.com/free
- animated icons http://www.transformicons.com/builder.html
- http://game-icons.net/
- Covid 19 icons - https://design.dev/
- https://kenney.nl/ thousands of free game assets. https://news.ycombinator.com/item?id=42671472
- https://opengameart.org/
- https://itch.io/game-assets/assets-cc0
- https://itch.io/game-assets/assets-cc4-by
- https://www.iconshock.com/social-media-icons/ A pack of 300 social media icons (PNG & Vector) and a set of animated icons (Lottie and AE), which cover all the trendiest social media networks nowadays.
- brand icons
- http://simpleicons.org/ icons for every brand like graphql, adobe xd, youtube, etc
- https://css.gg/ 700+ Customizable & Retina-Ready app icons — entirely built in CSS
- https://worldvectorlogo.com/
- https://www.vectorlogo.zone/ - consistently formatted SVG logos
- Icon Libraries and Framework
- Iconify https://github.com/iconify/iconify -> use in https://github.com/antfu/unplugin-icons
- React Icons
- https://react-icons.github.io/react-icons/
- https://github.com/miukimiu/react-kawaii
- https://reactsvgicons.com/
- https://react-icons.netlify.com/#/icons/fa (typically fontawesome). note that there is some tree shaking issues in the discussions. you may wish to use the https://github.com/meronex/meronex-icons fork instead
- https://github.com/bytedance/IconPark - more than 1,200 high-quality icons, and introduces an interface for customizing your icons. across React, Vue, SVG, PNG.
- https://github.com/useAnimations/react-useanimations
> You may like: [Free Fundamentals of Icon design in 1 hour course by MDS](http://introtoicons.com/)
**premium/paid icons**
- http://shape.so/ 4300+ Icons & Illustrations (by Meng To)
- https://logobly.com/ create custom logos
- https://hatchful.shopify.com/ more custom logos
- https://radicalicons.com/ use `radicaldesign`
- https://symbolicons.com/
- 🔥 https://streamlineicons.com/ (used in [Glide Apps](https://twitter.com/glideapps/status/1199396690182230016))
- https://www.iconfinder.com/
- https://www.flaticon.com/ 6.5m icons, free for PNG, paid for SVG
- https://gumroad.com/l/primaries
- https://gumroad.com/l/gPEAU ios 14 icons from traf - for inspo, mainly
## Diagramming
Before you get to the tools - some good thinking (and lists of tools) on architecture diagrams:
- https://nocomplexity.com/documents/arplaybook/businessarchitecture.html
- https://sportebois.medium.com/better-architecture-diagrams-for-agile-teams-actionable-tips-and-lessons-e76627dc4315
- https://c4model.com/ (c4 modeling [more from Simon](https://dev.to/simonbrown/how-to-review-a-software-architecture-diagram-6p0))
- http://fmc-modeling.org/ FMC modeling - only rectangles and round things
- [How to Draw Architecture Diagrams](https://news.ycombinator.com/item?id=38035505)
### General Purpose Diagramming
- https://excalidraw.com/ (free, open source)
- https://miro.com/ - freemium, used by Maggie
- https://www.draw.io/ - now [shifted](https://www.diagrams.net/blog/move-diagrams-net) to https://www.diagrams.net/ (free) - has [VS Code extension](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)
- https://inkscape.org/ (free)
- https://whimsical.com/ ($10/mo)
- https://www.lucidchart.com/
- https://www.gliffy.com/
- https://diagrams.net/
- https://www.ilograph.com/
- https://zenuml.com
- https://www.simplediagrams.com/
- [Microsoft Visio](https://www.microsoft.com/en-sg/microsoft-365/visio/flowchart-software)
- https://www.plectica.com/
- more tools - [see hn thread](https://news.ycombinator.com/item?id=21513337)
- more canvas diagramming tools https://infinitecanvas.tools/gallery/
### Software Arch Diagrams
- software arch diagrams https://twitter.com/terrastruct
### Sequence Diagrams
- UML: https://news.ycombinator.com/item?id=36342931
- "UML, the good parts" - Fundamental Modeling Concepts http://fmc-modeling.org/
- https://www.websequencediagrams.com/
- https://swimlanes.io/ a simple online tool for creating sequence diagrams.
- https://bramp.github.io/js-sequence-diagrams/
- https://sequencediagram.org/
- https://playground.diagram.codes/
- http://sdedit.sourceforge.net/ Quick Sequence Diagram Editor (but doesnt seem active)
Specifically for BPMN: https://bpmn.io/
### Entity Relationship Diagrams
- [Azimutt](https://azimutt.app) is Open-Source and makes database design easy [AML](https://azimutt.app/aml), but also exploring existing databases
- https://dbdiagram.io/home which also has an open-source markup language: https://github.com/holistics/dbml
- [Databasediagram.com – Private, Text to Entity-Relationship Diagram Tool](https://news.ycombinator.com/item?id=36243926)
- [Mocodo](https://mocodo.net): French-flavored ERD, aka Merise MCD, where the layout is constrained to a grid
### Cloud Architecture diagrams
useful eg if needs logos
- Amazon architecture icons: https://aws.amazon.com/architecture/icons/ as well as the software that has them built in
- https://awsicons.dev/ AWS icons
- Google Cloud icons, cheat sheet and other assets: https://cloud.google.com/icons
- https://www.draw.io/
- https://www.lucidchart.com/
- https://www.omnigroup.com/omnigraffle/ (used by tim bray)
- https://www.ilograph.com/
- https://www.cloudcraft.co/ focused on AWS
- https://www.cloudskew.com/
- https://arcentry.com/ (interactive/realtime) - discontinued!
further reading
- lynn langit's list https://github.com/lynnlangit/learning-cloud/tree/master/0_CLOUD-PATTERNS/1_Viz-Systems
- the 5 types of arch diagrams https://www.readysetcloud.io/blog/allen.helton/the-5-types-of-architecture-diagrams/
### Code-based Graph tools
- https://gojs.net/latest/samples/decisionTree.html interactive diagrams
- 4 major text-to-graph langauges (Comparison https://text-to-diagram.com/)
- mermaid https://mermaid-js.github.io/mermaid/
- https://plantuml.com/
- https://github.com/terrastruct/d2
- graphviz/dot - useful inside jupyter
- new one: https://google.github.io/typograms/
- http://blockdiag.com/en/
- python's `diagrams` https://pypi.org/project/diagrams/
- https://structurizr.com/
- https://github.com/mhlabs/cfn-diagram visualize cloudformation -> draw.io
- https://wavedrom.com/ (OSS) - Digital Timing Diagram or Waveform from simple textual description.
- https://chatuml.com/ - An AI assisted diagram editor using PlantUML syntax
- way more tools here: https://xosh.org/text-to-diagram/
Node based GUIs: https://github.com/wbkd/awesome-node-based-uis
## Graphics and SVG Illustrations
- https://www.brandcrowd.com/maker/tag/hipster
- https://www.logotouse.com/ Download any logo in LogoToUse and do whatever you want with them. This is the place to showcase more than 120+ million logos that are already designed worldwide and are archived!
Backend entity/ ERD /SQL diagramming
- SQL https://drawsql.app/
- Cloud AWS/Azure/GCP diagrams https://www.cloudskew.com/
DIY illustration
- Wobble paint https://www.lexaloffle.com/bbs/?tid=40058
### Wireframing
- balsamiq
- https://wireflow.co/ free open source visual designer for user flows. collaborative.
- AI driven design https://uizard.io/ with wireframe
### Device Mocks
Mocking your browser/phone
- Browser: https://shooot.bourhaouta.com/, https://screenshot.rocks/
- with [depth of field](https://www.blurmatic.com/)
- https://www.brandbird.app/
- Books: https://diybookcovers.com/3Dmockups/
- https://3d-book-css.netlify.app/ and https://3dbook.xyz/
- book cover advice https://convertkit.com/how-to-make-an-ebook-cover
- Macbook: https://magicmockups.com
- animate them, why not https://deviceful.netlify.app/documentation.html (previously https://deviceful.app/)
- phone/watch: https://www.rotato.xyz/
- including making 3d video!!! https://rotato.app/ example https://twitter.com/0xca0a/status/1583504417004789763?s=46&t=xS8iIAOyRQhHzWI8mn4Owg
- and https://x.com/hellokillian/status/1743469389222195680?s=20
- other devices https://deviceshots.com/
- 3D mocks: https://things.morflax.com/styles
- [Screenstab](https://www.screenstab.com): Turn screenshots into dramatically angled photos
- 🔥 [Facebook Design Devices](https://facebook.design/devices)
- [Shotsnapp](https://shotsnapp.com/)
- https://www.ls.graphics/devices-mockups
- in context: [Device Mock-Up Inspiration](https://onepagelove.com/tag/devices)
- [Lstore Graphics](https://www.ls.graphics/) – Includes video
- [Creative Market](https://creativemarket.com/templates/mockups/mobile-web) device mockups
- [Pika](https://pika.style): screenshot, website and device mockups (Paid, $99 one time)
Record your device https://www.screen.studio/
### Illustrations
- https://www.reddit.com/r/FreeIllustrations/top?t=all
- :star: https://undraw.co/ An open-source illustrations website, where you can change the colors of the illustrations online before downloading.
- :star: https://www.humaaans.com/ diverse, customizable human svgs
- https://fresh-folk.com/ is similar
- :star: https://www.blackillustrations.com/ "Beautiful, FREE illustrations of black people for your next digital project"
- hire custom designs via https://www.illustratorhub.com/
- :star: https://www.vecteezy.com/ High quality vector graphics with worry-free licensing for personal and commercial use.
- :star: https://streamlineicons.com/ux/ illustrations to go with Streamline icons
- https://icons8.com/illustrations (previously ouch.pics)
- :star: https://blush.design/ good random generator by Pablo Stanley. Made for Sketch, Figma, InVision Studio and Adobe XD.
- :star: https://www.freepik.com/ Graphic resources for everyone: Find Free Vectors, Stock Photos, PSD and Icons
- https://www.openpeeps.com/
- https://iradesign.io/ Build your own illustrations - very gradient/faceless illo heavy
- https://www.storyset.com/ free customizable illustrations for your next project
- https://www.pixeltrue.com/
- https://www.pixeltrue.com/frontliner-heroes 24 high-quality Covid illustrations.
- https://www.pixeltrue.com/free-illustrations free vector illustrations
- https://www.seekpng.com/ 1m+ Transparent PNG Images For Free
- https://freellustrations.com/
- https://2.flexiple.com/scale/all-illustrations One new high-quality, open-source illustration each day. Use our color-picker to adapt the illustrations to your brand identity!
- https://2.flexiple.com/scale/home
- https://illustrationkit.com/ Free vector illustrations for personal & commercial projects no attribution required
- https://www.glazestock.com/
- https://openclipart.org/
- https://gallery.manypixels.co/ ManyPixels offer free svg illustrations with the possibility to customize the color as well.
- https://generator.opendoodles.com/ illustrations with color generator for svgs
- https://www.openpeeps.com/ a hand-drawn illustration library to create scenes of people.
- https://opengameart.org/
- https://usesmash.com/ Smash Illustrations features trendy characters and simple illustrations for free in commercial and personal use. It features more than 250+ objects and characters, and 20+ unique scenes so you can compose them however you like.
- https://control.rocks/
- https://mixkit.co/free-stock-art/ Mixkit is the Unsplash of illustrations, or that is their objective. It features many illustration categories and also stock videos and music, all free of charge.
- https://delesign.com/free-designs/graphics/
- https://illlustrations.co/ 100 beautiful illustrations, designed by Vijay Verma during a 100 days of illustrations challenge.
- https://isometric.online/ This website offers a searchable list of nice and free isometric illustrations.
- https://www.codeinwp.com/pattern-collection/ abstract art illutrations
- https://www.glazestock.com/
- https://lukaszadam.com/illustrations library of Free Illustrations and Icons for everyone.
- https://design.dev/ some illustrations in PS/sketch/etc. requires account.
- https://www.manuelalangella.com/retroooo-folks/ Retroooo Folks is a vector-based Mix-and-Match library of hand-drawn sketches, created for Adobe Illustrator, Sketch and Adobe Draw.
- https://woobro.design/
- https://pimpmydrawing.com/
- https://www.drawkit.io/ Hand-drawn vector illustration resources for your next project
- https://www.karthiksrinivas.in/charco A set of 16 handcrafted illustrations for your web & app projects. This set includes categories like 404 error, no internet connection, no service, fatal error, page not found, something went wrong, under construction and many more.
- https://www.veila.me/freebies/scandinavian-houses-free-vector-images
- https://absurd.design/
- https://github.com/MariaLetta/mega-doodles-pack
- https://iradesign.io/
- https://autodraw.com Google AI assisted drawing
- https://hotpot.ai Free or paid. Create icons, app screenshots, MacBook/browser mockups, social media posts, and other graphics for mobile apps and browser extensions.
- https://www.magicpattern.design/examples - one-click web editor for illustration patterns. It's perfect for branding landing pages, social media posts and featured images. Requires Google signup.
- https://gumroad.com/l/just sketch me (paid)
- https://error404.fun/ 404 page illustrations
- https://designstripe.com/ free illustrations + easy to use web editor that allows customizing palettes, characters, look & feel, among others
Illo's in context: https://onepagelove.com/tag/illustrations
### 3D illustrations
- https://www.isometriclove.com/ Cute Isometric Objects For Your Design
- https://www.handz.design/ 3d hand gestures
- https://isoflat.com/ Isometric and flat graphic resources
- https://www.shapefest.com/ 160,000+ high resolution PNG images of beautiful 3D shapes
- https://powerpeopleplatform.com/ delicious design library of 3D avatars
- https://spline.design/ Easily create and publish 3D web experiences. Build and iterate fast with production-ready results.
- https://news.ycombinator.com/item?id=33845291 - Blockbench - low poly blender altnerative
Learn 3d illo in blender https://polygonrunway.com/
- https://news.ycombinator.com/item?id=33273022
### Handwritten Look
RoughJS Tools
- RoughJS Animated Annotation - https://roughnotation.com/
- https://excalidraw.com/
- https://alias-rahil.github.io/handwritten.js/
### Pixel Art
- http://pixelartmaker.com/
- https://nostalgic-css.github.io/NES.css/
- SNES music https://www.zophar.net/music/nintendo-snes-spc
### ASCII Art
exampels of ascii art in code: https://blog.regehr.org/archives/1653 ([HN discussion](https://news.ycombinator.com/item?id=31891226))
- https://fatiherikli.github.io/archetype/
- https://textik.com/#a4ec12a68785f25f
- http://asciiflow.com/
- https://monodraw.helftone.com/
- text to diagramming tools [list](https://smusamashah.github.io/text-to-diagram)
- https://github.com/asciitosvg/asciitosvg ascii to svg diagrams
- from picture to ANSI art https://mrogalski.eu/ansi-art/
### matrix8967's list
from [matrix8967]([url](https://news.ycombinator.com/user?id=matrix8967)): Some ANSI Color Codes and ASCIInema can carry you a long way. (note: may want to reformat this in future)
- Here's a list of plain text information tools from my notes:
- https://mbarkhau.keybase.pub/asciigrid/
- https://gitlab.com/mbarkhau/asciigrid/
- ascii-tables is exactly what is says on the label.
- https://ozh.github.io/ascii-tables/
- https://github.com/ozh/ascii-tables/
- netpen
- https://www.netpen.io/main/
- https://github.com/ebirger/netpen/
- svgbob and svg-term are both great for creating SVGs out of these plain text files:
- https://github.com/marionebl/svg-term-cli/
- https://ivanceras.github.io/svgbob-editor/
- https://github.com/ivanceras/svgbob/
- Here are some TUI/CLI focused frameworks. These are over kill for me - but maybe useful to someone here:
- https://www.textualize.io/
- https://charm.sh/
- http://maaslalani.com/slides/
- https://github.com/peterbrittain/asciimatics/
- TUI/Text-Based presentaion tools:
- https://sli.dev/
- https://github.com/slidevjs/slidev/
- https://github.com/maaslalani/slides/
- http://maaslalani.com/slides/
- https://github.com/d0c-s4vage/lookatme/
- https://github.com/chunqiuyiyu/ervy/
- Honorable Mention goes to wtf-util and it's TUI configurator:
- https://wtfutil.com/
- https://github.com/ggerganov/wtf-tui
### DIY Graphic Design
- https://snappa.com/
- https://www.canva.com/
- https://www.fotojet.com/ esp for photo collages
- https://studio.polotno.dev/
### Stock Photos and Videos
- :star: https://unsplash.com/ of course
- https://www.flickr.com/creativecommons/
- https://isorepublic.com/
- https://negativespace.co/
- stock photo metasearch
- https://www.everypixel.com/
- https://same.energy/ AI driven similarity search
- https://www.chamberofcommerce.org/findaphoto/
- https://zoomstock.com/ t-SNE stock photo search
- https://www.goodfreephotos.com/ 27k free and public domain photos, images, clipart, pics and vectors
- https://visualhunt.com/ search 354m high quality creative commons licensed photos
- art focus
- https://artvee.com/ public domain art (in particular check out the [NASA collection](https://artvee.com/?s=nasa&post_type=product&product_cat=0))
- startups
- https://startupstockphotos.com/
- faces
- https://www.nappy.co/ "Beautiful, high-res photos of black and brown people. For free."
- nature
- https://freenaturestock.com/
- http://imagebase.net/
- https://visualsofearth.com/c/ nature, space, desert, etc. mobile focused.
- travel
- http://photos.bucketlistly.com/ A free creative common collection of over 5000+ travel photos from all over the world anyone can use.
- color
- https://500px.com/ (premium - search by color)
- misc/novelty
- http://www.ghibli.jp/info/013251/ studio ghibli free backgrounds
- https://gratisography.com/ quirky/whimsy
- https://covers.alphacoders.com/by_category/4/2/twitter-header
- https://foter.com/ furniture
- https://picjumbo.com/
- https://photos.icons8.com/creator/ Create custom stock photos
- https://generated.photos/ AI-generated stock photos
- https://photos.icons8.com/
- https://duotone.shapefactory.co/?f=f56468&t=27184f&q=_&i=oMpAz-DN-9I (unsplash with duotone filter)
- https://allthefreestock.com/
- https://thenounproject.com/search/photos/?q=happy
- lists of more resources
- random low quality list https://www.mattcrampton.com/blog/mega_list_of_free_image_sites_for_blogging/
- https://github.com/neutraltone/awesome-stock-resources
- https://burst.shopify.com/ Burst from Shopify - Free stock photos for everyone
- Paid
- https://deathtothestockphoto.com/
- https://www.stocksy.com/ (premium)
Image modification for hover effects: https://photomosh.com/
### Stock Videos
- https://pexels.com
- https://pixabay.com/videos
- https://mixkit.co
- https://www.vecteezy.com/
- https://www.pond5.com/
- https://videohive.net/ - 3,048,864 Video effects and stock footage
### Video creation tools
- Generic editors
- https://motionbox.io/ - Good in browser video editor - nice intros and outros, templates a bit limited but pretty good
- https://shotstack.io/ - Automate edit bulk videos with custom templates
- https://invideo.io/ - good video maker with lots of nice generic templates and imports stock video
- https://www.moovly.com/video-templates
- https://animoto.com/ - drag and drop video maker. more elegant/real.
- Canva video - does some nice transitions and charts but all the stock stuff is behind canva pro ($13/mo)
- https://www.renderforest.com/templates seems versatile but not super intuitive and dunno how to change the transitions
- https://videobolt.net nice intro editor with some video templates - from jay phelps
- web editors
- https://detail.co/
- veed.io
- https://runwayml.com/ Magical AI tools, realtime collaboration, precision editing, and more. Your next-generation video creation suite.
- specialty videos
- https://biteable.com/ - simple video maker with templates and stock video. kiiinda cartoony
- https://vyond.com/ - also kinda cartoony
- https://app.animaker.com/moments also kinda cartoony but can do real video ([story](https://codestory.co/podcast/bonus-raghav-r-s-animaker/))
- https://powtoon.com - nice studio for cartoony professional videos and presentations with nice transitions
- https://www.doodly.com/ whiteboard doodle explainer videos. [see demo](https://www.youtube.com/watch?v=Cdv0do3oMbA&list=PLvCrTe3h4inftA8S94CZmRVWB0EzihJeQ&index=1) $39/mo
- website demo video https://talevideo.com/ https://www.reddit.com/r/SideProject/comments/ra7inj/app_to_create_a_website_videos/
- code animation based on text diffs https://twitter.com/antfu7/status/1577832867761004544?s=46&t=WQ5RClw9ARIs9_ohcB_v-g
tips for product tours https://dev.to/highlight/how-to-create-animated-product-stories-2bcd
misc
- https://www.fable.app/academy/fable-quick-start-course-part-2-of-3 Fable motion design
- https://github.com/remotion-dev/remotion - code videos with React
- example usage https://twitter.com/JDihlmann/status/1516853381242961921?s=20&t=kB6uuP2qxW83A0A-NlQerg
- https://glitterly.app/ - kinda rough - mostly image maker, video features in beta
- https://viddyoze.com "3d video animations". promising videos, but $97 lifetime.. seems sketchy
- https://www.fiverr.com/search/gigs?query=explainer%20videos&source=top-bar&search_in=everywhere&search-autocomplete-original-term=explainer%20videos
Do it for you
- https://www.medialuv.com/ - design animation studio
Tutorials from successful Youtubers
- Fireship/jeff delaney https://www.youtube.com/watch?v=N6-Q2dgodLs
- Florin pop https://www.youtube.com/watch?v=vcKkRrNBdVI
### Avatars
- lo-fi autogenerated avatars
- https://boringavatars.com/
- https://robohash.org/
- identicons https://idbloc.co/blog/product/update/2019/05/09/toggles-identicons-and-beauty.html
- https://github.com/emeraldpay/hashicon
- instead of showing people's faces, try stippling https://github.com/pshihn/stippled-image
- https://en.gravatar.com/
- https://unavatar.now.sh/ grab social images from username/email
- http://avatars.adorable.io/#demo
- https://multiavatar.com
- https://personas.draftbit.com/ A playful avatar generator for the modern age.
- https://avataaars.com/ and https://getavataaars.com/
- https://readyplayer.me/avatar 3d customizable avatars
- https://bigheads.io/
- https://joeschmoe.io/ An illustrated avatar collection for
developers and designers
- https://amritpaldesign.com/toy-faces Toy Faces is a fun diverse library of 3D avatars for your design mockups and personal use.
- https://gumroad.com/l/siKBl 3d diverse avatars, paid
## Individual HTML Elements
- branding color with accents: https://web.dev/accent-color/
```css
html {
--brand: hotpink;
scrollbar-color: hotpink Canvas;
}
:root {
accent-color: var(--brand);
}
:focus-visible {
outline-color: var(--brand);
}
::selection {
background-color: var(--brand);
}
.dark ::selection {
color: #1d1d1d;
} /* if you have a dark mode class */
::marker {
color: var(--brand);
}
:is(::-webkit-calendar-picker-indicator, ::-webkit-clear-button, ::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
color: var(--brand);
}
/* https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/ */
details {
border: 2px solid var(--brand-accent);
padding: 0.5rem 1rem;
}
details > summary {
cursor: pointer;
}
details > summary > *:first-child {
display: inline;
}
```
- meta theme-color https://github.com/sw-yx/swyxkit/issues/19
- dont use default number input attributes - do it all in js https://stackoverflow.blog/2022/09/15/why-the-number-input-is-the-worst-input/
- links https://cssanimation.rocks/animating-links/
- multiline capable inline links https://twitter.com/JoshWComeau/status/1481697476327452676?s=20&t=bEY8vX8hmtGmMWQsFmSEcA
- tooltips on hover
- https://kazzkiq.github.io/balloon.css/
- [niche tip on tooltips js perf](https://atfzl.com/don-t-attach-tooltips-to-document-body)
- https://www.floating-ui.com/ from tippyjs guy
- details/summary css - use `details[open]` to target https://codepen.io/chriscoyier/pen/wvJmqjY
- put scroll margin on [everything with an `id`](https://piccalil.li/quick-tip/add-scroll-margin-to-all-elements-which-can-be-targeted)
```css
[id] {
scroll-margin-top: 2ex;
}
```
- Link and Button hover effects https://www.youtube.com/watch?v=ceNMP-aQkQ4
- Image modification for hover effects: https://photomosh.com/
- shrinking header on scroll https://css-tricks.com/how-to-create-a-shrinking-header-on-scroll-without-javascript
- https://smolcss.dev/ more simple CSS tricks for responsive elements
- prefer click menus over hover menus https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/
- how to make settings https://web.dev/building-a-settings-component/
- Defensive CSS https://ishadeed.com/article/defensive-css/
- breadcrumb dividers: https://twitter.com/_philNelson/status/1512316711856345090?s=20&t=q3Cp0O1KPlxADCw_zUNHDA
### Anything But Dropdowns
Instead of dropdowns, use: (https://learnui.design/blog/4-rules-intuitive-ux.html)
- Segmented Buttons (Horizontal or Vertical)
- Checkbox
- https://getcssscan.com/css-checkboxes-examples 60+ beautiful checkboxes
- Switch
- Radio button
- Cards and Visual options (images as buttons)
- Typeahead (for large dropdown eg countries)
- Date (calendar control for poisson dates, input type="date" for high variability)
- Stepper (for numbers)
### Buttons
- CSS keyboard buttons (Linus' toes) https://twitter.com/thesephist/status/1587950509503270914?s=20&t=k8x3X6k8qD-5zF8Y5vyB8w
- https://frontend.horse/articles/buttons-that-spark-joy/
- https://getcssscan.com/css-buttons-examples
- 3d buttons
- CSS3 3D Buttons http://simurai.com/archive/buttons/#
- Button Deluxe v3 A whimsical 3D pure CSS button https://code.hnldesign.nl/btn-deluxe/
- https://cssbuttons.vercel.app/ cssbuttons: HTML & CSS Buttons Collection Built in React
- https://getcssscan.com/css-buttons-examples
- https://simurai.com/archive/buttons/ bonbon sweet css 3d buttons
- https://markodenic.com/tools/buttons-generator/
- moving lightsource on hover css buttons idea https://jsfiddle.net/pixel67/ZxZ6B/28/
- moving gradients on hover https://twitter.com/avstorm/status/1646204829826445312
- Button without ugly focus ring with Tailwind:
- `focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2`
- for links `focus:shadow-outline focus:outline-none`
### Forms
- form submission UX https://twitter.com/swyx/status/1081200428950335488?s=21
- Accessible Styled Forms https://github.com/scottaohara/a11y_styled_form_controls
- accessibility for all elements https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/
- Form Design Best Practices https://medium.com/nextux/form-design-best-practices-9525c321d759
- Form Wizard https://medium.com/nextux/how-to-design-a-form-wizard-b85fe1cc665a
- Complex Forms https://medium.com/nextux/form-design-for-complex-applications-d8a1d025eba6
- Form Validation UX https://medium.com/nextux/forms-need-validation-2ecbccbacea1
- Form Validation https://www.bram.us/2021/01/28/form-validation-you-want-notfocusinvalid-not-invalid/
- use `input:not(:focus):not(:placeholder-shown):valid` for non freakout UX
- WTF Forms: Nicer Forms eg Radio Buttons with pure CSS https://github.com/mdo/wtf-forms
- Output-inspired form: https://twitter.com/steveschoger/status/1171429842442522625
- show button when placeholder-shown: https://codepen.io/liamj/pen/vYYLGZj
- Toggles: https://jnkkkk.github.io/MoreToggles.css/allToggles.html
- 3D LED switch: https://codepen.io/jkantner/pen/VwaBomY
- The Crazy Egg Guide to Great Form UI and UX https://www.crazyegg.com/blog/guides/great-form-ui-and-ux/
- Best practice, research insights and examples by Geri Reid https://gerireid.com/forms.html
### Tables
- https://www.uxbooth.com/articles/designing-user-friendly-data-tables/
- https://medium.com/nextux/design-better-data-tables-4ecc99d23356
- https://twitter.com/erikdkennedy/status/1329787833058353154?s=20
- [A table with both a sticky header and a sticky first column](https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column)
### Datepickers
- https://github.com/Pikaday/Pikaday
- https://twitter.com/timolins/status/1429761631471480838
### Sound
- https://www.zapsplat.com/
- https://www.myinstants.com/index/se/
- YouTube's Audio Library https://studio.youtube.com/channel//music
- https://icons8.com/music
- https://freesound.org/
- https://pixabay.com/music/
- https://cchound.com/ 100% free, quality CC audio
- https://www.pianobook.co.uk/ as hundreds of no-charge sample libraries (many pianos, lots of other things).
- https://loyaltyfreakmusic.com/ some royalty free music. gremlin podcast usees it
- podcast intros
- https://aaraalto.com/sounds a few brief guitar samples for podcast transitions
- https://transistor.fm/free-podcast-intro-music/ free podcast intro music
- https://www.soundstripe.com/
- https://www.premiumbeat.com/
- https://www.streambeats.com/
- https://www.canva.com/help/article/stock-music
- https://www.epidemicsound.com/
- https://www.youtube.com/channel/UCV3itPyPPgvftXBsreYADlw Bensound
- https://www.soundboardguy.com/
- https://snapmuse.com/ - royalty free music for Youtube, Podcast, Vlog and other video projects
- https://www.soundboardly.com/ - sound effects library with downloadable mp3 file
Paid:
- https://www.epidemicsound.com/
- https://artlist.io/ - may have better licensing https://www.youtube.com/watch?v=mYU6XhORomg but no fx
- https://www.soundstripe.com/ (cheapest) here's a comparison https://www.youtube.com/watch?v=1YBjY79axRo
- https://www.bensound.com/
- https://snapmuse.com/
Tools:
- https://www.audacityteam.org/
- https://joshwcomeau.com/react/announcing-use-sound-react-hook/
- https://source-separation.github.io/tutorial/landing.html
### Lightweight Charts/Dataviz
- https://rbitr.github.io/ChartS.css/
- easy creation of simple charts for documentation, data storytelling / journalism, etc. It features plots of 1-D lists, and has a custom markdown filter that converts suitably formatted lists directly to charts. It has no dependencies (other than a modern browser), and is very small compared to javascript based charting tools. The html is based on `ul` lists and will collapse back to readible lists in the absence of css support, making it accessible to all readers. It is open source and easily configurable according to project needs.
- Apache E Charts https://echarts.apache.org/en/index.html
- https://chartscss.org/ Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts.
- Sparkline fonts in text: https://github.com/aftertheflood/sparks and https://www.scribbletone.com/typefaces/ff-chartwell
- https://vizzuhq.com/
- https://docs.anychart.com/Basic_Charts/Stacked/Value/Vertical_Area_Chart
- https://antv.vision/en
- https://stephenhutchings.github.io/shown/ Statically-generated, responsive charts, without the need for client-side Javascript.
- Datamapplot for static and interactive data maps https://datamapplot.readthedocs.io/en/latest/intro_splash.html#interactive-plot-examples ([example](https://www.goodfire.ai/papers/mapping-latent-spaces-llama/))
### Dashboarding
- https://github.com/cruip/tailwind-dashboard-template This one is made with Tailwind and React and includes optional chart components built with Chart.js.
### Nice React Components
- https://react-smooth-range-input.now.sh/
- Theme-ui-sketchy - https://github.com/beerose/theme-ui-sketchy roughjs components with themeui
- React Physics Dragger https://react-physics-dragger-demo.netlify.com/
- [React-