💡 An experiment you can try on your next web/app project to get a more interesting color palette is color grading your design.

🧵 [1/6] To try this, it will be easier to experiment if your design is finalized with your color palette defined up front.

I’m using @tailwindcss colors here but we talk about building a color palette in this Refactoring UI chapter:

refactoringui.com/previews/build…

Designing for dark mode as an afterthought can be really tricky. Here are a few things you can try that might help you be more successful 🧵 It’s a popular opinion that you simply just need to invert the colors.

Instead, try using the same visual cues as the light version — close elements should still be lighter and distant elements should still be darker.

How to make a "Briefcase" icon in @figmadesign.

🧵 thread 👇 In a 24 x 24 pixel artboard, use the rectangle tool (R) to draw a 18 x 10 pixel rectangle positioned horizontally centered and 6 pixels from the top of the artboard.

How to make a "Megaphone" icon in @figmadesign.

🧵 thread 👇 In a 24 x 24 pixel artboard, use the rectangle tool (R) to draw a 13 x 18 pixel rectangle.

How to make a “Question Mark” icon in @figmadesign.

🧵 thread 👇 In a 24 x 24 pixel artboard, use the ellipse tool (O) to draw a 18 x 18 pixel circle with a centered stroke.