--- title: "Styling Your Form: Skins, Themes, Colors, and Fonts" description: "The Design tab explained: pick a skin, apply a quick theme, fine-tune colors, typography, and background, and switch on add-ons." url: https://help.roasform.com/en/articles/32-styling-your-form-skins-themes-colors-and-fonts collection: "Form Builder" updated: 2026-11-04 language: en --- # Styling Your Form: Skins, Themes, Colors, and Fonts The Design tab explained: pick a skin, apply a quick theme, fine-tune colors, typography, and background, and switch on add-ons. Everything about how your form looks lives in the **Design** tab at the top of the builder. It has up to four parts: **Skin** (the layout and interaction style), **Style** (themes, colors, fonts, background), **Add-ons** (trust widgets), and **Settings** (options for the selected skin, such as Widget Size or the chat bot avatar; not shown on TypeSkin). Changes save automatically and show on the canvas as you make them; use the desktop, tablet, and phone toggles above the canvas to check each size. ## Skin: how the form presents questions A skin is the overall layout. Pick one under **Skin**; your questions, logic, and endings stay the same. - **TypeSkin:** one question at a time, the classic full-screen flow. The default. - **Chat Bot Skin:** a conversational, chat-style experience. - **Calendar Skin:** built around booking a call without leaving the form. - **SmartSkin:** one question at a time in a compact card, without a calendar. - **Spektra Skin:** a bold, modern multi-step layout. Calendar and Chat Bot have their own walkthroughs: [Calendar Form Skin](https://help.roasform.com/en/articles/4-calendar-form-skin-tutorial.md) and [Chat Bot Form Skin](https://help.roasform.com/en/articles/5-chat-bot-form-skin-tutorial.md). Card-style skins (Calendar Skin, SmartSkin, and Chat Bot Skin) float on the page when embedded, which is why their embed background is always transparent. ![](https://staticfiles.gleap.io/ghelparticle/ucTFiuDGj8oBDcYxit3KQgJVZAtaFvLFIcpeEdaCmfmigoDblbjSYLD3gnibU333PgVlsJfmc4X.png) ## Style: quick themes The fastest way to a good-looking form. Under **Quick Themes**, browse the **Basic**, **Business**, **Bold**, **Premium**, and **Gradients** groups and click a theme (Light Mode, Dark Mode, Warm Ivory, Ice Blue, Slate, and many more). A theme sets all colors and the background at once; the moment you edit any color by hand, the selection switches to **Custom**. Each skin has its own set of themes. On Calendar Skin, SmartSkin, and Chat Bot Skin the presets are under **Themes**, and background colors are set under **Colors**. **Reset design** at the top puts everything in the Style tab back to the defaults. It asks you to confirm first. ![](https://staticfiles.gleap.io/ghelparticle/AxicaQF76JKNvDKE6AGaBqTIepbkWXTv9VGq4BCNsa0IeVXZ7nKmMFzWi9Ka6JhII3K93ztMSKv.png) ## Colors Open **Colors** to fine-tune. Each row has a hex field and a color swatch; type a hex code or click the swatch to pick. - **Element title** and **Element description** (the description color also applies to the "press Enter" hint) - **Input placeholder:** the faint hint text inside inputs - **Accent:** selected options, focus lines, and other highlights - **Error:** validation error text and borders - **CTA button** and **CTA button text:** the Continue / Submit button and its label - **Advanced:** extra controls for input backgrounds, borders, and other details when you need pixel-level control ![](https://staticfiles.gleap.io/ghelparticle/DvGZLMF8VIbbzG5l37ihWDkR4nq5xXma4PejZ7IOhzECocADCYUQdx4fXy9lUB47mo73C5Ga57v.png) ## Typography - **Font:** the typeface for the whole form (Inter by default; TypeSkin and Spektra Skin). - **Base size:** 16px by default. All text and spacing on the form scale from it, so one change makes the whole form larger or smaller. - **Scale elements with base size:** on, the buttons, inputs, and spacing grow with the base size; off, only the text does. Need one question bigger or smaller than the rest? Select it on the canvas and use the text toolbar; a per-question size overrides the base. ![](https://staticfiles.gleap.io/ghelparticle/xNtj3FUB4sJAd3XXN5UUYrKPtwGr3fS2gUk5xe9YgMbcIulqTC3KlzeuoiwRpkzWhg2c7iWd99M.png) ## Background On TypeSkin and Spektra Skin, choose **Solid** and pick a preset swatch or type a **Custom** hex, or choose **Gradient** for a two-color blend. **Pattern Overlay** adds a subtle texture on top. On an embedded form you can also let the host page's own background show through instead; see [Embed Settings](https://help.roasform.com/en/articles/24-embed-settings-size-transparent-background-hide-scrollbar-full-screen.md). ![](https://staticfiles.gleap.io/ghelparticle/pkb3Fjv40VqcZXhhS6XCVN0FZNyY6cERGDh2EFhYkYzFMedqMkaSQxiM77gW6X6Ry0BugsrbdwM.png) ## Add-ons Form-wide widgets that boost trust: **Reviews** (avatars, stars, and a trust line) and **Logo strip** (a "Trusted by" row of client logos). Switch one on, fill in its content, and it appears on every step of the form. ![](https://staticfiles.gleap.io/ghelparticle/Yn32XvPLtfmtRvVF2a8ZG8DO6OhMFjIF0bzpEViE0dlVLvKjRJMEL5FmElGYa6dqGzwT40K0KI3.png) ## Also worth knowing - Styling is per form. Duplicate a styled form to reuse its look for the next one. - The builder canvas is a close preview, not the final render; check the live form (Share → Link) on a phone before launching. - The ROASForm badge is removed automatically on annual plans; monthly paid plans show a smaller badge. See [How to Remove the ROASForm Badge](https://help.roasform.com/en/articles/17-how-to-remove-the-roasform-badge.md).