Serious CSS Frameworks

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

Drop-in CSS Frameworks

• Spectre.css
• 2014 HN
• 100 bytes of css to look great nearly everywhere

Fun CSS Frameworks

• LaTeX.css
• Office 97 clipart in svg format
• Commodore 64 CSS
• a2k
• Geocities Bootstrap theme
• Metalmorphism - quality metallic UI kit
• NES.css - style(8bit-like) CSS Framework.
• PSone.css
• React95
• 98.css
• XP.css
• 7.css
• System.css - inspired UI
• Puppertino
• BOOTSTRA.386
• Text UI CSS

No Framework

• consider not using one

CSS Resets

• Chris Coyier comments

React Component Libraries

• Recent comparison/discussion
• Radix UI
• Mantine

• wickedblocks

Responsive Layout Breakpoints

• Tailwind's breakpoints

Fonts

• System Font Stacks
• what are these?
• VS Code Autocomplete - 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: ‘system-ui’, sans-serif;`
• StackOverflow almost-system-font stack
• 'system-ui' generic font family is new, standardizing name across Safari, Firefox and Blink
• Some systems come with good premium fonts - Apple OSes have `“avenir next”, “avenir”, “proxima-nova”`
• Modern Font Stacks - [discussion](https://news.ycombinator.com/item?id=35168652)
• `Freight Text` - garamond), [`PT Serif`](https://fonts.google.com/specimen/PT+Serif)
• `Proxima Soft`
• `Freight Sans` - nova)
• `DIN`
• use a Uniwidth font (not monospace) for interface design
• discussion
• 14 free programming fonts
• fashions/trends
• @edadams
• 40 best google fonts by Typewolf
• 50 selections of google fonts
• Lato
• Fira Sans - related to [Fira Code](https://github.com/tonsky/FiraCode) for devvy stuff
• Raleway
• Open Sans
• Recursive - 1 variable font that can handle both monospace and UI usecases, very versatile
• Erik Kennedy picks from these
• Libre Franklin
• IBM Plex Sans - example: https://thesephist.com/posts/inc/
• Atkinson Hyperlegible
• Inter
• Jetbrains Mono - Monospace font for devvy stuff
• by Gontijo
• statistical data on font usage
• Steve Schoger uses it
• Font variants and oldstyle numbers
• example
• 6 ways to justify font choices in your designs
• Dank Mono
• Harry Roberts
• may be good
• see Kilian Valkhof
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• Sanitize.css
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• Dank Mono
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• see Harry Roberts on Google Font loading perf - you should [self host this](https://wicki.io/posts/2020-11-goodbye-google-fonts/))

Line Width

• Note on the `ch` unit not being EXACTLY 60 chars

Kerning and char spacing

• https://hottips.imgix.net/2020/07/044-tracking-animation.gif
• Example from Steve Schoger

Font Sizing

• `clamp` - size: clamp(1.125rem, 1rem + 2vw, 1.5rem)`
• CSS Tricks - size: clamp(2rem, calc(2rem + 1.2vw), 3rem);`
• `font-size: calc(1rem + 2px + ((100vw - 550px) / 250))` - you can [fit text to screen width](https://twitter.com/shshaw/status/1240647643388395521?s=20)
• Inter/Tailwind font-size combo
• BAD, SLOW fontsize calc
• Sara Soueidan - size: calc(16px + .3vw);`
• Complete font-size notes

Other Typography Resources

• explained - US/docs/Web/CSS/font-smooth)
• FlowType.js
• FitText
• Majuscule
• leading-trim

Other Typography Resources

• DO NOT OVERUSE IT.
• Examples
• Never use black
• more complete primer on color personalities
• yellowish palette
• Adam Wathan
• filters here

Palette Generators

• HSLuv
• chroma.js color palette helper
• HN

Color Gradients

