Innehåll

OBS! Denna designguide visas bäst i en webbläsare på bärbar eller stationär dator.

01 Logo

Huvudlogo

Logo med payoff

Logosymbol

Favicon

Luft runt logo

Logo minsta storlekar

Logo i svartvitt

Logo på produkt

02 Färger

Huvudfärger

Sekundärfärger

Färghierarki

Nyanser

Temafärger

03 Typografi

Profilfont

Ersättningsfont

Fonthierarki

Textfärg och kontrast

04 Dekorelement

Grundform

Pilelement

Användningsområden

Rundade hörn

05 Ikoner

Ikonstil

Ikonbibliotek

06 Bilder

Kategorier

Stil och ton

Exempel

Användning och riktlinjer

07 Sociala medier

Principer

Inlägg

Story/reels

08 Profianvändning

PowerPoint

Broschyrer

09 Motion 

Motionprinciper

Logoanimation

Hovudlogo animation

Logoanimation med payoff

Logoanimation  med CTA

Logo Intro

Logo Outro

Textanimering

Textsida

Textruta

Övergångar

Namnskylt

Undertexter

Tekniskt

10 Flexit Partner

11 Distributors

Huvudlogo

Flexits huvudlogo finns i tre versioner:


– Positiv logo: mörk blå / Sky

– Negativ logo: ljus blå / Air

– Negativ logo: vit

Ladda ner alla logofiler samlade för profilen här:

Flexit positiv logo Sky

Logoversion Air används alltid på mörk blå Sky bakgrund – aldrig på ljus bakgrund.

Flexit negativ logo Air

Logoversion vit används företrädesvis på en bildbakgrund. Se till att bakgrunden är lugn och dämpad nog för att ge god kontrast till logo.

Flexit negativ logo vit

Logo med payoff

Det finns fasta principer för hur man kombinerar logo och payoff. Vår payoff "Bättre inneklimat" har två fasta placeringar under logon. Ladda ner färdiga original för logo med payoff här.

Vertikal version

Logo med payoff i vertikal version används där det finns gott om plats, till exempel på mässväggar, på baksidan av trycksaker eller på profileringsmaterial.

Horisontell version


Logo med payoff i horisontellt utförande passar bra  på smala ytor där det finns behov av att spara utrymme på höjden.

Payoff fristående

Denna fristående version av payoff används i flera sammanhang:


Layout (digital och tryck):


– På annonser


– På förstasidor

– På topbanners

Animerade budskap: 


– Film och SoMe

Logo med Call to action

Detta är den fasta layouten för att placera Call to action eller annan text i underkant av logon. Text ställs in i teckensnittet Plus Jakarta Sans Regular. 

Detta är principen för textplacering:

Logosymbol

Det finns tre tillåtna verioner av logosymbolen. Version 1 är standard om inget annat anges.


Version 1: «X» i huvudfärgen Air / Sky bakgrund

Version 2: «X» i huvudfärgen Sky / Air bakgrund

Version 3: «X» i huvudfärgen Sky / Vit bakgrund

Originalfilerna har raka hörn, men anpasar sig till det format de infogas i. När  logosymbolen används som profilbild på sociala medier kommer den att anpassa sig till plattformens standard för detta.

Logosymbolen används till sociala medier, som appikon, som favicon eller som en förenklad version av logon där det är naturligt.

Version 1

Version 2

Version 3

Exempel på profilbild Facebook: 

Version 1

Favicon

Logosymbolen används som favicon på websidor. Här används den i rund version. Ladda ner original här.

Luft runt logo

Logon ska omges av tillräckligt med luft runt om.

Detta skyddar logon från visuella störningar och ger den uppmärsamhet.

Minimum luft runt logon motsvarar bokstaven "F".

Logo minsta storlekar

Digitala ytor:

Logon används med en minsta höjd på 30 px.

Tryck:

Logon används med en minsta bredd på 20 mm på tryck. 

Logo i svartvitt

Svart logo på vit bakgrund och vice versa används när det inte finns färger tillgängliga eller när det finns behov av ett förenklat uttryck. 

Svart logo är utgångspunkten för att återge logo på produker (läs mer här), men kan även gälla  sponsorlogo, skyltar eller annan typ av heltäckande svartvitt tryck.

Flexit  logo svart

