Grafisk manual för Regler och ramar för användande av logotyp, färger, typsnitt m.m både inom webb och tryck. 1
Innehåll Sida 3 4 Sammanfattning Sida 5 Färger Sida 6 8 Logotyp Sida 9 Bildspråk Sida 10 11 Typografi Sida 12 Användning av färg i text Sida 13 20 Praktiska exempel 2
Sammanfattning Luftighet och frihet är två ord som ska speglas i det grafiska materialet i den mån det är möjligt. Vi uppmuntrar er till att våga mer före mindre. Att göra det för luftigt är bättre än för trångt. 3
Detta dokument är en samling ramar som bör följas både i print och webb för att behålla ett tydligt och enhetligt varumärke. Hur reglerna tillämpas beror ofta på vad som ska produceras, formatet, tillverkningsmetoden osv. Vissa delar är viktigare än andra. Hur logotypen skall användas bör inte frångås alls då regler finns för alla möjliga tillfällen, samma sak gäller val av typsnitt. Andra delar kan mer ses som ramar och rekommendationer som i den mån det är möjligt bör följas. Vi vill uppmuntra er till att våga använda fria ytor för att ge en lättare känsla. Håll er till jämna avstånd (grid). Liggande format är bättre än stående om möjligt, det ger mer utrymme. Detta dokument använder 20mm marginaler och 5mm mellan spalterna. Siffrorna beror helt på sammanhanget så ta siffrorna ovan som inspiration. 4
Färger Färg Pantone 5483 C Pantone Purple C Pantone 114 C Pantone 1685 C Pantone 362 C Pantone Black C CMYK: 62, 00, 21, 31 CMYK: 38, 88, 00, 00 CMYK: 00, 48, 100, 00 CMYK: 00, 68, 100, 44 CMYK: 70, 00, 100, 09 CMYK: 00, 00, 00, 100 RGB: 55, 147, 155 RGB: 165, 67, 153 RGB: 248, 152, 29 RGB: 153, 71, 08 RGB: 71, 170, 66 RGB: 00, 00, 00 Gråskala K=100% K=50% K=40% Svart/vitt Pantone 400 C / CMYK 00, 03, 06, 16 K=100% K=0% Den enda bakgrundsfärg förutom vit som färglogotypen får placeras mot. 5
Logotyp Logotypen består av en krans av färger som symboliserar alla olika grupper i samhället. Kransen skyddas av ett C, centret i organisationens namn. Logotypen får inte dras ut, klämmas ihop, vridas eller läggas på mönster och komplexa bilder. Bakgrunden är antingen vit, svart eller Pantone 400 C (se sidan 5). Bakgrunden bör dock inte vara svart om den luftiga känslan skall behållas. Vid undantag skall den helt vita logotypen användas. Logotypen får användas som grafiskt element (se exempel på sidan 10 och 11). 6
Liggande logotyp MOT DISKRIMINERING MOT D ISKRIMINERING MOT DISKRIMINERING MOT DISKRIMINERING Stående logotyp MOT DISKRIMINERING MOT DISKRIMINERING MOT DISKRIMINERING MOT DISKRIMINERING 7
Friyta Med friyta menas området omkring logotypen som inte får inkräktas av andra grafiska element. Det svarta C et i logotypen är måttet. Ett svart C åt alla håll är minimum med friyta. MOT DISKRIMINERING MOT DISKRIMINERING 8
Bildspråk Våga använda bilder i stora format, våga låta dem ta plats, till exempel en helsida i en broschyr. Motiven kan innehålla människor och öppna scener med luft och ljus för att spegla den övriga profilen. Lätta, ljusa och luftiga bilder. 9
Typografi Typografin ska precis som de andra delarna hållas luftig. Texten ska vara vänsterställd och följa ett fast avstånd mellan raderna för att ge ett lättläst intryck. Typografin är uppdelad i tre olika delar: rubrik, underrubrik/ingress och brödtext. 10
Rubrik Typsnitt: Arvo regular Storlek: beror på tillfälle, men 30pt minst. Radavstånd: beror på teckenstorlek. Underrubrik/ingress Typsnitt: Droid Seriff regular Storlek: 16pt Radavstånd: 24pt Brödtext Saknas typsnitten? Typsnitt: Droid Sans regular Storlek: 12pt Radavstånd: 18pt Saknas fonterna finns de gratis att ladda ner på http://www.google.com/webfonts 11
Användning av färg i text Logotypens färger bör användas i text för att lätta upp och göra avsändaren tydligare. En textfärg får väljas per sida eller tydligt avdelat område. Färgen appliceras antingen på rubrik eller ingress, aldrig båda. Brödtexten är alltid svart. Är dokumentets bakgrund annan än vit eller angiven bakgrundsfärg på sida 5 får inga andra färger användas än svart och vit. Godkända exempel: Grön rubrik, svart ingress och brödtext. Svart rubrik, lila ingress och svart brödtext. Svart rubrik, svart ingress och svart brödtext. Icke godkända exempel: Grön rubrik, grön ingress och svart brödtext. Svart rubrik, lila ingress och lila brödtext. Svart rubrik, svart rubrik och lila brödtext. I den här manualen kan du se hur reglerna tillämpas och med fördel ta inspiration vid skapande av nytt material för organisationen. 12
Praktiska exempel Följande sidor innehåller fler exempel på hur den grafiska profilen används. 13
Suspendisse ac urna Integer adipiscing risus a sem 14 Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipisci in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu. Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada.
Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu. Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. 15
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pel lentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. 16 Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vesti bulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullam corper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, ad ipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl. Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel.
Amet el nuc maurius Suspendisse acurna Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu. Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Ut conval lis, sem sit amet interdum consectetuer, odio augue aliquam leo. Al quis morbi pur 17
lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pel lentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. ipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl. Lorem ipsum at diam cibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Dolor sit amet? Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vesti bulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullam corper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, ad 18 Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, fau- Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Dapibus sed semper Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue.
Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, fau cibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sa gittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu. Suspendisse mauris. Fusce accumsan mollis eros. Pelo lentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. 19
20