Design once. Scale everywhere.
Colour, type, corner radius, shadow and spacing are global tokens. Change one, every page follows. A Studio project holds its design decisions as values, not as choices repeated on every section. That is the difference between a site you can restyle in an afternoon and a site you have to rebuild.
The cascade
A value changes in one place and arrives everywhere.
Most builders let each section keep its own styling. That is why changing a brand colour on a twelve-page site turns into twelve pages of work. Studio moves the decision up one level.
Token
One value. Primary colour, base font, corner radius, spacing step, shadow depth.
Component
Buttons, cards, inputs and headings read the tokens. None of them carry their own colour.
Page
A page is composed of sections built from those components, so a page inherits by construction.
Website
Every page in the project resolves to the same values. Consistency is the default state, not a review step.
The arrow only points one way. A section cannot quietly override the system, which is what keeps the fifteenth page looking like the first.
Live
Change one value. Watch three pages move.
This is the real behaviour, running here. Pick a primary colour and a corner style — the three pages below share one set of variables and none of them was edited individually.
Three pages. One set of values. Nothing was edited page by page.
Foundations
Colour, type and spacing are project settings.
Three decisions carry most of what a site looks like. Studio treats each one as a scale rather than a single value, so contrast and rhythm hold up wherever the value lands.
Colour
A primary and a neutral ramp, not a pile of one-off hex values. Text, borders and surfaces each draw from a defined step, so contrast stays legible when the brand colour changes.
Typography
One family, a fixed set of roles. Display, heading, body and caption each have a size, a line height and a tracking value, so nothing on a page is set at an arbitrary size.
Spacing and shape
Padding, gaps and section rhythm come off one step scale. Corner radius and shadow depth are single values applied everywhere, so a rounded project is rounded end to end.
Components
Every element is the same element.
A button on the pricing page and a button in the footer are one component with one definition. They do not carry their own colour, padding or corner radius — they read the project values at render time.
That is why a restyle is a settings change rather than a search and replace, and why nothing gets missed on the page nobody remembered to check.
Card
Input
One definition each. Rendered from the project values.
Variants
Choice, without drift.
A design system that offers one of everything gets fought. Studio gives each component a small, named set of variants — enough range to design with, few enough that a project stays coherent.
Emphasis
Primary, secondary, ghost. Which one is the action is a system decision, not a per-page one.
Size
Small, medium, large. Sizes come off the same step scale as spacing, so a large button still lines up.
Density
Comfortable or compact layout, applied at the section level rather than by nudging padding by hand.
State
Hover, focus, disabled and loading are defined once per component and behave the same everywhere.
Responsive
Mobile is not a second pass.
Sections are built responsive, so what you publish works on phones without a separate mobile pass.
Type scales fluidly between phone and desktop instead of jumping at a breakpoint. Grids collapse in an order the section defines. Touch targets keep their minimum size at every width. None of that is something you configure per page.
Sections
The system ships as finished parts.
Tokens and components are the layer underneath. What you actually place on a canvas is a section — a hero, a pricing table, a feature grid — already built from the system and already responsive.
Section library
Every page is assembled from 33 responsive sections that are tested before they reach your canvas.
Design system
Colour, type, corner radius, shadow and spacing are global tokens. Change one, every page follows.
Multi-page sites
Add, rename and link pages inside a single project.
Set it once. Ship every page.
Pick a colour, a typeface and a corner style at the start of a project. Every page you add after that already looks like it belongs.
Open the studio