https://devfonts.gafi.dev/

https://coding-fonts.css-tricks.com/

https://www.programmingfonts.org/

(discussion)

14 free programming fonts

Variable fonts:

Erik Kennedy font

Novelty:

use a Uniwidth font (not monospace) for interface design

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

50 selections of google fonts

Noto Sans

Fira Sans

related to Fira Code for devvy stuff

Raleway

Open Sans

The peace and love issue.

Recursive

1 variable font that can handle both monospace and UI usecases, very versatile

Cavivanar

Fontshare 50 free fonts

. Free quality fonts from Indian Type Foundry; Satoshi, General Sans, Clash Display.

Erik Kennedy picks from these

Premium-looking Free Fonts

Apercu · Avenir · Circular · DIN · Futura · Gotham · Helvetica · Proxima Nova · Times New Roman

https://beautifulwebtype.com/

A showcase of the best typefaces from the Google web fonts directory.

Chivo

Lato

Well known, very readable, pretty, client favorite

Libre Franklin

Elegant and thin

IBM Plex Sans

Loads of weights, beautifully done - example: https://thesephist.com/posts/inc/

Clear Sans

Atkinson Hyperlegible

from Braille institue

Inter

Rasmus' typeface carefully crafted & designed for computer screens.

Jetbrains Mono

Monospace font for devvy stuff

https://www.urbanfonts.com/fonts/handwritten-fonts.htm

Caveat and Reenie Beanie on google fonts

https://fontsarena.com/

curated typography website with high-quality free fonts, done-for-you research articles, free alternatives to premium fonts, news, and more.

https://uncut.wtf/

90 typefaces with a focus on contemporary, or modern, type.

https://fontpair.co/

a simple tool that helps you pair Google Fonts together.

https://fontjoy.com/

https://fontsinuse.com/

see how Steve Schoger uses it

http://femmebot.github.io/google-type/

https://www.boldwebdesign.com.au/

https://justmytype.co/

Canva has a great tool:

https://www.colorsandfonts.com/font-pairings

Font variants and oldstyle numbers

https://practicaltypography.com/system-fonts.html

https://practicaltypography.com/free-fonts.html

https://www.haleyfiege.fun/fonts

pixel fonts

JS 3D text

TypeSpiration

premade font pairings for you

https://muffingroup.com/blog/best-free-fonts/

https://type-scale.com/

https://practicaltypography.com

. Free online book on type fundamentals, hierarchy, spacing.

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

statistical data on font usage

Study of best font for online reading - inconclusive

https://github.com/zachleat/web-font-loading-recipes

https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/

Google Fonts strategy

the more intense version -

steps thru many levels of modern dark mode (2026)

Keep it simple:

https://shuffle.dev/

tailwind/bootstrap/materialui randomly generated templates

https://www.free-css.com/

https://www.creative-tim.com/

Themes for React, Angular, Vue, Lavarel and HTML5.

https://wickedtemplates.com

using Tailwind v2 (and wickedblocks) and https://wickedbackgrounds.com/

https://www.tailwind-kit.com/

free tailwind component kit

https://daisyui.com/

tailwind theme

https://themeselection.com/

https://html5up.net/

copyright: HTML5 UP makes spiffy HTML5 site templates.

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

https://designsystemsrepo.com/

The UK:

New Zealand is heavily based

The US:

Open source UI components and visual style guide for U.S. government websites.

Canada:

Russia:

Australia:

France:

:octocat:

Germany:

and https://styleguide.bundesregierung.de/sg-de/

Argentina:

Greece:

Netherlands:

Italy:

Singapore:

:octocat:

Estonia:

Czech Republic:

Ukraine:

Bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. Demo, Docs, Repo | #SCSS

Foundation

Blaze UI

Open source modular toolkit providing great structure for building websites quickly with a scalable and maintainable foundation. Demo, Docs, Repo | #SCSS

PatternFly

UIKit

Numl

A UI Design Language, UI Library of Web Components, and Runtime CSS Framework for rapidly building interfaces that follow your Design System

Bonsai CSS

A complete Utility First CSS Framework for less than 50kb.

Tailwindcss

(Awesome List) - A utility-first CSS framework for rapidly building custom designs.

Weightless

Shoelace

A collection of professionally designed, every day UI components built on a framework-agnostic technology.

lighter, no js. preview some of these with

https://www.cssbed.com/, https://dohliam.github.io/dropin-minimal-css/ and https://github.com/dbohdan/classless-css

https://andybrewer.github.io/mvp/

mvp.css

https://yegor256.github.io/tacit/

CSS framework for dummies with zero skills in graphic design.

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…

https://github.com/neocities/element

(inactive now)

Spectre.css

lightweight (10kb), responsive and modern CSS framework for faster and extensible development.

https://purecss.io/

A set of small (3.7kb), responsive CSS modules that you can use in every web project.

https://gdcss.netlify.app/

(inspired by UK design system)

https://ajusa.github.io/lit/

lit has two modules: lit and util. lit contains all of the basics for a framework, such as a responsive grid, typography, and other elements. util has many CSS utility classes that can be used to extend lit, or any CSS framework.

https://luxacss.com/

https://jenil.github.io/chota/

good looking, lots of classes and utilities yet small

https://chr15m.github.io/DoodleCSS/

hand drawn look

https://codepen.io/web-dot-dev/pen/abpoXGZ

the base classes for web.dev/learn/csss

https://open-props.style/

design tokens using CSS variables

https://latex.vercel.app/

