The “🔥 Design Tips” series, now in TailwindCSS

Tailored by @caneco, inspired by @steveschoger && @adamwathan

NEW

If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder.

NEW

Dropdowns can be more than just a boring list of links. They're just boxes, you can do anything you want with them!

NEW

Using a generic icon like an arrow or a checkmark instead of the standard bullet is a great way to add visual interest to unordered lists.


Using a generic icon like an arrow or a checkmark instead of the standard bullet is a great way to add visual interest to unordered lists.

If I am using icons that have more weight than the text, I typically make the icons slightly lighter than the text for inactive states.

Too many borders can make a design look really busy. Here's a few ideas that are a bit more subtle.

Font size isn't always the best way to emphasize or de-emphasize text, try using color and font weight instead.
This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields.
Achieving an accessible contrast ratio is very difficult when using white text on a colored background.
Using dark colored text on a soft colored background is much easier to make accessible, and usually looks better to boot.