Flexit  logo vit på svart botten

Flexit  logo med payoff vertikal svart

Flexit  logo med payoff vertikal vit på svart botten

Flexit  logo med payoff horisontell svart

Flexit  logo med payoff horisontell på svart botten

Logo på produkt

Det är särskilt viktigt att tänka på följande när logo ska återges på produkt:


– Logoplacering

– Skyddszon

– Logofärg på produkt

– Minsta storlek

– Tryckmetod

Logoplacering


I princip bibehålls placering och höjd på logo som den har använts på produkten tidigare.


Allmänt om placering:

– Tydligt synlig framtill

– Placering till vänster: nederst/överst eller centrerad

– Avståndet från kanterna måste minst följa skyddszonen.

Skyddszon

Följer samma princip som "Luft runt logo".

F definerar fasta avstånd för att skydda logon.

Logofärg på produkt


Värdet på logofäg väljs utifrån hänsyn till synlighet /diskretion. Produkter som har en framträdande placering i en interiör, ska visa mer diskretion i logons färgbruk än produkter som är mindre synliga.



100% svart: Pantone Black 2 C

60% svart: Pantone Cool Gray 9 C


30% svart: Pantone Cool Gray 6 C


15% svart: Pantone Cool Gray 3 C

Minsta storlek

Logo återges inte mindre än 20 mm bred.


Även på extra små produkter måste logon överensstämma med minsta storlek.

Tryckmetod

I grunden används den tryckmetod som  har använts tidigare. 

Exempel:


– Metall: Graverad, präglad eller tryckt

– Plast: Präglad eller tryckt

– Klisterdekal: Enfärgat tryck

Exempel logoplacering Nordic S3



Placering: Fram / överst / vänster

Logo behåller därmed sin tidigare placering och storlek (höjd) på produkten.

Följ placering enligt princip för skyddszon.

Exempel logoplacering Nordic CL3



Placering: Fram / nederst / vänster

Annars samma hänsyn som Nordic CL3.

Huvudfärger

Våra huvudfärger är två klassiska blå färger, Air och Sky. Dessa färger bygger varumärket och är alltid förstahandsvalet. De skapar en luftig, blå helhet och betonar vad vårt varumärke handlar om: Ventilationslösningar som ger ren och frisk luft.

Huvudfärgerna kompletteras med inslag av stödfärgerna. De tillför värme och lugn, men ska aldrig dominera helheten eller ta upp för mycket plats.

Ladda ner färgpaletten som ASE-filer

ASE-filer kan användas i Adobeprogram (InDesign, Illustrator, Photoshop m.fl.). 

En ASE-fil laddas upp under Swatches  (Load Swatches) och ger dig enkel åtkomst till alla färgkoderna i paletten. Ladda ner RGB för digital användning och CMYK för tryckta ytor. 

NCS     0530-B

RAL       230 80 20

NCS     7020-B

RAL       240 20 22

Sekundärfärger

De blå fägerna kompletteras med inslag av stödfärgerna. Dessa tillför variation värme och lugn, men ska aldrig dominera helheten eller ta upp för mycket plats.

NCS     2040-Y20R

RAL       070 70 50

NCS     2030-G30Y

RAL       130 70 30

NCS     2030-Y70R

RAL       040 70 30

NCS     2030-B 10G

RAL       2020 70 20

NCS     9000-N

RAL       9004

NCS     0500-N

RAL       9003

Färghierarki

Diagrammet visar hur färgerna viktas i profilen. Huvudfärgerna spelar den största rollen och Flexit Air är viktigst av dissa två. I tillägg kommer de sekundära färgerna som kompletterande stödfärger och användningen av  luft (vitt) är också viktig för helheten.

Flexit är totalt sett mer ljus än mörk.

Huvudfärgerna

Flexit Air och Flexit Sky bygger varumärket och är alltid förstahandsvalet för färganvändning. Detta är logofärgerna som också spelar huvudrollen på skärm och i tryck; på websidor, i presentastioner, kampanjer, på profileringsmaterial etc. 

Flexit Sky är mycket lämpig som textfärg, vilket bygger vår identitet.

Stödfärger

De sekundära färgerna möjliggör variation, men används i begränsad omfattning. Dessa färger representerar våra fyra kärnvärden:

