How I set up every new Framer project (from scratch)

After 200+ Framer sites, I've refined my starting ritual down to a system. This foundation makes everything faster, cleaner, and easier to scale later.

Here's exactly what I do:

Project setup

The upcoming process includes setting up everything that helps us in scalability: - Text styles - Color styles and other global styles - Breakpoints - Base components - Vectors - Page templates Read further to digg in each one individually.

Color variables

I create color variables for: Primary/Secondary/Accent Background (light/dark variants) Text (heading/body/muted) Border/Divider Success/Warning/Error states Changes one place = updates everywhere.

Text styles

I set up text styles for the entire project: H1, H2, H3, H4, H5, H6 Body Large, Body Default, Body Small Button Text, Caption, Label Each style includes font, size, weight, line height, and letter spacing for all breakpoints. No random font sizing later. Use my plugin to make this setup quicker.

Breakpoints

I decide on my 2-3 critical breakpoints: Mobile: 390px Tablet: 768px Desktop Small: 1200px Desktop: 1440px (my design width) I create a test container on the homepage with boxes at each breakpoint to verify my responsive logic works before building.

Base components

Before touching any real content, I build: Button (with all variants) Standalone Links Badge/Tag Accordion Sample Card These get used everywhere. Building them first = consistency from day one.

Vectors

Setting up my icon sets and brand specific vectors as vector sets in Assets.

Page Templates

Starting to create bigger components like Navbar and Footer and put them into a page template.

Sharing mini-tutorials like this regularily on X. Follow along to not miss new ones.