The Design tab

What it looks like

Open the Design tab in the builder. The form preview sits in the middle, with Desktop and Phone buttons above it and an Open in new tab link. The design panel is on the right. Colour and shape changes are pushed into the preview immediately, without reloading it.

Design settings are part of the form definition, so respondents see them after you publish.

Presets

Under Themes there are six presets: Paper, Ink, Forest, Harbor, Plum and Mono. Selecting one replaces the colours, fonts, corner radius and button style. It keeps your cover image, logo and custom CSS.

Ink is a dark theme. The others are light. Paper is the default for new forms.

Colours

Four colours drive everything else:

Each has a colour picker and a hex field such as #c43d17. Colour mode decides whether the form is Always light, Always dark or Follow the device, which switches with the respondent's system setting.

You choose one set of colours. For dark mode, Formwork derives a dark background, card and text from the hues you picked and adjusts the accent so it stays readable. You do not design the dark version by hand.

Contrast is looked after

Colours that are hard to read are corrected for you when the form is displayed, so you cannot publish an unreadable form by accident.

• Body text is kept at a contrast of at least 7 to 1 against both the background and the card. If your text colour falls short, it becomes near-black or near-white, whichever fits.
• Text on buttons switches between white and near-black to stay readable on your accent colour. The panel tells you when it does this: "The accent is light; button text switches to dark automatically."
• Muted text, and the accent where it is used as text, are adjusted to stay legible on your background and card.

The panel also warns you while you work: if the text colour on the card is below 4.5 to 1, you see the measured ratio and "Aim for 4.5:1 or more."

Type

Choose a Headings font and a Body font from six: Inter, DM Sans, Fraunces, Lora, Space Grotesk and Instrument Serif. The defaults are Instrument Serif for headings and Inter for body text. Fonts are served from Formwork's own server, so a form does not call out to a font service when it loads.

Shape

• Corner radius: Sharp, Soft or Round.
• Button style: Solid or Outline.

Save as theme

Once you have something you like, type a name under Save as theme and choose Save. The theme appears under Your themes in every form of the same workspace, and applying it works like applying a preset. The small x next to a saved theme deletes it.

A saved theme holds colours, fonts and shape only. Cover and logo images belong to one form and are not part of a theme.

Plans

On the Free plan by default only the Paper and Ink presets, unchanged, can be published. Any other colour, font or shape, and a cover or logo, need a plan with full theme control. Custom CSS needs the next tier up. You can try anything in a draft; the check happens when you publish. See Default plan limits.

Images and CSS are covered in Images and custom CSS.