Blå: Pålitlig

Oliv: Nyskapande

Ockra: Handlingskraftig

Rosa: Omtänksam

Nyanser

Här är en lista över profilens färgnyanser med tillhörande färgkoder. Detta ger utökade möjligheter att använda färgerna. Listan innehåller färgkoder för skärm (HEX).

Nyanser av Air


Ljusa nyanser av Air associerar ren luft och används aktivt! De mörkare tonerna kompletterar paletten med färger som associerar hem och interör, det vill säga omgivningen för våra produkter.



Färgen Air 600* är också en av stödfärgerna; Denim.

Nyanser av Sky

Sky är en av de två huvudfärgerna, men nyanser av Sky ska bara användas som neutrala bakgrunder i begränsad utsträckning.

Nyanser av Olive, Ochre, Pink

Nyanser av dessa färger används som krydda i profilen, som bakgrundsfärger, för grafik, för ikoner, för navigation etc.

Temafärger

I grafer och diagram rekommenderas färgordningen som visas här. Detta gäller t.ex. som temafärger i PowerPoint. Här är färgordningen:


– Sky

– Denim

– Air

– Olive

– Ochre

– Pink

Profilfont

Plus Jakarta Sans är vår profilfont och en mycket viktig del av det visuella uttrycket. 

Den är från Google Fonts och är gratis att använda (open source). 

Plus Jakarta Sans kan laddas ner här.

Plus Jakarta Sans

Vårt profilfont är en modern sans serif-typsnitt med raka snitt och rundade bågar. Med sin lätt upphöjda känsla passar det logons uttryck bra.

Plus Jakarta Sans är en viktig del av vårt visella uttryck. Denna font ska användas på alla ställen där det är möjligt.

Ersättningsfont Aptos

Microsoft Office har fonten Aptos som standardfont.

Flexit använder Aptos i sina Officedokument; i PowerPoint och Word.

Fonthierarki

Enkel fonthierarki med Plus Jakarta Sans:

Övertitel: SemiBold

Rubrik: Medium

Ingress: Regular

Mellantitel: Bold

Brödtext: Regular

Textfärg och kontrast

Huvudfärger


När du placerar text på färgad bakgrund måste du se till att färgkontrasten och textstorleken är tillfredsställande. Här visas några godkända kombinationer mellan text, färg och bakgrund baserade på huvudfärgerna Air och Sky.

Sekundärfärger

Här visas exempel på godkända färger och kontraster när textfärgen Sky används på sekundära bakgrundsfärger.

Samspel mellan bildanvändning, färg och text

Toningar möjliggör bra färgkombinationer mellan bild, bakgrundsfärg och text. Vi uppnår en bättre helhet när elementen i profilen interagerar med varandra.

Exemplen visar godkänd kontrast mellan text och bakgrund:

– Textfärg Sky / Air

– Textfärg Sky / Ochre

– Textfärg Sky / Olive

– Textfärg Sky / Pink

Grundform

Utgångspunkten för dekoren är pilelementet i logons X. Den friställs från X och blir en grundform i den visuella identiteten.

Pilelementet är funktionellt och dynamiskt och används både statiskt och animerat.

Pilelement

Flexibilitet

Pilelementet används flexibelt. Det kan förlängas, fördubblas, göras transparent och spegelvändas. Det kan peka både åt höger och vänster. 

Se mer om detta under användningmetoder.

Begränsningar

Pilelementet ska inte roteras och ska inte peka diagonalt, uppåt eller nedåt. 

Pilelementet används endast i Flexits profilfärger.

Användningsområden

Pilelementet används på flera olika sätt:

– förgrund över bilder

– bakgrund för produktfoton

– bakgrund för logo

– bakgrund för textbudskap

– en pekare till text/innehåll

– en animerad övergång

Bakgrund för produktfoto: 

Pilar i färgen Air, transparent

Bakgrund för positiv logo: 

Pilar i vit, transparent färg

Bakgrund för negativ logo: 

Pilar i Air, transparent färg

Förgrund över bild: Pilar i vit, transparent färg 

Rundade hörn

X:et i logon har både raka och runda hörn. Vi använder därför rundade hörn på ett antal text- och bildrutor. När två rutor kombineras ska den ena ha rundade hörn, men inte den andra. Se exempel.

