Founder-First: The Simple Style Guide for Founders and Webflow Beginners

Building a website can sometimes feel overwhelming, especially when style guides and design systems are packed with technical jargon meant for developers. But what if there was a style guide designed just for you-whether you’re a founder, a beginner, or a creative looking to build a website in Webflow without the confusion?

Introducing Founder-First, a clean, simple, and flexible Webflow style guide made to empower everyone to create beautiful websites easily.

What is Founder-First?

Founder-First is a thoughtfully crafted style guide specifically designed for Webflow users who want an easy-to-understand, human-friendly system. Unlike traditional style guides that focus heavily on developers and complex class naming conventions, Founder-First puts people first.

It provides a minimal, clear structure with simple class names and a flexible setup that anyone can pick up quickly. Whether you’re a founder building your brand’s site, a beginner learning Webflow, or a creative professional who wants a straightforward starting point, Founder-First is built for you.

Why Was Founder-First Created?

Many existing style guides are developer-centric. They often use complicated naming systems, deep nesting, and technical concepts that can intimidate non-developers. This creates a gap where founders and beginners struggle to understand or customize their websites effectively.

Founder-First was created to bridge this gap by:

• Simplifying the style guide structure
• Using easy-to-remember class names
• Reducing unnecessary complexity
• Encouraging creativity and freedom in design
• Making it beginner-friendly and accessible

The goal is to empower founders and beginner Webflow developers to build websites confidently without needing deep technical knowledge.

How to Use Founder-First: Get Started in Minutes

Getting started with Founder-First is as easy as 1-2-3:

Step 1: Clone or Duplicate the Style Guide

Founder-First is available on Made in Webflow. Simply visit the page and click Duplicate or Clone to add it to your Webflow account.

Step 2: Explore the Structure

Open your copy and familiarize yourself with the five core building blocks (more on this below). These blocks form the backbone of your website layout.

Step 3: Customize and Build

Change the styles and variables to match your brand’s colors, fonts, and spacing. Then start adding your content within the simple structure. Because the guide is flexible, you can experiment and create freely.

The Core Structure: Five Simple Building Blocks

Founder-First’s magic lies in its simplicity. The entire style guide is built around just five main elements, which you can think of as the essential building blocks of your website:

This structure is intentionally kept shallow-no deep nesting or complicated stacking. It’s designed to be intuitive and easy to remember, so you can focus on creating instead of organizing.

Spacing: Using Grid and Flex Gap for Clean Layouts

Spacing is a crucial part of good design. Instead of relying heavily on margins, Founder-First uses CSS Grid and Flexbox gap properties to control spacing between elements.

Why?

• Consistency: Gap properties create equal space between items automatically.
• Simplicity: You don’t have to manually adjust margins for every element.
• Responsiveness: Grid and flex layouts adapt smoothly to different screen sizes.

This approach keeps your layouts clean, balanced, and easier to maintain.

Sizing with rem Units: Scalable and Consistent

Founder-First uses rem units for sizing fonts, spacing, and other measurements. Here’s why this matters:

• Rem is relative to the root font size, which is usually 16px by default in browsers.
• This means 1rem = 16px, so if you want a 32px font size, you set it to 2rem.
• Using rem units makes your design scalable and accessible, as users can adjust their browser’s base font size and your site will adapt accordingly.

This consistency helps maintain a harmonious look across different devices and user settings.

Variables: Keeping It Simple

Unlike some complex style guides packed with dozens of variables, Founder-First keeps variables to a minimum. This helps beginners avoid overwhelm and focus on the essentials.

You’ll find variables for:

• Colors (primary, secondary, background)
• Font sizes and weights
• Spacing scales

This minimalist approach makes it easier to customize your site without digging through endless options.

FAQs: Quick Answers to Common Questions

Q1: Who is the Founder-First style guide designed for?

Founder-First is perfect for founders, entrepreneurs, beginners, and creatives who want a simple, easy-to-understand system to build websites in Webflow without needing coding or deep design skills.

Q2: How do I get started with the Founder-First style guide?

Simply clone or duplicate the style guide from the official source (like Made in Webflow), explore the five core building blocks, customize colors and fonts to match your brand, and start adding your content.

Q3: Can I customize the style guide to fit my brand?

Absolutely. Founder-First uses minimal variables for colors, fonts, and spacing so you can easily update the style guide to reflect your brand identity without complexity.

Q4: How does Founder-First help with website consistency?

By using predefined classes and a simple page structure, Founder-First ensures every page looks cohesive and professional, saving you time and avoiding design inconsistencies.

Q5: Is Founder-First optimized for SEO?

Yes. It uses clean, semantic HTML structure and encourages best practices like proper heading hierarchy, alt text for images, and responsive design to help your site rank well in search engines.

Q6: What makes Founder-First different from other style guides?

Founder-First focuses on simplicity and usability for non-developers. It avoids complicated class names and deep nesting, making it easy to learn and use, especially for founders and small teams.

Q7: Can I use Founder-First for large or complex websites?

Yes. While it’s designed to be simple, Founder-First’s flexible structure and reusable components scale well as your website and team grow.