# Mitä brändipakettiin kuuluu ja miten sen pitää siistinä

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

Tyyliopas kertoo, mitä tehdä. Brändipaketti on se, mihin ihmiset oikeasti tarttuvat. Kun tiedostot, muodot ja kansiot ovat kunnossa, kaikki tekevät brändin mukaista työtä kysymättä.

## The short version

- Brändipaketti on kokoelma käyttövalmiita tiedostoja, joiden avulla kuka tahansa voi tehdä brändin mukaista työtä: logot, värikoodit, fontit, taustat, mallipohjat, hyväksytyt kuvat ja tyyliopas.
- Logojen kuuluu olla paketissa SVG-tiedostona näytöille, läpinäkyvänä PNG:nä arkipäivän työkaluille sekä yksivärisinä mustana ja valkoisena.
- Värikoodien pitäisi näkyä kaikissa merkintätavoissa, joita ihmiset tarvitsevat, yleensä heksana ja RGB:nä näytöille sekä CMYK:na painoon.
- Taustat ja mallipohjat ovat brändipaketin eniten käytetyt ja useimmin unohdetut osat.
- Brändipaketti pysyy siistinä, kun sillä on yksi koti, yksi omistaja, selkeät tiedostonimet ja arkistokansio kaikelle poistetulle.