Digitalt: Värdena för Corner Radius sätts och blir dokumenterade i Flexit designsystem.

Print: Utgångspunkten för avrundade Corner Options  är storlek 5 mm på A4 och mindre format. Öka proportionellt uppåt på större format.

Ikonstil

Den visuella identiteten ska använda ikoner med en gemensam stil och ton. Flexits ikonstil är uppbyggd med  streck och ett minimalistisk uttryck som passar profilen väl. Det är enkla linjer som definerar ikonens form, utan andra effekter. 


Flexits ikonbibliotek är uppdelat i två:

För navigationsikoner: Lucide.dev

För illustrationsikoner: Streamline; Core Line

Se  Ikonbibliotek

Ikoner som ska illustrera specifika Flexit-teman/funktioner/produkter och som inte finns i ikonbiblioteken, måste ritas i en liknande ikonstil som Streamline. Till höger visas sex sådana specialikoner som kan laddas ner här.

Ikonbibliotek


Flexit använder två ikonbibliotek i sitt designsystem:

Navigationsikoner

Lucide.dev används som navigationsikoner. Ikonerna är otpimerade för användning på web och kan implementeras direkt utan behov av anpassning. 

Illustrationsikoner

Streamline Icons, Core Line används som källa för illustrationsikoner och andra ikoner som inte finns tillgängliga i Lucide. Dessa ikonerna är ursprungligen inte designade för web, men anpassas efter behov för att fungera bra på alla digitala ytor.

Riktlinjer för linjetjocklek

Lucide: 1,5 pt. vid 24 × 24 px.

Streamline: 1,7 pt. vid 24 x 24 px.

Alla ikonexempel som visas här är från Streamline Icons.

Kategorier

Våra bilder ska uppfattas som naturliga, trovärdiga och vänliga och spela i linje med våra kärnvärden. Våra bilder delas in i följande kategorier:

– Människor och inneklimat

– Interiör 

– Kontor och arbetsmiljö

– Natur och hållbarhet

– Exteriör: Byggnader och bostäder

– Flexitprodukter i miljö

Stil och ton

Nyckelord som beskriver bildstilen:


– Skandinavisk färg

– Holistiska interiörer

– Känsla av genuint hem och omgivning

– Naturlighet i ljus och färger

– Leki ljus och skugga, men dette får inte överdrivas

– Inslag av gröna växter och gröna omgivnngar ger en hållbar signal

Nedan visas en mer detaljerad beskrivning av stilen vad gäller:


- Interiör

- Människor

- Färganvändning

- Byggnader och natur

Exempel

Interiör


Vi identifierar oss med en modern nordisk inredningsstil där det finns lugn och naturlighet i ljus och skugga. Inredningen har inslag av komfort och naturlighet i till exempel trä och naturmaterial (ull, trä, sten, läder etc.). Det kan gärna finnas personliga detaljer i interiören, vilket gör omgivningen mer levande. Ljus och luft i motiven är viktigt. Dessa är signaler om ett gott och luftigt inomhusklimat.


Färganvändning i bilder


Nyckelord för färgval: Lugnt och naturligt

Ljus och luft i bilderna påverkar också färgtonen, som ska vara något dämpad och mjuk. Hårda kontraster och starka färger används inte. Färgade ytor, textilier och möbler är huvudsakligen rena och enfärgade. Inslag av gröna färger i form av växter eller en dämpad utomhusmiljö skapar en fin inramning. Det är mjuka övergångar mellan färgerna. 

Människor


Bilder av människor ska uppfattas som naturliga och i trovärdiga situationer. Våra bilder har ett betraktarperspektiv som visar en avslappnad och trevlig vardag hemma eller vardagslivet på jobbet. I båda arenorna ska motiven inte verka poserade eller artificiellt poserade. Ögonkontakt med fotografen är bara naturlig i arbetssituationer.

Byggnader, natur och miljö


Våra produkter är inte bara kopplade till det urbana, utan även till periferin med hus, stugor och fritidshus som är omgivna av ren natur. Nordisk omgivning och ett nordiskt klimat är relevanta fokusområden för oss när det gäller hållbarhet, ren luft, miljö, hälsa och nordiska förhållanden. Vi använder naturbilder som inte är pråliga och "turistiska", utan som återspeglar naturen i vår egen färgpalett och landskapets råhet.


