Creating the style guide for Stone Centre

Ankita Gupta
Case Study
Style guide

Creating the style guide of the project

Since I use Finsweet’s Client First for naming conventions, I decided to clone the client-first project in Webflow and started editing with its style guide.

In the Figma file, the typography and color palette was clearly defined. So I replicated them quickly. Since everything in Figma is in px, I wanted to use it in rems in Webflow so I divided all the units by 16 in Webflow itself to get the units in rems. You can do this directly in Webflow by typing in the math. For example if the font size is 52px type 52/16rem and the result will appear as 3.25rem. 

Figma typography and color styles

webflow text styles
webflow color styles
webflow tag and button styles

For best results, I defined the style of HTML tags as set in Figma so that there is consistency throughout the website build.

The following are the HTML tags that I check out

  • Body
  • All H1 headings, H2 headings, H3 headings and so on
  • All Paragraphs
  • All Links
  • All Block Quotes
  • All Ordered Lists
  • All Unordered Lists

There were few card styles that were repetitive in the design, so I created a class for each and added it in the style guide.

webflow card styles

For buttons, the hover effect and pressed effect were styled in the style guide itself

webflow button effect styles