style your website like a LATEX document - (original version https://github.com/davidrzs/latexcss)

https://picnicss.com/

lightweight bootstrap alternative (2014 HN)

https://github.com/gduverger/screen

(inactive now)

https://github.com/dohliam/dropin-minimal-css

https://github.com/dbohdan/classless-css

Classless CSS themes/frameworks.

https://github.com/ubershmekel/cssbed

(https://www.cssbed.com/)

https://thesephist.github.io/paper.css/

and https://thesephist.github.io/blocks.css/

see also

https://www.getpapercss.com/

(handrwritingey css similar to roughjs)

https://terminalcss.xyz/

and https://github.com/webtui/webtui

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.

NES.css

NES.css is a NES-style(8bit-like) CSS Framework.

PSone.css

PS1 style CSS Framework, inspired by NES.css.

LaTeX.css

React95

A React components library with Win95 UI.

98.css

A Windows 98 inspired framework for building faithful recreations of old UIs.

Office 97 clipart in svg format

XP.css

A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css.

7.css

CSS library for building interfaces that look like Windows 7. Repo | #PostCSS

System.css

Retro Apple-inspired UI

Puppertino

meant to mimic the look of macOS. demo

Commodore 64 CSS

a2k

A Windows 2000 inspired web component library

Text UI CSS

bios like UI's

New Dawn

A mac classic After Dark inspired stylesheet.

Geocities Bootstrap theme

Metalmorphism

High-quality metallic UI kit

more

Arwes - Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps

Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps.

http://augmented-ui.com/

Futuristic, Sci-Fi shaping for any element

eric meyer v2

CSS Tools: Reset CSS.

josh comeau reset

- Chris Coyier comments

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

commentary

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

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://github.com/jackdomleo7/Checka11y.css

https://ffoodd.github.io/a11y.css/

https://github.com/mike-engel/a11y-css-reset

chrome extension

https://github.com/thedevdojo/tails

http://tailwindcomponents.com/

https://tailwindui.com/components

https://merakiui.com/

Beautiful Tailwind CSS components that support RTL languages.

https://www.gust-ui.com/

https://flowbite.com/docs/getting-started/introduction/

Component library built with Tailwind CSS.

https://mertjf.github.io/tailblocks/

https://www.hyperui.dev/

Open source marketing and ecommerce Tailwind CSS components.

https://devdojo.com/tails

https://shuffle.dev/

tailwind/bootstrap/materialui randomly generated templates

https://daisyui.com/

tailwind theme

https://www.tailwind-kit.com/

free tailwind component kit

Recent comparison/discussion

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

Unstyled, accessible components for building high‑quality design systems and web apps in React.

Mantine

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/

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

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

(tweet)): a collection full of fancy, fun, edgy and useless React components!

Good idea to have an elevation system in place. Material's is pretty good:

More notes on FAB implementation-

Double your whitespace

When in doubt, use Material Layout:

https://piccalil.li/tutorial/build-a-responsive-media-browser-with-css/

Tailwind's breakpoints

don't come with layout recommendations but here they are:; sm: 640px; md: 768px; lg: 1024px; xl: 1280px; 2xl: 1536px

This is the best version of bleed implementation

(borrows from https://joshwcomeau.com/css/full-bleed/)

https://every-layout.dev/

Solving responsive layout problems using algorithmic design.

https://web.dev/patterns/layout/

https://gedd.ski/post/article-grid-layout/

https://grid.layoutit.com/

a interface builder for CSS Grid & Bootstrap that wants to be the kick-off for your front-end developments.

https://cssgrid-generator.netlify.app/

https://layout.bradwoods.io/

https://uisual.com/

https://csslayout.io/

(github)

Visual Hierarchy

typography matters!

VS Code Autocomplete

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;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial,…

font-family: ‘system-ui’, sans-serif;

the 'system-ui' generic font family is new, standardizing name across Safari, Firefox and Blink

StackOverflow almost-system-font stack

Sanitize.css

Some systems come with good premium fonts

Apple OSes have “avenir next”, “avenir”, “proxima-nova”

Proxima Nova

(on Typekit)

Graphik

https://www.typewolf.com/

Comprehensive web typography info, suggestions for font alternatives, and links to usage in the wild.

MD Prime - used on CSS tricks

Arida Black (maggie's font)

Dank Mono

Tekton

you can learn more about proofing premium fonts here

https://www.thegoodlineheight.com

https://pearsonified.com/characters-per-line/

https://grtcalculator.com/

https://www.charactercountonline.com/

https://charcounter.com/en/

https://creativemarket.com/blog/whats-the-difference-between-leading-kerning-and-tracking

https://99designs.com/blog/tips/11-kerning-tips/

CSS Tricks

v18: font-size: clamp(2rem, calc(2rem + 1.2vw), 3rem);

demo it with this

Inter/Tailwind font-size combo

BAD, SLOW fontsize calc

Note: vw has known a11y issues: Preserve Zooming. Sara Soueidan recommends wrapping with calc, e.g. font-size: calc(16px + .3vw);

Complete font-size notes

the hanging-punctuation property in CSS

Establishing your own type scale

Typography for Developers (2hrs)

Adam Argyle on Typography

Web Typography (48mins)

Don't trust computers; Use the default font size for paragraph text; Adjust type size according to reading distance; Adjust the font size if the typeface requires it; Set tables to be read; Resize display text as you would an image; Reduce your playload; Optimise page render timing

https://www.youtube.com/watch?v=OgsHSVsNRdg

5 minute guide to Typography

Typography in 10 minutes

Quick Guide to Typography for webdevs

typography for long form articles -

Tool for learning what fonts other people use

FlowType.js

FitText

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.

International fonts stack

https://piccalil.li/tutorial/improve-the-readability-of-the-content-on-your-website

css podcast primer on typography

https://www.typewolf.com/checklist

If building a collaborative design tool that offers font choice, see how Figma does it

https://twitter.com/LoanReads/status/1313974210151305218?s=20

https://www.colourblindawareness.org/colour-blindness/

use the concept of "luminance contrast"

https://randoma11y.com/?color=springgreen

Examples:

https://atmos.style

A toolbox to create better UI color palettes.

https://colorgen.dev/

https://color.adobe.com/create

https://www.colorsandfonts.com/

a curated library of colors, gradients and fonts for digital designers and web developers.

https://colorswall.com/

Place to store your color Palettes and generate tool.

https://coolors.co/

The super fast color schemes generator! Create the perfect palette or get inspired by thousands of beautiful color schemes. Features include color picker, pick palette from photo, create a collage, make your own gradient palette, create a gradient, contrast checker, etc.

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/

free and open platform for color inspiration with thousands of trendy hand-picked color palettes.

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/)

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/

Flat color picker which gives you the perfect colors for flat designs.

https://colorsupplyyy.com/

chroma.js color palette helper

Chroma.js-powered tool for mastering multi-hued, multi-stop color scales.

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/

Colors tested on deuteranopia and protanopia mode.

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/

A designer tool for creating color combinations that work together well.

https://tailwind.ink/

AI palette generator, trained with the Tailwind CSS palette.

https://www.tailwindshades.com/

https://tailwind.simeongriggs.dev

https://javisperez.github.io/tailwindcolorshades/

Color shades generator for Tailwind CSS.

https://tailwind-color-picker.jessarcher.com

https://www.tints.dev/

(HN)

Mix colors in pure CSS

HSLuv

color space is preferable to HSL. Palette generator

why not hsl

https://colors.lol/

Overly descriptive color palettes (fun)

https://hexwords.netlify.app/

https://colornames.org/

https://c0ffee.surge.sh/

Gradient Generator

- create linear, radial, or conic gradients in 8 color spaces, all avoiding the "gray dead zone" problem)

https://www.joshwcomeau.com/gradient-generator/

gradients

CSS Gradient Text

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

handpicked collection of beautiful color gradients for designers and developers.

https://gradient-king.vercel.app/

Adam Argyle conic CSS gradient examples

https://www.grabient.com/

beautiful and simple UI for generating web gradients.

https://www.colorsandfonts.com/color-gradients

ANIMATED GRADIENTS

https://hypercolor.dev/

Collection of Tailwind CSS gradients with directional options.

Gradient designer with interpolation in various color spaces

A Beginner’s Guide to Applying Color in UI Design

Sarah Drasner on Color

Louisa Barret on Color

Erik Kennedy on HSB

Erik Kennedy on color variations

JustinMezzell on Color

advanced stuff on picking color tone/temperature. Basic version by Steve Schoger

Justin Baker on Color Theory

Convertkit on Color Theory

Josh Comeau on Color Palettes

Stripe - Designing accessible color systems

How to do Dark Mode right

Zeno Rocha 5 tips for dark mode

Inventorying and naming a Color Palette at UXPin

Reasoning about Color

some light reading on color spaces and transforms (eg "pastelize" operation)

Refactoring UI on Building Your Color Palette

Numeric systems of color palettes explained

Monochromatic color scheme guide

Canva's color wheel has a color theory guide

https://youtu.be/Co75kmQtbaA

big list of color names:

Huge curated list of unique color names.

RGM to Lab color space math

(way too detailed) history and guide to color pickers

Color Use Guidelines for Data Representation. Cynthia Brewer. Proc. Section on Statistical Graphics, American…

How to pick more beautiful colors for your data visualizations. Lisa Charlotte Rost

How to pick the least wrong colors - An algorithm for creating color palettes for data visualization

(HN)

Paul Tol's INTRODUCTION TO COLOUR SCHEMES

https://blog.datawrapper.de/category/color-in-data-vis/

How to pick more beautiful colors for your data visualizations

D3 Color scales

Colorbrewer schemes

Colour advice for maps, based on Dr. Cynthia Brewer's research.

Matplotlib colormaps

Art + Data: A Collection of Tableau Dashboards

A Dictionary of Color Combinations

Visualize This: The FlowingData Guide to Design, Visualization, and Statistics

Colorgorical: Creating Discriminable and Preferable Color Palettes for Information Visualization. Connor Gramazio,…

https://philcoffman.com/

https://css-tricks.com/

https://magicmind.co/

very subtle texture

https://increase.com/

Bare-metal banking APIs.

https://cssgradient.io/

a free CSS gradient generator tool, this website lets you create a colorful gradient background.

https://youtu.be/U4z-wph1NyI

https://onepagelove.com/tag/gradients

Linear gradients can be "eased" to be smoother:

https://meshgradient.com/

swirly backgrounds like apple

https://meshgradient.in/

generate mesh gradient backgrounds

https://shaders.paper.design/

paper texture gradients

noise textures

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/

explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites.

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/

. Free seamless background patterns.

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://creatica.app/backgrounds/

(Generate unique SVG Backgrounds and patterns for your websites)

https://mossaik.app/

SVG Pattern generator, waves, and blobs.

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

svg waves generator

https://wweb.dev/resources/css-separator-generator

https://freeillustrations.xyz/

for increase.com

https://www.transparenttextures.com/

https://css-doodle.com/

https://leaverou.github.io/css3patterns/

this guy

super advanced pokemon shiny card gradients

Generative Gradients

Generateive SVG

Image Placeholders - blurring -

(and gatsby image and nextjs image)

Dimming/coloring text on background images

True Grit Texture Supply

PNG textures (paid)

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

An AI-powered command-line tool to remove the background from images and videos. It uses deep learning to perform background removal with a simple interface.

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

https://cleanup.pictures/

remove objects, people, text and defects from any picture for free

https://cleanupphotos.com/

https://demos.algorithmia.com/colorize-photos

relight images

https://twitter.com/dh7net/status/1567813168990232578

edit photo in browser no BS

AI Colorizer

https://animatedbackgrounds.me/

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).

