Variables

Most people won’t need to change anything here — everything is already pre-configured to work across Light and Dark Mode, with consistent spacing, color, and typography settings throughout the template.

That said, it’s always helpful to understand how it all works. And once you start diving into the components themselves, you’ll quickly see how each variable ties into the system.

Everything is managed natively through Webflow’s Variables feature, and can be found on the Theme page in the template.

Color Palette

The color palette is based on Tailwind's system — with a few design tweaks to fit Webflow’s workflow.

Each color family (like Amber, Cyan, Emerald, and many more) includes 11 shades, from light (50) to dark (950). These are used across the template for backgrounds, borders, icons, text, and accents.

You can swap any shade for another if needed — just open the Color Palette variable collection and edit the color you want.

Spacing & Sizing

We’ve created a simplified, scalable spacing system based on ShadCN and Tailwind best practices. It includes:

• A core spacing scale used across all layout and component padding/margin
• Extra variables for max widths, radius, and common layout constraints

This keeps everything visually consistent while making it easy to adjust layouts site-wide.

Text Styles

All typography in the template is based on a clear set of size tokens — like text-sm, text-base, text-lg, and more.

These tokens control everything from body copy to section headings. Update a value in the Text Styles collection, and it reflects across every component using that token.

Button Styles

We’ve included a dedicated Button Styles variable collection that defines the look and feel of each button type:

• Base
• Secondary
• Destructive
• Outline

Each one uses semantic tokens like button-bg and button-text. Change the colors once here, and every button in the template updates instantly.

Theme (Light / Dark Modes)

This is where everything comes together.

Inside the Theme variable collection, you’ll find the full set of semantic color tokens used across all components — including:

• background, foreground
• card, card-foreground
• muted, muted-foreground
• primary, primary-foreground
• border, accent, ring, etc.

Each of these tokens has a value for Light Mode and Dark Mode. When you change modes, the system automatically switches between them — no extra work required.

✅ Most people only need to update the primary token to match their brand.
Everything else is already set up and follows accessibility and visual design best practices.

If you want full control, you can always swap other token values within each mode (Light or Dark) in the Theme page.

That’s it — a powerful system, fully built using Webflow’s native Variables.
Simple to use, easy to update, and designed to grow with your site.