Design the thing
Created at
||Updated at
Fonts
- Google Fonts (or the privacy-oriented alternative Bunny Fonts)
- Font Share
- Font Playground
- Variable Fonts
- V Fonts
- Font Follows Feeling - A brief type classification
- Marvel or Font Game
- Fonts Knowledge
- Coding Fonts
- subfont
- Fallback font generator
- Fontaine
- Wordmark - Help to choose a font
- glyphhanger - Web font utilities
- Modern Font Stacks
- Free Faces
- Fontsource
- Dev Fonts
- Monaspace
Typography
- Type Scale
- Fluid Type Scale Calculator
- Typographic Scale
- Typographic Scale Calculator
- Fluid Typography Editor
- Typoguide
- Proportio
- Legibility
- The Good Line Height
Interactive Typography Tutorial Some Typography Links
Components
- GUI Challenges
- Component Gallery
- UX Pattern Analysis: Enterprise Data Tables
- Designing Accordions: Best Practices
- Open UI
- UI Playbook
Quick info about accordions can be found here. Some loaders and some more loaders.
Icons
- Fantasticon
- Hero Icons
- Hero
- CSS.gg
- Teeny
- Forge
- System
- Simple
- Eva
- Remix
- Inspyr
- Weather
- Health
- Khushmeen
- Pixel Art Icons
- Humble Icons
- icons.download
- Lucide
- Icones
- Atlas
- Lordicon
- Unicorn
- Flowbite
- Blendicons
- Chromicons
Colors
- Deep Learning Color Generator
- Parametric Color Mixer
- Colorpedia
- An interactive guide to color & contrast
- Poline
- Color contrast checker
A11y
- A11y Coffee
- RTL Styling
- Who Can Use
- Overlay Fact Sheet
- A11y Myths
- Color A11y
- A11y Checklist
- A11y Not Checklist
- Giving a damn about accessibility
- ARIA Authoring Practices Guide (APG)
- A11y Support
- Bite-Sized Accessibility
- Accessibility Checker
- Access Guide
- Accessibility for Teams
- Stark
- Web AIM
- Accessible Numbers
- A11y Style Guide
- Understanding a11y
- Colour Contrast Checker
- pa11y
- This is WCAG
- ta11y
- sa11y
Tools
- Figma - Design online tool
- Anima - Figma plugin for React
- Logo AI - AI logo generator
- Lexica - AI portrait generator
- Protopie - Prototyping online tool
User research
Design Systems
Design Systems 101
Setup a Design System
Figma course - Introduction to design systems
- Cloudscape
- Nord Health
- Kaizen Design System
- Google’s Material Design
- Open Design Systems
- Redesigning Design Systems
Various
- Design Resources for Developers
- UI/UX Micro Tips
- UX Myths
- 101 Design Rules
- UX Lexicon
- UI Design Tips
- CARI
- Design Ops
- Visual Eyes
- A Complete Guide To HTML Email
- Laws of UX
- 100 Design Lessons for 2021
- Empty States
- UX Challenges
- Designer’s Eye
- Sustainable Web Design
- Learn UX Design
- designsystem.tools
- responsivedesign.is
- Dataviz project
- Apple’s Human Interface Guidelines
- The History of User Interfaces
- UX Core
- UX Recipe
- Classic HCI Demos
- UX Glossary
- UI Land
- Web Interface Guidelines
- Type Design Resources
- lowwwcarbon
- UI Goodies
- Product and UX design resources
- The UX Cookbook
- Microcopy
- Playbook for Universal Design
- UX Hints
- toools.design
- UX Language