Colors, fonts and spacing
Use the Theme tab to set your page’s colors, fonts, corner shapes, spacing and width.
The Theme tab sets the look of the whole page at once, so every block matches. Change a color here and every card, button and heading that uses it changes too.
Start from a preset #
Under Color presets, click one of the ready-made palettes (Light, Warm, Midnight, Forest, Plum and more) to set all the colors in one go. Then adjust any color you like.
Colors #
| Color | Used for |
|---|---|
| Page background | Behind everything. |
| Cards | Buttons, cards, banners and dropdowns. |
| Cards when pressed | The flash when someone taps a card. |
| Text / Secondary text | Main text, and dimmer text like subtitles and dates. |
| Accent | Your brand color: accent buttons, highlighted words, links and icons. |
| Text on accent buttons | Usually white. Pick a dark color if your accent is light, like yellow. |
| Pop-up background | The sheets that slide up from the bottom. |
Click a color to open the picker, or type a hex code like #cc4410 straight into the box. Your church’s brand colors are often listed in your website’s style settings or logo files.
Make sure text stands out against cards and the background, especially outdoors on a phone in sunlight. Light gray on white, or white on yellow, is hard to read.
Shape and spacing #
Every size has a slider and a number box, so you can drag or type an exact value in pixels.
- Card corner radius, Button roundness and Small image / icon radius: 0 for square corners, higher for rounder. Button roundness of 50 makes pill-shaped buttons.
- Side margin: space at the left and right edges of the screen.
- Space between blocks, Space at top and at bottom of page.
- Width on tablet and desktop: a centered phone-sized column (set its width), or the full width of the screen.
- Soft shadow under cards: helps cards stand out on a light background.
Fonts #
Pick a Font for the page and, if you like, a different Heading font. Serif fonts like Merriweather and Playfair Display feel more traditional; Inter, DM Sans and Poppins feel modern. System uses the phone’s own font. Base text size scales all the text.
Motion #
- Load animation: how blocks appear when the page opens (slide up, fade in or none).
- Shrink slightly when pressed: a small bounce on tap, so buttons feel like buttons.
Page title #
At the top of the Theme tab, Page title is the name on the browser tab when someone opens the page from its live link. On your website, the tab shows your website page’s own title instead.
One block that looks different #
To give a single block its own colors, corners or spacing, turn on Advanced editing for the page. Each block then gets a Style overrides group.
Related guides #
Still stuck? Ask whoever set up DoorStep for your church, and mention this article: Colors, fonts and spacing.