# Brändipaketin pohja: logot, värit, fontit ja äänensävy

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

Brändipaketti on hyödyllinen vain, jos sen avaamalla voi tehdä ohjeiden mukaisen suunnitelman kymmenessä minuutissa. Tämä pohja auttaa siinä osio kerrallaan ja näyttää täytetyn esimerkin.

## The short version

- Brändipaketin pohjassa on seitsemän osiota: perustiedot, logot, värit, typografia, tunnusilme, äänensävy ja säännöt.
- Logotiedostoista tarvitaan täysi ja pieni versio sekä vaaleat ja tummat vaihtoehdot SVG:nä ja läpinäkyvänä PNG:nä.
- Väreille kirjataan HEX- ja RGB-arvot näytöille, CMYK painotuotteille sekä jokaisen värin tehtävä.
- Äänensävyosio auttaa muita ihmisiä ja tekoälytyökaluja kirjoittamaan brändisi sävyllä, joten siihen tarvitaan oikeita esimerkkejä.
- Brändipaketti on täyttä tyyliopasta lyhyempi ja käytännöllisempi: tiedostot ja koodit, joita ihmiset tarvitsevat tänään.

**Brändipaketin pohja** on täytettävä rakenne tiedostoille ja tiedoille, joita kuka tahansa tarvitsee brändillesi suunnittelemiseen: logotiedostot, värikoodit, fontit, tunnusilme, äänensävy ja muutama sääntö. Alla olevassa pohjassa on seitsemän osiota siinä järjestyksessä, jossa ihmiset etsivät tietoja. Kopioi se asiakirjaan tai jaettuun kansioon ja täytä jokainen kohta. Saat paketin, jonka avulla freelancer, uusi työntekijä tai tekoälyavustaja voi aloittaa heti.

