# Vad ett varumärkeskit ska innehålla och hur du håller ordning

[Canonical HTML page](https://gradiently.design/sv/guide/brand-kit)

Den grafiska manualen säger vad du ska göra. Varumärkeskitet är det folk faktiskt tar fram. Har du filer, format och mappar på plats gör alla rätt utan att fråga.

## The short version

- Ett varumärkeskit är samlingen av färdiga filer som gör att vem som helst kan skapa material i varumärkets stil: logotyper, färgkoder, typsnitt, bakgrunder, mallar, godkända bilder och den grafiska manualen.
- Logotyperna hör hemma i kitet som SVG för skärmar, som PNG med genomskinlig bakgrund för vardagliga verktyg och som enfärgade versioner i svart och vitt.
- Färgkoder ska finnas i alla notationer som folk behöver, oftast hex och RGB för skärm och CMYK för tryck.
- Bakgrunder och mallar är de mest använda och oftast bortglömda delarna av ett varumärkeskit.
- Ett varumärkeskit håller ordning när det har ett enda hem, en ansvarig, tydliga filnamn och en arkivmapp för allt som fasats ut.

Ett **varumärkeskit** är samlingen av färdiga filer som alla behöver för att göra något i varumärkets stil: logotypfiler, färgkoder, typsnitt, bakgrunder, mallar, godkända bilder och en kort grafisk manual. Där den [grafiska manualen](https://gradiently.design/sv/guide/brand-style-guide) förklarar reglerna lämnar kitet över materialet. Ett bra kit gör att en frilansare, en ny kollega eller en AI-assistent kan börja jobba på några minuter utan att ställa en enda fråga till dig.

## Checklistan för varumärkeskitet

| Del | Vad som ska ingå | Varför det spelar roll |
| --- | --- | --- |
| Logotyp | SVG, PNG med genomskinlig bakgrund, enfärgad i svart och vitt, kvadratisk profilbild | Varje verktyg och bakgrund kräver en egen fil |
| Färger | Namn, hex-, RGB- och CMYK-koder, med varje färgs uppgift | Slutar folk från att plocka färger ur skärmdumpar |
| Typsnitt | Typsnittsnamn med nedladdningslänkar eller filer, plus licensanteckningar | Undviker ersättare som ändrar hela känslan |
| Bakgrunder | Signaturbakgrund i vanliga storlekar, CSS-kod, enfärgad reservfärg | Fyller den största ytan i de flesta designer |
| Mallar | Dina vanligaste inlägg, stories, bilder och mejlhuvud | Det snabbaste sättet att hålla jobbet enhetligt |
| Bilder | Godkända foton, illustrationer eller ikonuppsättningar | Hindrar att stockfoton smyger sig in |
| Grafisk manual | Reglerna på en sida som PDF eller länk | Förklarar när varje fil ska användas |

Sju delar. De flesta kit har de tre första; de tre nästa är det som faktiskt ger enhetlighet.

Det hjälper att tänka på vem som öppnar kitet och vad var och en letar efter först:

- **En social medier-ansvarig** vill ha mallar och bakgrunder i rätt storlekar
- **En webbutvecklare** vill ha SVG-logotypen, färgkoderna som CSS och källorna till typsnitten
- **Ett tryckeri** vill ha tryckversionen av logotypen, CMYK-värden och eventuella accentfärger
- **En ny kollega** vill ha guiden på en sida och ett bra exempel på varje format
- **En AI-assistent** vill ha reglerna som ren text och färgerna som koder

## Logotypfiler: vilka format du behöver

En logotyp, flera filer. Varje format löser ett eget problem, och fel format är den vanligaste orsaken till suddiga logotyper, logotyper i en ruta eller med fel färger.

| Format | Använd det till | Se upp med |
| --- | --- | --- |
| SVG | Webbplatser, appar och allt som ska skalas | Vissa kontors- och sociala verktyg tar inte emot det |
| PNG, genomskinlig | Presentationer, dokument, sociala verktyg, mejl | Exportera stort, till exempel 2 000 px brett, så att den håller sig skarp |
| PDF eller EPS | Tryck, skyltar och profilprodukter | Skicka till tryckerier, inte till sociala medier |
| JPEG | Nästan aldrig till logotyper | Ingen genomskinlighet, så den hamnar i en vit ruta |

Som minimum: SVG och PNG med genomskinlig bakgrund av huvudlogotypen, plus enfärgade vita och svarta versioner för foton och gradienter.

Ta också med en version som fungerar på din signaturbakgrund. En logotyp som försvinner på din egen gradient är ett vanligt och undvikbart problem; [att lägga en logotyp på en gradient](https://gradiently.design/sv/guide/logo-on-gradient-background) förklarar lösningarna.

## Färger, typsnitt och resten av grunderna

- Nattblå: #0e1424
- Mjöl: #f3e6d0
- Ugnsglöd: #e0823d
- Skorpa: #6b4a2f

Färger i ett kit behöver namn och inte bara koder. Folk minns ”ugnsglöd”; ingen minns #e0823d.

```css
:root {
  --night-blue: #0e1424; /* rgb(14 20 36) grounds, 60% */
  --flour: #f3e6d0;      /* rgb(243 230 208) text and panels, 30% */
  --oven-glow: #e0823d;  /* rgb(224 130 61) accents only, 10% */
  --crust: #6b4a2f;      /* rgb(107 74 47) support */

  /* Signature background, with the flat fallback first */
  --ground: #0e1424;
  --ground-gradient: radial-gradient(90% 70% at 50% 110%, #e0823d 0%, #6b4a2f 25%, #1b2238 55%, #0e1424 100%);
}
```

Lägg en färgfil i kitet åt den som bygger din webbplats. Det sparar en runda av gissningar utifrån skärmdumpar.

Anteckna för varje typsnitt var det kommer ifrån och vad licensen tillåter. Många bra typsnitt är gratis på [Google Fonts](https://fonts.google.com); kommersiella typsnitt kräver ofta en licens per person eller per webbplats, så skriv ner det. [Så väljer du varumärkestypsnitt](https://gradiently.design/sv/guide/brand-fonts) hjälper dig med själva valet.

## Bakgrunder och mallar: filerna som används mest

Logotyper får uppmärksamheten, men bakgrunder och mallar får användningen. Förbered din signaturbakgrund i de storlekar du publicerar mest, så att ingen sträcker en kvadratisk bild till en banner. Bygg sedan mallar ovanpå den.

- Inlägg 4:5: 1080 × 1350
- Story 9:16: 1080 × 1920
- Bild 16:9: 1920 × 1080
- Länkförhandsvisning: 1200 × 630
- Mejlhuvud: 1200 × 600
- LinkedIn-banner: 1584 × 396

Sex storlekar som täcker de flesta små varumärken. Rendera bakgrunden för varje form i stället för att beskära en enda bild.

## En mappstruktur för varumärkeskitet som håller ordning

```text
brand-kit/
  00-read-me-first.pdf          (the one-page style guide)
  01-logo/
    cornerloaf-logo-primary.svg
    cornerloaf-logo-primary.png
    cornerloaf-logo-white.png
    cornerloaf-logo-black.png
    cornerloaf-avatar-square.png
    print/cornerloaf-logo-primary.pdf
  02-colour/
    colours.css
    colours.pdf                 (hex, RGB, CMYK, names, jobs)
  03-type/
    fonts.txt                   (names, links, licence notes)
  04-backgrounds/
    ground-1080x1350.png
    ground-1080x1920.png
    ground-1920x1080.png
  05-templates/
  06-imagery/
  _archive/                     (retired files, never deleted)
```

Numrerade mappar håller ordningen, en läs-mig ligger överst och gamla filer flyttas till ett arkiv i stället för att ligga kvar bredvid de nya.

### Rörigt kit

- logo-final-v3-NEW-use-this.png
- Fem kopior av kitet på olika enheter
- Gamla och nya färger sida vid sida
- Typsnitt som nämns men inte länkas

### Ordnat kit

- brand-logo-white.png, namngiven efter vad den är
- Ett hem, länkat från alla andra ställen
- Utfasade filer flyttade till _archive
- Varje typsnitt med källa och licens

## Så håller du varumärkeskitet uppdaterat

1. **Ett hem, en ansvarig** Ha en enda huvudkopia och utse en person som får ändra i den. Alla andra länkar till den i stället för att ladda ner kopior.
2. **Namnge filer efter vad de är** Varumärke, del, variant, format. Aldrig ”final” eller ”ny”: de slutar vara sanna redan nästa vecka.
3. **Arkivera, radera inte** När något fasas ut, flytta det till en arkivmapp. Gamla filer bredvid nya är hur gamla färger kommer tillbaka.
4. **Gå igenom efter varje ändring** Ny mall, ny färg, ny logotypuppställning: uppdatera kitet samma dag och sedan den grafiska manualen. Se [varumärkeskonsekvens](https://gradiently.design/sv/guide/brand-consistency) för varför glidningen börjar här.

Gradiently har ett varumärkeskit i Studio, med dina logotyper, färger och typsnitt ett klick från varje design, och Designer använder det när den skapar eller redigerar material. Har du fler än ett varumärke får varje varumärke sitt eget kit och egna Marks. [Så ställer du in ditt varumärkeskit i Gradiently](https://gradiently.design/sv/guide/brand-kit-setup) går igenom det.

## FAQ

### Vad är ett varumärkeskit?

Ett varumärkeskit är en samling färdiga varumärkesfiler: logotyper, färgkoder, typsnitt, bakgrunder, mallar, godkända bilder och en kort grafisk manual.

### Vilka logotypfiler ska ingå i ett varumärkeskit?

En SVG och en PNG med genomskinlig bakgrund av huvudlogotypen, enfärgade vita och svarta versioner, en kvadratisk profilbild och en PDF eller EPS för tryck.

### Vad är skillnaden mellan ett varumärkeskit och en grafisk manual?

Den grafiska manualen är reglerna; varumärkeskitet är filerna. Kitet ska innehålla manualen, och manualen ska säga var kitet finns.

### Hur delar jag ett varumärkeskit med en frilansare?

Dela en länk till den enda huvudmappen, med den grafiska manualen överst. Undvik att skicka kopior, som med tiden blir inaktuella.