# Website: Design and branding

{/* AUTO-SYNCED SOURCE: this page lives in apps/app/src/modules/website/docs/ and is mirrored into the docs app by `bun sync:module-docs`. Edit it in the module, not in apps/docs. */}

<Lead>
The honest answer first: the Website tool has **no free theme editor**, and that is deliberate. Styling comes from your workspace branding plus the design variants of the blocks. Your website always looks professional, on every device, in every block, without you ever maintaining color values, spacing or fonts.
</Lead>

## Where the styling comes from

<DefinitionList>
  <DefItem term="Logo and colors">Come from the workspace branding under **Settings > Appearance** (Einstellungen > Erscheinungsbild). Change your logo or brand colors there and the website adopts them automatically. There is no separate website branding; your brand is the same everywhere.</DefItem>
  <DefItem term="Layout per block">Every block ships with several vetted **variants** (e.g. the hero as "Text und Bild", "Vollflächiges Bild" or "Reduziert"). The variants are your design decisions; all of them are tuned to work together.</DefItem>
  <DefItem term="Typography and spacing">Set by the system and optimized for real-estate websites. Not configurable, but never broken either.</DefItem>
</DefinitionList>

## The fixed frame: navigation and footer

Header and footer are not freely buildable blocks but the stable frame of every page:

- **Navigation (header):** the menu follows the order and nav switches under [Managing pages](/tools/website/seiten). The header shows your logo and can contain a call to action (e.g. "Immobilie bewerten", get a valuation) and your phone number. Layout variants: logo left with menu right, or centered.
- **Footer:** shows contact details and opening hours from your office data. The legal links **Impressum**, **Datenschutz** and **Cookie-Einstellungen** are permanently anchored and cannot be removed (see [Legal](/tools/website/rechtliches)). Variants: columns or compact.

<Info title="Why no free editor?">
Freely configurable themes lead to broken layouts, unreadable color combinations and maintenance work in practice. The Website tool relies on curated variants with your branding instead: fewer knobs, reliably good results.
</Info>

## Design tips

- **Use the accent word:** the **Akzent-Wort** field in the hero typographically highlights exactly one word of your headline. Pick the emotional word ("Zuhause", "verkaufen"), not the town name.
- **Use eyebrows:** the small **Überzeile** above block headings ("Leistungen", "So läuft es ab") orients visitors and breaks up long pages.
- **Combine variants:** alternate between "Bild links" and "Bild rechts" across several text-with-image blocks to give the page rhythm. Switching variants never loses content ([editor](/tools/website/editor)).
- **One action per page:** exactly one closing banner at the end of the page (it is limited to once per page anyway) with one clear action.
- **Real photos beat stock photos:** your office, your team, your listings. The image pipeline automatically optimizes uploads for the web.
- **Less is more:** the character counter in the editor warns for a reason. Short copy in clear blocks sells better than walls of text.

## Further reading

All variants per block: [block reference](/tools/website/bloecke). The branding itself is maintained under **Settings > Appearance** in your workspace. Back to the [Website overview](/tools/website).