Appearance and styling

Customize colors, typography, and visual elements to match your brand

Overview

The appearance editor gives you complete control over the visual styling of your forms and surveys. Customize colors, fonts, button styles, and spacing to create a cohesive brand experience.

Access the appearance settings by opening your form or survey in the dashboard and clicking on the Appearance tab in the settings panel.

Theme colors

Light theme

The light theme is always available and defines how your form appears in light mode. You can customize five key colors:

Primary color

Used for buttons, links, and interactive elements. Hover states are automatically generated (15% darker).

Text color

Main text color for questions, labels, and body content.

Field text color

Text color for input fields, textareas, and form controls.

Field background color

Background color for input fields and textareas.

Form background color

Overall background color for the form container.

Dark theme

Enable dark theme support to provide an optimal viewing experience in low-light environments. When enabled, you can configure the same five colors for dark mode.

The app automatically detects and applies the appropriate theme based on the user's system preferences.

Quick fill options:

Invert: Automatically inverts your light theme colors for dark mode
Derive lighter: Creates complementary lighter colors suitable for dark backgrounds

Tip

After using quick fill, fine-tune the colors to ensure proper contrast and readability. The system validates contrast ratios to meet accessibility standards.

Typography

Font family

Choose from seven professionally selected font families that work well for forms and surveys:

Inter: Modern, clean, excellent readability
Roboto: Google's material design font
Open Sans: Friendly and approachable
Lato: Professional and versatile
Montserrat: Geometric and contemporary
Playfair Display: Elegant serif for a sophisticated look
Source Sans: Clear and legible, designed by Adobe

Text sizing and weight

Customize the size and weight of question and answer text to create the perfect visual hierarchy for your forms.

Question font size

Choose from Small, Medium, Large, X-Large, or 2X-Large.

Question font weight

Select Normal, Medium, Semibold, or Bold to control emphasis.

Answer font size

Choose from Small, Medium, or Large for answer options and input text.

Answer font weight

Select Normal, Medium, or Semibold for answer text.

Best practice

Use larger, bolder text for questions to create clear hierarchy. Keep answer text slightly smaller for better visual balance and readability.

Button style

Customize the appearance of buttons throughout your form. All buttons automatically use your primary color from the theme settings.

Button size

Choose from Small, Medium, or Large to match your form's overall scale.

Border radius

Control the roundness of button corners: None (sharp), Small, Medium, Large, or Full (pill-shaped).

Font weight

Select Normal, Medium, Semibold, or Bold for button text.

Full width

Toggle this option to make buttons span the full width of their container, which works particularly well on mobile devices.

Spacing

Control the vertical spacing between questions and sections to create the right visual density for your form.

Question spacing

Space between individual questions. Choose from Tight, Normal, Relaxed, or Loose.

Section spacing

Space between form sections. Choose from Tight, Normal, Relaxed, or Loose.

When to use tight spacing

Short forms with simple questions where you want to minimize scrolling. Works well for quick surveys and sign-up forms.

When to use loose spacing

Long forms with complex questions that require careful reading. Extra spacing reduces cognitive load and improves completion rates.