Design Foundations

Design Foundations

HomechevonTools and Resourceschevon


A collection of useful design tools spanning color, fonts, icons, imagery, video, and more.


Color Palettes

  • — A wide range of curated color palettes for digital designers, illustrators, and product designers. You can click to copy individual hexcodes, or download a file with the full list of hexcodes for a given palette.

  • ColorDot — A tool that allows you to generate a color palette by moving your mouse around until you find colors you like. Great for eyeballing colors and generating new palettes on-the-fly.

  • Material Design Color Palettes — The original set of Google Material Design palettes from 2014. The blue gray and gray sets are great for user interface colors.


  • UI Gradients — A great alternative if you’re looking for curated gradients, instead of solid colors.

Data Visualization

  • — A curated range of colorblind-friendly palettes for quantitative data visualization. A map with sample data gives you a good indication of usage on a real dataset, coupled with scales to demonstrate edge cases.

  • Scale — A great alternative if you’re more interested in creating your own data visualization palettes by choosing your own hues, tints, and shades.

Colorblind Testing

  • Sim Daltonism — A great app to simulate red-green, blue-yellow, and monochromatic color blindness to check the accessibility of websites and user interfaces.



Free Icons

  • Material Icons — A huge free icon set, available in outlined, rounded, and sharp variations. They’re available for free under the Creative Commons 4.0 license.

  • Ionic Icons — Another great free icon set with outlined, filled, and sharp variations. Although this set is smaller than Material, they’re less widely-used, so provide a more unique look. They’re available for free under the MIT License.

Paid (or Attribution-Required) Icons

  • Noun Project — An enormous icon set, which can be useful for icon symbolism inspiration. They have a large icon set available for free with attribution — although for use without attribution, you need to either pay per icon or subscribe.

Imagery & Video


  • Unsplash — A massive library of beautiful, high-resolution free imagery that can be used for both commercial and non-commercial purposes without attribution (although it is appreciated).
  • Pexels — Another large image library available for free use without attribution. It also includes a small selection of videos.

  • Pixabay — Similar to Pexels, but also includes vectors, illustrations, music, and sound effects.

Vector Backgrounds

  • Trianglify — A tool for generating low-poly triangle patterns that are great for backgrounds to help spice things up. It allows you to choose dimensions, color patterns, pattern intensity, triangle variance, and cell size.

  • Subtle Patterns — A great selection of subtle textures and repeating patterns for use as backgrounds in your products, as a nice alternative to plain color fills or gradients.

Optimizing Video

  • FFMPEG — An open-source command-line tool for processing and optimizing video, audio, and other multimedia files. If you use any video, this is a great way to help minimize file-size while maintaining quality. It can also be used to produce high-quality GIFs or animated PNGs.


  • Smooth Shadow — A nice GUI tool to generate the CSS for smooth, layered shadows. It allows you to tweak layers, transparency, distance, blur, and spread to generate beautiful, realistic shadows.