Start Here

A Solid Foundation: Client-First

We've built this style guide using the Client-First naming system by Finsweet. Why? Because it ensures your project is organized, scalable, and genuinely easy for anyone on your team to understand and manage. If you're new to Client-First, we can't recommend enough that you check out the official documentation. A little time spent understanding the principles now will save a huge amount of time down the road.

This starter is also built to integrate seamlessly with Relume Library, giving you a powerful workflow right from the start.

Power Your Design with Webflow Variables

We've structured this style guide to make rebranding for any project incredibly straightforward. Almost all global styling changes—colors, fonts, sizes, and spacing—happen in one central place: the Variables panel in the Webflow Designer. Think of it as your brand's command centre. Let's walk through each collection together.

1. Theme CollectionThis is your first and most important stop. This collection uses "semantic" variables, meaning they describe their purpose (e.g., background-color) rather than a specific color (e.g., white). This makes applying your brand theme intuitive and simple.

• UI Colors Group:
  • Background: Sets the main background color for your sections.
  • Foreground: Sets the color for elements that sit on top of the background, like cards.
  • Border: Defines the primary color for borders and dividers.
  • Icon: Controls the default color for icons.
• Text Group:
  • Text Primary: The main text color for headings and body copy.
  • Text Secondary: A slightly muted text color, often used for subheadings or secondary info.
• Button Group:
  • Button Background: The background color for your primary buttons.
  • Button Text: The text color for your primary buttons.
  • Button Border: The border color for your primary buttons.

2. Colors CollectionThis is the "primitive" collection where your actual brand hex codes live. The "Theme" collection variables are linked to these. You'll set your brand palette here once, and it will thoughtfully populate across the site.

• Brand Colors Group: This is where you'll input your core brand palette (e.g., Primary, Secondary, CTA).
• Neutral Colors Group: Define your full spectrum of greys and neutrals, from White to Black.
• Primary Shades & Secondary Shades Groups: These collections hold lighter and darker variations of your main brand colors, used for things like hover states, accents, and gradients.

3. Font Styles CollectionThink of this as a "mapping" collection. It lets you quickly change the style of a text element directly from the Style Panel. For example, you can select a paragraph and apply the H3 style mode to it without changing its HTML tag. It’s a purposeful way to manage typographic hierarchy. Modes available are Base, Font Small, Font Large, and H1 through H6.

4. Typography CollectionThis is the primitive collection where your core typographic rules are defined. The "Font Styles" collection maps to this. It's set up with responsive modes to ensure your text scales beautifully across devices.

• Groups & Modes: Each property has four modes: Base (Desktop), Tablet, Mobile (L), and Mobile.
• Font Family, Size, Weight, Height & Spacing Groups: All your core typographic properties live here.

5. Sizes CollectionThis collection controls all spacing, sizing, and layout values. Like the Typography collection, it has responsive modes to ensure your layout is fluid and consistent.

• Radius Group: Small, Medium, Large, Round
• Space Group: A full set of spacing units for margins and paddings: XXSmall through XXLarge.
• Stroke & Max Width Groups: Controls border widths and the maximum width of containers.
• Section Space & Site Group: Defines padding for page sections and the global padding for your site.

6. Shadows CollectionWe use a layered shadow system to create a more realistic depth effect. This collection allows you to control both layers. You can easily apply a shadow style by selecting a mode (XSmall through XLarge) from the Style Panel.

• Layer One & Layer Two Groups: Each layer has variables for x, y, blur, size, and color.