Brändiohjeistus
Tämä dokumentti määrittelee Auto-Saksasta.fi -brändin visuaalisen identiteetin. Noudatta näitä ohjeita kaikessa viestinnässä — verkossa, printeissä ja sosiaalisessa mediassa.
Abco Oy
auto-saksasta.fi
Päivitetty: toukokuu 2026
01
Logo
Logomerkki, wordmark ja niiden yhdistelmät
Logon anatomia
Valkoinen reunaviiva
Erottaa logon tummista taustoista. Vakioleveys 6% kilven leveydestä.
Kilpimerkki — Logo Blue #1761C4
Pyöristetty kilpimuoto symboloi luotettavuutta ja turvallisuutta. Kulut pyöristetty 6px.
T-kirjain — valkoinen
"T" Tuontipalvelusta. Palkki 50% kilven leveydestä, varsi keskitetty, pyöristetty kulmista.
Pyöristetty alapiste
Kilven alaosa tulee symmetriseen, pehmeään pisteeseen — ei teräväkulmaiseen.
Vapaa tila (Clear Space)
X = kilven korkeus × 0.15
- Logon ympärille jätetään aina vapaa tila — vähintään kilven korkeuden 15%
- Ei tekstiä, kuvia tai muita elementtejä vapaan tilan sisällä
- Minimikokoina: 24px korkeus ikonikäytössä, 80px korkeus täyslogramerkille
- Resoluutio: käytä aina SVG verkossa, PNG 2× (retina) printissä
02
Väripaletti
Primääri-, tehoste- ja semanttiset värit
Brändivärit (Primary)
Logo Blue
#1761C4
Logomerkki, linkit, korostukset
Navy (Primary)
#0e2d52
Header, teksti, pääkortit, CTA-taustat
Navy Light
#164070
Hover-tila, gradientin toinen sävy
Orange (Accent)
#e67e22
CTA-napit, .fi-pääte, korostukset
Orange Dark
#d35400
Oranssin hover-tila
Navy Subtle
#e8eef6
Info-kortit, aktiiviset nav-linkit
Neutraalit
Text
#1a2332
Perusteksti
Text Muted
#6b7c93
Kuvateksti, labeli, ohjeet
Text Faint
#9aabb8
Placeholder, poissaoleva data
Border
#cdd9e8
Reunaviivat, jakajat
BG
#eef2f7
Sivutausta
Surface
#ffffff
Kortit, modaalit, lomakkeet
Semanttiset värit
Success
#1a9e5a
Onnistumiset, vahvistukset, maksettu
Danger
#dc2626
Virheet, hylkäykset, poistot
Warning
#f59e0b
Varoitukset, odottavat toimet
Info
#2563eb
Informaatioviestit, linkit sisällössä
Virallinen gradientti
linear-gradient(135deg, #0e2d52 0%, #1761C4 60%, #1a6fd8 100%)
Käyttö: Hero-tausta, CTA-palkki, sosiaalisen median kuvat
03
Typografia
Fontit, koot ja hierarkia
Käytämme järjestelmäfonttipinoa (System Font Stack). Se latautuu nopeasti, näyttää natiivisti jokaisella alustalla eikä vaadi Google Fonts -latausta. Lisäpainona voidaan käyttää Inter-fonttia kun yhtenäisyys eri alustoilla on kriittistä.
Fonttiperhe
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace; // VIN-numerot, koodit
Auto-Saksasta.fi
Ammattimainen auton tuontipalvelu
Tuomme autoja Saksasta, Itävallasta ja Hollannista.
WBAJB11060G867312
Typografinen asteikko
Tuontipalvelu
Auto Saksasta Suomeen
Palvelupaketti sisältää
Tarkastus Saksassa
Huolehdimme koko tuontiprosessista — tarkastuksesta rekisteröintiin.
Hinta sisältää kuljetuksen, tullauspaperit, rekisteröinnin ja ensimmäisen katsastuksen.
AUTOVERO · REKISTERÖINTI
* Hinnat ovat suuntaa-antavia. Lopullinen hinta vahvistetaan tarjouksen yhteydessä.
04
Spacing & Grid
8px-pohjainen etäisyysjärjestelmä
Kaikki sisäiset välit, paddingt ja marginaalit ovat 8px:n kerrannaisia. Tämä luo visuaalisen rytmin ja yhtenäisyyden kaikissa komponenteissa.
${[[1,'4px','--space-1','Ikonit tiiviissä','Väli elementin sisällä (esim. ikoni + teksti)'],[2,'8px','--space-2','Pieni gap','Napin sisäinen padding, pienen elementin gap'],[3,'12px','--space-3','Sisäinen','Kortin pieni padding, gap'],[4,'16px','--space-4','Standardi','Kortin sisäinen padding, section gap'],[5,'20px','--space-5','Suuri sisäinen','Lomake-elementtien väli'],[6,'24px','--space-6','Osioiden välinen','Korttirivien väli'],[8,'32px','--space-8','Layout gap','Suurten blokkien väli'],[10,'40px','--space-10','Section','Sivun osioiden välinen'],[12,'48px','--space-12','Hero','Suuret sisäiset paddingt']].map(([n,px,token,name,desc])=>`
`).join('')}
05
Logo — käyttösäännöt
Mitä saa tehdä, mitä ei
✅ TEE NÄIN
Käytä alkuperäistä logoa muuttumattomana valkoisella tai vaalealla taustalla.
❌ ÄLÄ TEE NÄIN
Älä peilaa, kierrä tai vääristä logoa millään tavalla.
✅ TEE NÄIN
Tummalla taustalla käytä valkoista versiota — ei sinistä.
❌ ÄLÄ TEE NÄIN
Älä käytä sinistä logoa oranssin tai kirkkaan tehostevärin päällä — kontrasti kärsii.
❌ ÄLÄ TEE NÄIN
Älä muuta logon värejä — ei gradientteja, filttereitä tai uudelleenväritystä.
❌ ÄLÄ TEE NÄIN
Älä lisää varjoja, efektejä tai kehyksiä logomerkin ympärille.
06
Ikonigrafiikka
Tyyli ja minimikoot
Ikonin tyyli
Käytetään Lucide Icons -kirjastoa tai vastaavaa — viiva-tyyliset (stroke), pyöristetyt päät, 2px viivan paksuus. Emojit sallitaan admin-käyttöliittymässä selkeyden vuoksi.
shield
clock
map-pin
truck
file-text
gift
Minimikoot — ikonikäyttö
16px
Favicon
Favicon
24px
Ikonipainike
Ikonipainike
32px
List/nav
List/nav
48px
Korttiheader
Korttiheader
64px
Profiilikuva
Profiilikuva
96px
Hero / Feature
Hero / Feature
07
Brändiääni & Sävy
Miten puhumme — kirjallinen tyyli
🤝 Asiantunteva
— ei pompöösinen
— ei pompöösinen
✓ "Tarkastamme auton ammattilaisten kanssa"
✗ "Hyödynnämme synergistisiä ekosysteemejä"
💬 Suora
— ei jäykkä
— ei jäykkä
✓ "Autosi saapuu 7–14 arkipäivässä"
✗ "Toimitusaika on arvioitu olevan välillä..."
🛡 Luotettava
— ei vakuutteleva
— ei vakuutteleva
✓ "Läpinäkyvä hinnoittelu — kaikki kulut näkyvillä"
✗ "Emme koskaan piilota kuluja!"
😊 Lämmin
— ei yliystävällinen
— ei yliystävällinen
✓ "Hyvä uutinen — tarkastaja on nimetty!"
✗ "WOW, MAHTAVAA!!! Olemme niin iloisia!!!"
🔢 Konkreettinen
— ei epämääräinen
— ei epämääräinen
✓ "Autovero: 2 340 €"
✗ "Autovero on n. muutama tuhat euroa"
🇫🇮 Suomalainen
— ei ylikäännetty
— ei ylikäännetty
✓ "Nouto" "Valtakirja" "Rekisteröinti"
✗ "Pick-up" "Power of Attorney" "Registration"
Viestinnän avainsanat
${['Luotettava', 'Läpinäkyvä', 'Ammattimainen', 'Vaivaton', 'Kattava', 'Nopea', 'Turvallinen', 'Henkilökohtainen', 'Edullinen', 'Asiantunteva'].map(w=>`${w}`).join('')}
08
Favicon & App Icons
Kaikki kokosarjat
Favicon — kaikki koot
16×16
32×32
Standard
Standard
48×48
60×60
iOS
iOS
76×76
iPad
iPad
180×180
Apple Touch
Apple Touch
192×192
Android
Android
512×512
App Store
App Store
HTML head -tagit:
<link rel="icon" type="image/svg+xml" href="/assets/logos/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/logos/apple-touch-icon.png">
<meta name="theme-color" content="#1761C4">
<meta name="msapplication-TileColor" content="#0e2d52">
10
Ladattavat materiaalit
Kaikki SVG-tiedostot
${[
['assets/logos/logo-blue.svg','Primäärinen logo (sininen)','primary'],
['as-logo-white.svg','Valkoinen logo (tumma tausta)','white'],
['as-logo-dark.svg','Tumma logo (monokrom)','dark'],
['as-logo-stacked.svg','Pinottu logo','stacked'],
['as-icon.svg','Pelkkä ikonimerkki','icon'],
['favicon.svg','Favicon (SVG, kaikki koot)','favicon'],
['og-image.svg','OG-kuva (1200×630)','og'],
].map(([file,name,key])=>`
`).join('')}
📄
${file}
${name}
PNG-konversio (tarvittaessa)
PNG-tiedostoja tarvitaan esim. sähköpostiallekirjoituksiin ja joihinkin ulkoisiin palveluihin. Konvertoi SVG → PNG käyttäen:
Tai käytä selaimessa: Inkscape, Figma, SVGOMG.
npm install -g svgexportsvgexport as-icon.svg as-icon@2x.png 2xTai käytä selaimessa: Inkscape, Figma, SVGOMG.
<meta property="og:image" content="https://auto-saksasta.fi/assets/logos/og-image.png"><meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">