Branding & Domains
Appearance & theming
Colors, fonts, presets, cover images, and dark mode. Make every form feel like a natural part of your brand.
Theme panel
Click Theme (palette icon) in the top toolbar. The panel docks to the right and previews changes instantly.
The Mode switch (Light / Dark) at the top of the panel changes which color scheme you are editing. Each mode stores its own theme values, so you can fine-tune both independently.
The Theme picker below it lists your workspace themes for that mode first, then the built-in presets. The footer shows All changes saved until you edit something; then Discard and Save appear.
Presets
The Theme picker carries seven presets for light mode and nine for dark. Each one applies a full set of coordinated colors, a font, and corner rounding in one click.
formbase default — applied automatically to every new form, one per mode
Presets — the curated themes listed below
Custom — “Only this form”. What the picker shows once you change any value by hand
Available on Free
Custom themes, including presets and separate light/dark styling, are available on every plan. See plans & pricing.
Light mode presets
| Preset | Style |
|---|---|
| Solarized Light | Warm, low-contrast with amber tones |
| Atom One Light | Clear contrast with blue accents |
| Catppuccin Latte | Warm pastel with mauve and peach |
| Rosé Pine Dawn | Muted rose and pine pastels with iris accents |
| Mint Paper | Fresh teal-green on ivory with emerald highlights |
| Coral Reef | Warm peach and coral with sun-kissed accents |
| Sunny | Warm golden yellow on an ivory base |
Dark mode presets
| Preset | Style |
|---|---|
| Dracula | Dark with vibrant accent colors |
| Monokai | Classic dark palette with warm green and orange |
| Midnight Synth | Deep midnight with neon synthwave glow |
| Vulcan | Sleek dark with cool grays and electric blue |
| Tokyo Night | Dark urban feel with neon and indigo |
| Gruvbox Dark | Retro warm earth with mustard and burnt orange |
| Rosé Pine Moon | Dusky plum night with iris accents |
| Forest Night | Deep pine with moss and woodland tones |
| Black | Pitch-black with grayscale — Vercel-inspired |
Workspace themes
A workspace theme is a named theme for one mode, light or dark, that several forms share. Use one to keep every form on brand: change the theme once and every form that uses it follows. To theme both modes, keep two, such as Acme Light and Acme Dark.
Create a workspace theme
- Open the theme panel on a form, choose Light or Dark, and pick a preset or adjust the colors until the form looks right.
Click Save as workspace theme under the Theme picker and give it a name, such as your company name.
That mode of the form is now linked to the new theme. The picker shows its name and how many forms use it.
Use it on another form
Open the theme panel on the other form, pick the theme under Workspace themes, and click Save. The picker only lists workspace themes for the mode you are editing, so link the light and dark modes separately.
Edit a linked form
A linked form edits like any other form. As soon as your changes differ from the workspace theme, the footer asks where they go:
Save to [theme name] updates the workspace theme and every form linked to it.
Save for this form only keeps the change on this form. That mode stops following the workspace theme and becomes a custom theme.
Applying a preset to a linked mode also unlinks it. To link it again, pick the workspace theme from the picker and save.
Published forms update on their next publish
Saving a workspace theme changes the draft of every linked form right away. Respondents see the new look after each form is published again, just like any other edit. Linked forms show Publish changes until then.
Rename or delete
On a linked form, open the ⋯ menu next to the Theme picker. Rename changes the name everywhere the theme is used. Delete removes the theme; forms that used it keep their current look as a custom theme.
Theme controls
Pick a preset or workspace theme, then fine-tune typography and colors. Each color describes a purpose rather than one component. For example, changing Text updates page text, question titles, field text, and option text together. Hover a color’s name to see what it controls. A dot marks colors you have changed but not saved.
Typography
| Setting | What it controls |
|---|---|
| Font | Typeface for form fields, page text, and shared blocks. Eleven families, listed below |
| Size | Base text size, 12–22 px. Related labels and controls scale with it |
| Corner radius | Shared corner rounding for inputs, cards, options, and buttons, 0–32 px |
Colors
Colors are grouped by where they show up on the form.
| Group | Color | What it controls |
|---|---|---|
| Page | Background | Canvas behind forms, media wells, and focus offsets |
| Page | Text | Main text, question titles, field text, and option text |
| Page | Muted | Quiet fills such as table headers and hover states |
| Page | Muted text | Descriptions, helper text, placeholders, and captions |
| Page | Link | Inline links in rich text and form copy |
| Fields and choices | Field | Inputs, cards, popovers, file rows, and options |
| Fields and choices | Border | Input, card, option, table, and upload outlines |
| Fields and choices | Selected | Selected option fills plus hover and drag highlights |
| Fields and choices | Selected text | Text and icons on selected surfaces |
| Fields and choices | Focus ring | Focus rings, selected outlines, and active borders |
| Buttons and errors | Button | Submit/Next buttons, progress bars, and primary actions |
| Buttons and errors | Button text | Text and icons on primary actions |
| Buttons and errors | Error | Validation errors, invalid borders, and upload failures |
| Rating | Star outline | Inactive Rating stars |
| Rating | Star fill | Selected Rating stars |
| Rating | Required mark | Required asterisk on questions |
The Rating group also has Star size, the size of Rating stars in pixels, from 12 to 48.
Fonts
formbase ships eleven font families. The font you choose under Typography applies to all text on the form.
| Font family | Style |
|---|---|
| Cal Sans UI | Default sans-serif for formbase |
| Inter | Clean geometric sans-serif |
| Manrope | Modern geometric sans-serif |
| Arial | Neutral system sans-serif |
| Tahoma | Compact sans-serif |
| Times New Roman | Classic serif |
| Georgia | Elegant screen serif |
| Lora | Contemporary calligraphic serif |
| Palatino Linotype | Book-style oldstyle serif |
| JetBrains Mono | Developer-friendly monospace |
| Comic Sans MS | Casual hand-drawn |
Cover image and logo
The cover image and logo sit at the top of the canvas. You set them up directly on the canvas — not inside the theme panel. For a walkthrough, see Understanding the editor → Cover and logo.
Dark mode
formbase supports dark mode in two places: the dashboard and published forms.
Dashboard
Toggle dark mode from the user menu at the bottom of the sidebar. The setting follows your account across devices.
Published forms
Published forms follow the respondent’s system preference by default. If their device is in dark mode, the form shows in dark mode.
Theming both modes
If you only set up a light theme, the form uses formbase’s default dark colors when dark mode is active. For full control, set up both color schemes using the light/dark toggle at the top of the theme panel.
When you switch between Light and Dark in the theme panel, the dashboard switches to match. This lets you preview your theme in context while editing.
Common theming patterns
Match your brand — pick your brand font, set the Button color to your primary brand color, and upload your logo. Use a preset as a starting point, then save the result as a workspace theme so every form shares it.
Dark-mode-first survey — force dark mode via the embed settings when sharing, then customize the dark color scheme for readability. Use a high-contrast accent for the active rating color so stars pop on dark backgrounds.
Minimalist embed — set the Background color to match your website, hide the cover image and logo in the embed settings, use a quiet Border color, and drop corner radius to 0.
Playful quiz — pick Comic Sans MS, push corner radius towards 32 for pill shapes, use a bright Selected color, and add a cover image from the Unsplash tab in the cover picker.
Branding
By default, published forms display a small formbase badge. Turn it off with Show formbase branding in Form settings → General. Removing the badge requires a Pro or Business plan — see plans & pricing.
Test both light and dark modes before publishing
Preview your form with system dark mode enabled before publishing. Logo contrast and accent colors often need a tweak for the dark variant — especially cover images and button colors that look great on a light background but wash out on a dark one.