Four variable types
Colors, sizes, fonts and numbers cover the decisions a design system needs.
03 / 15
One change.Every page on brand.
Variables are named colors, sizes, fonts and numbers. Group them by name, bind them to any block in the Style tab, and update the whole site from one place.
- Screen 1 of 1
Variables
A real look at design variables in the builder. Scroll to explore.
- 01
Four variable types
Colors, sizes, fonts and numbers, each with its own list.
- 02
Groups by name
Names like Brand/Ink keep large systems organized.
- 03
Real CSS custom properties
Each variable becomes a --wy-* property you can bind in the Style tab.
Real screenshots of the Webyaam builder with a demo site.
01 What you get
Design variables,
in detail.
Groups by name
Use names such as Brand/Primary to keep large systems organized.
Bind anywhere
Apply a variable to any block from the Style tab instead of a fixed value.
Real CSS
Each variable becomes a CSS custom property in your Astro project.
Variable types
- Color
- Size
- Font
- Number
02 How it works
- 1
Define
Create variables for your brand colors, type and spacing.
- 2
Bind
Pick a variable in the Style tab instead of typing a value.
- 3
Update
Change the variable once and every bound block follows.
03 Keep exploring
Your next website starts here
Your next website,block by block.
Start free in the builder. Your first site gets a 7-day trial with Grow features, no credit card needed.