Appearance
Make the attendee app look like your event — colour, fonts, logo, backgrounds — with a live preview and a floor under you.
What it is
Theme tokens for the attendee app: brand colour, light or dark, corner radius, fonts, logo, favicon and home screen icon, plus per-surface overrides for the header, bottom nav and side menu.
When to use it
The app is the event's front door. Ten minutes here is the difference between 'our event app' and 'some app we rented'.
Before you start
- A logo, ideally on a transparent background.
Try it — this is a sandbox, nothing here is real
Brand the app, then deliberately create the contrast failure that this screen makes easiest.
The form on the left, the attendee app on the right. Nothing here is saved until you save.
Live preview
Nook Summit 2026
Nav text defaults to the ink colour for the theme mode, which was chosen against the *default* nav surface. Change the surface and the default no longer applies.
Home hero
The logo is there, on a near-black background, invisible.
Saved and live.
Every save is kept
Appearance is versioned. If a change was wrong, restore the previous version rather than trying to remember the old hex code.
Click a control above. One of them is the mistake people actually make — take it on purpose.
Step by step
- 1
Look through the gallery firstEvent App → App Customization → Appearance → Theme → Browse
Thirty-two complete looks, grouped by the kind of event you are running — corporate anniversary, awards night, expo, festival, government summit, esports final. Each one was generated by the same AI the Generate button uses, so applying one lands the mode, colours, background, corner shape, fonts, bars and its signature animation in a single click. Nothing here costs a wait.
Tip. The card tells you how much a theme moves, and the line underneath names the brief it came from — open that brief to make your own version of it.
- 2
Or write a brief and generate your ownEvent App → App Customization → Appearance → Theme
Browse briefs opens the same library as text: the eight-line brief behind every gallery theme, plus a wizard that asks eight questions and writes one for you. Edit any line and Generate produces a look nobody else has. While it works the preview takes on the colours, corners and fonts as they are chosen, and Stop puts your previous look back.
Tip. A brief is eight lines — Occasion, Mood, Base, Accent, Surfaces, Type, Motion, Signature. Edit the line you want to change and generate again; you will get a variation rather than a different app.
- 3
Set the brand colourEvent App → App Customization → Appearance
One colour drives buttons, links and selected states throughout the app. The preview updates as you type.
Tip. Generating a theme sets this for you, along with the separate live signal colour. Everything stays editable afterwards.
- 4
Light or dark
A whole-app choice. Check your logo against whichever you pick — a dark logo on a dark theme disappears.
- 5
Fonts
A display face for headings and a body face for everything else, from the Google Fonts catalogue.
- 6
Logo and icons
Branding has four images, and each row shows a small picture of where it lands. Event logo appears on the home banner, at the top of the side menu and beside announcements. Top bar icon is the small image beside the event name at the top of every screen: the NookPass icon (the default), your event logo, a different image you upload, or nothing. If the event logo or custom image is missing, the NookPass icon shows instead of a gap. Browser tab icon (the favicon) is the tiny icon in the browser tab.
- 7
Phone home screen iconEvent App → App Customization → Appearance → Branding
The icon attendees get when they add the app to their phone's home screen. Upload a square image, 512×512 or larger, with square corners, because the phone rounds them itself. Other shapes are cropped to fill the square, and transparent areas turn white. Leave it empty to keep the NookPass icon. The favicon is not used for this: it is only the browser-tab icon.
Tip. Attendees who already added the app keep the icon it had then. They need to remove it and add it again to see the new one.
- 8
Fine-tune the surfaces
The top header, the bottom nav and the side menu each take their own background and text colour, for when a brand colour that works on a button does not work behind small text.
Careful. Set a background colour and you own the contrast on it. Setting a nav background without setting nav text is the usual way to end up with white-on-white.
- 9
Motion, if the event wants it
The Motion line of a brief decides how alive the app is — from still, through a breathing live indicator, to a drifting animated backdrop. Generated motion lands in Advanced → Custom CSS where you can read it, trim it, or delete it.
Careful. Motion runs for the whole event day. Keep cycles slow. Anything generated here switches itself off for attendees whose device asks for reduced motion — hand-written CSS will not do that unless you add the same rule.
- 10
Custom CSS, if you must
Scoped custom CSS targeting the app's documented element hooks. Sanitized, and applied only to the attendee app.
Careful. This is the only part of Appearance that can break a layout. Everything above cannot.
When it goes wrong
Every one of these has happened to someone. Symptom first, because that is what you will have.
Nav or header text unreadable after setting a backgroundwarning
Logo disappears in dark modegotcha
Custom CSS broke a screenblocker
The preview looks right, attendees see the old themegotcha
What people ask
Kept in the words people use, because that is what you are about to type.
Why does the home screen show the NookPass icon instead of my favicon?
The home screen uses its own icon, set under Branding → Phone home screen icon. The browser tab icon (favicon) only appears in the browser tab. Upload a home screen icon, then remove the app from the phone and add it again.
Can each attendee choose their own light/dark?
No. The mode is the host's choice, so the event looks the same to everyone.
Can I undo a theme change?
Yes. Appearance is versioned — every save is snapshotted and restorable. Generating a theme changes nothing for attendees until you press Save.
Are the gallery themes and the AI the same thing?
Yes. Every gallery theme was produced by the generator from a brief you can open and read. The gallery is instant and free; writing your own brief gets you something nobody else has. Applying a gallery theme also fills in the fonts and the header, nav and menu colours, because it is a whole look rather than a palette.
Why does Generate replace my nav and header colours?
Because a generated theme is a complete look, not a palette. Carrying a previous theme's nav colour into a new one is the usual way to end up with a bar that belongs to a different app. Set them again afterwards if you want them.
Will the animations slow the app down or annoy people?
Generated motion is limited to slow, long cycles on a couple of elements, never on anything you are trying to read, and it disables itself for attendees who have asked their device to reduce motion. If you would rather have none, pick Still on the Motion question.