How to Favicon in 2021

the 6 favicon types you need

Favicon InBrowser.App

A modern pure-frontend favicon generator. Support SVG, maskable and dark mode. Optimize PNG and SVG outputs.

Real Favicon generator

pop in an image, get back a favicon! The most comprehensive one for all platforms (Windows, iOS, Android)

Favicon.io

Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats

FontIcon

Generate favicons and images from Font Awesome icons

Favicon Generator

another one

https://textmoji.app/

small text icons meant for Slack but also can use for faviconning

SVG Favicon maker

supports emojis and 2 letter favicons with custom fonts

you can

put the scroll percentage!

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/

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

Note you can put gradients on SVG icons manually

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 with Clean, consistent, customizable SVG icons available as treeshakable packages in all frameworks.; "Lucide 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…

rauchg feature

https://iconoir.com/

free open source library with 1000+ SVG Icons, designed on a 24x24 pixels grid

https://iconic.app/

Free, “do wtf you want with” pixel-perfect SVG icons

https://teenyicons.com/

tiny minimal 1px icons

Google icons

Google的官方图标库，遵循Material Design指南。完全免费使用。

Material Design

https://material.io/resources/icons/?style=baseline

Circum Icons

Consistent open source icons as SVG for React, Vue and Svelte.

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://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/

free SVG icons for popular brands. Simply click the icon you want, and the download should start automatically.

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://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/

A simple, consistent open-source icon set designed to be used in a wide variety of digital products

https://iconscout.com/unicons

and https://github.com/Iconscout/react-unicons

https://www.zondicons.com/

https://linearicons.com/free

animated icons

http://game-icons.net/

A constantly-growing collection of black-and-white icons. Available in SVG or PNG. CC-BY-3.0.

Covid 19 icons -

https://kenney.nl/

thousands of free game assets. https://news.ycombinator.com/item?id=42671472

https://opengameart.org/

Free, legal art for open source game projects (includes models, sprites, textures, sounds, music).

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.

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

Iconify

-> use in https://github.com/antfu/unplugin-icons

https://react-icons.github.io/react-icons/

Popular icons in your React projects easily.

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

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://www.iconfinder.com/

Iconfinder provides beautiful icons to millions of designers and developers. Most icons are available under attribution. See individual licenses for more details.

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

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)

http://fmc-modeling.org/

FMC modeling - only rectangles and round things

How to Draw Architecture Diagrams

https://excalidraw.com/

(free, open source)

https://miro.com/

freemium, used by Maggie

https://www.draw.io/

now shifted to https://www.diagrams.net/ (free) - has VS Code extension

https://inkscape.org/

(free)

https://whimsical.com/

($10/mo)

https://www.lucidchart.com/

Lucidchart is the intelligent diagramming application that brings teams together to make better decisions and build the future.

https://www.gliffy.com/

a tool for creating the framework, UML diagrams, flowcharts, wireframes and more.

https://diagrams.net/

also known as draw.io

https://www.ilograph.com/

https://zenuml.com

https://www.simplediagrams.com/

Diagramming tool for quick hand-drawn-style sketches.

Microsoft Visio

https://www.plectica.com/

more canvas diagramming tools

software arch diagrams

UML:

http://fmc-modeling.org/

FMC modeling - only rectangles and round things

https://www.websequencediagrams.com/

a simple webapp to work out object interactions arranged in time sequence.

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/

(Freemium, Closed Source, Diagram as code, Ease of use - Easy, Visual Appearance - Outdated). Examples - Link

http://sdedit.sourceforge.net/

Quick Sequence Diagram Editor (but doesnt seem active)

Specifically for BPMN:

Azimutt

is Open-Source and makes database design easy 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

Mocodo

French-flavored ERD, aka Merise MCD, where the layout is constrained to a grid

Amazon architecture icons:

as well as the software that has them built in

https://awsicons.dev/

AWS icons and https://aws-icons.com/

Google Cloud icons, cheat sheet and other assets:

https://www.draw.io/

now shifted to https://www.diagrams.net/ (free) - has VS Code extension

https://www.lucidchart.com/

Lucidchart is the intelligent diagramming application that brings teams together to make better decisions and build the future.

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!

lynn langit's list

the 5 types of arch diagrams

https://gojs.net/latest/samples/decisionTree.html

interactive diagrams

