Global styles for Buttons, Cards, Sections, and Icons (Tokens)

In véltica, buttons, cards, sections, and icons don’t have their styles copied one by one—they are linked to Style tokens.

What a Style token is and why it keeps your whole site consistent

A Style token is a named appearance preset (for example, Primary button, Base card, or Secondary section).

If your site has 18 primary buttons spread across five pages and you decide you want them pill-shaped with a soft shadow, you don’t have to hunt down all 18 buttons: you edit the Primary button token once in the Brand (Style) panel and all 18 update right away.

Beyond the built-in tokens, you can click Add a style (+) in any category to create your own variants (such as a third button style or a featured card).

Customizing Button styles (font, padding, fill, border, corners, shadow, and `Hover` effect)

Under Brand → Your brand → Button styles, you start with Primary button and Secondary button. Open either one to adjust:

Typography and transform: font, size, weight, letter spacing, and whether the label is uppercase.
Inner spacing (Padding): how much breathing room sits around the text (compact, regular, large, or wide).
Background, Border, and Rounding: fill color, border width and color, and corner radius (from sharp 0 px corners to a full pill).
Shadow and Inner shadow: from subtle or elevated drop shadows to beveled edges or flat 2D brutalist offset shadows.
On hover (Hover): choose how the button reacts when a visitor hovers over it on desktop (Automatic, Darken, Lighten, Lift, Glow, or None).

Customizing Card styles (`Cards`) and automatic surface adaptation

Under Brand → Your brand → Card styles, you configure the containers that wrap your services, features, pricing tiers, or testimonials (Base card, Bordered card / Soft card, Color card):

Adjust their fill, border, corner radius, shadow, and inner padding.
Adapt card colors: when this toggle is on, cards automatically adjust their surface shade to stand out from each section’s background. A white card sitting on a white section picks up a subtle tint or border so it never blends in, and if you move it to a dark section, it adapts on its own.

Customizing Section styles (content width, vertical spacing, and automatic alternating backgrounds)

Under Brand → Your brand → Section styles, you control the horizontal bands that structure your pages (Default section, Secondary section, Accent section):

Content width: set the maximum width that inner blocks align to (for example, 1200 px) or leave it on Full / Auto.
Vertical spacing: the space above and below every section (which scales down proportionally on iPad and mobile).
Alternate backgrounds: when turned on, sections whose background is set to Automatic alternate on their own between the main background and the Alternate background as you add or reorder sections on the page—while leaving any section where you manually picked a dark or colored background untouched.

Customizing Icon styles (primary and secondary)

Under Brand → Your brand → Icons, you can style Primary icons (the larger icons at the top of feature cards) and Secondary icons (smaller icons used in lists or details) across the site:

Pick the stroke color, stroke weight, pixel size, and whether they sit inside a background box or circle (along with its color, opacity, and corner radius).

Unlinking an element from its global token (“Change here only”) or relinking it

When you select an element on the canvas that uses a global token and open its properties, you’ll see the Synced with Style (Controlled by…) notice showing how many elements share that style. You have two choices:

Edit the global style (Edit in Style): any change you make applies to every element on the site that uses that token.
Change here only (Unlink from the token): detaches just this single element from the global style so you can give it a one-off color, border, or size without affecting the rest of the site.

If you change your mind later and want that element to follow your brand again, simply open its Style token picker in the context bar or inspector and reassign the global style (such as Primary button or Base card).

Copying and pasting styles between elements or turning an element into a token

If you customized an individual element and want to reuse that exact look elsewhere, you can click Copy style and Paste style from its context bar, or turn it directly into a reusable brand token from the inspector by clicking Turn into a token and giving it a name.