**Brändipaketti** on joukko käyttövalmiita tiedostoja, joita kuka tahansa tarvitsee tehdäkseen jotain brändin mukaista: logotiedostot, värikoodit, fontit, taustat, mallipohjat, hyväksytyt kuvat ja lyhyt tyyliopas. Missä [brändin tyyliopas](https://gradiently.design/fi/guide/brand-style-guide) selittää säännöt, paketti antaa materiaalit. Hyvä paketti tarkoittaa, että freelancer, uusi työkaveri tai tekoälyavustaja voi aloittaa työn minuuteissa lähettämättä sinulle yhtään kysymystä.

## Brändipaketin tarkistuslista

| Kohta | Mitä sisällyttää | Miksi sillä on väliä |
| --- | --- | --- |
| Logo | SVG, läpinäkyvä PNG, yksivärinen musta ja valkoinen, neliönmuotoinen avatar-versio | Jokainen työkalu ja tausta tarvitsee eri tiedoston |
| Värit | Nimet, heksa-, RGB- ja CMYK-koodit sekä kunkin värin tehtävä | Estää värien poimimisen kuvakaappauksista |
| Fontit | Fonttien nimet latauslinkkeineen tai tiedostoina sekä lisenssihuomautukset | Välttää korvikkeet, jotka muuttavat koko tunnelman |
| Taustat | Tunnusomainen tausta yleisissä koissa, CSS-koodi, tasainen varaväri | Täyttää suurimman alueen useimmista suunnitelmista |
| Mallipohjat | Yleisimmät julkaisusi, tarinasi, diasi ja sähköpostin yläosa | Nopein tapa pitää työ johdonmukaisena |
| Kuvitus ja kuvat | Hyväksytyt valokuvat, kuvitukset tai kuvakesarjat | Pitää kuvapankkikuvat poissa |
| Tyyliopas | Yksisivuiset säännöt PDF:nä tai linkkinä | Selittää, milloin kutakin tiedostoa käytetään |

Seitsemän kohtaa. Useimmissa paketeissa on kolme ensimmäistä. Seuraavista kolmesta johdonmukaisuus todella tulee.

Auttaa miettiä, kuka paketin avaa ja mihin kukin ensimmäisenä tarttuu:

- **Somevastaava** haluaa mallipohjat ja taustat oikeissa kooissa
- **Verkkokehittäjä** haluaa SVG-logon, värikoodit CSS:nä ja fonttien lähteet
- **Painotalo** haluaa painologon, CMYK-arvot ja mahdolliset kirkasvärit
- **Uusi työkaveri** haluaa yksisivuisen oppaan ja yhden hyvän esimerkin jokaisesta muodosta
- **Tekoälyavustaja** haluaa säännöt selkotekstinä ja värit koodeina

## Logotiedostot: mitä muotoja tarvitset

Yksi logo, useita tiedostoja. Jokainen muoto ratkaisee eri ongelman, ja väärä muoto on tavallinen syy epätarkkoihin, laatikkoon jääneisiin tai väärän värisiin logoihin.

| Muoto | Käyttö | Varo |
| --- | --- | --- |
| SVG | Verkkosivut, sovellukset ja kaikki, mikä skaalautuu | Jotkin toimisto- ja somityökalut eivät hyväksy sitä |
| PNG, läpinäkyvä | Diat, asiakirjat, somityökalut, sähköposti | Vie isona, esimerkiksi 2 000 px leveänä, jotta se pysyy terävänä |
| PDF tai EPS | Paino, kyltit ja oheistuotteet | Lähetä painotaloille, älä someen |
| JPEG | Lähes koskaan logoille | Ei läpinäkyvyyttä, joten se tulee valkoisessa laatikossa |

Vähintään: pääbrändin logo SVG:nä ja läpinäkyvänä PNG:nä sekä valkoiset ja mustat yksivärisversiot valokuville ja liukuväreille.

Sisällytä myös versio, joka toimii tunnusomaisella taustallasi. Logo, joka katoaa omalla liukuvärilläsi, on yleinen ja vältettävissä oleva ongelma. [Logon asettaminen liukuvärille](https://gradiently.design/fi/guide/logo-on-gradient-background) selittää korjaukset.

## Värit, fontit ja muut perusasiat

- Yönsininen: #0e1424
- Jauho: #f3e6d0
- Uunin hehku: #e0823d
- Kuori: #6b4a2f

Paketin väreillä pitää olla nimet koodien lisäksi. Ihmiset muistavat ”uunin hehkun”, kukaan ei muista koodia #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%);
}
```

Laita pakettiin värien tiedosto sille, joka rakentaa verkkosivusi. Se säästää arvausten kierroksen kuvakaappauksista.

Fonteista merkitse muistiin, mistä kukin tulee ja mitä sen lisenssi sallii. Monet hyvät kirjasimet ovat ilmaisia [Google Fontsissa](https://fonts.google.com). Kaupalliset fontit tarvitsevat usein lisenssin henkilöä tai verkkosivua kohden, joten kirjoita se ylös. [Miten valitset brändifontit](https://gradiently.design/fi/guide/brand-fonts) auttaa itse valinnassa.

## Taustat ja mallipohjat: tiedostot, joita käytetään eniten

Logot saavat huomion, mutta taustat ja mallipohjat saavat käytön. Valmistele tunnusomainen taustasi koissa, joissa julkaiset useimmin, jotta kukaan ei venytä neliökuvaa bannerikuvaksi. Rakenna sen päälle mallipohjat.

- Julkaisu 4:5: 1080 × 1350
- Tarina 9:16: 1080 × 1920
- Dia 16:9: 1920 × 1080
- Linkin esikatselu: 1200 × 630
- Sähköpostin yläosa: 1200 × 600
- LinkedIn-banneri: 1584 × 396

Kuusi kokoa, jotka kattavat useimmat pienet brändit. Piirrä tausta jokaiseen muotoon rajaamatta yhtä kuvaa.

## Brändipaketin kansiorakenne, joka pysyy siistinä

```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)
```

Numeroidut kansiot pitävät järjestyksen, yksi lueminut-tiedosto on päällimmäisenä, ja vanhat tiedostot siirtyvät arkistoon eivätkä jää uusien viereen.

### Sotkuinen paketti

- logo-final-v3-UUSI-käytä-tätä.png
- Viisi kopiota paketista eri asemilla
- Vanhat ja uudet värit vierekkäin
- Fontit nimetty mutta ei linkitetty

### Siisti paketti

- brand-logo-white.png, nimetty sen mukaan, mitä se on
- Yksi koti, johon linkitetään kaikkialta muualta
- Poistetut tiedostot siirretty kansioon _archive
- Jokaisella fontilla lähde ja lisenssi

## Miten brändipaketti pidetään ajan tasalla

1. **Yksi koti, yksi omistaja** Pidä yksi pääkopio ja nimeä yksi henkilö, joka voi muuttaa sitä. Kaikki muut linkittävät siihen kopioiden lataamisen sijaan.
2. **Nimeä tiedostot sen mukaan, mitä ne ovat** Brändi, kohde, variantti, muoto. Ei koskaan ”lopullinen” tai ”uusi”: ne lakkaavat pitämästä paikkaansa seuraavalla viikolla.
3. **Arkistoi, älä poista** Kun jokin poistuu käytöstä, siirrä se arkistokansioon. Vanhat tiedostot uusien vieressä ovat tapa, jolla vanhat värit palaavat.
4. **Tarkista jokaisen muutoksen jälkeen** Uusi mallipohja, uusi väri, uusi logoyhdistelmä: päivitä paketti samana päivänä ja sitten tyyliopas. Katso [brändin johdonmukaisuus](https://gradiently.design/fi/guide/brand-consistency), miksi ajautuminen alkaa tästä.

Gradiently pitää brändipakettia studion sisällä, ja logosi, värisi ja fonttisi ovat yhden klikkauksen päässä jokaisesta suunnitelmasta. Designer soveltaa sitä, kun se tekee tai muokkaa töitä. Jos hoidat useampaa brändiä, jokaisella on oma pakettinsa ja Markinsa. [Brändipaketin käyttöönotto Gradientlyssä](https://gradiently.design/fi/guide/brand-kit-setup) opastaa läpi.

## FAQ

### Mikä brändipaketti on?

Brändipaketti on kokoelma käyttövalmiita brändin tiedostoja: logot, värikoodit, fontit, taustat, mallipohjat, hyväksytyt kuvat ja lyhyt tyyliopas.

### Mitä logotiedostoja brändipakettiin kuuluu?

SVG ja läpinäkyvä PNG pääasiallisesta logosta, valkoiset ja mustat yksivärisversiot, neliönmuotoinen avatar-versio sekä PDF tai EPS painoa varten.

### Mikä ero on brändipaketilla ja tyylioppaalla?

Tyyliopas on säännöt, brändipaketti on tiedostot. Paketin pitäisi sisältää opas, ja oppaan pitäisi kertoa, missä paketti on.

### Miten jaan brändipaketin freelancerille?

Jaa linkki yhteen pääkansioon, tyyliopas päällimmäisenä. Vältä kopioiden lähettämistä, sillä ne vanhenevat.