4 major text-to-graph langauges (Comparison

graphviz/dot - useful inside jupyter

mermaid

(Free, Open Source, Diagram as code, Ease of use - Easy, Visual Appearance - Modern). Examples - Link

https://plantuml.com/

(Free, Open Source, Diagram as code, Ease of use - Intermediate, Visual Appearance - Outdated) Examples - Link, Link

https://github.com/terrastruct/d2

D2 is a modern diagram scripting language that turns text to diagrams.

new one:

http://blockdiag.com/en/

python's diagrams

(📥 1M / month · 📦 140 · ⏱️ 22.11.2025):

https://structurizr.com/

Modelling tool based on the C4 Model (see above).

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:

Node based GUIs:

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!

SQL

Online database schema diagram editor with SQL import, AI generation, and real-time team collaboration.

https://www.cloudskew.com/

Wobble paint

. Pico8 editor that give life to pixel art with a little wobble.

https://wireflow.co/

free open source visual designer for user flows. collaborative.

AI driven design

with wireframe

Browser:

https://screenshot.rocks/; with depth of field

https://www.brandbird.app/

Books:

https://3d-book-css.netlify.app/

and https://3dbook.xyz/

book cover advice

Macbook:

animate them, why not

(previously https://deviceful.app/)

phone/watch:

animated 3D mockups for your app designs.

including making 3d video!!!

example https://twitter.com/0xca0a/status/1583504417004789763?s=46&t=xS8iIAOyRQhHzWI8mn4Owg

and

other devices

is a tool that helps you create beautiful device mockups to share on social media platforms, with the screenshot of your website or mobile application, for free.

3D mocks:

Screenstab

Turn screenshots into dramatically angled photos

Facebook Design Devices

images and Sketch files of popular devices.

Shotsnapp

create beautiful device mockup presentation for your digital app and website design.

https://www.ls.graphics/devices-mockups

Lstore Graphics

Includes video

Creative Market

device mockups

Pika

screenshot, website and device mockups (Paid, $99 one time)

Record your device

Screen recorder for polished videos with automatic motion effects.

https://www.reddit.com/r/FreeIllustrations/top?t=all

:star:

An open-source illustrations website, where you can change the colors of the illustrations online before downloading.

:star:

diverse, customizable human svgs

https://fresh-folk.com/

is similar

:star:

"Beautiful, FREE illustrations of black people for your next digital project"

hire custom designs via

:star:

High quality vector graphics with worry-free licensing for personal and commercial use.

:star:

illustrations to go with Streamline icons

https://icons8.com/illustrations

(previously ouch.pics)

:star:

good random generator by Pablo Stanley. Made for Sketch, Figma, InVision Studio and Adobe XD.

:star:

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/

A giant collection of clip art. CC0.

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://opengameart.org/

Free, legal art for open source game projects (includes models, sprites, textures, sounds, music).

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/

Paid. Combo set of 108 customizable illustrations.

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://lukaszadam.com/illustrations

library of Free Illustrations and Icons for everyone.

Covid 19 icons -

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/

copyright: CC-BY licensed vector image illustrations with sources.

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/

free surrealist illustrations for your projects.

https://github.com/MariaLetta/mega-doodles-pack

copyright: Free and big CC Attribution-ShareAlike 4.0 vector pack with hand-drawn doodles for presentations, social media, blog posts and so on.

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://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://news.ycombinator.com/item?id=33273022

RoughJS Animated Annotation -

https://excalidraw.com/

(free, open source)

https://alias-rahil.github.io/handwritten.js/

http://pixelartmaker.com/

https://nostalgic-css.github.io/NES.css/

NES-style CSS Framework. Demo, Docs, Repo | #SCSS

SNES music

exampels of ascii art in code:

(HN discussion)

https://fatiherikli.github.io/archetype/

https://textik.com/#a4ec12a68785f25f

http://asciiflow.com/

https://monodraw.helftone.com/

ASCII art editor for creating and editing text-based drawings. 🍎

https://github.com/asciitosvg/asciitosvg

ascii to svg diagrams

from picture to ANSI art

ascii font generator

https://mbarkhau.keybase.pub/asciigrid/

https://gitlab.com/mbarkhau/asciigrid/

https://ozh.github.io/ascii-tables/

https://github.com/ozh/ascii-tables/

https://www.netpen.io/main/

https://github.com/ebirger/netpen/

https://github.com/marionebl/svg-term-cli/

Share terminal sessions via SVG.

https://ivanceras.github.io/svgbob-editor/

https://github.com/ivanceras/svgbob/

converts ASCII diagrams into SVG graphics

https://www.textualize.io/

https://charm.sh/

http://maaslalani.com/slides/

https://github.com/peterbrittain/asciimatics/

A cross platform package to do curses-like operations, plus higher level APIs and widgets to create text UIs and ASCII art animations.

https://sli.dev/

https://github.com/slidevjs/slidev/

Presentation Slides for Developers.

https://github.com/maaslalani/slides/

Terminal based presentation tool.

https://github.com/d0c-s4vage/lookatme/

https://github.com/chunqiuyiyu/ervy/

https://wtfutil.com/

https://github.com/ggerganov/wtf-tui

https://snappa.com/

https://www.canva.com/

Design great social media images with text and graphics for Free or a few bucks depending on the images you select

https://www.fotojet.com/

esp for photo collages

https://studio.polotno.dev/

:star:

of course

https://www.flickr.com/creativecommons/

Many Flickr users have chosen to offer their work under a Creative Commons license.

https://isorepublic.com/

copyright: ISO Republic provides exclusive free stock photos for creatives.

https://negativespace.co/

Stock photos added every week.

https://www.everypixel.com/

Reverse image search engine. Search across 50 leading stock images agencies. It's possible to filter only free or only paid images.

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

https://artvee.com/

public domain art (in particular check out the NASA collection)

https://startupstockphotos.com/

copyright: Startup based photography.

https://www.nappy.co/

"Beautiful, high-res photos of black and brown people. For free."

https://freenaturestock.com/

Royalty-free, use them however you want, Nature Stock Photos.

http://imagebase.net/

https://visualsofearth.com/c/

nature, space, desert, etc. mobile focused.

http://photos.bucketlistly.com/

A free creative common collection of over 5000+ travel photos from all over the world anyone can use.

https://500px.com/

(premium - search by color)

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/

Download free stock photos, backgrounds and images in high‑resolution for personal and commercial use.

https://photos.icons8.com/creator/

Create custom stock photos

https://generated.photos/

AI-generated stock photos

https://photos.icons8.com/

don't search for stock photos, create them.

https://duotone.shapefactory.co/?f=f56468&t=27184f&q=_&i=oMpAz-DN-9I

(unsplash with duotone filter)

https://allthefreestock.com/

Get all the Free Stock Images, Videos, Music and Icons in one location.

https://thenounproject.com/search/photos/?q=happy

random low quality list

https://github.com/neutraltone/awesome-stock-resources

. A collection of links for free stock photography, video and Illustration websites.

https://burst.shopify.com/

Burst from Shopify - Free stock photos for everyone

https://deathtothestockphoto.com/

paid-for stock photo service with a mailing list for occasional free packs, and a focus on not looking like stock photography.

https://www.stocksy.com/

(premium)

Image modification for hover effects:

https://pexels.com

Royalty free high-resolution stock photos, licensed under Creative Commons Zero (CC0)

https://pixabay.com/videos

https://mixkit.co

. Free stock music, SFX, and video footage.See also: Assets & Libraries → Audio: SFX & Music Libraries

:star:

High quality vector graphics with worry-free licensing for personal and commercial use.

https://www.pond5.com/

https://videohive.net/

3,048,864 Video effects and stock footage

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.

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

https://detail.co/

https://runwayml.com/

Magical AI tools, realtime collaboration, precision editing, and more. Your next-generation video creation suite.

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://powtoon.com

nice studio for cartoony professional videos and presentations with nice transitions

https://www.doodly.com/

whiteboard doodle explainer videos. see demo $39/mo

website demo video

https://www.reddit.com/r/SideProject/comments/ra7inj/app_to_create_a_website_videos/

code animation based on text diffs

tips for product tours

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://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-ori…

https://www.medialuv.com/

design animation studio

Fireship/jeff delaney

Florin pop

https://boringavatars.com/

https://robohash.org/

Generates unique avatars from usernames or any text.

identicons

https://github.com/emeraldpay/hashicon

instead of showing people's faces, try stippling

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

branding color with accents:

meta theme-color

dont use default number input attributes - do it all in js

links

multiline capable inline links

https://kazzkiq.github.io/balloon.css/

niche tip on tooltips js perf

https://www.floating-ui.com/

from tippyjs guy

details/summary css - use details[open] to target

Link and Button hover effects

Image modification for hover effects:

shrinking header on scroll

https://smolcss.dev/

more simple CSS tricks for responsive elements

prefer click menus over hover menus

how to make settings

Defensive CSS

breadcrumb dividers:

https://getcssscan.com/css-checkboxes-examples

60+ beautiful checkboxes

make your button look like an actual button

CSS keyboard buttons (Linus' toes)

https://frontend.horse/articles/buttons-that-spark-joy/

https://getcssscan.com/css-buttons-examples

CSS3 3D Buttons

Button Deluxe v3 A whimsical 3D pure CSS button

https://cssbuttons.vercel.app/

cssbuttons: HTML & CSS Buttons Collection Built in React

https://simurai.com/archive/buttons/

bonbon sweet css 3d buttons

https://markodenic.com/tools/buttons-generator/

moving lightsource on hover css buttons idea

moving gradients on hover

form submission UX

Accessible Styled Forms

accessibility for all elements

Form Design Best Practices

Form Wizard

Complex Forms

Form Validation UX

Form Validation

use input:not(:focus):not(:placeholder-shown):valid for non freakout UX

WTF Forms: Nicer Forms eg Radio Buttons with pure CSS

Output-inspired form:

show button when placeholder-shown:

Toggles:

3D LED switch:

The Crazy Egg Guide to Great Form UI and UX

Best practice, research insights and examples by Geri Reid

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://github.com/Pikaday/Pikaday

A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS (archived)

https://twitter.com/timolins/status/1429761631471480838

https://www.zapsplat.com/

. Large free SFX library.

https://www.myinstants.com/index/se/

YouTube's Audio Library

https://icons8.com/music

download free background music for your videos.

https://freesound.org/

a collaborative database of Creative Commons Licensed sounds. Browse, download and share sounds.

https://pixabay.com/music/

Royalty free music from Pixabay.

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

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

https://artlist.io/

may have better licensing https://www.youtube.com/watch?v=mYU6XhORomg but no fx

https://www.bensound.com/

download creative commons music, royalty free music for free and use it in your project.

https://www.audacityteam.org/

An easy-to-use, multi-track audio editor and recorder for desktops, great free alternative to Adobe Audition. Features recording from real and virtual devices, import/export to a wide range of formats…

https://joshwcomeau.com/react/announcing-use-sound-react-hook/

https://source-separation.github.io/tutorial/landing.html

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…

Apache E Charts

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:

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

(example)

https://github.com/cruip/tailwind-dashboard-template

This one is made with Tailwind and React and includes optional chart components built with Chart.js.

https://react-smooth-range-input.now.sh/

Theme-ui-sketchy -

roughjs components with themeui

React Physics Dragger

React-Designer

Easy to configure, lightweight, editable vector graphics in your react components.

React Hamburger Icons

note issues with hamburger menus

React Curved Arrow

https://github.com/tienpham94/react-awesome-spinners

requires styled components

https://github.com/davidhu2000/react-spinners

A collection of loading spinner components for react.

https://github.com/JoshK2/react-spinners-css

Amazing collection of react spinners components.

https://www.npmjs.com/package/react-loaders-kit

200kb tho

https://github.com/adexin/spinners-react

https://gooey-react.netlify.app/examples/rotating-loader/

PDF viewer

https://cogoport.github.io/cogo-toast

https://fkhadra.github.io/react-toastify/

https://github.com/thedevelobear/react-rewards

React Confetti

React DOM Confetti

Perspective stairstep text effects

(in action: http://tennentbrown.co.nz)

Split text animations

https://party.js.org/

add particle effects to a web page, specifically confetti and sparkles.

Duotone blend modes:

full guide to blend modes

Decovar Font with Text shadows:

(and other Variable Fonts by Mandy)

ClippyJS

Rythm.js - make your page dance

A javascript library that makes your page dance.

XKCD chart

Gooey Effect with SVG and Filters

Backdrop Filters and Multiple Inner Shadows

Swyx CSS Filter toy

CSS motion blur on css tricks

Instagram filters created with CSS filters, by Una

CSS only hover effect with Headers

SVG iPhone mock and animated notification transition

RoughJS Animated Annotation -

Greensock GSAP scroll trigger demo with a ThreeJS Plane model

little HTML tricks that are handy

https://1stwebdesigner.com/css-effects/

great svg ideas

exponential smoothing animation in js

https://x.com/DavidKPiano/status/1946795010038399384

MAKE SURE TO CHECK OUT

Experimental computational design platform for exploring generative space.

https://twitter.com/JoshWComeau/status/1170358024319492097?s=20

Sarah Drasner picks

Lea Verou CSS Secrets

https://leaverou.github.io/css3patterns/

CSS 3D Text

3D CSS hover effects

3D CSS text rotation

collapsible list item tree view

set cursor to emoji using SVG

swipey image grids using SVG

animated focus

https://ui.glass/generator/

Get started with this free CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties.

https://glass3d.dev/

https://news.ycombinator.com/item?id=44445238

frosted glass sticky header

note that apple has a private css property: -apple-visual-effect: -apple-system-glass-material

modern 2025 css

Box shadows

drop shadows - eg -1px left -1px top - makes buttons look stamped; text shadows; experiment with multiple shadows on one element

https://getcssscan.com/css-box-shadow-examples

Curated collection of 93 beautiful CSS box-shadow. Click to copy.

Designing Beautiful Shadows in CSS

inspired the smooth shadows generator

https://www.joshwcomeau.com/shadow-palette/

(https://css-tricks.com/shadow-palette-generator/)

Card border Generator

Broider - 9-patch css grid borders

Make 9-patch borders, export as CSS.

CSS Scroll Shadows

Conic gradient borders

Components.ai box shadows

Emoji Shadows

Neuomorphism Generator

primer on skeuo vs flat vs neuomorphism

background-blend-mode color-burn, lighten, multiply are cool

https://labs.jensimmons.com/#shapes

https://bennettfeely.com/clippy/

https://youtu.be/u9bDe3Bw0sA

CSS tricks clip path animation tutorial

slanted image gallery with clip path

core tool

https://picsvg.com/

https://svgurt.com/#/

Web-based PNG to SVG creative noodler.

https://codepen.io/jesstelford/pen/PaBMrL

small dynamic SVG placeholders

https://github.com/woltapp/blurhash

small dynamic SVG placeholders for blurring up

https://www.usetracy.com/

make SVGs from monochrome drawings or images

https://omatsuri.app/svg-to-jsx

https://svg2jsx.com/

https://react-svgr.com/playground/

https://boxy-svg.com/

https://editor.method.ac/

https://vecta.io/

collaboration tools for teams, and also supporting diagrams, Autocad drawings, Vision stencils and drawings.

https://macsvg.org/

light open-source macOS application for SVG editing and animations

https://github.com/SVG-Edit/svgedit

fully-fledged SVG editor for sophisticated SVG editing.

https://jakearchibald.github.io/svgomg/

SVGOMG is SVGO's Missing GUI, aiming to expose the majority, if not all the configuration options of SVGO.

SVGO

https://svgx.app/

free desktop SVG asset manager which allows you to keep all SVGs in one place. You can bookmark, search and preview SVG icons, live-edit the SVG markup, preview the icons in dark mode and copy/paste markup and CSS with one click. By default it also uses SVGO for SVG optimizations. Available for…

https://iconset.io/

You can drag icons from Iconset directly into Sketch, Figma, Adobe XD and pretty much anything else, without plugin or extension installs. Plus, you can also sync icons across devices via Dropbox or similar services, and publish and share your icon sets. Available for Mac and Windows.

SVG Sprites generator

context https://www.smashingmagazine.com/2021/03/svg-generators/#svg-sprites-generator

https://speckyboy.com/css-svg-canvas-masks/

https://www.blobmaker.app/

generate some fancy blobs.

https://squircley.app/

generator of organic shapes for any kind of visuals or background images. You choose the rotation, the scale, the “curvature” and the fill color, and the tool takes care of the rest.

https://inkscape.org/

(free)

https://svg-path-visualizer.netlify.app/

https://svgcrop.com/

remove blank space automatically

https://msurguy.github.io/svg-cropper-tool/

more refined control of cropping with additional options for cropping style — circle, polygon, custom shape

SVG Polygon Generator

allows you to define the number of sides, radius, spacing and it generates a SVG element for you.

https://rawgraphs.io/

SVG Data Visualization Generator - sunburst, circular dendrogram or multiple convex hull, for example. with tutorials: https://rawgraphs.io/learning

https://pavellaptev.github.io/warp-svg/

https://css-tricks.com/animate-blob-text-with-svg-text-clipping/

more text effects

animate an existing svg

SVG Artista is a tool that helps you animate stroke and fill properties in your SVG images with plain CSS code. It should work fine with path, line, polyline, rect, circle, ellipse and polygon elements. It cannot animate SVG gradients though, so please keep that in mind.

SVG icon transitions

https://nucleoapp.com/tool/icon-transition

SVG Icon Transitions Generator

scroll based svg text path animation

stroke path animation

https://maxwellito.github.io/vivus-instant/

animate svg strokes

https://www.svgator.com/

dedicated editor for SVG animations with plenty of dedicated panels for everything from skewing to stroke path and filters

SVG animation tool

https://x.com/emilkowalski/status/2031742178297335879

Buttons, hover, inputs, and loaders

general

animate an existing svg

SVG Artista is a tool that helps you animate stroke and fill properties in your SVG images with plain CSS code. It should work fine with path, line, polyline, rect, circle, ellipse and polygon elements. It cannot animate SVG gradients though, so please keep that in mind.

general

A JavaScript animation engine.

https://www.theatrejs.com/

animate DOM elements or WebGL using a convenient visual editor that works along with the code you write.

motion graphics

The motion graphics toolbelt for the web.

https://www.transition.style/

CSS transitions "My favourites are the ones that incorporate some hesitation in the animation, for an added uniqueness"

general

簡單又好用的動畫庫，網站內有簡單的範例跟demo效果

https://animxyz.com/

Tailwind for animations, since you’re only using HTML classes.

general

Burgers

Burgers

Layout

Lightweight magic-move library for configurable layout transitions.

Hover and loaders:

Graphic animations:

Platform for creating, editing, and shipping Lottie and dotLottie animations. Browse a huge motion library or use Lottie Creator in the browser.

https://www.pixeltrue.com/free-illustrations

free vector illustrations

HTML animation?

(paid)

Page Transitions with swup

(css tricks)

css animation without keyframes

collection of css animations

https://ericfortis.github.io/web-animations/

Open source plain JS, CSS, HTML, SVG animations

animation introduction & examples

web components

Spinners

https://joebell.co.uk/sketches/loading-disco

demo:

Buttons, hover, inputs, and loaders

https://github.com/JoshK2/react-spinners-css

Amazing collection of react spinners components.

https://andrew.wang-hoyer.com/experiments/svg-animations/

Single Element CSS Spinners

https://whirl.netlify.app/

100+ animated loaders

https://loading.io/css/

Fast pure html/css spinners

https://react-simple-animate.now.sh/

https://github.com/brunnolou/react-morph

Morphing Ui transitions made simple

https://github.com/kitze/react-genie

Page transitions

css animation without keyframes

Learn how to use Framer Motion with Sam Selikoff's

On tutorials vs contextual tips:

https://www.appcues.com/

show people things they need as they need them

https://github.com/zurb/joyride

jQuery feature tour plugin, used in https://www.airdna.co/

React Curved Arrow

https://blog.appsumo.com/welcome-email-examples/

https://emptystat.es/

online SVG editor -

GIMP alternative -

Image modification for hover effects:

Make photo 16x9 small tool

Enlarge low res images with ML:

Lunacy -

Graphic design software with built-in assets

Invision

https://www.ls.graphics/scene-creators

https://www.ls.graphics/ui-ux-tools

FOSS

A must-have devtool for web developers for quicker responsive web development.

http://sizzy.co/

(paid)

https://polypane.app/

(paid)

more alternatives

https://100dailyui.webflow.io/

Free Figma library of products, elements, and screens.

:star:

good random generator by Pablo Stanley. Made for Sketch, Figma, InVision Studio and Adobe XD.

https://www.figmafreebies.com/

7hr figma course

http://freebiesketch.com/

https://www.sketchappsources.com/

Apple design resources

Image modification for hover effects:

http://components.ai/

Trianglify

generative artistry

Canvas Cards

Open Processing

Curtains.js

(example)

Polygonjs

open-source, node-based WebGL design tool, to create 3D scenes procedurally.

https://github.com/shuding/cobe

webgl globe (tweet, stripe)

https://github.com/makepad/makepad

[makepad-widgets] - Makepad is a creative software development platform that compiles to wasm/webGL, osx/metal, windows/dx11 linux/opengl.

https://www.youtube.com/watch?v=Xr6dtXw0Ipg

https://www.kukla-kit.com/

Huge pack of 3D elements accessible directly from Figma.

https://babylonjs.medium.com/babylon-js-4-2-simplicity-reimagined-965f88d0fad

Httpster

A curated list of the best sites around the Internet.

Minimal Gallery

Godly.website

Hoverstat.es

showcase great work from the bleeding edge of digital culture for, and with, the creative community.

Really Good Emails

4,150+ handpicked email design.

SaaSFrame

Dribbble

an online community for showcasing user-made artwork. A great resource to get inspired by others work.

Product Hunt

Daily launches, and a launch channel in its own right.

Landingfolio

App Fuel

Refero

Read.cv

https://pageflows.com/

user flow videos and screenshots to inspire you when you're stuck. Discover mobile and web design patterns for over 160 different tasks.

https://uimovement.com/

. Only the best UI design inspiration, right in your inbox.

https://land-book.com/

created this place for Designers, Developers, Product Owners, Marketing Managers, Startupers, Freelancers and, really, for everyone who appreciates fine designs and well-crafted sites.

https://uidesigndaily.com/

https://www.siteinspire.com/

is a showcase of the finest web and interactive design.

http://www.cssmania.com/

https://www.uisources.com/

over 500+ interactions from the best designed and top-grossing apps on the App Store today.

Codrops

https://collectui.com/

https://theanimatedweb.com/

https://goodui.org/

"leaked ab tests"

http://ui-patterns.com/

User Interface Design patterns.

https://uigarage.net/

the one-stop shop for designers, developers, and marketers to find inspiration, tools and the best resources.

https://pttrns.com/

design patterns for popular mobile apps.

https://thefwa.com/

to showcase cutting edge creativity, regardless of the medium or technology used.

steve schoger ui ux inspo list

https://landings.dev/

Find the best landing pages for your design inspiration based on your preference.

https://interfaceingame.com/

https://www.gameuidatabase.com/

The ultimate screen reference tool for game interface designers. Explore over 500 games and 19,000 individual images, and filter by screen type, material, layout, texture, shapes, patterns, genres and more!

movie UIs

game movie and other fantasy UIs

https://10ideesrecuesenuxdesign.castoretpollux.com/en/

https://www.cssdig.com/

for analyzing your css

http://quotes.rest/

https://dogapi.dog/docs/api-v2

(just data, no pics)

https://api.chucknorris.io/

https://jokeapi.dev/

https://v2.jokeapi.dev/joke/Any\?type\=single\&blacklistFlags=nsfw,racist,sexist,explicit

https://dev.to/dailydevtips1/15-better-lorem-ipsum-generators-3f99

simple quote

OpenWeather is better and has 1M calls per month for free.

https://developer.yr.no

I've set up an iPad in my hallway to show their SVG weather charts. Super simple to integrate into a simple home made…

https://source.unsplash.com/

A simple API for embedding Unsplash photos.

https://skuawk.com/

https://github.com/imsky/holder

https://lorempixel.com/

an API that serves stock photos at specified sizes and categories. Great for placeholder/user-generated content.

http://placeimg.com/

https://picsum.photos

http://placehold.it/300x300

https://placedog.net/

https://placebear.com/

http://placekitten.com/

https://dog.ceo/

http://placebeer.com/

https://baconmockup.com/

https://www.placecage.com/

https://placekeanu.com/

https://www.stevensegallery.com/

https://www.fillmurray.com/

https://assetroulette.com/

Get a random image: <img src="https://api.assetroulette.com/random_image">; Get a random meme image: <img src="https://api.assetroulette.com/random_meme">; Get a random image from Unsplash: <img src="https://api.assetroulette.com/random_unsplash">; Get a random CSS definition for base classes:…

https://www.uifiller.com/

https://randomuser.me/

https://jsonplaceholder.typicode.com/

Fake Online REST API for Testing and Prototyping.

https://swapi.dev/

theres a graphql swapi as well

https://pokeapi.co/api/v2/

mock fake user events

https://openweathermap.org/guide

https://github.com/public-apis/public-apis

A comprehensive list of free APIs for various purposes.

https://github.com/public-api-lists/public-api-lists

Free APIs for use in software and web development (fork of public-apis)

https://public-apis.io/

(A Directory of Free Public & Open Rest APIs)

https://github.com/Marak/faker.js

generate fake pdf https://aws.amazon.com/blogs/aws/new-for-aws-lambda-container-image-support/

https://github.com/Rolstenhouse/unofficial-apis

https://devresourc.es/tools-and-utilities/public-apis

https://free-for.dev/#/?id=apis-data-and-ml

一个专门为开发者收集整理免费在线工具资源的网站

Graphext collection

91 datasets

Data.world

There are 133398 open data datasets available

https://www.data-is-plural.com/

dataset newsletter

https://upscale.wiki/wiki/Dataset_Database

for training image upscalers

https://huggingface.co/datasets

the central index for modern NLP datasets, with versioned, streamable loaders.

https://datasets.quantumstat.com

https://paperswithcode.com/datasets

Thousands of machine learning datasets provided by Papers With Code.

https://registry.opendata.aws

https://docs.microsoft.com/en-us/azure/azure-sql/public-data-sets

https://guides.library.cmu.edu/az.php

Carnegie Mellon University listing of 750 databases, datasets, and research support tools.

Google datasets

Dataset Search is a search engine for datasets. Using a simple keyword search, users can discover datasets hosted in thousands of repositories across the Web.

Awesome Public Datasets

An awesome repository full of open datasets from an abundance of different categories.

Kaggle Datasets

Extensive collection of datasets for practice in data analysis.

The home of the U.S. Government’s open data

United States federal repository of data, tools, and resources to conduct research, develop web and mobile applications, design data visualizations, and more.

Chinook:

GitHub Activity data

(blog) This 3TB+ dataset comprises the largest released source of GitHub activity to date. It contains a full snapshot of the content of more than 2.8 million open source GitHub repositories including more than 145 million unique commits, over 2 billion different file paths, and the contents of…

Los Alamos cybersecurity data

This data set represents 58 consecutive days of de-identified event data collected from five sources within Los Alamos National Laboratory’s corporate, internal computer network.; The data sources include Windows-based authentication events from both individual computers and centralized Active…

Numerai v4

1191 features and targets for the entire history of the @numerai tournament. 2.4 million rows and 574 eras. One of the hardest tabular dataset competitions on the planet.

Enron email

(source): 500,000+ emails from 150 employees of the Enron Corporation (podcast)

ICIJ Offshore Leaks db

This ICIJ database contains information on more than 810,000 offshore entities that are part of the Pandora Papers, Paradise Papers, Bahamas Leaks, Panama Papers

Kaggle:

GDELT Project

"monitors the world's broadcast, print, and web news from nearly every corner of every country in over 100 languages and identifies the people, locations, organizations, themes, sources, emotions, counts, quotes, images and events driving our global society every second of every day, creating a…

Hex's Horoscope

Welcome to the inaugural Hex Horoscope, a new monthly series in which I attempt to divine the general trend of the month to come using Hex. We'll start with a visual look at how the first week of August stacks up to the competition, and then do some actual predictive modeling to take a stab at…

BigQuery global daily weather data

Using the BQ geo functions to overlay weather with key locations we cared about was a lot of fun. michael

SF Tree dataset

Every tree in San Francisco (that are managed by the department of public works, so this excludes trees in places like Golden Gate Park): 196,000 trees listed and they update it constantly! simonw

NYC taxi dataset

Yellow and green taxi trip records include fields capturing pick-up and drop-off dates/times, pick-up and drop-off locations, trip distances, itemized fares, rate types, payment types, and driver-reported passenger counts.; Good for teaching: scalable sizes, moderate amounts of bad data; (spark +…

Auckland Transport data

Airbnb data on NY, London, SF, Paris, barcelona, Amsterdam

GeoNet earthquake catalog

LINZ data service

Correlates of War datasets

r/dadjokes dataset

https://dadjokes.dfdx.me/

Flight delays

Disney world wait times

Trashnet

Code (only for the convolutional neural network) and dataset for mine and Mindy Yang's final project for Stanford's CS 229: Machine Learning class. The dataset spans six classes: glass, paper, cardboard, plastic, metal, and trash. Currently, the dataset consists of 2527 images. The pictures were…

NFL play by play data

The package contains NFL play-by-play data back to 1999. Includes completion probability (cp), completion percentage over expected (cpoe), and expected yards after the catch (xyac_epa and xyac_mean_yardage) in play-by-play going back to 2006. Includes drive information, including drive starting…

https://www.goodemailcopy.com/

https://www.swipefiles.co/

https://fakeclients.com/ui

https://uxtools.co/challenges/

https://www.frontendpractice.com/

https://www.codewell.cc/

https://cssbattle.dev/

Online CSS Code Golfing battleground. Here, players from all around the world try to visually replicate "Targets" in smallest possible CSS code and battle it out to get to the top of the leaderboard.

https://www.getstark.co/library/

https://webflow.com/accessibility/checklist

https://10015.io/

https://www.fetoolkit.io/

https://github.com/bradtraversy/design-resources-for-developers

https://tiny-helpers.dev/

https://www.uigoodies.com/

https://www.uplabs.com/

is the leading community of creatives, offering the best downloadable resources, every day.

https://github.com/neutraltone/awesome-stock-resources

. A collection of links for free stock photography, video and Illustration websites.

https://nodesign.dev/

https://github.com/goabstract/Awesome-Design-Tools

/ https://github.com/LisaDziuba/Awesome-Design-Tools

https://github.com/emmabostian/design-inspiration

https://undesign.learn.uno/

. Design learning resources.

https://user-interface.io/

https://dev.to/theme_selection/best-design-resources-websites-every-developer-should-bookmark-1p5d

https://dev.to/joserfelix/40-high-quality-free-resources-for-web-development-10o3

UI Density in Time and Space

high information density UIs

incl mcmaster carr

How do I learn design?

(CodeNewbie)

Design foundations for developers

(Syntax)

Design tips for developers

(Syntax)

Tactical design advice for developers

(The Changelog)

UI Design for Developers

(Meng To)

Learning How to Design

(ShopTalk)

You can create a great looking website while sucking at design

Laws of UX

a collection of the maxims and principles that designers can consider when building user interfaces.

100 Things I Know About Design

The self taught UI/UX designer roadmap

https://learnui.design/blog/4-rules-intuitive-ux.html

Obey the Law of Locality; Anything But Dropdowns; Pass the Squint Test; Teach By Example

https://littlebigdetails.com/

web interface handbook

Design Principles

7 Gestalt Principles of Design

Visual design rules you can safely follow

Use near-black and near-white instead of pure black and white; Saturate your neutrals; Use high contrast for important elements; Everything in your design should be deliberate; Optical alignment is often better than mathematical alignment; Lower letter spacing and line height with larger text.…

https://twitter.com/mrcndrw/status/1283078825870532609

https://internetdevels.com/blog/the-10-commandments-of-user-interface-design

(infographic)

Simple Layout checklist

Clear idea of purpose, target audience, where/how long it will be seen; Information hierarchy (vary size, contrast, position); Clear visual structure - pick the most suitable way to group elements; Space - leave enough whitespace. Too much > too little; Alignment - use as few lines as possible

Human Interface Guidelines from Apple, Microsoft, Elementary OS, IBM, etc

Apple Spatial Computing Design videos:

Apple's HIG was updated for 2022

https://developer.apple.com/videos/play/wwdc2023/10072/

https://developer.apple.com/videos/play/wwdc2023/10076/

https://developer.apple.com/videos/play/wwdc2023/10073/

50 UI tips

https://fifty.user-interface.io/50_ui_tips.pdf

Steve Schoger - Refactoring UI process:

Give text consistent contrast; Don't use grey text on colored backgrounds; Use perceived brightness; Start with too much whitespace; Balance weight and contrast; Supercharge the defaults; Overlap elements to create depth; Use shadows to convey elevation; Shadows have two parts; Create depth with…

Buffer Design tips

Color: emotion, personality; Balance: symmetry, asymmetry; Lines: straight lines for harmony, curved for movement. guide the eyes; Typography: 3 max, san-serif for web, kerning for headlines; Add Contrast with shapes, color, element sizes; Scale: size elemnts differently to draw attention or…

UI Common Mistakes Checklist

Poor contrast; Many primary buttons; Small clickable area; Poor paddings; Icon inconsistency; Text hard to read/scan; Wrong alignment; Not enough whitespace; Poor validation; Proximity violation; Long text lines; Redundant texts; Poor quality of screenshots; Small font-size; Taking full width when…

Simple design:

(rec by Hey designer)

Refactoring UI

Starting from Scratch; Choose a personality; Don't design too much; Detail comes later; Hierarchy; Size isn't everything; Emphasize by de-emphasizing; Layout and Spacing; Establish a spacing/sizing system; Designing Text; Keep your line length in check; Working with Color; Ditch hex for HSL;…

why not hsl

Tracy Osborn Checklist

Reduce Clutter; use ColourLovers for color palettes; Fonts - max 2. Use fancy fonts sparingly; more whitespace; break up walls of text with bullet points; big clear CTA buttons; Headlines: talk benefits not details. short.

Design Details: Principles of Design

Design Details' most downloaded episode of all time!

Double your whitespace

How to design great keyboard shortcuts

Canva Design School

Anyone can make beautiful designs with Canva.

Degreeless.design

https://free-for.dev/#/?id=apis-data-and-ml

一个专门为开发者收集整理免费在线工具资源的网站

https://github.com/Vincenius/link-list

https://github.com/cristurm/nyan-cat

https://github.com/netlify/netlify-drop-demo-site/archive/master.zip

The Design Newsletter

Keep it simple:

you can do the opposite (pick out differences) with

. Interactive game training visual alignment and spacing precision.

for the 4 hour version:

for the 4 week version:

for the 4 month version:

995/1495/2495. 48 lessons, 26 hours

weekly lessons drip fed over email

. An easy to follow design course for people who do amazing things.

i may be signing up for

.. its $1800 though

upcoming design for devs book from adrian twarog

UI Design for Developers

(Meng To)

the non-designer's design book

https://www.frontendpractice.com/

https://www.codewell.cc/