Customize
One font, five colors, ten presets. Enough to make a form unmistakably yours, and small enough that you cannot make it ugly by accident.
Opening Customize
Open a form in the editor and click Customize in the top bar. On a wide screen the panel docks to the right of the form; on a phone it rises as a sheet from the bottom. There is a second way in from the cover and logo toolbar at the top of the form.
Every change lands immediately on the form in front of you. The editing canvas itself takes the theme on, so you are not previewing the look. You are editing inside it.
The theme is stored on the form and saved with the rest of your edits. There is no separate save step.
Fonts
Ten typefaces, one per form: geometric, neutral, editorial and serif, so a job application and a party invite do not have to sound alike.
- Interdefault
- Poppins
- Outfit
- Sora
- Space Grotesk
- DM Sans
- Lora
- Playfair Display
- Bricolage Grotesque
- Fraunces
In the panel each name is drawn in its own typeface, so you choose by looking rather than by remembering. Fonts are fetched only when a form actually uses one.
The five colors
Five values define a form. The swatches below are what an untouched form starts with.
| Color | What it paints |
|---|---|
| Background | The page behind the form, in the public link and the embed alike. |
| Text | Questions, descriptions and the answers being typed. Secondary text is a softer mix of this color and the background. |
| Button | The fill of the submit and next buttons. Their hover and pressed shades are worked out from it, so a black button and a white one both answer to the touch. |
| Button text | The label sitting on those buttons. |
| Accent | Selected options, focus rings, links, progress and every highlight the form draws. |
Picking a color
Click a swatch and the picker opens: drag inside the spectrum, or type a six-digit hex code into the field beneath it. Any hex is accepted. There is no fixed palette you have to choose from.
What Fillio works out for you
Only those five values are yours to set; everything else is derived from them. Input surfaces, borders, placeholder and muted text, hover veils and the fill behind a chosen option are all mixed from your background, text and accent, so they stay in the same family whatever you pick. Text that sits on the accent is chosen by measured contrast, which is why a label stays legible on a pale mint accent and on a deep navy one alike.
Choose a dark background and the form switches its native controls (number steppers, date and time pickers, scrollbars) to their dark variants, and lifts input surfaces so fields never disappear into the page.
Presets
Ten complete looks. Each one sets the font and all five colors at once (five light, five dark) and is meant as a starting point rather than a decision.
| Preset | Font |
|---|---|
| Mono | Inter |
| Warm | DM Sans |
| Mint | Outfit |
| Ink | Lora |
| Forest | Sora |
| Mocha | Fraunces |
| Sakura | DM Sans |
| Iris | Bricolage Grotesque |
| Citrus | Poppins |
The preset matching your current values is marked in the panel. Change a single value afterwards and the mark clears. From that point on the theme is yours, not the preset's.
Where the theme shows up
The theme travels with the form. The public link, the editor canvas and the preview all render in it, and it applies to every page of a multi-page form.
Embeds are included. An embedded form carries the same font and colors, and the embed page paints its own background from the theme, so the frame matches the form instead of flashing white first.
Cover and logo colors are suggested from the theme too. A cover you have already placed is never repainted when you switch themes. The color it was given stays.
A dark form is the fastest way to look like nothing else someone opened that day; Midnight and Forest are built for it. Set the accent last. It is the one color respondents actually follow through the form.