• example - gradients/) in future.
• the "gray zone" problem
• argyleink - You can [really take this to the extreme](https://twitter.com/argyleink/status/1216815958917992450?s=20)!

Color Theory

• A Beginner’s Guide to Applying Color in UI Design
• Sarah Drasner on Color
• Louisa Barret on Color
• Erik Kennedy on HSB
• JustinMezzell on Color - advanced stuff on picking color tone/temperature. [Basic version by Steve Schoger](https://twitter.com/steveschoger/status/1502318105124646924)
• 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
• Inventorying and naming a Color Palette at UXPin
• Reasoning about Color
• Numeric systems of color palettes explained
• Monochromatic color scheme guide
• Canva's color wheel has a color theory guide
• history of primary colors
• RGM to Lab color space math
• Justin Baker on Color Theory
• Erik Kennedy on color variations
• Refactoring UI on Building Your Color Palette
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• How to do Dark Mode right
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory

Color Theory for Data Visualization

• Teej's thread
• How to pick the least wrong colors - An algorithm for creating color palettes for data visualization - ([HN](https://news.ycombinator.com/item?id=31639009))
• Paul Tol's INTRODUCTION TO COLOUR SCHEMES
• How to pick more beautiful colors for your data visualizations
• Colorbrewer schemes
• Matplotlib colormaps
• Storytelling with Data
• 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, David Laidlaw & Karen Schloss. IEEE Transactions on Visualization and Computer Graphics. 2017.
• Color Use Guidelines for Data Representation - Cynthia A. Brewer
• Somewhere Over the Rainbow: An Empirical Assessment of Quantitative Colormaps. Yang Liu, Jeffrey Heer. ACM CHI 2018.

Background Gradients and Patterns

• https://philcoffman.com/
• https://css-tricks.com/
• https://hottips.imgix.net/2020/07/063-burst.jpg?w=1200&auto=compress

Misc Backgroundy Stuff

• True Grit Texture Supply
• now native in iOS/macOS

Favicons

• How to Favicon in 2021
• the 6 favicon types you need
• 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
• SVG Favicon maker - supports emojis and 2 letter favicons with custom fonts

Icons

• icon accessibility - using-icon-fonts/)
• Aria roles
• Lucide
• OK without attribution, don't sell it
• Free Fundamentals of Icon design in 1 hour course by MDS
• Glide Apps
• Feather Icons
• rauchg feature

Icons

• more from Simon
• How to Draw Architecture Diagrams

General Purpose Diagramming

• shifted - has [VS Code extension](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)
• Microsoft Visio
• see hn thread

Entity Relationship Diagrams

• Databasediagram.com – Private, Text to Entity-Relationship Diagram Tool
• Mocodo - flavored ERD, aka Merise MCD, where the layout is constrained to a grid

Device Mocks

• Shotsnapp
• Screenstab
• Facebook Design Devices
• Device Mock-Up Inspiration
• Lstore Graphics
• Creative Market
• Creative Market
• depth of field

ASCII Art

• HN discussion
• list

Stock Photos and Videos

• NASA collection

Video creation tools

• story
• see demo

Tables

• A table with both a sticky header and a sticky first column

Nice React Components

• Folding the DOM

Misc Weird fun stuff

• Variable Fonts by Mandy
• mentioned here
• Codepen
• 2min video
• Gooey Effect with SVG and Filters
• SVG filters
• Backdrop Filters and Multiple Inner Shadows
• 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

Avatars

• everything with an `id`

Misc Weird fun stuff

• codepen
• use Background-origin + transparent borders
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool

SVG/Canvas Masking

• Codepen
• really good for SVG icons, with hover

SVG/Canvas Masking

• css tricks

Loading Spinners

• Codepen

Empty states

• Photopea
• Pagereview.io
• more alternatives

WebGL

• Curtains.js - enhanced-drag-slider-tutorial-with-curtains-js-part-3))
• Polygonjs - source, node-based WebGL design tool, to create 3D scenes procedurally.

3D

• Httpster
• Minimal Gallery
• Godly.website
• Hoverstat.es
• Really Good Emails
• SaaSFrame
• Dribbble
• Landingfolio
• App Fuel
• Refero
• Read.cv
• Codrops

Useful big datasets

• Graphext collection
• Data.world
• NYC taxi dataset - 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.
• GitHub Activity data - datasets/github-on-bigquery-analyze-all-the-open-source-code)) 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 the latest revision for 163 million files, all of which are searchable with regular expressions.
• Los Alamos cybersecurity data
• 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 - got-enron-mail/))
• ICIJ Offshore Leaks db
• GDELT Project
• Hex's Horoscope
• BigQuery global daily weather data
• 241mb - [writeups](https://medialab.github.io/bhht-datascape/), [globe viz](https://tjukanovt.github.io/notable-people)
• SF Tree dataset
• Auckland Transport data
• Airbnb data on NY, London, SF, Paris, barcelona, Amsterdam
• GeoNet earthquake catalog
• Correlates of War datasets
• r/dadjokes dataset
• Flight delays
• NFL play by play data - 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 position and drive result. Includes series information, including series number and series success. Features models for Expected Points, Win Probability, Completion Probability, and Yards After the Catch

Helpful podcasts/talks/articles

• How do I learn design?
• Design foundations for developers
• Design tips for developers
• Tactical design advice for developers
• UI Design for Developers
• Learning How to Design
• You can create a great looking website while sucking at design
• Laws of UX
• 100 Things I Know About Design
• Design Principles
• 7 Gestalt Principles of Design
• Visual design rules you can safely follow
• infographic
• MDS
• Simple Layout checklist
• Human Interface Guidelines from Apple, Microsoft, Elementary OS, IBM, etc
• little details of visual ui design
• Buffer Design tips
• Notion
• UI Common Mistakes Checklist
• Hey designer
• Tracy Osborn Checklist
• Design Details: Principles of Design - Design Details' most downloaded episode of all time!
• How to design great keyboard shortcuts
• The self taught UI/UX designer roadmap
• 7 Rules for Creating Gorgeous UI
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap
• UI Density in Time and Space
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap

More Free Stuff

• Canva Design School
• Degreeless.design
• The Design Newsletter