Widget Design Settings
Use Dashboard -> Settings -> Design to control the default appearance of Firesky widgets on your church website. These settings are saved to your church profile and are applied automatically anywhere your widgets are embedded.
Who can update design settings
Only church admins can access the Design page. If you do not see it, ask a church admin to grant you the admin role under Dashboard -> Users.
What the Design page controls
Colors
Set the shared palette used by widgets:
- Primary - Buttons, links, selected states, and accents
- On primary - Text shown on primary-colored surfaces
- Accent - Secondary highlights
- Background and Foreground - Widget surfaces and text
- Muted and Muted text - Quiet cards, filters, helper text, and empty states
- Border - Dividers, inputs, and card outlines
- Success, Warning, and Destructive - Status and validation states
Use Derive from primary after selecting a primary color to generate a balanced supporting palette.
Typography
Choose heading and body fonts from the curated Google Fonts list, or enter a custom font stack if your website already loads a font. You can also adjust:
- Base font size
- Heading weight
- Letter spacing
Curated Google Fonts are loaded by the widget embed runtime. Custom font stacks should already be available on your website.
Corners and spacing
Set the base corner radius and spacing density:
- Compact - Tighter layouts for sidebars or dense pages
- Cozy - Default spacing for most embeds
- Comfortable - More open spacing for landing pages and feature sections
Shadows
Choose the default card elevation:
- None
- Subtle
- Soft
- Elevated
Buttons
Choose the default button treatment:
- Solid
- Outline
- Soft
You can also let buttons inherit the base corner radius or set a separate button radius.
Previewing changes
The Design page includes previews for common widget sections. Use them to check colors, typography, cards, forms, and buttons before saving.
After saving, refresh the page where your widget is embedded. If your website or browser aggressively caches scripts, hard refresh the page.
Resetting defaults
Use Reset to defaults to return every design setting to Firesky's defaults. This resets colors, typography, corners, spacing, shadows, and buttons.
Per-widget overrides
Design settings are the default for your church. If a specific page needs a one-off change, you can still override CSS variables directly on the widget element. See Customizing Widget Appearance.