Diving into creating my first Framer template: a high-converting SaaS landing page.

Fully responsive in Light and Dark modes, I'll document the entire process.

Let's begin at the starting line...

First, let's choose a brand color and create the color scale using the Tailwind UI Colors app.

Now we can create styles in Framer. I categorize colors based on their usage type:

- Background
- Text
- Border
- Utility
- Base

For each color, we define its values for both light mode and dark mode.

Up next: The anatomy of a high-converting Hero section...

Thanks for reading this far. If you found this post helpful, follow me for more and repost. Also, feel free to comment if you want to know more.