Next step was tuning various components on the "Styleguide" page for a bit of custom branding:

As the next step, I adapted the global color variables to match my custom color palette, defined using the excellent uicolors.app tool.

The Client-First style guide distinguishes between primary colors (the palette) and semantic colors (what they are used for):

Next, you can export the wireframes to Figma.

The tool auto-generates a style guide, making it easy to define a custom color palette and fine-tune the component library.

It is based on the well-documented "Client-First" library: finsweet.com/client-first...

That worked surprisingly well!

Once satisfied, you can let it auto-generate wireframes for the various pages. Using the free version, I could only generate the main page:

Since we used Figma and Webflow in my previous company, I checked those out first. While searching for a reusable component library, I came across relume.io, which amongst being a component library als lets you create a sitemap from a prompt:

Building a static website as a developer using #Webflow & #Figma & #Relume.io:

Coming from a development background, I am not often building static marketing websites. However, for my local badminton club, I wanted to see how far I could get with the latest tools.

Thread >

My first trip to Tbilisi in Georgia. The mountain scenery looks great from the plane.