Användning och riktlinjer

Riktlinjer för användning av Flexits produkt- och miljöbilder

Våra kunder kan ladda ner bilder direkt från produktsidorna på vår hemsida till användning i t.ex. webshop, annonser etc.

Detta gäller både produktbilder och bilder med produkt i miljö.

Våra kunder kan inte ladda ner bilder från Flexits andra sidor med redaktionellt innehåll. Detta är för att dessa sidor innehåller bilder som har köpts av externa leverantörer med begränsade licenser för delning. Alla produktbilder på Flexits hemsida är png-filer med transparent bakgrund.

Tips

För att ladda ner bilder till web: Högerklicka på den lilla bilden på produktsidan och lagra bilden på din dator. Bilden lagras då som lågupplöst version.

För att ladda ner bilder till tryck: Klicka på den produktbilden så att bilden öppnas i en större version. Välj "Bild av hög kvalitet" uppe i vänstra hörnet. Högerklicka på den stora produktbilden och lagra bilden på din dator. Bilden lagras då som högupplöst version.

Principer

Logoanvändning: 


Sky logo på Air bakgrund

Vit logo på bildbakgrund

Marginalen för textmeddelande är 130 pixlar från kanten. När det finns behov av att inkludera en liten logo ska logon vara 170 px bred och placeras 70 px från kanten.

Inlägg med proportionen 4x5 (1080x1350) fördubblar den övre marginalen för text: 220 px. Marginalen för liten logo är konstant.

Texter är initialt vänsterjusterade. Centrerad text förekommer på valda inlägg.

Inlägg

Nedan visas exempel på inlägg med foto i kombination med dekorelement och budskap.

Story/reels

Nedan visas exempel på story/reels – olika kombinationer av budskap, bild och dekorelement. Använd de olika ytorna så bra som möjligt för att skapa en stark och tydlig identitet.

PowerPoint

PowerPointmallen består av:

– Mallar för förstasidan, positiv och negativ

– Agenda

– Titel- och innehållssidor

– Text- och bildsidor

– Kapitelsidor

– Grafik-/diagramsida

– Citatsida

– Stor bild + pilelement

– Baksida med logoanimation

Färgteman i PowerPoint

Det är möjligt att kategorisera färgteman i PowerPoint.

Broschyrer

Broschyrer, bruksanvisningar och produktdatablad har alla A4-covers som följer varandra i design, grid och struktur.

Layouten är anpassad till olika innehåll, men grundlayouten är densamma. Få en översikt och ladda ner filer här: Covers

Covers

Det finns en fast grid bakom alla A4-covers. Standardlayouten för denna grid visas här.

Till höger:

– Cover Bruksanvisning

– Cover Produktdatablad

Under

– Olika cover för broschyrer

InDesignmallar för cover på broschyr, bruksanvisning och produktdatablad laddas ner här.

Motionprinciper

Motionprinciper används för att säkerställa ett enhetligt uttryck på alla digitala ytor.

Detta skapar ett igenkännbart kroppsspråk och stärker varumärkets position.

Våra motionprinciper är en förlängning av vår identitet och bygger på tre huvudkoncept:

Luft - Rörelserna ska upplevas som luftiga och lätta för att återspegla varumärkets tjänster.

Dynamisk - Rörelserna ska ge en känsla av att tillföra luft och värme.

Oansträngd - Rörelserna ska återspegla en elegans, trygghet och lätthet som betonar kundens förtroende för varumärket.

Alla original levereras som After Effects-filer i formaten 16:9, 9:16, 4:5 och 1:1.

Logoanimation

Logoanimationen betonar varumärkets produkt med en tydlig koppling till lufttillförsel. Element från logoanimationen används vidare genom i hela rörelseidentiteten.

Huvudlogo animation

Logoanimationen har tre färgvariationer, baserade på den bakgrundsfärg som används. Animationen baserar sig på de etablerade motionprinciperna och återspeglar varumärkets produkt, tone of voice och positionering.

Logoanimationen använder endast den färgkombination som presenteras här.

Flexit positiv logo Sky

Flexit negativ logo Air

Flexit negativ logo vit

Logoanimation med payoff

I format där tidslängden tillåter kan logoanimering kombineras med payoff-animering.

