Kiosk Authoring — Theme & Template

The Theme & Template tab is the visual identity of your kiosk campaign. You pick a theme preset (colors and typography), a layout template (where the elements sit), and decide whether this campaign should ride the tenant’s brand or set its own.

Theme Presets

The theme preset drives every color on the kiosk: primary, accent, success, hero overlay, button states, and the desaturated background tone. Twelve presets cover the most common nonprofit aesthetics.

The 12 Presets

Preset	Mood	Best For
`slate-default`	Cool gray-blue	General giving, professional appeal
`mosque-emerald`	Deep green	Mosque appeals, Ramadan, Islamic charity
`church-burgundy`	Wine red	Church appeals, parish life
`synagogue-azure`	Royal blue	Synagogue appeals, Jewish community
`youth-coral`	Coral pink-orange	Youth programs, summer camp
`gala-gold`	Champagne gold	Gala events, formal fundraisers
`disaster-amber`	Urgent amber	Disaster relief, emergency appeals
`education-teal`	Calm teal	Schools, education, scholarships
`heritage-sienna`	Warm sienna	Heritage, cultural preservation
`community-sage`	Muted sage	Community gardens, local causes
`memorial-charcoal`	Deep charcoal	Memorial campaigns, dignity
`ramadan-warm-amber`	Warm seasonal amber	Ramadan, end-of-year giving

Tap a swatch to select. The live preview updates immediately to show the campaign in the new theme.

What the theme controls

Selecting a theme cascades these values into every kiosk surface:

Primary color — buttons, highlights, the preset tile accent
Accent color — secondary highlights, the progress bar, recurring badge
Success color — the checkmark and post-donation celebration
Background tone — automatically desaturated from the primary color for readability
Font family — heading and body fonts paired for the preset’s mood

You can override individual colors in the tenant branding settings (Settings → Branding), but the preset is the fast path for “looks right on day one.”

Layout Templates

The template controls where elements sit on the screen — hero placement, impact band orientation, amount tile layout, header band size. Eight templates cover three form factors.

Phone Portrait (3 templates)

Template	Layout
`stacked-story`	Hero → headline → impact → amounts → CTA. The universal fallback.
`hero-sheet`	480pt hero up top; everything else pulls up below in a card.
`compact-card`	240pt hero; amounts above the fold; impact statements compressed to one line.

Tablet Portrait (2 templates)

Template	Layout
`generous-stack`	The phone stack with breathing room. Default for tablet portrait.
`hero-wall`	720pt edge-to-edge hero; magazine-style card pulls up below with a soft shadow.

Tablet Landscape (3 templates)

Template	Layout
`split-story`	Two columns — editorial on the left, functional on the right. Default for landscape.
`magazine`	Three columns — hero, story, functional. For longer-form campaigns.
`dashboard`	Data-forward — stat panel row on top, impact grid + amount row below. For donor-wall and capital campaigns.

Picking a template

The template picker shows thumbnails grouped by form factor. Tap one and the live preview re-renders.

If your campaign is donor-walked or has heavy impact statements, dashboard is the right call. If your campaign is image-led (a Ramadan appeal with a striking hero photo), hero-wall or hero-sheet. If you’re not sure, stacked-story / generous-stack / split-story are the universal defaults — they ship safe on any campaign.

Brand Override

The brand-override toggle controls whether THIS campaign uses its own theme, or rides the tenant’s platform-wide branding.

Default behavior (toggle OFF)

The campaign uses the tenant’s platform-wide theme, set in Settings → Branding. Switching themes here only changes THIS campaign’s display.

When to enable

Enable brand override when:

This campaign needs a different look than the tenant’s standard kiosks (e.g. a memorial appeal that needs the memorial-charcoal theme even though the tenant defaults to mosque-emerald).
A seasonal campaign (Ramadan, Christmas) gets a one-off treatment.
A partner organization runs through your kiosk and needs their identity.

When override is ON, the kiosk:

Uses the campaign’s selected theme preset
Uses the campaign’s selected fallback gradient
Ignores the tenant-wide primary_color cascade
Falls back to the tenant logo and EIN in the header (always shown, never overridden — founder constraint)

Disable when the campaign should look like every other kiosk in your tenant.

Tips

Pick the theme before the imagery. The theme drives the gradient and overlay colors; picking the wrong order means re-checking your hero image after.
Test the template on real content. A long thank-you message that looks fine in stacked-story may overflow in compact-card.
Use brand override sparingly. Donors who recognize your usual look get jarred by a one-off theme.
Phone landscape inherits portrait. There’s no separate phone-landscape template — the device renders the portrait template in landscape automatically.
Watch the live preview as you click. Phone and tablet render side-by-side; both should look right before you publish.

Common Issues

Issue	Cause	Solution
Theme doesn’t match the brand	Tenant primary color overriding the preset	Enable brand override OR adjust tenant primary color
Template looks empty	Missing impact statements or amounts in current campaign	Add content; the template renders what you give it
Hero image clashes with theme	Theme is dark; image is bright	Pick a softer image OR switch to a darker theme
Wrong template on phone	Form factor detection misfired	Force a config refresh on the device

Kiosk Authoring — Imagery — Hero image + fallback gradient driven by the theme
Kiosk Authoring — Social Proof & Urgency — Donor wall + urgency banner on supported templates
Kiosk Campaigns Overview — Top-level campaign concepts