Client-First/ astro
The v3 foundation Client-First meets Astro

Well-built websites.
From the very first class.

A clear structure, shared variables and reusable components.
Everything you need to start your next website.

Try the variablesView the style guide
ONE FOUNDATION, YOUR DESIGN.Change a variable. See the difference.
The system in practiceInteractive preview
Variables
NameValue

Brand

  accent

Neutral

  paper
  ink

Others

  success
One value. Every component.
Component preview100%
Your next project

One idea.
A solid foundation.

Consistent choices, from the first heading to the last button.

View the components
Designed for every screen size
Brand colour
background: var(--brand-accent);Try changing the variables
Astro + Tailwind v4·Client-First variables·Ready to customise
A system that connects everything

Fewer repeated decisions.
More room for design.

The same foundations on every page, with the freedom to adapt them to each project.

VARIABLES

One source of truth.

One colour in Base, different roles in Theme. Your identity stays consistent everywhere.

SPACING

A shared rhythm.

Sizes in rem and a simple scale for layouts with room to breathe.

TYPOGRAPHY

Every heading in its place.

Size, weight and line height together. Balanced line breaks by default.

Easy to read. Easy to build on.

A structure that makes sense.

Pages bring sections together. Sections share a container. Components do the rest.

View the components

Create only what the project needs.
Reuse what is already there.

index.astro Page
Section py-section
Container site_container
Your heading goes here.
Content
Component
Shared foundations at every screen size.
For your next step

Your starting point.

The foundation is in place.
The resources are close at hand.

The style guide

The colours, text styles and components used on this site.

In this project

The Client-First method

Explore the original system by Finsweet.

Finsweet

Astro & Tailwind

Understand the integration and keep building.

Documentation
A few pointers

Before you
build.

What is this test site for?

To check an Astro + Tailwind foundation before building pages: variables, text styles, components and mobile behaviour. The style guide brings together the elements actually in use.

Can we change the whole visual direction?

Yes. Base values are references to adapt to the project. Theme colours describe their purpose. Changing the palette does not require renaming classes on every page.

How does spacing adapt to mobile?

Section spacing and side gutters are defined in rem and change at the chosen breakpoint. Components use the same variables instead of introducing isolated values.

Is this an official version of Client-First?

No. This is an independent adaptation to test a workflow with Astro and Tailwind. Client-First is a system created by Finsweet, originally for Webflow.

The foundation is ready.
What comes next is yours to build.

Open the style guide