> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nudj.cx/llms.txt
> Use this file to discover all available pages before exploring further.

# Branding & Appearance

> Unified theme system with live preview iframe, fonts, colour tokens, per-step challenge-complete colour

Nudj has a **unified theme system** (#1874) that powers both the admin shell and member-facing apps. Themes cascade: org-level defaults apply to every community, and individual communities override specific tokens.

## Org-level themes

Org Settings -> Branding & Appearance. What's configurable:

<CardGroup cols={2}>
  <Card title="Colours" icon="palette">
    Primary, accent, destructive, success, warning, sidebar, secondary. **Hex/RGB picker** (#1425) with token support.
  </Card>

  <Card title="Fonts" icon="font">
    Kaufland (#796), Gotham (#938), Real Head Pro (#1464), or system fonts. Plus per-element font size (#911).
  </Card>

  <Card title="Widget loading state" icon="spinner">
    Configurable widget loading screen (#2355).
  </Card>

  <Card title="Force theme" icon="lock">
    Lock members to a specific theme (#779) if you don't want them to toggle light/dark.
  </Card>
</CardGroup>

***

## Live preview iframe

The right-hand panel shows a **live preview iframe** (#2305) — your changes apply in real-time. The theme editor has accessibility improvements, undo, and iframe sync (#2358) for a polished experience.

***

## Default theme

New orgs default to the **parallax / immersive** theme (#1781) — hardcoded dark mode is no longer the baseline. All themes use design tokens (#2158) rather than hardcoded values.

Placeholder values were removed from the theme config (#2246) — unset colours fall through to sensible defaults instead of displaying as broken empty states.

***

## Community-level theme overrides

For per-community branding (sub-brands, regional variants), see [Community-Level Theming](/admin-guide/settings/community-branding) — covers #1545 and #1434 in detail.

***

## Per-step challenge-complete colour

Customise the colour of the "challenge complete" celebration per step (#2204) — useful for multi-stage challenges where each step has its own visual identity.

***

## Tab visibility

The **tab visibility** setting is part of the community theme (#2353) — control which tabs members see in the bottom nav.

***

## Fonts

Ship with three premium fonts:

| Font          | Style          | Good for                    |
| ------------- | -------------- | --------------------------- |
| Kaufland      | Modern sans    | Tech / lifestyle brands     |
| Gotham        | Condensed sans | Heritage / editorial brands |
| Real Head Pro | Display serif  | Premium / luxury brands     |

Or use a system font stack.

***

## Theme tokens (developers)

For developers building custom themes or integrations, every Nudj UI uses CSS variables from the token system (#2158). See the theme system reference in the repo `docs/theme-system/` directory for full token reference.

***

## Quick palette swap

The fastest way to apply a new brand:

1. Pick 6 colours (primary, accent, destructive, success, warning, sidebar).
2. Paste hex codes into the colour pickers.
3. Upload your logo.
4. Pick a font.
5. Watch the preview iframe.
6. Save.

Total time: 5 minutes.