← Catalogue

01Token systemthe foundation.

SideQuest Base

The token architecture on its own. Type scale, spacing system, colour semantics, radii, breakpoints, all built as Webflow variables with a naming convention that holds up when a second brand arrives. Includes a live style guide page, a small component set, and documentation written for someone extending it rather than admiring it. One clone, and every project after this starts from a system instead of a blank canvas.

Sells toFreelancers who keep rebuilding the same setup from scratch and know it's costing them.

What's inside

01

Semantic colour variables

Surface, text, border and accent roles mapped over a raw palette, so a rebrand is a value swap rather than a find-and-replace across 200 classes.

02

Fluid type & spacing scale

A clamp-based type ramp and an 8-point spacing set exposed as variables, wired into the class system with breakpoints already reasoned about.

03

A naming convention that holds

Tokens are grouped by role and scale, not by page. Adding a second brand means adding a mode, not forking the project.

04

Documentation for extenders

Written for the person adding to it in month six: how to add a token, when not to, and what breaks if you skip the convention.

Previews

Style guide

Every token rendered on one page, ready to hand to a client.

Variable panel

Grouped collections with modes wired for multi-brand work.

Components

Buttons, cards and form fields built purely from tokens.

Also on the shelf

SideQuest Base