Nov 5, 2025

Styles. A Unified Styling System For Your Website

Set up typography, button Styles, and color palette for your project in one place. Apply Styles to website elements with just a couple of clicks. If you ever need to update the design, simply edit the Style — all changes will automatically apply across the entire website.

Where to find: Site Settings → Colors and Styles → Manage Styles

How Styles Improve Your Workflow

Faster website creation. You don't have to customize every new button or heading from scratch. Just select a Style and all typography and appearance settings will be applied automatically.

Time saver when updating the design. Imagine you built a website and later decide to change your heading size, color, or font. Previously, it could take hours — now, with Styles, you can update them in a few clicks directly in Site Settings.

Consistent visual identity. Using Styles makes it easier to maintain a unified look and feel across all pages. When headings, text, and buttons are styled consistently, the website looks polished and professional.

What You Can Customize Using Styles

Typography

Set the appearance of headings, subheadings, body text, and other text elements. For example, you can set Tilda Sans font, 36px font size, and Bold font weight for all headings on the website. For body text, you can set a smaller font size of 24px and choose Normal weight instead of Bold.

How to apply a typography Style: In the block Settings, open the Typography tab → Styles → choose a Style. It will automatically apply to the block. Or Cmd/Ctrl + click any text element and select a Style in the quick-access widget.

Buttons

You can set the button color, border, radius, padding, shadow, and add an icon. You can also configure a hover effect — for example, scale the button up on hover or change its background color.

How to apply a button Style: In the block Settings, open the Button tab → Styles → choose a Style for the button. Or click the button on the page and choose a Style in the widget that appears.

Both typography and button Styles support responsive settings, allowing you to define different values for desktop, tablet, and mobile breakpoints (e.g., a smaller heading size on mobile).

Colors

Create a color palette to keep your visual language consistent across your website. For example, gray and beige may serve as primary colors, while pink can be used as an accent. This way, you can apply the desired colors faster, for example, for tabs or page covers.

How to apply a color from the palette. In the block Settings, when selecting the color of an element, a widget will open. Select Project Styles in the drop-down menu and choose the desired color.

Exporting & Importing Styles

You can download your project's Styles and reuse them in another Tilda project.

To export a Style, in Site Settings → Colors and Styles, click Manage Styles and choose Download Styles — you'll get a .tildastyles file with your project name.

To import a Style, click Upload Styles in the same menu and select a .tildastyles file (other file extensions won't upload). Newly added Styles will appear alongside your existing ones.

Learn more on setting up Styles in the Help Center

We'd love to hear your impressions of the new feature — feel free to share them on social media. If you have suggestions for improvement, contact our support team in your account or email team@tilda.cc