Themes & styles

Formtoro forms should look like they belong on your store. Your brand colors feed every color picker, a theme sets a form's overall look, and reusable Styles keep individual elements consistent — change something once and it updates everywhere it's used.

The four pieces

• Brand colors — the palette Formtoro detects from your storefront, plus your own named colors. Every color picker in the builder offers them as one-click swatches.
• Custom fonts — the full Google Fonts catalog by default, plus any typeface you've licensed and uploaded to your Shopify files.
• Themes — a reusable design system applied to a whole form: colors, fonts, spacing, radius, and a default look for every kind of element.
• Reusable Styles — a named bundle of look-and-feel you apply to many elements of the same kind. Like a shared CSS class, but visual.

How styling stacks

When Formtoro decides how an element looks, each layer wins over the one before it:

1. The theme's default look for that kind of element.
2. A Style applied to the element.
3. Your tweaks on that one element — colors, spacing, borders.
4. Per-breakpoint tweaks — mobile/tablet/desktop responsive overrides.

The practical rule: a local change always beats the theme. If the theme makes buttons blue and you set one button to red, that button stays red — even if you later edit or switch the theme.

Next steps

• Building forms — the builder where themes and Styles come together.
• Layout & responsive design — arrange elements and fine-tune each breakpoint.
• Going live — why a live form needs a new version to pick up theme changes.
• Luigi — ask Luigi to restyle elements for you.