Jos pohdit vielä, *miksi* tarvitset paketin, [brändipaketti](https://gradiently.design/fi/guide/brand-kit) perustelee asian. Tämä sivu on käytännön pohja.

## Brändipaketin pohja

```text
BRÄNDIPAKETTI: [Brändin nimi]
Viimeksi päivitetty: [päivämäärä]   Vastuuhenkilö: [nimi, sähköposti]

1. PERUSTIEDOT
   Yksi lause: mitä teemme ja kenelle
   Yleisö:
   Tuotteet tai palvelut:
   Verkkosivusto / käyttäjätunnukset:

2. LOGOT  (kukin SVG + läpinäkyvä PNG)
   Täysi logo:              vaalea ___  tumma ___
   Pieni merkki / kuvake:   vaalea ___  tumma ___
   Vähimmäiskoko:           ___ px leveä
   Suoja-alue:              ___ kaikilla sivuilla

3. VÄRIT  (nimi / käyttö / HEX / RGB / CMYK)
   Pohja:
   Pääväri:
   Tukiväri:
   Vaalea neutraali:
   Tehoste (säästeliäästi):

4. TYPOGRAFIA
   Otsikkofontti + leikkaus:
   Leipätekstifontti + leikkaus:
   Hankintapaikka / lisenssi:

5. TUNNUSILME
   Tausta tai Mark-koodi:
   Valokuvien käsittely:

6. ÄÄNENSÄVY
   Kolme sanaa:
   Sanomme: ___    Emme koskaan sano: ___
   Esimerkkiotsikko:

7. SÄÄNNÖT
   Aina:
   Ei koskaan:
```

Kopioi tämä mihin tahansa asiakirjaan. Täytä nyt tiedossasi olevat asiat ja jätä aukot mieluummin kuin arvaa.

## Mitä jokainen osio tarvitsee

| Osio | Sisältö | Tavallinen puute |
| --- | --- | --- |
| Perustiedot | Yksi lause, yleisö, tuotteet tai palvelut, linkit | Ei yhteyshenkilöä kysymyksille |
| Logot | Täysi ja pieni versio, vaalea ja tumma, SVG ja PNG | Vain JPG valkoisella laatikolla |
| Värit | Nimet, tehtävät, HEX, RGB ja painettaessa CMYK | Koodit kertomatta värien tehtäviä |
| Typografia | Otsikko- ja leipätekstifontit, leikkaukset, lisenssi | Fonttinimet ilman tiedostoja tai lähdettä |
| Tunnusilme | Tausta tai pinta, valokuvien käsittely | Puuttuu kokonaan, joten jokainen suunnittelija keksii oman |
| Äänensävy | Kolme sanaa, esimerkit, vältettävät sanat | Adjektiiveja ilman esimerkkejä |
| Säännöt | Kaksi tai kolme aina- ja ei koskaan -sääntöä | Pitkä lista, jota kukaan ei lue |

Seitsemän osiota ja kuhunkin tavallisimmin jäävä aukko.

### Logot: vietävät tiedostot

Vie jokainen logoversio SVG:nä skaalautuviin kohteisiin ja läpinäkyvänä PNG:nä työkaluihin, jotka eivät hyväksy SVG:tä. Nimeä tiedostot selkeästi, esimerkiksi `brand-logo-full-dark.svg`, jotta ne tunnistaa avaamatta. [Logoversiot](https://gradiently.design/fi/guide/logo-variations) kertoo tarvittavat versiot ja niiden käytön, ja [logokoot](https://gradiently.design/fi/guide/logo-sizes) listaa alustojen vaatimat mitat.

### Värit: koodit ja tehtävät

Listaa jokaiselle värille nimi ja tehtävä, älä pelkkää koodia. ”Tehoste: vain painikkeet ja hinnat” estää tehostetta tulvimasta suunnitelmaan. Tässä on pienen joogastudion täytetty esimerkki.

- Pohja: hiilenharmaa: #1f2421
- Pääväri: eukalyptus: #49695a
- Tukiväri: salviausva: #b7cbbd
- Neutraali: pellava: #f6f1e9
- Tehoste: savi: #d98b5f

Viisi väriä, jokaisen tehtävä kirjattuna nimeen. Savitehoste on tuntien kellonaikoja ja hintoja varten, ei muuhun.

Lisää RGB-arvot heksakoodien rinnalle ja CMYK, jos jotakin painetaan. [Heksasta RGB:ksi](https://gradiently.design/fi/guide/hex-to-rgb) tarjoaa muunnoksen, ja [RGB vai CMYK](https://gradiently.design/fi/guide/rgb-vs-cmyk) selittää, miksi painovärit tarvitsevat omat arvonsa.

### Typografia: nimet, tiedostot ja lisenssit

Kirjoita fonttien tarkat nimet ja leikkaukset, kuten ”Inter Bold otsikoihin, Inter Regular leipätekstiin”, ja lisää fonttitiedostot tai latauslinkki samaan kansioon. Kirjaa myös lisenssi. Henkilökohtaiseen käyttöön ilmainen fontti ei välttämättä kata asiakkaan mainoskampanjaa, ja freelancer tarkistaa asian paketista. [Brändifontit](https://gradiently.design/fi/guide/brand-fonts) auttaa, jos et ole vielä valinnut.

### Tunnusilme: useimmista paketeista puuttuva osio

Useimmat brändipaketit päättyvät logoon, väreihin ja fontteihin, minkä vuoksi niistä tehdyt suunnitelmat alkavat silti eriytyä. Suunnitelmiesi tausta tai pinta täyttää suurimman osan jokaisesta kuvasta. Se tarvitsee oman kohtansa: mikä se on, mistä sen saa ja miten kuvat käsitellään sen päällä. Jos ilmeesi on Gradiently Mark, kirjoita sen julkinen koodi tähän, esimerkiksi `GR·K7Q2·MX`, jotta kuka tahansa löytää täsmälleen oikean. Ilman tätä osiota jokainen uusi suunnittelija keksii taustan ja brändi muuttuu hiljalleen useaksi brändiksi.

### Äänensävy: esimerkit voittavat adjektiivit

### Vaikea käyttää

- Äänemme on lämmin, ystävällinen ja ammattimainen
- Vältä myyvää sävyä
- Huomioi kaikki

### Helppo käyttää

- Sanomme: ”Tule sellaisena kuin olet, matot saat meiltä.”
- Emme koskaan sano: ”Viimeinen mahdollisuus” tai ”Älä jää paitsi”
- Sinuttele kaikkia, älä oleta notkeutta tai kuntoa

Esimerkit merkitsevät vielä enemmän nyt, kun tekoälytyökalut kirjoittavat monia ensimmäisiä luonnoksia. Avustaja, joka saa kolme oikeaa lausetta äänelläsi, jäljittelee sitä paljon paremmin kuin kolme adjektiivia saanut. [Brändin äänensävy tekoälylle](https://gradiently.design/fi/guide/brand-kit-voice) kertoo, miten kirjoitat tämän osion sekä koneille että ihmisille.

## Täytetty esimerkki käytännössä

Brändipaketin testi on, voiko ihminen, joka ei ole koskaan tavannut sinua, tehdä siitä ohjeiden mukaisen julkaisun. Tässä joogastudion paketin tulos uuden freelancerin käsissä ilman muuta ohjeistusta.

Joogastudion pystyjulkaisu ilmoittaa lauantain aamujoogasta klo 7 studion liukuväritaustalla

Tunti-ilmoitus rakennettu vain paketista: paletti, fontit, ilme ja äänensävy.

Saman joogastudion pystytarinassa lukee Tule sellaisena kuin olet samalla taustalla ja typografialla

Tarina samasta paketista. Eri muoto, sama brändi, ei lisäohjeita.

## Missä brändipaketti kannattaa säilyttää

- **Jaetussa kansiossa**, jossa on asiakirja sekä kaikki logo- ja fonttitiedostot. Yksinkertainen ja kaikille sopiva.
- **Suunnittelutyökalussasi**, jotta värit, fontit ja logot ovat yhden napsautuksen päässä käsin kopioinnin sijaan.
- **Yksi vastuuhenkilö ja päivämäärä.** Joku vastaa päivityksistä, ja kaikki näkevät, onko paketti ajan tasalla.

Gradientlyn Prohon kuuluva brändipaketti kattaa suurimman osan tästä pohjasta: nimen ja kuvauksen, logot, väripaletit, otsikko- ja leipätekstifontin (voit ladata fonttitiedostoja), äänensävyn, yleisön ja sen, mitä brändi tekee. Se voi lukea verkkosivustosi ja täyttää nimen, kuvauksen, värin ja kuvakkeen. Käytä Markia tunnusilmeenäsi. Designer kirjoittaa pakettisi äänellä ja soveltaa sitä suunnitelmien asetteluun. [Brändipaketin käyttöönotto](https://gradiently.design/fi/guide/brand-kit-setup) käy tämän läpi.

## FAQ

### Mitä brändipakettiin kuuluu?

Brändin perustiedot, logotiedostot useina versioina, värikoodit tehtävineen, fontit, tunnusilme, äänensävyä kuvaavat esimerkit ja muutama sääntö.

### Mitä eroa on brändipaketilla ja tyylioppaalla?

Brändipaketti on käytännön tiedostojen ja koodien joukko, jolla suunnitellaan tänään. Tyyliopas on pidempi asiakirja, joka selittää säännöt ja perustelut tarkemmin.

### Missä tiedostomuodoissa brändipaketin logot pitäisi olla?

SVG:nä skaalautuviin kohteisiin ja läpinäkyvänä PNG:nä työkaluihin, jotka eivät hyväksy SVG:tä. Kummastakin vaalea ja tumma versio.

### Kuinka pitkä brändipaketin pitäisi olla?

Niin lyhyt, että sen lukee kymmenessä minuutissa. Siirrä tarvittavat lisätiedot erilliseen tyylioppaaseen.