Design Resources

Fonts

Variable Fonts showcases a repository of variable fonts. Most have commercial licensing, but a few are open source and have free SIL licensing.

Free variable fonts:

To create WOFF files from TTF, I use Andrew Sun’s WOFFer. Tools by free font sites like fontsquirrel include options that appeared to strip or alter some of the tables for variable fonts I use.

opentype.js font and glyph inspector can parse OpenType and TrueType fonts and display their metadata.

Tools for generating assets

Icons

Tasty Hamburgers: CSS-animations for the hamburger menu.

Font Awesome: thousands of icons in various styles.

Images

TinyJPG: severe compression of image files.

RedKetchup: image, animation, icons tools.

Other

Favicon Generator: generate favicons from an image

whatismyviewport.com: useful for preparing a browser window to grab a screenshot

Colorizer: convert from one color model to another

Color Themes

Creating a web color scheme

colormind.io has a premise of creating a web palette of five colors that allow for light-on-dark and dark-on-light designs. I find it most useful when I anchor one or two of the colors based on the color schemes above. (Up to 5 colors)

Huemint utilizes AI to generate color schemes (up to 4 colors)

ColorBox creates gradients with HSB controls. Kevyn Arnott, the creator, explains the re-design from the original Lyft ColorBox.

Picular gives you colors based on a search term.

Colorgorical makes categorical color palettes for information visualizations.

Japanese Color Schemes

A post on the now-defunct hacklabo blog discussed color combinations inspired by Japanese design, but the swatches are all images in P3 color space. I recreated the swatches here using HTML, and include a text sample.

Clicking on any of the elements will copy the corresponding color; clicking on the background color for the swatch will copy that instead.

No. 1 AaQqRr
No. 2 AaQqRr
No. 3 AaQqRr
No. 4 AaQqRr
No. 5 AaQqRr
No. 6 AaQqRr
No. 7 AaQqRr
No. 8 AaQqRr
No. 9 AaQqRr
No. 10 AaQqRr
No. 11 AaQqRr
No. 12 AaQqRr
No. 13 AaQqRr
No. 14 AaQqRr
No. 15 AaQqRr
No. 16 AaQqRr
No. 17 AaQqRr
No. 18 AaQqRr
No. 19 AaQqRr
No. 20 AaQqRr
No. 21 AaQqRr
No. 22 AaQqRr
No. 23 AaQqRr
No. 24 AaQqRr
No. 25 AaQqRr
No. 26 AaQqRr
No. 27 AaQqRr
No. 28 AaQqRr
No. 29 AaQqRr
No. 30 AaQqRr
No. 31 AaQqRr
No. 32 AaQqRr
No. 33 AaQqRr
No. 34 AaQqRr
No. 35 AaQqRr
No. 36 AaQqRr
No. 37 AaQqRr
No. 38 AaQqRr
No. 39 AaQqRr
No. 40 AaQqRr
No. 41 AaQqRr
No. 42 AaQqRr
No. 43 AaQqRr
No. 44 AaQqRr
No. 45 AaQqRr
No. 46 AaQqRr
No. 47 AaQqRr
No. 48 AaQqRr
No. 49 AaQqRr
No. 50 AaQqRr
No. 51 AaQqRr
No. 52 AaQqRr
No. 53 AaQqRr
No. 54 AaQqRr
No. 55 AaQqRr
No. 56 AaQqRr
No. 57 AaQqRr
No. 58 AaQqRr
No. 59 AaQqRr
No. 60 AaQqRr
No. 61 AaQqRr
No. 62 AaQqRr
No. 63 AaQqRr
No. 64 AaQqRr
No. 65 AaQqRr
No. 66 AaQqRr
No. 67 AaQqRr
No. 68 AaQqRr
No. 69 AaQqRr
No. 70 AaQqRr
No. 71 AaQqRr
No. 72 AaQqRr
No. 73 AaQqRr
No. 74 AaQqRr
No. 75 AaQqRr
No. 76 AaQqRr
No. 77 AaQqRr
No. 78 AaQqRr
No. 79 AaQqRr
No. 80 AaQqRr
No. 81 AaQqRr
No. 82 AaQqRr
No. 83 AaQqRr
No. 84 AaQqRr
No. 85 AaQqRr
No. 86 AaQqRr
No. 87 AaQqRr
No. 88 AaQqRr
No. 89 AaQqRr
No. 90 AaQqRr
No. 91 AaQqRr
No. 92 AaQqRr
No. 93 AaQqRr
No. 94 AaQqRr
No. 95 AaQqRr
No. 96 AaQqRr
No. 97 AaQqRr
No. 98 AaQqRr
No. 99 AaQqRr

Swiss Style Color Picker

Taken from swisscolors.net.

No. 1

AaQqRr AaQqRr AaQqRr
No. 2

AaQqRr AaQqRr AaQqRr
No. 3

AaQqRr AaQqRr AaQqRr
No. 4

AaQqRr AaQqRr AaQqRr
No. 5

AaQqRr AaQqRr AaQqRr
No. 6

AaQqRr AaQqRr AaQqRr
No. 7

AaQqRr AaQqRr AaQqRr
No. 8

AaQqRr AaQqRr AaQqRr
No. 9

AaQqRr AaQqRr AaQqRr
No. 10

AaQqRr AaQqRr AaQqRr
No. 11

AaQqRr AaQqRr AaQqRr
No. 12

AaQqRr AaQqRr AaQqRr
No. 13

AaQqRr AaQqRr AaQqRr
No. 14

AaQqRr AaQqRr AaQqRr
No. 15

AaQqRr AaQqRr AaQqRr
No. 16

AaQqRr AaQqRr AaQqRr
No. 17

AaQqRr AaQqRr AaQqRr
No. 18

AaQqRr AaQqRr AaQqRr