Easy ways to add design flair, user delight, and whimsy to your product!
The Spark Joy philosophy is explained in further detail in my book, check it out if you'd like to explore how this approach applies to a lot more than design utilities.
https://css.winterveil.net/ magick.css is a minimalistic, (mostly) classless CSS framework that is designed to be easy to use and easy to understand. It is contained in a single file, and every choice is commented. The goal is to achieve an elegant, but magically playful look, while maximizing readability and the ability to convey information; somewhat akin to the notes of a wizard.
https://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://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://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.
@ff-sans:
-apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
"Segoe UI", // Windows
"Liberation Sans", // Linux
sans-serif; // The final fallback for rendering in sans-serif.
@ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
@ff-mono:
ui-monospace, // San Francisco Mono on macOS and iOS
"Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
"Liberation Mono", // Linux
Menlo, Monaco, Consolas, // A few sensible system font choices
monospace; // The final fallback for rendering in monospace.
Simple: font-family: system-ui, -apple-system, sans-serif; ([has issues on old browsers + asian langauges](url - github and bootstrap have removed it fwiw))
Serif: font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
<!--
- 1. Preemptively warm up the fonts’ origin.
-
- 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
- most modern browsers.
-
- 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
- only after it’s arrived. Works in all browsers with JavaScript enabled.
-
- 4. In the unlikely event that a visitor has intentionally disabled
- JavaScript, fall back to the original method. The good news is that,
- although this is a render-blocking request, it can still make use of the
- preconnect which makes it marginally faster than the default.
-->
<!-- [1] -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- [2] -->
<link rel="preload" as="style" href="$CSS&display=swap" />
<!-- [3] -->
<link
rel="stylesheet"
href="$CSS&display=swap"
media="print"
onload="this.media='all'"
/>
<!-- [4] -->
<noscript>
<link rel="stylesheet" href="$CSS&display=swap" />
</noscript>
https://wh0.github.io/glitter/ It’s a generator that produces text in a glitter-like style, which you can save as SVG. Definitely not for 99% of your projects, but a pretty cool text effect.
if all letters at the same height all caps this is called Majuscule
Note - THIS IS DISPUTED!!! Even Slack's impl has separate light and dark theming.
The problem is "primary" isn't a color, it's a measure of contrast in the current context. On the same page you might have a white panel with a black button and a black panel with a white button, and both of those buttons are "primary" even though they are different colors. - Adam Wathan
One liner dark mode (careful about perf!): filter: invert(100%) hue-rotate(180deg); - more filters here
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://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.
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://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 way way more icons. Lucide picks up beautifully where it left off."
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://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://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.
http://github.com/propublica/weepeople A typeface of people sillhouettes, to make it easy to build web graphics featuring little people instead of dots.
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.
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://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!
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://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://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://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.
easy creation of simple charts for documentation, data storytelling / journalism, etc. It features plots of 1-D lists, and has a custom markdown filter that converts suitably formatted lists directly to charts. It has no dependencies (other than a modern browser), and is very small compared to javascript based charting tools. The html is based on ul lists and will collapse back to readible lists in the absence of css support, making it accessible to all readers. It is open source and easily configurable according to project needs.
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://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 Mac and Windows.
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.
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.
I've set up an iPad in my hallway to show their SVG weather charts. Super simple to integrate into a simple home made dashboard website. Here is Oslo: https://www.yr.no/en/content/1-72837/meteogram.svg
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 the latest revision for 163 million files, all of which are searchable with regular expressions.
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 Directory domain controller servers; process start and stop events from individual Windows computers; Domain Name Service (DNS) lookups as collected on internal DNS servers; network flow data as collected on at several key router locations; and a set of well-defined red teaming events that present bad behavior within the 58 days. In total, the data set is approximately 12 gigabytes compressed across the five data elements and presents 1,648,275,307 events in total for 12,425 users, 17,684 computers, and 62,974 processes.
Finance
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.
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
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 free open platform for computing on the entire world."
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 what the rest of the month has in store.
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
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 taken by placing the object on a white posterboard and using sunlight and/or room lighting. The pictures have been resized down to 512 x 384, which can be changed in data/constants.py (resizing them involves going through step 1 in usage). The devices used were Apple iPhone 7 Plus, Apple iPhone 5S, and Apple iPhone SE.
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 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
Do I have a very solid understanding of the human problem I'm solving with this interface?
Is this a low, medium, or high complexity project and have I let that drive my decision for designing a low-fidelity version or not?
If I'm using reference material, would I feel comfortable putting my design next to the reference and talking through the areas I used for inspiration, without giving the impression that I copied or created a very close derivative?
Have I had the necessary conversations with stakeholders and/or developers about the goal of this project and its ability to be implemented. In other words, am I aware of business and/or technological constraints?
Typography
Have I chosen font sizes very deliberately (ideally 2-4 per screen or section) and pushed myself to use as few as possible?
Am I sure there's not a single straggling font size lying around somewhere that could be matched up with another size?
Are there any areas where font weight would be a better change instead of font size?
Are there any areas where font case—whether UPPERCASE, Title Case, or Sentence case—would be more affective that a font size change?
Does the visual hierarchy of my typography content match my intentions with what is the most important on the screen?
Do my titles and body copy feel right together? Am I playing with type scale in a fun and dynamic way?
Have I defined the usage of certain sizes and/or colors for my typography, whether in my own head or specifically written documentation?
Are my typographic color choices extrememly well defined, a specific color for links, actions, buttons versus read-only text, and is there anywhere that can be improved?
If applicable, are there any areas where I could add more visual interest to my typography by adding any decorative or informational elements in the surrouding area?
Have I intentionally chosen a specific typeface for specific reasons?
If I haven't used sytem or open source fonts (SF Pro, Roboto, Inter, Helvetica, etc.) have I done due dilligence on purchasing the appropriate font licensing and/or checked with stakeholders or developers if the font I've chosen is approved and/or can be used during development?
Does the typeface I've chosen convey the right personality or feeling that I want to convey?
Have I considered adding the ability for a user to choose their own type size based on their preference, and if not have a made sure that the most important content is no smaller than 16px?
Layout
Have I used the box model concept while laying out out every element of my designs, or are there a few stragglers here and there that I haven't been intentional about?
Have I used a clear grid structure with properly aligned elements that visually balance each other out? (12 column, etc.)
Have I used an intentional implicit grid for all of the negative space surrounding the elements in my layout, especially to define intentional relationships with my content?
Does my design have enough negative space?
Are there elements in my design where the negative space could double to create a much nicer layout?
Does anything feel too crammed or too tight and have I considered layering the information where necessary to create more simplicity?
Is all of the text left or right aligned and scannable where applicable?
Does my eye have to dart around all over the screen to view the content or is there a nice line of continuation I can pay attention to while viewing?
Are my interface elements balanced compositionally with layout anchors?
Are there any areas where my designs have been mathematically aligned, but still feel off? Have I correct these with optical alignment?
Is the density of my design appropriate? Is it tight and condensed because of the high volume of information? Is it a medium density? Are there ways to add more negative space to have a more open and friendly feel with a lower density layout?
Are there any areas where I could create more intentional prioritization of content by using scale or visual weight with background color changes, etc.?
Is there appropriate affordance given to the interactive objects on the screen? Is it easy to see what's scrollable, swipeable, tappable, etc.? Are there areas where I know that it could be made more clear?
Have I fully considered exandable/collapseable or other interactive options for some of the components? Does everything on the screen need to be on the screen or is there a more elegant solution for the content that involves adding another page or another section?
Color
Have a made a conscious choice between using HEX codes, RGB values, or HSB/HSL section methods?
Have I double checked to make sure that all of my interface elements have appropriate color contrast and meet at least WCAG 2.1 AA accessibility standards?
Have I made a very conscious decision about my structural colors versus my interactive colors?
Have I clearly defined a primary, secondary, and possibly tertiary CTA (call to action) color and used it accordingly?
Could my secondary styles and colors be tweaked slightly to better compliment the primary CTA?
Have I very strategically defined all of my color usages to create an understandable framework for future color usage? Is there room for improvement?
Does my color palette follow a systematic and intentional method for color selection based on a base HUE?
Is there room to provide a secondary HUE for structural or interactive colors or is the one I've chosen adequate?
Is there any opportunity for using a well-placed gradient? If I'm using a gradient have I double checked that any text used in combination with it is accessible?
Have I specifically chosen a very strict set of greys, if applicable, for my entire project across every screen?
Are there any greys that are very close in color that could be combined and simplified?
Have I revised and/or adjusted my overall color palette to include all colors and usages of those colors for every single element?
Have I considered the Z-axis of my layout and how white, grey, and darker colors create a natural depth? Are the objects closest to my foreground the lightest in color?
If my UI is dark in color, have I been extremely conscious with the overall contrast and meticulously chosen each color?
If my UI is dark in color, have I reserved absolute white and absolute black for specific pieces of the interface? Is there any room for almost black or almost white, with subtle changes in color?
Style
Have I consciously decided on a specific design direction?
Can I intentionally describe my designs with specific adjectives?
Have I considered the constraints of the medium I'm designing for and how that should and will affect my designs?
Have I very consciously chosen specific corner radius styles? Should they be hard edge, slightly rounded, very rounded, pill-shaped?
If I have chosen specific corner radius styles for modules, buttons, etc. have I explored other options to see if there are better alternatives that specifically map to the type of style I'm trying to achieve?
Have I very specifically chosen a certain type of border or divider for my content?
Have I considered using only negative space to create a separation of content rather than relying on a line or separate modules?
Have I made sure my borders or dividers don't overpower the actual content? Could they be toned down to shift focus on the most important areas of the designs?
Have I considered depth, lighting, and shadow to the best of its potential? If I'm using any type of depth as a metaphor, are my darkest elements going back into the design and my brightest elements coming forward intentionally?
Have I strongly considered how my buttons are interacted with? Hover states, tapped states, etc. Are there any fun animations that I could add to double-down on the direction I'm trying to achieve?
Are my buttons working as hard as they should be to create laser-like focus on the most important actions on the screen when applicable?
Imagery
Knowing that great imagery will make my designs 10X better than subpar imagery, have I intentionally chosen, selected, sourced, or created the absolute best possible imagery for my designs (if applicable)?
Does the imagery I'm using make my designs better or is it distracting?
Am I intentionally using a static image in my designs that will never be changed, or is there an opportunity to create something more dynamic based on events or user action?
Are there places in my design where I can leverage emoji (like on these checklist titles) to create a more unique design?
Am I using a rasterized bitmap image when I could be using CSS or an SVG in place of it?
If I'm using dynamic imagery in my designs, have I stress tested for all black or all white images to make sure the design still works?
If my designs contain user-generated content, have I carefully considered empty states, the ability to change the imagery, the ability to create and/or upload the imagery?
Are there smart defaults that look nice when no user generate content has been added?
Am I using any imagery that is only "so-so" and not adding great value to the design?
Have I paid special attention to any icons used in my project?
Are my icons following a strong pattern of size, color, stroke, fill, etc.?
Are my icons decorating or interactive and have I made that extremely clear with the designs?
Are there any opportunities to create a simple custom illustration (line, shape, pattern, etc.) to add more visual interest to the design?
Have I considered how the products marketing site or branding should or will impact the interface?
Is there an app store icon that needs to be designed? Are there opportunies to create a fun branded experience between the app icon, the loading screen, and the default view of the first time a user launches the app?
If I'm designing a website have I designed a custom favicon that shows up in the browser tab as an extra little detail for my project?
Elements
Does my project have a clear navigation structure and ideally prioritize the top 5 or fewer links or sections?
Have I strongly considered how my input fields function (default, hover, focused, disabled, error, etc.) and created a very clear state design for all possibilities?
Do my input fields match the overall style and direction of the project?
Are the forms I've designed absolutey necessary and require the most critical information?
Have I very clearly communicated the reasons for requiring certain information?
If applicable, have I made it clear that certain pieces of information are required for the progress of the user through the app or site?
Have I considered all the variables and/or error states if some information is not gathered properly?
If my project has user profiles, have I considered what it will look like the first time it's used, after information has been added? Are the mechanisms for editing information abundantly clear or is there room for improvement?
Have I carefully considered the implications of a settings screen?
Have I done the hardwork of creating smart defaults for the user and not used the settings screen as a dumping ground for all possible changes?
Have I carefully chosen lists and/or card-based layouts in my designs based on the volume of information?
Are the any missing components to my designs that might not be needed now, but could be very useful in the future, eg. table designs, etc.?
Have I considered the states and function of all of my components and created a well-organized file system?
Is there a need to turn my clean and organized file-system into an actual design system to be used for other projects?
Are there more people on my team (stakeholders, developers, etc.) who need visibility into the choices I'm making for naming components, etc. and should they have an opinion or a say into what things are called as well?
Tactics
Have I explored LOTS of alternative versions of what I'm trying to design and by process of elimination decided on what works best?
If my project is slightly more complex than the average project, whether because of features or team size, have I spent enough time getting everyone on board with how the app should function by using low-fidelity designs?
If my project is a web-based project, have I fully considered the mobile version and used that as a way to force prioritization of features and layout?
If my project is an application, have a used a mobile-first approach to create simplicity up front?
If my project is more of a marketing site, have I designed and explored really nice and impactful desktop versions before confining myself too much with mobile versions?
If my project is an iOS app, have I made intentional decisions about where to follow the Apple HIG (human interface guidelines) or where to deviate from it? If I've deviated, do I have a VERY good reason to do so and are the stakeholders and developers OK with this?
If my project is an Android app, have I made the decision to exclusively use a material design system, or do I have strong reasons for not doing that?
Have I used very intentional placeholder copy and/or images in my designs that could support specific users, etc.?
Have I told a story with my designs (based on features) and could I effectively present my designs using what I've created?
Are my designs organized in a clear way to showcase specific features and flows?
Have I created the necessary prototypes to experiment with animations and interactions?
Do I need to create any separate prototype flows to describe certain functionality to stakeholders or developers?
Have a been an excellent communicator from the very beginning of the project and now that's it's time to hand off the design, I already know what my developer needs?