# SaaS-branding: een look voor de lanceerdag en elke dag erna

[Canonical HTML page](https://gradiently.design/nl/guide/saas-startup-branding)

De lanceerdag krijgt de aandacht, maar een softwaremerk wordt vooral gebouwd in de honderd kleine posts erna: changelogs, linkpreviews, docs-headers en vacatures. Hier is een systeem waarmee ze allemaal op elkaar lijken.

## The short version

- SaaS-branding is een klein systeem, een woordmerk, een palet, lettertypen, een achtergrondlook en een handvol lay-outs, op dezelfde manier toegepast in het product, de docs en elke socialpost.
- Een SaaS-palet moet werken als interfacekleur én als marketingkleur, dus kies een merkaccent dat ook als knop het contrast haalt.
- Elke openbare pagina van een SaaS-product hoort een eigen Open Graph-afbeelding van 1200×630 te hebben, omdat links voortdurend worden gedeeld in Slack, X en LinkedIn.
- Changelogposts zijn de meest voorkomende graphic die een SaaS-team maakt, dus ze verdienen een vast sjabloon meer dan lanceergraphics.
- Vacatureposts zijn merkposts en moeten op de rest van het bedrijf lijken in plaats van op het sjabloon van een recruiter.

Sterke **SaaS-branding** gaat minder over een onthulling op de lanceerdag en meer over een klein systeem dat je op honderden dingen kunt toepassen: een woordmerk, een palet dat in de interface net zo goed werkt als op social, een of twee lettertypen, een achtergrondlook en een paar vaste lay-outs voor lanceringen, changelogs, linkpreviews en vacatureposts. Softwarebedrijven leveren wekelijks op, dus het merk moet bijblijven zonder dat een ontwerper alles opnieuw tekent. Bouw het systeem één keer en elke post daarna wordt een invulklus.

## Een SaaS-merksysteem in vijf delen

1. **Woordmerk** Je naam goed gezet in één lettertype, plus een klein vierkant merkteken voor favicons en app-iconen. Sla het abstracte symbool over tot je weet dat je er een nodig hebt.
2. **Palet** Een neutrale reeks voor de interface, één merkaccent en statuskleuren voor succes, waarschuwing en fout.
3. **Lettertype** Eén schreefloos lettertype voor interface en marketing, eventueel een displaylettertype voor grote koppen en een monospace voor code.
4. **Achtergrondlook** Een verloop of materiaal achter marketinggraphics, nooit binnen de werkschermen van het product.
5. **Lay-outs** Vaste sjablonen voor lanceerposts, changelogposts, Open Graph-afbeeldingen, blogbanners en vacatureposts.

Schrijf deze op als [designtokens](https://gradiently.design/nl/guide/design-tokens) zodat het product en de marketingsite dezelfde waarden delen. [Startupbranding](https://gradiently.design/nl/guide/startup-branding) behandelt naamgeving en positionering; dit artikel gaat over wat je maakt zodra die vaststaan.

## SaaS-kleuren voor het product en de marketing

Een SaaS-accentkleur leeft twee levens: op knoppen en links in de app, en als handtekening van elke marketinggraphic. Dat sluit veel modieuze kleuren uit, want een knop moet witte of donkere tekst op leesbaar contrast dragen. Kies het accent eerst voor de interface en bouw daarna de marketingachtergrond eromheen.

- Nacht: #0b1020
- Paneel: #1f2a44
- Nevel: #e5e7eb
- Merkindigo: #4f46e5
- Succes: #22c55e
- Waarschuwing: #f59e0b

Een interfacepalet. Indigo draagt witte tekst op knoppen, dus het kan overal de merkkleur zijn.

- Lancering: indigolicht op nacht: `radial-gradient(circle at 80% 10%, #6366f1 0%, #1f2a44 45%, #0b1020 85%)`
- Changelog: rustig paneel: `linear-gradient(135deg, #0b1020 0%, #1f2a44 100%)`
- Lichte modus: nevel naar indigo: `linear-gradient(135deg, #eef2ff 0%, #c7d2fe 60%, #818cf8 100%)`

Marketingachtergronden gebouwd uit het interfacepalet. Het product en zijn posts lijken verwant zonder dat de posts op screenshots lijken.

Indigo, violet en elektrisch blauw komen extreem veel voor in SaaS, dus als je er een kiest, laat dan de achtergrondlook het onderscheid dragen. [Kleurenschema voor websites](https://gradiently.design/nl/guide/website-color-scheme) behandelt de interfacekant, inclusief een donker thema.

## SaaS-lanceergraphics

Op de lanceerdag heb je één boodschap in meerdere vormen nodig: een liggende post voor X en Bluesky, een staande post voor LinkedIn, een linkafbeelding voor de aankondiging en een hero voor de site. Zeg in één regel wat het product doet, niet hoe het heet.

Een liggende lanceerpost met de tekst Facturen die zichzelf opvolgen, vandaag gelanceerd

De lanceerpost voor X en Bluesky: eerst wat het doet, de naam daarna.

Een staande LinkedIn-lanceerpost met de tekst Facturen die zichzelf opvolgen, vandaag gelanceerd

Dezelfde boodschap als staande LinkedIn-post.

[Graphics voor de lanceerdag](https://gradiently.design/nl/guide/launch-day-graphics) heeft een volledige checklist van materialen en timing.

## Open Graph-afbeeldingen voor elke pagina

SaaS-links worden voortdurend gedeeld in Slack, Teams, X en LinkedIn, en een ontbrekende previewafbeelding laat een link kapot lijken. Geef elke openbare pagina, inclusief docs, prijzen, blogposts en changelog-items, een eigen afbeelding van 1200×630 met de paginatitel op je achtergrond.

```html
<meta property="og:title" content="Automatic payment reminders" />
<meta property="og:description" content="Ledgerly chases late invoices politely, on your schedule." />
<meta property="og:image" content="https://ledgerly.app/og/payment-reminders.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
```

De tags waarmee een linkpreview met een grote afbeelding verschijnt. Gebruik een absolute URL voor de afbeelding.

Bij veel pagina’s genereer je deze uit een sjabloon in plaats van met de hand. [Dynamische OG-afbeeldingen](https://gradiently.design/nl/guide/dynamic-og-images) laat zien hoe, en [Open Graph-tags](https://gradiently.design/nl/guide/open-graph-tags) behandelt elke tag en hoe elk platform ze leest.

## Changelog- en featureposts

Changelogs zijn het meest gepubliceerde wat een SaaS-team doet, en het beste bewijs dat het product leeft. Geef ze een eigen, rustigere lay-out dan lanceringen, zodat een wekelijkse update niet schreeuwt als een lancering en een echte lancering nog opvalt.

Een changelogkaart met de tekst Donkere modus is er, changelog week 41, plus snellere zoekfunctie en drie bugfixes

Een changelogkaart op linkpreviewformaat: de hoofdfeature groot, de rest in één regel.

- **Eén feature per kaart.** Open met de wijziging die mensen het meest zullen opmerken.
- **Een consistent label** zoals ‘Changelog’ en een week- of versienummer.
- **Een screenshot of korte clip** op de volgende carrouselpagina of in de post zelf, niet in de kaart geperst.
- **Elke week dezelfde lay-out,** zodat vaste gebruikers updates direct herkennen.

## Vacatureposts die op het bedrijf lijken

Kandidaten beoordelen een bedrijf op zijn vacatures, en veel SaaS-teams geven die aan een generiek sjabloon. Gebruik je eigen achtergrond, letters en stem, noem de functie gewoon bij naam en zeg waaraan de persoon echt gaat werken. [Ontwerp voor employer branding](https://gradiently.design/nl/guide/employer-branding-design) gaat verder.

Een vacaturepost met de tekst We zoeken een productontwerper, remote in Europa, op dezelfde achtergrond als de lanceerpost

Functie, locatie en het echte werk, op dezelfde achtergrond als de lancering.

## Houd docs, app en socials consistent

### Loopt uit elkaar

- Docs op een standaardthema met een ander accent
- Elke engineer maakt zijn eigen changelogafbeelding
- Blogbanners uit een stocksjabloon
- Oud logo nog op de OG-afbeelding

### Houdt stand

- Docs, app en site delen één tokenbestand
- Eén changelogsjabloon dat iedereen kan invullen
- Blogbanners van 1200×600 op de merkachtergrond
- OG-afbeeldingen gegenereerd uit het huidige merk

Gradiently past bij SaaS-teams die in hun AI-assistent leven. Het werkt binnen ChatGPT, Claude en elke assistent die externe MCP-servers ondersteunt, zodat je de changelogkaart van deze week kunt vragen in dezelfde chat waarin je de release notes schreef, en het ontwerp opent in de Studio in jouw merk om te controleren en te exporteren. [Een AI-assistent koppelen](https://gradiently.design/nl/guide/connect-ai-assistant) legt de opzet uit.

## FAQ

### Wat maakt goede SaaS-branding?

Een klein, consistent systeem: een woordmerk, een palet dat in de interface en marketing werkt, een of twee lettertypen, een achtergrondlook en vaste lay-outs voor terugkerende posts.

### Welk formaat moet een Open Graph-afbeelding voor SaaS hebben?

1200×630 pixels. Geef elke openbare pagina een eigen afbeelding en gebruik een absolute URL in de og:image-tag.

### Welke kleuren moet een SaaS-merk gebruiken?

Een neutrale interfacereeks, één merkaccent dat als knopkleur het contrast haalt en duidelijke statuskleuren voor succes, waarschuwing en fout.

### Hoe ontwerpt een SaaS-bedrijf changelogposts?

Gebruik één rustig, vast sjabloon met een duidelijk label en een versie- of weeknummer, en open met de ene wijziging die gebruikers het meest zullen opmerken.

### Hebben SaaS-startups een logosymbool nodig?

In het begin niet. Een goed gezet woordmerk plus een eenvoudig vierkant merkteken voor favicons en app-iconen is voor de meeste vroege producten genoeg.