# SaaS-varumärke: ett utseende för lanseringsdagen och alla dagar efter
[Canonical HTML page](https://gradiently.design/sv/guide/saas-startup-branding)
Lanseringsdagen får uppmärksamheten, men ett mjukvaruvarumärke byggs mest i de hundra små inläggen efteråt: ändringsloggar, länkförhandsvisningar, dokumentationshuvuden och jobbannonser. Här är ett system som får dem alla att matcha.
## The short version
- SaaS-varumärke är ett litet system, en ordbild, en palett, typografi, en bakgrundslook och en handfull layouter, som används på samma sätt i produkten, dokumentationen och varje socialt inlägg.
- En SaaS-palett måste fungera som gränssnittsfärg lika väl som marknadsföringsfärg, så välj en varumärkesaccent som också klarar kontrast som knapp.
- Varje offentlig sida i en SaaS-produkt bör ha en egen Open Graph-bild på 1200×630, eftersom länkar delas i Slack, X och LinkedIn hela tiden.
- Inlägg i ändringsloggen är den vanligaste grafiken ett SaaS-team gör, så de förtjänar en fast mall mer än lanseringsgrafiken.
- Rekryteringsinlägg är varumärkesinlägg, och de ska se ut som resten av företaget, inte som en rekryterares mall.
Starkt **SaaS-varumärke** handlar mindre om en avtäckning på lanseringsdagen och mer om ett litet system du kan använda på hundratals saker: en ordbild, en palett som fungerar i gränssnittet lika bra som i sociala medier, ett eller två typsnitt, en bakgrundslook och några fasta layouter för lanseringar, ändringsloggar, länkförhandsvisningar och rekryteringsinlägg. Mjukvaruföretag släpper varje vecka, så varumärket måste hänga med utan att en designer ritar om allt. Bygg systemet en gång så blir varje inlägg efteråt ett fyll-i-luckorna-jobb.
## Ett SaaS-varumärkessystem i fem delar
1. **Ordbild** Ditt namn väl satt i ett typsnitt, plus en liten kvadratisk symbol för favicons och appikoner. Hoppa över den abstrakta symbolen tills du vet att du behöver en.
2. **Palett** En neutral skala för gränssnittet, en varumärkesaccent och statusfärger för lyckat, varning och fel.
3. **Typografi** Ett sans serif-typsnitt för gränssnitt och marknadsföring, eventuellt ett displaytypsnitt för stora rubriker och ett monospace för kod.
4. **Bakgrundslook** En gradient eller ett material bakom marknadsföringsgrafik, aldrig inne i produktens arbetsvyer.
5. **Layouter** Fasta mallar för lanseringsinlägg, ändringsloggsinlägg, Open Graph-bilder, bloggbanderoller och rekryteringsinlägg.
Skriv ner dem som [designtokens](https://gradiently.design/sv/guide/design-tokens) så att produkten och marknadsföringssajten delar samma värden. [Varumärke för startups](https://gradiently.design/sv/guide/startup-branding) tar upp namngivning och positionering; den här artikeln handlar om vad du gör när de är avgjorda.
## SaaS-färger för produkten och marknadsföringen
En SaaS-accentfärg lever två liv: på knappar och länkar i appen, och som signatur på all marknadsföringsgrafik. Det utesluter många moderna färger, eftersom en knapp måste bära vit eller mörk text med läsbar kontrast. Välj accenten för gränssnittet först och bygg sedan marknadsföringsbakgrunden kring den.
- Natt: #0b1020
- Panel: #1f2a44
- Dimma: #e5e7eb
- Varumärkesindigo: #4f46e5
- Lyckat: #22c55e
- Varning: #f59e0b
En gränssnittspalett. Indigo bär vit text på knappar, så den kan vara varumärkesfärgen överallt.
- Lansering: indigoljus mot natt: `radial-gradient(circle at 80% 10%, #6366f1 0%, #1f2a44 45%, #0b1020 85%)`
- Ändringslogg: lugn panel: `linear-gradient(135deg, #0b1020 0%, #1f2a44 100%)`
- Ljust läge: dimma till indigo: `linear-gradient(135deg, #eef2ff 0%, #c7d2fe 60%, #818cf8 100%)`
Marknadsföringsbakgrunder byggda av gränssnittets palett. Produkten och inläggen ser besläktade ut utan att inläggen ser ut som skärmdumpar.
Indigo, violett och elektriskt blått är extremt vanliga i SaaS, så om du väljer en av dem, låt bakgrundslooken bära särprägeln. [Färgschema för webbplatser](https://gradiently.design/sv/guide/website-color-scheme) tar upp gränssnittssidan, inklusive ett mörkt tema.
## Lanseringsgrafik för SaaS
På lanseringsdagen behöver du ett budskap i flera former: ett liggande inlägg för X och Bluesky, ett stående inlägg för LinkedIn, en länkbild för tillkännagivandet och en hero för sajten. Säg vad produkten gör på en enda rad, inte vad den heter.
Ett liggande lanseringsinlägg med texten Fakturor som påminner själva, lanseras idag
Lanseringsinlägget för X och Bluesky: vad den gör först, namnet sedan.
Ett stående LinkedIn-lanseringsinlägg med texten Fakturor som påminner själva, lanseras idag
Samma budskap som ett stående LinkedIn-inlägg.
[Grafik för lanseringsdagen](https://gradiently.design/sv/guide/launch-day-graphics) har en fullständig checklista över material och tidpunkter.
## Open Graph-bilder för varje sida
SaaS-länkar delas hela tiden i Slack, Teams, X och LinkedIn, och en saknad förhandsbild får en länk att se trasig ut. Ge varje offentlig sida, inklusive dokumentation, priser, blogginlägg och poster i ändringsloggen, en egen bild på 1200×630 med sidans titel på din bakgrund.
```html
```
Taggarna som får en länkförhandsvisning att visas med en stor bild. Använd en absolut URL för bilden.
Med många sidor bör du generera dessa från en mall i stället för för hand. [Dynamiska OG-bilder](https://gradiently.design/sv/guide/dynamic-og-images) visar hur, och [Open Graph-taggar](https://gradiently.design/sv/guide/open-graph-tags) går igenom varje tagg och hur varje plattform läser dem.
## Ändringslogg och funktionsinlägg
Ändringsloggar är det ett SaaS-team publicerar oftast, och det bästa beviset på att produkten lever. Ge dem en egen, lugnare layout än lanseringarna, så att en veckouppdatering inte skriker som en lansering och en riktig lansering ändå sticker ut.
Ett ändringsloggskort med texten Mörkt läge är här, ändringslogg vecka 41, plus snabbare sökning och tre buggfixar
Ett ändringsloggskort i länkförhandsvisningens storlek: huvudfunktionen stor, resten på en rad.
- **En funktion per kort.** Börja med ändringen som flest märker.
- **En enhetlig etikett** som ”Ändringslogg” och ett vecko- eller versionsnummer.
- **En skärmdump eller ett kort klipp** på nästa karusellbild eller i själva inlägget, inte nedpressad i kortet.
- **Samma layout varje vecka,** så att vanliga användare känner igen uppdateringar direkt.
## Rekryteringsinlägg som ser ut som företaget
Kandidater bedömer ett företag efter dess jobbannonser, och många SaaS-team lämnar dem till en generisk mall. Använd din egen bakgrund, typografi och röst, namnge rollen rakt och säg vad personen faktiskt ska arbeta med. [Design för arbetsgivarvarumärke](https://gradiently.design/sv/guide/employer-branding-design) går längre.
Ett rekryteringsinlägg med texten Vi söker en produktdesigner, på distans i Europa, på samma bakgrund som lanseringsinlägget
Roll, plats och det verkliga arbetet, på samma bakgrund som lanseringen.
## Håll dokumentation, app och sociala medier enhetliga
### Glider isär
- Dokumentation i ett standardtema med en annan accent
- Varje utvecklare gör sin egen ändringsloggsbild
- Bloggbanderoller från en arkivmall
- Den gamla loggan kvar på OG-bilden
### Håller ihop
- Dokumentation, app och sajt delar en tokenfil
- En ändringsloggsmall som vem som helst kan fylla i
- Bloggbanderoller på 1200×600 på varumärkets bakgrund
- OG-bilder genererade från det aktuella varumärket
Gradiently passar SaaS-team som lever i sin AI-assistent. Det fungerar i ChatGPT, Claude och varje assistent som stöder fjärr-MCP-servrar, så du kan be om veckans ändringsloggskort i samma chatt där du skrev versionsanteckningarna, och designen öppnas i Studio i ditt varumärke för att kontrolleras och exporteras. [Koppla en AI-assistent](https://gradiently.design/sv/guide/connect-ai-assistant) förklarar hur du ställer in det.
## FAQ
### Vad gör ett bra SaaS-varumärke?
Ett litet, enhetligt system: en ordbild, en palett som fungerar i gränssnittet och marknadsföringen, ett eller två typsnitt, en bakgrundslook och fasta layouter för återkommande inlägg.
### Vilken storlek ska en Open Graph-bild för SaaS ha?
1200×630 pixlar. Ge varje offentlig sida en egen bild och använd en absolut URL i og:image-taggen.
### Vilka färger ska ett SaaS-varumärke använda?
En neutral gränssnittsskala, en varumärkesaccent som klarar kontrast som knappfärg och tydliga statusfärger för lyckat, varning och fel.
### Hur ska ett SaaS-företag designa inlägg i ändringsloggen?
Använd en lugn, fast mall med en tydlig etikett och ett versions- eller veckonummer, och börja med den enskilda ändring användarna märker mest.
### Behöver SaaS-startups en logotypsymbol?
Inte från början. En väl satt ordbild plus en enkel kvadratisk symbol för favicons och appikoner räcker för de flesta tidiga produkter.