TersbySite colours
The gear at the top → «Site colours». Here are the main colours: background, text, accent (the buttons' colour) and muted, plus your own named colours, say «Brand blue».
When an element uses a site colour rather than a code like #FF5A36, it changes everywhere at once: adjust the accent and all buttons and badges on every page take the new colour. In any element's colour picker the site colours sit as dots on the right.
Button styles
The gear → «Button styles». The main button takes the site's accent, while «Secondary» and «Outline» are set here: colours, border, rounded corners. Each button's settings say which style it is.
Font and text
Headings and text have a «Font» group: font, size, weight, line height and letter spacing, alignment, colour. The size on a phone is set separately (switch the canvas to phone), and big headings shrink on their own.
Section background
The «Background» group of a section or group:
- a colour or a gradient (ready ones: «Accent», «Glow», «Down from above», «Aurora», or your own);
- a background picture with darkening over it so the text stays readable;
- a background video (sections only): a link to MP4 or WebM, plays without sound, a phone shows the picture instead.
Border, corners, shadow, glass
Almost every element has a «Style» group:
- Border: width and colour;
- Corner radius;
- Shadow;
- Glass: blurs what's behind the element, like frosted cards.
Animation
Any element or section has an «Animation» group:
- Entrance on scroll: fade in, up from below, down from above, from the left, from the right, zoom in, from blur. With duration and delay; a group can bring its elements in one after another.
- On hover: lift, grow, shadow, dim.
- Loop: float, pulse, shake. Good for icons and shapes.
«Play» shows the animation right on the canvas.
Spacing and sizes
A section's «Layout»: width (regular, full width, to the edges), height (fit the content or full screen), padding, the gap between elements, alignment. Elements have «Size and spacing»: width, max width, outer and inner spacing.
You can type numbers into the fields: the value applies when you leave the field or press Enter.