Design Resources
Rive
Build interactive animations that run anywhere
Cal Sans
Geometric sans-serif typeface to adorn the headlines and interfaces of Cal.com
Ark UI
Get fully customizable, accessible and unstyled UI components
Preview.js
Preview UI components in your IDE instantly
The Component Gallery
Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.
Mona Sans & Hubot Sans
Two variable, open source fonts from GitHub
SSSVG
An Interactive SVG Reference
Fontaine
Automatic font fallback based on font metrics
Fallback Font Generator
Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using special @font-face descriptors.
Tagbox
Creative asset management
Leonardo
Leonardo is a one-of-a-kind tool for creating, managing, and sharing accessible color systems for user interface design and data visualization.
google-font-to-svg-path
Create an SVG path from a Google font
SVG Crop
Remove blank space from around any SVG instantly.
Open-Source UI elements
Create, share, and use beautiful custom elements made with HTML and CSS.
An Interactive Guide to Flexbox in CSS
Flexbox is a remarkably powerful layout mode. When we truly understand how it works, we can build dynamic layouts that respond automatically, rearranging themselves as-needed.
ProfilePicture.AI
Create your perfect profile picture with AI
Bedrock Layout Primitives
A collection of utility components that are designed to be used as building blocks for your web application's layout
AnimXYZ
The first composable CSS animation toolkit
Color Hash
Generate color based on the given string
Glass CSS
Glassmorphism CSS Generator
zeroheight
Increase adoption of your design system
Growth.Design
Product tips in a comic book format you’ll love.
compressImage.io
Compress JPG and PNG images at light speed with Browser based Image compressor. Private, Works Offline, No Limits, Low carbon footprint.
Open Props
Supercharged CSS variables.
Logolivery
Taking care of the logo while you take care of the product.
Pika
Give your boring screenshots a great outfit using Pika. The side-effect? Increased engagement!
Mockoops
Convert your boring screen recording into life-like mockups. Just drag-drop and export with a click.
Saas UI
Saas UI is a React component library that doesn't get in your way and helps you build intuitive SaaS products with speed.
Bunny Fonts
Bunny Fonts is an open-source, privacy-first web font platform designed to put privacy back into the internet.
System UIcons
A growing collection of simple and consistent icons specifically designed for systems and products.
Milanote
Milanote is an easy-to-use tool to organize your ideas and projects into visual boards.
Atomic 2.0
Revisiting the Atomic Design Method for Design Systems
Avvvatars
Open Source React UI Avatar Library
Chakra UI Color Palette Generator
Quickly generate custom color palettes for Chakra UI.
Logology
Get a designer-quality logo for your startup. In 5 minutes.
Grid by Example
Everything you need to learn CSS Grid Layout
Radix UI
Unstyled, accessible components for building high‑quality design systems and web apps in React.
UI Generator
Create mockup (fake) UI for your landing page, prototype, presentation, or blog post. Download free PNG files.
Backlight
Backlight is a collaborative platform empowering front-end teams to build and ship great Design Systems.
NextUI
Make beautiful websites regardless of your design experience.
Style Dictionary
Style Dictionary is a build system that allows you to define styles once, in a way for any platform or language to consume.
Shottr
Screenshot Annotation App For Mac
Animatize
animations the easy way
CSS Gradient Generator
Beautiful, lush gradients ✨
Fontsource
Self-host Open Source fonts in neatly bundled NPM packages.
Easing Gradients
Linear gradients often have hard edges where they start and/or end. We can avoid those by controlling the color mix with easing functions.
Iconoir
A Simple and Definitive Open-Source Icons Library
Lucide
Simply beautiful open source icons, community-sourced
designstripe
Create beautiful illustrations, no design skills needed
Storybook Design Token Addon
Display design token documentation generated from your stylesheets and icon files.
Storybook Designs Addon
A Storybook addon that embeds Figma, websites, or images in the addon panel.
Smart Swatch Generator
Generate Smart Swatch with no pain
Practical Uses of CSS Math Functions: calc, clamp, min, max
This is episode #28 in a series examining modern CSS solutions to problems I've been solving over the last 14+ years of being a frontend developer.
3D Bay
Free 3D Stock Images
CSS Layout
Popular Layouts & patterns made with CSS
Pica
High quality image resize in browser.
react-nice-avatar
react library for generating avatar
Smooth Shadow
Make a smooth shadow, friend.
Akar Icons
Perfectly rounded icon library made for designers and developers
Vanta.js
Animated website backgrounds in a few lines of code
CSS Hell
Collection of common CSS mistakes, and how to fix them
Smooth Shadow
Make a smooth css shadow
Chromatic
Storybook deployment, review, and test
Choc UI
Choc UI is a set of accessible and reusable components that are commonly used in web applications.
Blobs
Generate beautiful blob shapes for web and flutter apps
Excalidraw Animate
A tool to animate Excalidraw drawings
Haikei
Haikei is a web app to generate unique SVG shapes, backgrounds, and patterns – ready to use with your design tools and workflow.
CSS for JavaScript Developers
The all-new interactive learning experience designed to help JavaScript developers become confident with CSS
Conic.css
nice, simple conic gradients
Google Fonts
Making the web more beautiful, fast, and open through great typography
Halfmoon
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools
Toolbox
Neumorphism Generator
Reseter.css
A Futuristic CSS Reset/Normalizer
An Interactive Guide to CSS Transitions
CSS transitions and hover animations, an interactive guide
Supercons
A friendly, open source React iconset
Getting Deep into Shadows
Let’s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects.
ToonClip
Animations in minutes using an easy online editor
SmolCSS
Minimal snippets for modern CSS layouts and components
The Devil's Albatross
Nils Binder talks about a technique for spacing between two elements. Picture a header on a large screen with a logo in the upper left and nav in the upper right. Then a small screen, when they can no longer be on the same “row” and need to wrap, they don’t just wrap but are centered.
SVG Repo
Explore, search and find the best fitting icons or vectors for your projects using wide variety vector library.
MagicPattern Toolbox
Create SVG/CSS patterns, gradients and organic shapes in a few clicks
QuickLens
A Powerful Mac App to zoom into pixels, sample colors, measure angles, distances & boxes, check alignments, take snapshots, and much, much more.
Framer
Framer is an all-in-one tool that helps teams design every part of the product experience. Start in Framer and get to a functional prototype faster than ever—no code required.
Design Systems CLI
A CLI toolbox for creating design systems
devtools-ds
UI components, libraries, and templates for building robust devtools experiences.
Chakra Templates
Production-ready Chakra UI Templates for developers
Penpot
Penpot is the first Open Source design and prototyping platform meant for cross-domain teams.
Glassmorphism CSS Generator
Glassmorphism is a unified name for the popular Frosted Glass aesthetic
React UI Boutique
Hundreds of beautiful and responsive UI components, premade and ready to use for your next ReactJS project. Made with Chakra UI and Framer Motion.
Text Gradient generator
Simple text gradients generator. Just copy & paste the CSS.
The 3 CSS Methods for Adding Element Borders
This is episode #23 in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer.
Pika
An open-source colour picker app for macOS
Compiled
Build time atomic CSS-in-JS. Baked and ready to serve.
AnimXYZ
The first composable CSS animation toolkit
Thumbnail AI
Thumbnail.AI automatically generates shareable social images and thumbnails for your articles.
Excalidraw Libraries
A directory of public libraries that you can easily add to Excalidraw.
SVG Screenshots Browser Extension
Browser extension to take semantic, scalable, accessible screenshots of websites, as SVG - as simple as taking a PNG screenshot.
Palms Illustrations
Large set of palms to describe your idea
Flow Cards
Construct web pages with ease, using UI Flow Cards ―for website builders, designers and developers.
DEVICON
Devicon is a set of icons representing programming languages, designing & development tools.
Plaiceholder
Beautiful image placeholders, without the hassle.
Perspective Split Text Menu Hover
Perspective Split Text Menu Hover
postcss-preset-env
Use tomorrow’s CSS today.
Paper CSS
Paper CSS for happy printing
Screenity
The most powerful screen recorder & annotation tool for Chrome 🎥
Splitting.js
Splitting creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more!
Lena.js
👩 Library for image processing
Figma Design Tokens
Export Figma styles and custom tokens to a style dictionary ready json or sync to github.
Super Tiny Icons
Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
SvgPathEditor
Online editor to create and manipulate SVG paths
Flow CSS Utility
The flow utility provides flow and rhythm between direct sibling elements.
Css Effects
☁️ A collection of CSS effects
CSS Grid Generator
🧮 Generate basic CSS Grid code to make dynamic layouts!
Social Branding Templates – Figma
Use this template to quickly and easily generate a consistent brand image across the web.
Styled-Responsive-Media-Queries
Responsive Media Queries for Emotion styled or styled-components — Standard size from Chrome DevTools
cssbuttons
HTML & CSS Button Collection
👑 Anyfn
Marketplace for Premade Logos
BlurHash
BlurHash is a compact representation of a placeholder for an image.
Perfect Arrows
A set of functions for drawing perfect arrows between points and shapes.
Mono Icons
A simple, consistent open-source icon set designed to be used in a wide variety of digital products.
Subtle Patterns
Free textures for your next web project
Trianglify.io
Trianglify.io is a tool for generating low poly triangle patterns that can be used as wallpapers and website assets.
Stencil
Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.
Arwes
Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps
Heroicons
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
FAST
The adaptive interface system for modern web experiences
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.
Forge Icons
300+ right mix of SVG icons for your project.
Relay for Figma
Relay allows you to push graphics in Figma straight to your GitHub Repo.
Brandfetch
The brand search engine.
CSS For Designers
Learn CSS, make better websites
Projector
Projector is a creative platform that helps people and teams create presentations, videos, GIFs, social media posts, and print materials. No design skills required.
Squircley
Squircley is all you need to start creating beautiful organic shapes ready to use for logos, icons and background images.
Capsize
Flipping how we define typography in CSS.
Anima
Create High-Fidelity Prototypes and Export HTML with Anima
Screenshot.Rocks
Create beautiful browser mockups in seconds
Knopf.css
Modern, modular, extensible button system designed for both rapid prototyping and production-ready applications
Native Elements
Native Elements is a css library that helps you easily style native HTML elements using CSS custom properties, classes, attributes, or whatever you want in less than 6 kB BUILD YOUR THEME DOCUMENTATION
SocialSizes.io
Image and Video sizes for Social Media.
LogoSear.ch
Find vector (SVG) logos from over 100 sources!
DrawKit
Beautiful, free illustrations. Updated weekly.
FontPair
Helps you pair Google Fonts together
Open Peeps, Hand-Drawn Illustration Library
A hand-drawn illustration library.
Good Annotations
Image Annotation Made Simple
Abstract
Design Version Control, Collaboration, & Handoff for Teams
Atomic Layout
Atomic Layout is a spatial distribution library for React. It uses CSS Grid to define layout areas and render them as React components.
Grids Generator – Figma
Apply any frame with grid styles configurations inspired from Google Chrome's element inspector.
Keyframes
Dead simple visual tools to help you generate CSS for your projects.
Drop-in Minimal CSS
This page provides an overview of barebones drop-in minimal CSS boilerplate frameworks.
Rough.js
Create graphics with a hand-drawn, sketchy, appearance
Colors and Fonts
A curated library of colors and fonts for digital designers and web developers.
The Hero Generator
A hero/banner code generator
figma-patterns
A library of over 70 tileable patterns for Figma, and the file that created them.
CSS Section Separator Generator
A collection of customizable CSS section separators, with the possibility to easily copy the code.
Twin
🦹♂️ Use Tailwind classes within any CSS-in-JS library
404 Illustrations
Royalty free illustrations for pages
SVG Splash
A beautifully simple SVG painting application.
SVG Viewer
View, save, and optimize SVGs
Open Color
Open color is an open-source color scheme
pattern.css
CSS only library to fill your empty background with beautiful patterns.
Simple Icons
Free SVG icons for popular brands
Emojis as Favicons
Chuck an emoji inside an SVG <text> element and use that as the favicon.
CSS Layout
a collection of popular layouts and patterns made with CSS
MVP.css
A minimalist stylesheet for HTML elements
Graphite
Create nice screenshots of your screenshots
Bannersnack
Online Banner Maker, Design & Create banners
FiraCode
monospaced font with programming ligatures
MoreToggles.css
A Pure CSS library that provides you with stylish toggles.
BrandColors
The biggest collection of official brand color codes around.
Animate.css
Just-add-water CSS animations
Milligram
A minimalist CSS framework
cosha
Colorful shadows for your images. 🎨
Neumorphism.io
Generate Soft-UI CSS code
Inter font family
Inter is a typeface carefully crafted & designed for computer screens.
css.gg
Minimalistic icon library Designed by code. Customizable & Retina-Ready icons — entirely built in CSS
Duotone Effect Generator
Pairings & Effect Generator
CSS Gradient
CSS Gradient is a happy little website and free tool that lets you create a gradient background for websites.
OpenChakra
OpenChakra is a visual editor for React based on Chakra UI
animate-css-styled-components
simple port of animate css for styled-components
Styled System
Style props for rapid UI development
Welcome UI
Customizable design system with react • styled-components • styled-system and reakit.
React Figma
Render React components to Figma.
Gradientify SVG Icons
An interactive free SVG icons pack specially made for gradient lovers!
Figma
Figma helps teams create, test, and ship better designs from start to finish.
Chakra UI
Build accessible React apps & websites with speed
Theme UI
Build themeable design systems based on constraint-based design principles
Ikonate
fully customisable & accessible vector icons
unDraw
Browse to find the images that fit your needs and click to download. Use the on-the-fly color image generation to match your brand identity.
ImageBoss
On-demand image processing. Like an absolute boss.
Feather
Simply beautiful open source icons
Ouch.pics
Free Vector Illustrations to Class up Your Project
favicon.io
The ultimate favicon generator
Humaaans
Mix-&-match illustrations of people with a design library
remove.bg
Remove backgrounds 100% automatically in 5 seconds with zero clicks
OpenMoji
Open source emojis for designers, developers and everyone else!
Building Your Color Palette
Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.
Squoosh
Make images smaller using best-in-class codecs, right in the browser.
styled-tools
Useful interpolated functions for CSS-in-JS