Logoanimering med payoff har tre färgvarianter, baserat på vilken bakgrundsfärg som används.

Logoanimation med CTA

I format där tidslängd tillåter kan logoanimering kombineras med animering av payoff. 

Logoanimering med payoff har tre färgvarianter, baserat på vilken bakgrundsfärg som används.

Logo Intro

Huvudlogoanimation kombinerad med övergång till bild/film.

Används som intro i början av film. 

Logo Intro har tre färgvariationer, baserat på vilken bakgrundsfärg som används.

Logo Outro

Huvudlogoanimation kombinerad med övergång till bild/film.

Används som outro i slutet av film. 

Kan användas med payoff och CTA-variant.

Logo Outro har tre färgvariationer, baserat på vilken bakgrundsfärg som används.

Textanimering

Textanimering använder samma principer som är etablerade i logoanimering och varumärkets motionprinciper. Den ska upplevas lätt och smidig och alltid vara läsbar.

Textsida

Textsidan innehåller huvudtiteln. Den används som kapitelavgränsare mellan "scener" eller som intro- eller ourtor för film.

Textruta

När text inte ska fylla hela skärmar används textrutor som ett förklarande element ovanför filmer. Detta kan vara ytterligare information eller beskrivande text.

Textrutor kan flyttas på y-axeln baserat på bildinnehåll.

Övergångar

Animerade övergångar är baserade på pilelementet och används som en dekorativ separation mellan bilder och film.

Övergången används för att ge ett andrum i längre filmer, där det är en stor separation mellan scenbyten. Elementet används också för textsidor och logointro och -outro.

Positiv övergång

Negativ övergång

Namnskylt

En namnskylt är en textgrafik som visas på skärmen i filmer och som identifierar en person, plats eller annan viktig information.

Flexits Namnskylt är baserad på pilelementet som dekor och principer från textanimation.

Skylten används i det första klippet av personen i filmen. Textstorleken justeras automatiskt baserat på namnets längd, men de bör inte skalas upp eller ner.

Var medveten om kontrast och läsbarhet och välj den färgvariant som passar bäst.

Klipp gärna ut skylten före animationen.

Positiv namnskylt

Negativ namnskylt

Undertexter

För att säkerställa ett enhetligt uttryck på alla nivåer har en separat mall för filmtextning (undertexter) utvecklats.

Undertexter bör inte skalas upp eller ner, utan snarare klippas så att texterna alltid är läsbara och har en bra längd.

Exempel på undertexter på film.

Tekniskt

Alla rörelser i varumärkesanimationen ska använda samma kurva. Den sekundära keyframen ska ease-in mest.

Det enda undantaget från detta är opacity (genomskinlighet) som använder linjära keyframes.

För att använda denna princip kan du redigera kurvan i "graph editor".

Flexit Partner logo

Flexit Partner har två logoversioner:

- Horisontell logo Air (ljusblå)/Sky (mörkblå)

- Vertikal logo Air/Sky

Logoversion Air används alltid på mörk bakgrund – aldrig på ljus bakgrund.

Logoversion Sky används alltid på ljus bakgrund - aldrig på mörk bakgrund.

För användning av logo, gäller samma riktlinjer som för huvudlogo (se kapitel 1).

Ladda ner alla logofiler samlade för PRINT för Flexit Partner:

Ladda ner alla samlade logofiler för DIGITAL för Flexit Partner:

Flexit logo with English payoff

Here you can download the Flexit logo with English payoff. In addition, other parts of Brandpad can be used from the Swedish version above.

If you have any questions, please contact your sales representative or Flexit's marketing department.

Horizontal version


Logo with payoff in horizontal design fits well on narrow surfaces where there is a need to save space at the height.

Vertical version

Logo with payoff in vertical version is used where there is a lot of space, for example on exhibition walls, on the back of printed brochures or on profiling material.

Logoversion Air is always used on a dark background - never on a light background.

Logoversion Sky is always used on a light background - never on a dark background.

There are fixed principles for how to combine logo and payoff. Our payoff "Better Indoor Climate" has two fixed placements under the logo. 

Download all logo files collected  with English payoff here:

Flexit Sverige AB © 2025

Designguide

Utvecklad av Metro Branding

Tillbaka till Innehåll