Back to menu

Section References

The first UI kit made for Framer Agent.

Go beyond prebuilt templates. Build custom SaaS pages with native Framer components and a system designed for Framer Agent.

Get Started

Components

Design system

Why Basis©

Your ideas. Not just prebuilt sections.

Don’t limit yourself to the sections a template comes with. Basis gives you individual, reusable building blocks and a structured design system, ready to pair with a Framer Agent skill that assembles custom layouts around your brand and preferences.

Components

Native

Text styles

Styles

Color styles

Tokens

Framer native

100%

Built-in

100% native Framer

Connected to your styles

28 reusable components

Interactions included

Organized for Framer Agent

From solo founders to SaaS teams, Basis makes it easy to build a polished product website without needing to design every element from scratch.

Built for everyone

Basis UI Kit

A dedicated skill can show Framer Agent how to combine these native components into custom layouts that match your product, brand, and preferences.

Made for Framer Agent

Basis UI Kit

Your SaaS. Your layout.

Forget one-size-fits-all sections. Give Framer Agent the building blocks to create a site around your product.

Get Started

Components

Design system

Components

Made to be reused

Use 28 native Framer components as flexible building blocks for SaaS landing pages, product sites, and more.

Lorem

Components

Made to be reused

Use 28 native Framer components as flexible building blocks for SaaS landing pages, product sites, and more.

Lorem

Styles

One connected system

Make Basis your own with connected text and color styles that stay consistent across every section.

Lorem

Styles

One connected system

Make Basis your own with connected text and color styles that stay consistent across every section.

Lorem

Interactions

Designed to respond

Explore interactive UI patterns and reusable states without rebuilding the basics from scratch.

Lorem

Interactions

Designed to respond

Explore interactive UI patterns and reusable states without rebuilding the basics from scratch.

Lorem

Built for consistency.

Native from the start

Built with Framer layers and components, so everything stays editable on the canvas.

Styles that stay in sync

Shared typography and color styles keep your interface consistent across pages.

Ready for Framer Agent

Clearly named styles, organized components, and reference sections give Framer Agent a consistent starting point.

Ready to interact

Reusable UI patterns include the states and interactions you need for real interfaces.

Easy to customize

Adapt content and styling to your brand without starting every section from zero.

Designed to scale

Use the same building blocks for a landing page, product site, or complete experience.

Pricing

Everything you need. Nothing to pay.

forever

Free

Explore native components, styles, and layouts.

Get

Components

Yes

Text styles

Yes

Color styles

Yes

forever

Full kit

A highlighted pricing-card demo. Still free.

Get

Interactions

Yes

Agent-ready

Yes

FAQ

Is Basis free to use?

Yes. Basis is a free UI kit you can explore, customize, and use as a starting point in Framer.

Are the components native to Framer?

Yes. The kit is built around native Framer components, styles, and interactions.

How many components are included?

Basis currently includes 28 reusable components, organized into practical categories.

Can I customize the colors and typography?

Yes. The reference system includes 25 text styles and 25 organized color styles you can adapt to your brand.

Does Basis include interactions?

Yes. Interactive patterns and component states are part of the kit, so you can explore how they behave.

Is Basis made for Framer Agent?

Yes. Basis is structured around native components, connected styles, and reference layouts, with a dedicated Framer Agent skill planned to guide custom page creation.

What are the reference sections for?

They show how the individual components work together in real SaaS layouts, providing a visual reference for you and Framer Agent.