PALUSA — Grafisk profil 3.0 (brand guidelines)

01 · Identitet & principer — Tydlig. Tung där det räknas. Mänsklig.

PALUSAs uttryck bygger på logotypen, de fem rutorna, magenta och himmel, tung typografi och lugna ytor. Logotypen ger igenkänning. Steget och färgfälten ger systemet en röst.

Det vi bygger vidare på

FRÅN ORIGINALPROFILEN: En tydlig visuell kärna.

PALUSA-logotypen med sin toning och sina fem färgrutor, sex angivna färger samt Helvetica Neue. Originalfilen finns kvar som referens och är oförändrad.

UTVECKLAT I 2.1 OCH 3.0: Ett system för vardagen.

Färgskalor, neutrala ytor och tillgängliga färgpar från 2.1. Från 3.0: Steget och nio glyfer, Outfit som rubriktypsnitt, full volym, tonpar, sömmen, raka varumärkesytor och rörelse i steg.

Fem principer

01. Rutorna bär systemet

De fem rutorna finns i logotypen, i Steget, i glyferna, i Väven och i hur rörelsen går. När något ska kännas som PALUSA, börja där.

02. Läsbarhet leder

Innehåll ska vara lätt att förstå. Använd mörk text på ljusa ytor, tydlig hierarki och meningsfulla rubriker. Färg får aldrig vara enda förklaringen.

03. Lugnt i vardagen, full volym i öppningen

Långa arbetsflöden behöver lugn: Papper, vita ytor och små accenter. Startsidor, titelbilder och lanseringar får en hel färgyta. Text och handlingar är läsbara i båda lägena.

04. Skarpt varumärke, rund produkt

Webb, mallar och marknadsmaterial har raka hörn som rutorna. Inuti apparna följer formen plattformen. Skillnaden visar när man går från studion in i en produkt.

05. Var hjälpsam och konkret

Skriv vad användaren kan göra och vad som händer sedan. Visa verkliga produkter, riktiga detaljer och enkla nästa steg.

Så fattar du ett designbeslut

Status för riktlinjerna

Logotypens form och originalpalett är hämtade ur PDF-underlaget och är oförändrade. Version 2.1 förankrade uttrycket i Map My Days källkod och bildmaterial. Version 3.0, 17 oktober 2026, lägger till Steget, ny typografi, full volym, tonpar, sömmen, formregeln och rörelse i steg. Exempeltexter demonstrerar stilen och är inga påståenden om verksamhetens tjänster.

02 · Nytt i 3.0 — Sex grepp. Samma PALUSA.

Version 3.0 behåller logotypen, färgerna och lugnet. Det som ändras är hur mycket arbete de fem rutorna, typografin och färgen får göra.

Behåll

• Logotypen, dess geometri och dess magenta–blå toning
• De fem rutorna i originalets ordning
• Magenta och Himmel som igenkänningspar
• Rena layouter med gott om luft
• Sand, Is och Midnatt från Map My Day
• 4 px som bas och 8 som rytm

Utgår

• Mjuka toningsfält och glöd bakom innehåll
• Toning bakom vit text
• Rundade knappar och kort i varumärkesmaterial
• Helvetica Neue som rubriktypsnitt
• Mörkt läge som studions enda ansikte

Helvetica Neue finns kvar som reserv. Mörkt läge finns kvar som ett alternativ.

Nytt

• Steget och nio glyfer
• Outfit, från hårfint till tungt
• Full volym, tonpar och sömmen
• Skarpt varumärke, rund produkt
• Ett steg i taget
• Väven

Sex grepp

Varje grepp fungerar på egen hand och kan införas separat.

Steget

De fem rutorna blir en egen symbol och nio glyfer. Gapet standardiseras till 3/8 av en ruta.

Hårfint till tungt

Logotypen har en hårfin linje. Outfit går från Thin till Black, så logotyp och rubriker delar former i var sin ände av viktaxeln.

Full volym

Magenta som hel, platt färgyta i stället för glöd. Varje färg får ett tonpar, och toningen blir en tunn söm.

Skarpt och runt

Varumärkets ytor har raka hörn som rutorna. Apparna behåller plattformens rundade former.

Ett steg i taget

Varumärkets rörelse går i hela rutor, 80–120 ms per steg. Gränssnittet i apparna behåller fjädringen.

Väven

Ett genererat mönster av rutor där Steg vandrar. För sidhuvuden, inlägg och länkförhandsvisningar.

Samma identitet, tre intensiteter

01 / ARBETSYTA

Låt mig fokusera.

Papper eller Sand, vita ytor, liten accentandel. För inställningar, formulär och längre innehåll.

02 / PRODUKTSIGNATUR

Här är PALUSA.

Lugn grund med söm, Steget och en tydlig handling. För produktsidor, onboarding och webb.

03 / FULL VOLYM

Känn möjligheten.

En hel magentayta, tung vit rubrik och vit knapp. För startsidans hero, titelbilder och lanseringar.

Välj intensitet efter situationen och låt sektionerna växla. Behåll sambandet mellan färg, typografi, form och tydliga handlingar.

Lånat och gjort till vårt eget

WISE · OMPROFILERING 2023: En färg som äger allt.

Wise valde en klargrön färg och använde den i stora platta fält, satte rubriker tungt och tätt i ett eget typsnitt och lät flaggsymbolen arbeta som grafiskt element. PALUSA tar med sig magenta i full volym, tunga rubriker och rutorna som system.

REBRAND GALLERY · THE BRAND IDENTITY · BRAND NEW · HÖSTEN 2026: System före enskilda märken.

Årets identiteter byggs som flexibla system, gör om välbekanta symboler och låter märken och bokstäver röra sig. Ytorna blir varmare och mer taktila. PALUSA tar med sig en glyfuppsättning, rörelse från början och varm papperskänsla.

Källor: Creative Review om Wise, Rebrand Gallery, The Brand Identity och Brand New.

Förankrat i Map My Day

Befintliga skärmbilder ur projektets webbmaterial. De visar visuella mönster och kan avvika från den senaste appversionen.

Underlag för tolkningen

Version 2.1, 11 oktober 2026: appens DesignSystem.swift, färgkatalogen Colours.xcassets, splash, statistik, city guides, månadsrapportens kort, rörelsetokens samt webbens site.css och svenska startsida. Bildreferenser kommer från projektets befintliga skärmbilder och Marketing/ArtworkStyle.

Version 3.0, 17 oktober 2026: ett riktningsförslag med inspiration från Wise och årets identitetsarbeten, och den nya startsidan på palusa.se. Logotypen och originalpaletten är oförändrade.

Hämta designläsningen och källförteckningen från 2.1

03 · Logotyp — En logotyp. En tydlig avsändare.

Använd den befintliga originalgrafiken med dess exakta bokstavsformer, färgtoning och fem rutor. Den är oförändrad i 3.0. När den inte får plats tar Steget över.

Välj rätt tillämpning

Färg på ljust

Förstahandsval på Papper, vitt och ljusa tonpar. Placera logotypen direkt på bakgrunden utan extra platta.

Enfärgat mörk

Samma geometri i en färg. Använd när färgtryck eller toning inte passar.

Enfärgat vit

För magentafält och mörka, lugna ytor som Kol. Form och proportioner är identiska med originalet.

Friyta och storlek

Minst en ruta runt hela märket

Mät friytan från logotypens yttersta punkt, inklusive färgrutorna. Lämna minst 1× rutans höjd på alla sidor. Sikta på 2× i luftiga omslag och titelsidor.

Originalets inbördes avstånd följer den exporterade grafiken. Bygg inte upp logotypen på nytt med text och separata rutor.

Minimimåtten är praktiska startvärden i denna manual, inte tidigare fastställda originalregler. Kontrollera alltid tunna linjer i den slutliga storleken.

Placering och bakgrund

GÖR: Ge märket en lugn plats.

Placera oftast uppe till vänster i dokument och på webben. På titelsidor kan det centreras. Lås proportionerna och ge märket en egen visuell zon. En 2 px söm under sidhuvudet får gärna följa med.

UNDVIK: Låt inte formen glida.

Sträck, rotera, skugga eller konturera inte märket. Byt inte typsnitt, gradient eller rutornas ordning. Lägg det inte direkt över en rörig bild eller över Väven.

Logotypen ska som grundregel ligga direkt på ytan, utan tillagd bakgrund, platta eller kort. På magenta och på mörka, lugna ytor används den vita enfärgade tillämpningen, eller färgoriginalet när det är tydligt. Behåll alltid friytan. Färgrutorna lever vidare i Steget, som har egna regler; bygg inga andra märken av rutorna.

Om originalets färgåtergivning

PDF:en innehåller CMYK-baserad grafik och separata angivna HEX/RGB-värden. Den exporterade logotypen bevarar grafiken via PDF-renderarens färgkonvertering; dess skärmnyanser kan därför skilja sig något från palettens angivna HEX. Paletten följer de skrivna HEX-värdena. Vid tryck utgår du från original-PDF:en och ett provtryck.

• Originalets färglogotyp — SVG · vektor · transparent
• Enfärgat mörk — SVG · samma geometri
• Enfärgat vit — SVG · samma geometri
• Färglogotyp i PNG — 2880 px bred · transparent

04 · Steget & glyfer — Steget. Fem rutor som räcker.

De fem rutorna har alltid suttit i logotypens hörn, på ett rutnät av tre gånger tre, i en trappa nedåt höger. I 3.0 får de ett namn, ett exakt mått och en egen uppgift: symbolen där logotypen inte får plats.

Nio glyfer

Varje glyf består av exakt fem rutor på samma rutnät.

Samma fem rutor, samma färgordning, nya positioner. Sex glyfer hör till studion och dess produkter. Tre är allmänna handlingar som kan ersätta enkla ikoner i varumärkesmaterial. I apparna används plattformens symboler.

Färg eller monokrom

• Färg på ljust — Papper, vitt och ljusa tonpar.
• Vitt på magenta — Och på mörka ytor som Kol.
• Enfärgat mörkt — När färg inte går att använda.

Avatarer för studion och produkterna

För GitHub, dokumentation och sociala profiler. Produkter är runda, så avatarerna får rundade hörn. Appikonerna i App Store och Google Play ändras inte.

Storlek och friyta

• Steget i färg — SVG · 30 × 30 · gap 3/8
• Steget enfärgat mörkt — SVG · #272330
• Steget enfärgat vitt — SVG · för magenta och mörka ytor
• Alla nio glyfer — SVG-ark med namn och användning

05 · Färger — Färg i full volym.

Behåll originalens energi och låt den ta plats. En hel färgyta i stället för glöd, ett tonpar för varje färg och toningen som en tunn söm. Klicka på en färg för att kopiera den.

Börja med en känsla

Sju färdiga recept visar hur samma identitet kan få olika tonlägen.

Colour recipes. Each recipe is a complete set of roles for one mood.

Full volym

Magenta #C0338B som hel, platt yta med vit text ger 5,1:1. Knappen blir vit med magenta text. Ett fält per vy räcker: startsidans hero, en titelbild, ett lanseringsinlägg. Wise äger sin gröna på samma sätt; PALUSA äger magenta.

Exemplet kommer från startsidan, som är på engelska. Se den på palusa.se.

En tydlig signatur, flera roller

Magenta och Himmel är det primära igenkänningsparet. Magenta leder: den är studions färg, full volym och primär handling. Himmel ger luft och är Map My Days produktfärg. Violett, Indigo, Grönska och Korall är produktfärger och stöd för kategorier.

Tonpar

Ljus yta och mörkaste ton ur samma familj.

Varje färg får en ljus ton som yta och sin egen mörkaste ton för text och knappar, på samma sätt som Wise parar limegrönt med skogsgrönt. Alla sex klarar AA för brödtext. Inuti paret byter knappen plats: 900 som yta och den ljusa tonen som text.

Fem rutor, fem produkter

palusa.se visar fem projekt, och logotypen har fem rutor. Varje projekt tar den ruta som ligger närmast dess ämne, så logotypen blir en karta över studion. Studion själv talar magenta. En ny produkt väljer kvadratfärgen som passar ämnet och delar den vid behov. Appikonerna ändras inte.

Hela färgfamiljen

Values. See "Colour scale" under Quick reference at the top of this document.

Neutrala färger håller ihop allt

Papper #F7F5F2 är webbens ljusa grund i 3.0. Kol #121019 är ny och bär studions mörka läge på webben, med Natt #1C1924 som upphöjd yta. Sand #EEEAE3 är kvar som appens varma grund och Midnatt #101C36 som blått kvällsuttryck. Linje är en avdelare. Den är för ljus för att ensam visa kanten på ett inmatningsfält. Där använder du en starkare kant, exempelvis #877F91 på vitt.

Values. See "Neutrals" under Quick reference at the top of this document.

Hur mycket färg?

80% lugn grund · 15% mjuk färg · 5% accent är en startpunkt för arbetsytor, appvyer och texttunga bilder. Öppningar får full volym: en hel färgyta, en rubrik och en handling. Blanda inte de två på samma yta; låt sektionerna växla mellan lugnt och fullt.

YTRYTM: Mjukt över stora ytor.

Använd nivå 50 eller 100 för lugna bakgrunder och tonpar. Nivå 200 passar illustrationer, valda ytor och diagramdetaljer.

FOKUS: Mättat med avsikt.

Låt originaltonerna ta en hel yta när något ska synas. Välj 700 eller 900 för text när en ljusare ton inte ger nog kontrast.

Sömmen

Toningen har två platser, inte fler.

Magenta–himmel-toningen finns på exakt två ställen: inuti logotypen och som en tunn söm längs en kant. Den ligger aldrig bakom text och fyller aldrig en knapp. De mjuka toningsfälten och den djupa toningen för vit text från 2.1 utgår. Produkters egna gränssnitt, som Map My Days diagram, får behålla sina toningar.

Sömmen

background: linear-gradient(90deg, #C0338B, #2EAAE1);
height: 2px; /* 2 px linje · 6 px kant · 8 px progress */

Färg som funktion

I meddelanden och kontroller betyder rött i första hand fel eller en destruktiv handling. Korall som produktfärg för Screenshot Studio behöver därför alltid namn eller glyf bredvid sig. Grönt signalerar en bekräftelse. Kombinera alltid status med text och gärna en ikon. Använd kontrastverktyget innan du sätter en ny textfärg.

06 · Typografi — Hårfint till tungt.

Logotypen är ritad med en hårfin linje: strecket är 6,7% av bokstavshöjden. Rubrikerna sattes tidigare i Helvetica Neue Bold, som har en annan grundform. Outfit är geometrisk som logotypen och går från Thin 100 till Black 900. Logotypen bor i den tunna änden, rubrikerna i den tunga.

Prova viktaxeln

Outfit laddas från PALUSAs egen server, inte från en extern tjänst. Den variabla filen ger varje vikt från Thin 100 till Black 900.

Roller och alternativ

Typsnittsfiler

Outfit, Instrument Sans och JetBrains Mono är fria under SIL Open Font License och ligger på egen server i /assets/fonts/: woff2-filer med Latin och Latin Extended (cirka 128 kB tillsammans), licenstexterna och fonts.css med färdiga @font-face-regler. Länka fonts.css på webben i stället för en extern tjänst, så att besökare inte skickas vidare. Kontrollera licensen före inbäddning i dokument.

En skala för webben

• Display · Outfit 800 · 112/0,88 · −4,5% — Tänk lite större.
• H1 · Outfit 800 · 64/0,92 · −4% — En tydlig riktning.
• H2 · Outfit 800 · 40/1,0 · −3% — Det börjar här.
• H3 · Outfit 700 · 22/1,15 · −1,5% — Nästa steg är enkelt.
• Brödtext · Instrument Sans 400 · 17/1,6 — Skriv med omtanke om läsaren. Korta stycken och konkret språk gör innehållet lätt att använda.
• Bildtext · Instrument Sans 400 · 13/1,5 — Kompletterande information, källor och korta etiketter.
• Etikett · JetBrains Mono 600 · 12 · +12% — VERSION 0.2.6 · ÖPPEN KÄLLKOD

Typografiska regler

01. Sätt en tydlig hierarki

En H1 per sida, H2 för huvudavsnitt och H3 för underavsnitt. Välj storlek efter roll, inte efter vilket ord som råkar kännas viktigt.

02. Ge texten rätt mått

Sikta på 55–70 tecken per rad för löptext och cirka 1,5–1,65 i radavstånd. På mobil: luftiga marginaler och minst 16 px som utgångspunkt.

03. Vänsterställ längre text

Centrera korta omslagsrubriker vid behov. Undvik marginaljustering på webben. Låt text ombrytas naturligt och ge rubriker balanserade radbrytningar.

04. Tungt där det räknas

Sätt rubriker och framträdande siffror i Outfit 800 med tät spärrning och kort radavstånd. Instrument Sans 400 bär löptexten. Thin 100 används bara när text ska stå bredvid logotypen, som behåller sin fina linje.

Kopiera typsnitt och textmått

/* Rubriker */
font-family: "Outfit", "Avenir Next", Futura, "Helvetica Neue", Arial, sans-serif;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 0.92;

/* Löptext */
font-family: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.0625rem;
line-height: 1.6;
max-width: 65ch;

/* Etiketter */
font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

Presentationer

Börja med 64–120 pt titlar i Outfit 800 och 24–32 pt brödtext i en 16:9-presentation. Provvisa på avstånd. Kontrollera att typsnitten finns på datorn som visar presentationen.

07 · Layout & former — Skarpt varumärke. Rund produkt.

Rutorna har raka hörn, och det har varumärkets ytor också. Inuti apparna följer formen plattformen. Ett enkelt rutnät och tydliga avstånd håller ihop båda.

Två formspråk, en gräns

Skillnaden i form visar när man går från studion in i en produkt.

• Varumärke · 0 px — Sidor, affischer, knappar och taggar. Screenshot Studio i korallens tonpar.
• Produkt · kontinuerliga hörn — Kort, kontroller och ark i apparna. Map My Days statistik.

4 som bas. 8 som rytm.

Använd 4, 8, 12, 16, 20, 24 och 32 px/pt i täta gränssnitt, i linje med Map My Days 4-punktsbas. Använd 48, 64 och 96 px mellan större webbsektioner. Relationen är viktigare än ett exakt pixelvärde: sådant som hör ihop ligger närmare varandra.

Rutnät för olika ytor

Anpassa brytpunkter när innehållet behöver det. Testa långa svenska rubriker och större text innan du låser en layout.

Kvadraten som modul

Ett mått från logotypen

Steget ritas med rutan s och gapet 3/8 s. Samma förhållande används i Väven och kan styra bildbeskärning och sektionsmarkeringar. Arbeta med hela rutor på ett gemensamt rutnät.

Bygg inga nya märken av rutorna. Glyferna på sidan Steget & glyfer är de som gäller.

Skarpt, utan skugga

Varumärkets ytor skiljs åt med 1 px linjer och färgfält, inte med skuggor. Djup, glas och skuggor hör till produkten och till mockuper av produkten.

Djup i produkten

YTAN: Rundat, mjukt och tydligt.

I apparna ger en varm grund med ljusare, rundade kort en känsla av att innehållet hör ihop. Låt ett stort kort och några mindre bilda en läsbar rytm.

LAGREN: Glas när det fyller en funktion.

Genomskinliga material passar flytande navigation och kontroller över bild eller karta. En tät textpanel behöver oftast en mer opak yta. Testa mot det mest varierade innehållet bakom.

Varumärkesyta · webb

background: #FFFFFF;
border: 1px solid #D8D4DE;
border-radius: 0;

Produktkort · app och mockup

background: #FFFFFF;
border-radius: 20px;
box-shadow: 0 8px 24px rgba(39, 35, 48, 0.08);

Rytm i presentationer

• Titelsida: full volym i magenta, tung rubrik, vit logotyp eller vitt Steget.
• Innehållsbild: Papper, en tydlig rubrik, högst två huvudzoner och Steget som diskret sidmarkör.
• Avsnittssida: en stor siffra eller rubrik på ett tonpar.
• Slutbild: tydlig slutsats eller nästa steg och samlad avsändare.

Avstånd och form

--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-6: 3rem;
--space-8: 4rem;
--radius-brand: 0;
--radius-product-control: 0.75rem;
--radius-product-card: 1rem;
--step-gap-ratio: 0.375;

08 · Rörelse — Ett steg i taget.

Varumärkets rörelse går i hela rutor, som om rutorna går på rutnätet. Den är snabb, exakt och lätt att läsa av. Gränssnittet i apparna behåller fjädringen som iOS-användare förväntar sig.

Tre grundrörelser

Med minskad rörelse påslagen står allt stilla här.

• Arbetar — En lucka går nedför trappan. Ersätter snurran när något synkar eller tänker.
• Knuff — Peka på eller fokusera knappen: pilen tar två steg framåt. Inget glider.
• Ankomst — Vid start faller rutorna på plats en i taget, tre rutor var, och står sedan still.

Fler experiment

Nio större idéer, från rutans resa till studiokartan och fem toner, finns att prova i Rörelselabbet. Tre av dem används redan på palusa.se.

Principer

• Hela rutor — Varje steg landar exakt på rutnätet. Ingen oskärpa och inga mjuka kurvor i varumärkesmoment.
• Tempo — 80–120 ms per steg. I en sekvens startar varje ruta ett steg efter den förra.
• Var — Start, laddning, avsnittsöppningar, glyfbyten och små knuffar. Vardagliga gränssnitt behåller fjädringen.
• Minskad rörelse — Allt visas på sin slutliga plats. Den här manualen följer regeln.

Rörelse i produkten

Stegvis rörelse i CSS

.chev { transition: transform 180ms steps(2, end); }
.button:hover .chev { transform: translateX(6px); }

/* Arbetar: en lucka vandrar längs trappan */
.blink .sq { animation: blink 1.5s steps(1, end) infinite; animation-delay: calc(var(--i) * 0.3s); }
@keyframes blink { 0% { opacity: .14 } 20% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .chev, .blink .sq { transition: none; animation: none; }
}

09 · Rörelselabbet — Rörelselabbet.

Nio experiment som ger de fem rutorna liv, med inspiration från Awwwards vinnare inom animation i oktober 2026. Tre av dem används redan på palusa.se. Allt här körs på riktigt, så prova gärna.

Ett tydligt ögonblick per sida

Välj några, inte alla. En sida mår bäst av ett tydligt rörelseögonblick. Alla experiment följer 3.0: fem rutor, steg i hela rutor, skarpa ytor och en stilla version när minskad rörelse är påslagen.

Fem vanor hos månadens vinnare

Två Sites of the Day och tre nominerade i kategorin Animation.

1minus1 · nominerad

Pixeltrappor

En byrå för spelbranschen med trappstegade pixelövergångar, pixeltypografi mot hårfin typografi och en pixelmarkör som avslöjar sidfoten.

Leder till: Stegtorkning, pixelmarkör, avslöjande sidfot

På Awwwards

Kindi Land · Zer Design

Ett fält av rutor

Ett konfektyrföretag där ett rutnät av små blinkande rutor ligger bakom varje rubrik.

Leder till: Reliefrutor, en taktil Väv

På Awwwards

Overworld Audio · Site of the Day

En karta att utforska

En studio för ljudidentiteter som visar sitt arbete som en karta man rör sig i, med ljud inbyggt.

Leder till: Studiokartan, fem toner

På Awwwards

Deferred damage · nominerad

Ett föremål, en berättelse

En flaska färdas genom havet under hela scrollningen och förändras när berättelsen går vidare.

Leder till: Rutans resa

På Awwwards

OFFFForum · Site of the Day

En startsida man spelar

En festivalsajt vars startsida styrs av interaktion i stället för en stillastående hero.

Leder till: Rita en glyf

På Awwwards

Status

Se de tre som används på riktigt på palusa.se.

Rutans resa

På palusa.se · scrollstyrd på webben.

Från Deferred damage

Ett enda föremål bär berättelsen. Den gröna rutan är sista steget i logotypen; den blir pilen i knappen, platsen i Map My Day, nedslaget i Blixtra och hörnet i Screenshot Studio, och går sedan hem. Varje förflyttning är en hel ruta.

På palusa.se styrs resan av scrollningen. Här kan du stega eller spela upp den.

Används till Startsidans scrollberättelse och en förhandsvideo i App Store.

Stegtorkning

På palusa.se.

Från 1minus1

En trappa av rutor i de fem färgerna sveper över ytan, sidan byts under den och rutorna kliver undan i samma ordning. Varje diagonal är ett steg på 18–34 ms.

Används till Sidbyten och hopp mellan avsnitt på palusa.se, och avsnittsbyten i presentationer.

Pixelmarkör

På palusa.se · bara inom en yta.

Från 1minus1

Inom en avgränsad yta blir markören en ruta som hoppar på rutnätet och lämnar en kort svans i de fem färgerna. Den förblir en ruta, även över produkter. Utanför ytan är markören vanlig.

Används till Avsnittet med appar på palusa.se, bara med mus. Pekskärmar påverkas inte.

Studiokartan

Förslag.

Från Overworld Audio

Arbetet visas som en karta, och kartan är logotypen. De fem produkterna ligger exakt där rutorna ligger i Steget, i sina egna färger. Zoomen går i sex steg.

Används till palusa.se/work. Logotypen blir sajtkartan.

Rita en glyf

Förslag.

Från OFFFForum

En hero man kan spela med. Rita en känd glyf med fem rutor så öppnas produkten. Ritar du något annat ber sidan dig flytta en ruta.

Används till En lekfull hero, eller en 404-sida som skickar besökaren någonstans användbart.

Fem toner

Förslag.

Från Overworld Audio

Varje ruta har en ton ur en pentatonisk skala, så varje glyfbyte spelar en kort fras som inte kan låta fel. Ljudet hörs bara när du slår på det.

Används till Ett startljud, och ett Core Haptics-mönster i fem knackningar i apparna med samma rytm.

Reliefrutor

Förslag.

Från Kindi Land och Map My Days reliefer

Väven pressad i papper. Ljuset följer pekaren, så rutorna och det färgade Steget fångar det som ett präglat kort. I vila cirklar ljuset långsamt.

Används till Map My Days marknadsföring, bakgrunder till butiksbilder och studions länkförhandsvisningar.

Avslöjande sidfot

Förslag.

Från 1minus1

Gnugga bort rutorna så syns det som ligger under. Huvudinnehållet i sidfoten ligger alltid synligt bredvid; det här är en belöning för den som scrollar hela vägen ner.

Används till Ett påskägg i sidfoten på palusa.se.

Hårfint till tungt, live

Förslag.

Från 1minus1

Logotypens hårfina linje och rubrikernas tunga vikt är samma familj. Här följer vikten avståndet till pekaren, från Thin 100 till Black 900. I vila sveper en våg genom ordet.

Används till En logotyp eller rubrik i en hero.

10 · Bild, mönster & ikoner — Bilder, mönster och ikoner.

Låt bilder förklara, ge sammanhang eller skapa en mänsklig närvaro. När det inte finns en bild ger Väven varumärket ett eget mönster.

Väven

Ett genererat mönster för sidhuvuden, inlägg och länkförhandsvisningar.

Wise fyller sina bakgrunder med grafiska vävar. PALUSAs version genereras: lugna rutor med Steg som vandrar ett steg i taget, och enstaka rutor i magenta och himmel. Varje rendering blir ny, så sidhuvuden, inlägg och länkförhandsvisningar upprepar sig aldrig.

En bildvärld med djup

REFERENS / MAP MY DAY

Taktilt. Berättande. Lekfullt.

Mjuka material, miniatyrskala och omsorg om ljuset ger färgerna en fysisk känsla. Använd det som ett valbart bildspår för introduktioner, kampanjer och illustrationer som ska förklara en idé.

Det gemensamma PALUSA-draget

Matta eller mjukt belysta material, tydlig silhuett, ljusa omgivningar och en genomtänkt färgaccent. Välj en huvudidé som går att förstå även när bilden blir liten.

Det som hör till produkten

Kartor, rutter, resmål, fotominnen och kartnålar hör till Map My Days berättelse. Andra PALUSA-produkter får egna ämnen och symboler, med samma omsorg om material, färg och komposition.

Illustrationen är befintligt material från Map My Days bildreferenser. Den visar ett produktuttryck och är ingen generell mall för vad alla PALUSA-bilder ska föreställa.

Fotografiskt uttryck

LJUS: Mjukt och naturligt.

Använd mjukt dagsljus, balanserad kontrast och hudtoner som känns naturliga. Låt neutrala ytor och enstaka färgdetaljer samspela.

KOMPOSITION: Ett tydligt motiv.

Välj en huvudperson, handling eller detalj. Lämna negativt utrymme där text ska få plats. Beskär med omtanke om händer, ansikten och blick.

INNEHÅLL: Verkligt och relevant.

Visa verkliga miljöer, arbetsmoment och produkter när du har materialet. Välj bort generiska bilder som saknar koppling till budskapet.

Undvik kraftigt HDR-uttryck, kalla färgstick och ett tungt magenta- eller blåfilter över varje bild. En varm neutral färgbalans räcker. Håll en enhetlig behandling inom samma serie.

Illustrationer och ikoner

Enkla geometriska illustrationer

Enkla geometriska former passar förklaringar, diagram och lågmälda stödillustrationer. Mjuka reliefer eller mer berättande miniatyrmotiv passar när de tillför en känsla eller förklarar en idé. Välj detaljnivå efter bildens faktiska storlek.

Illustrationen ska stödja texten. En tom vy behöver en förklaring och en handling även utan bild.

Ikoner med samma rytm

I varumärkesmaterial kan glyferna Lägg till, Stäng och Hem ersätta enkla ikoner. Annars: en konsekvent ikonfamilj på 24 × 24 rutnät med cirka 1,5–2 px linjevikt.

Använd plattformens symboler i native-appar. Kombinera ovanliga ikoner med etikett och ge ikonknappar ett tillgängligt namn.

Bildbeskrivningar

Beskriv vad bilden tillför i sammanhanget. Exempel: ”Projektöversikt med tre pågående projekt och knappen Skapa projekt.” Dekorativa bilder och Väven får tom alt-text när de bara är bakgrund. Undvik att lägga viktig text enbart i en bild.

11 · Språk & tonalitet — Säg det enkelt. Säg det med omtanke.

PALUSAs tonalitet är tydlig, varm och saklig. Den ska göra digitala upplevelser lätta att förstå och trevliga att använda. Tunga rubriker kräver korta ord.

Tre egenskaper

TYDLIG: Börja med det viktiga.

Säg vad som händer, vad användaren kan göra och vad nästa steg blir. Använd konkreta verb.

VARM: Skriv till en människa.

Skriv du och dig. Visa omtanke genom begriplig hjälp. Låt vänlighet komma från innehållet, inte från många utropstecken.

SAKLIG: Lova lagom.

Beskriv verklig nytta utan överord. Använd exakta uppgifter där de finns och säg när något är osäkert.

Rubriker för palusa.se

Korta påståenden som tål stor och tung typografi.

• Integritet — Apps that keep to themselves.
• Ursprung — Made in Stockholm. Stays on your phone.
• Hantverk — Small studio. Careful apps.
• AI på enheten — On-device, by design.

palusa.se är på engelska. Rubrikerna är korta nog för Outfit 800 i stor storlek och säger något sant om produkterna: data stannar på enheten och apparna görs med omsorg. Välj en per sida.

Från allmänt till användbart

Färdiga texter att utgå från

• VÄLKOMMEN — Välkommen! Börja med att skapa ditt första projekt.
• BEKRÄFTELSE — Ändringarna har sparats.
• FELMEDDELANDE — Bilden kunde inte laddas upp. Kontrollera anslutningen och försök igen.
• TOM VY — Du har inga projekt ännu. Skapa ett projekt för att komma igång.
• DESTRUKTIV HANDLING — Vill du radera projektet? Det går inte att återställa.
• UPPFÖLJNING — Tack för samtalet. Här är förslaget och nästa steg.

Anpassa exemplen efter den faktiska funktionen. Säg bara att något är sparat eller oåterkalleligt om det stämmer.

Skrivregler

• Skriv PALUSA som varumärkesnamn i löptext. Produktnamn följer sin egen etablerade stavning.
• Använd meningsstil: ”Skapa nytt projekt”, inte ”Skapa Nytt Projekt”.
• Skriv korta stycken. Låt rubriker sammanfatta innehållet och knappar beskriva handlingen.
• Använd svenska citattecken ”så här”, datum som 17 oktober 2026 och tider som 14.30 i svensk kommunikation. Anpassa efter sammanhang och språk.
• Skriv begripligt även när en läsare inte kan facktermerna. Förklara en förkortning första gången.
• Lämna utrymme för längre översättningar. Bygg inte viktig betydelse enbart på ordlekar.

Anpassa tonen efter situationen

En lansering kan vara energisk. Hjälptexter är lugna och raka. Ett felmeddelande ska hjälpa användaren vidare. Undvik skämt i situationer som rör förlorat innehåll, betalning eller osäkerhet.

12 · Digitalt & appar — Ett gränssnitt som håller ihop.

Använd semantiska roller för färg, tydliga komponenttillstånd och plattformens välbekanta mönster. Identiteten ska göra produkten lättare att använda.

Färgroller för webben

Samma magenta i båda lägena.

Apparnas roller får vara egna

Tabellen gäller studions webb. Map My Day använder Sand #EEEAE3 som appgrund, systemytor, blå tint och Midnatt som kvällsuttryck. Behåll sådana meningsfulla produktval konsekvent. Skilj färgens dekorativa originalvärde från en tillgänglig text- eller kontrollfärg, särskilt i mörkt läge.

Knappar och återkoppling

I apparna följer knapparna plattformen: rundade former, systemets storlekar och kontroller.

Formulär som går att förstå

En etikett som stannar kvar

Sätt en synlig etikett ovanför fältet. Använd exempel i platshållaren och förklaringar under fältet. Markera obligatoriska uppgifter begripligt.

Visa ett konkret fel nära fältet och länka det till kontrollen för hjälpmedel. Behåll det användaren har skrivit. Bekräfta framgång utan att flytta fokus oväntat.

Samla flera fel i en översikt vid längre formulär. Använd rätt tangentbord och inmatningstyp i mobilen.

Status med färg och ord

• ✓ Sparat — Ändringarna har sparats.
• i Information — Du kan ändra inställningen senare.
• ! Kontrollera — En uppgift saknas innan du kan fortsätta.
• × Kunde inte sparas — Försök igen. Dina ändringar finns kvar i vyn.

Varning använder en funktionell bärnstenston: #7A4B00 på #FFF4D6. Den ingår i gränssnittets statusfärger och används inte som en ny profilaccent.

Tomt, laddning och fel

• Tomt läge: säg vad som kommer att finnas här och visa en relevant första handling.
• Laddning: behåll strukturen så att sidan inte hoppar. Visa Steget i arbetsläge och ge textåterkoppling när väntan blir märkbar.
• Fel: förklara det användaren behöver veta och ge nästa steg. Visa tekniska detaljer separat när de är relevanta.
• Offline: förklara vad som fungerar, vad som väntar och när ändringar kan skickas. Lova ingen synk som produkten inte har.

Komponentens färger kommer från roller

.primary-button {
  background: var(--color-action);
  color: var(--color-on-action);
  border-radius: var(--radius-brand); /* 0 på webben */
  min-height: 48px;
  padding: 0 20px;
}
.primary-button:hover { background: var(--color-action-hover); }
.primary-button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

13 · Tillgänglighet — Vackert ska också vara läsbart.

Kontrollera varje färgpar där det används. Tonparen och full volym är framtagna för att klara AA, men en ny kombination behöver alltid prövas.

Prova ett färgpar

Beräkningen gäller två opaka sRGB-färger. Bilder, toningar, transparens och kantutjämning behöver bedömas i sitt faktiska sammanhang. Testet är en kontrastkontroll, inte en fullständig tillgänglighetsgranskning.

Riktvärden för kontrast

Källor: W3C: textkontrast och W3C: grafiska objekt och kontroller.

Säkra par att börja med

Mer än färg

01. Gör alla handlingar nåbara

Testa med Tab, Shift+Tab, Enter och Escape. Fokus ska synas och ordningen följa innehållet. Menyer och dialoger ska gå att stänga.

02. Låt innehållet växa

Testa vid 200% zoom och smal skärm. Text, etiketter och kontroller ska rymmas. Tunga rubriker behöver plats för långa svenska ord. Ge appar stöd för större text.

03. Ge kontroller tillräcklig yta

Sikta på minst 44 × 44 CSS-px som profilens bekvämlighetsmål. WCAG 2.2 AA har ett minimikrav på 24 × 24 CSS-px med specificerade undantag, bland annat avstånd.

04. Använd fler signaler

Visa både ord och färg vid fel, val och status. Produktfärger behöver namn eller glyf. Lägg till etiketter till diagram och alt-text till meningsbärande bilder.

05. Respektera minskad rörelse

Stegvis rörelse, Arbetar-läget och Väven står stilla när användaren har bett om minskad rörelse.

Källa för målstorlek: W3C: Target Size (Minimum). 44 px är manualens eget högre designmål.

De starka originalfärgerna

Himmel och Grönska i originalnyans ger för svag kontrast för vit text. Använd deras 900-ton som text: Himmel 900 på Himmel 500 ger 4,4:1 och Grönska 900 på Grönska 500 ger 4,3:1, vilket räcker för stor text. Korall med vit text ligger precis på 4,5:1. Magenta, Violett och Indigo bär vit text med marginal.

14 · Scenarioguiden — Vad vill du göra?

Välj situation så får du ett färgrecept, en arbetsordning och konkreta råd. Guiderna är anpassade för digitalt, appar och presentationer.

Jag gör en webbsida (Webb)

Låt innehållet ta plats. Ljus grund, skarpa ytor och en magentafärgad handling. Låt en hel färgyta bära det viktigaste och Steget ge igenkänning.

Färgrecept: Signatur. Bakgrund #F7F5F2, text #272330, accent #C0338B.

1. Utgå från Papper #F7F5F2 och vita ytor med Bläck #272330 som text. Erbjud ett mörkt läge med Kol #121019 och samma magentafärgade handling.
2. Sätt den färgade logotypen uppe till vänster, minst 160 CSS-px bred. En 2 px söm under navigeringen markerar sidhuvudet.
3. Bygg en tydlig H1 i Outfit 800 med tät spärrning, en kort ingress i Instrument Sans och en primär handling per sektion. Håll textkolumner kring 55–70 tecken.
4. Använd Magenta 500 med vit text och raka hörn för primär handling. Länkar i löptext får Magenta 700 med understrykning.
5. Ge en sektion full volym: en hel magentayta med vit text och vit knapp, eller en produktyta i produktens egen kvadratfärg. Håll övriga sektioner lugna.
6. Använd Steget som favicon och laddningsindikator. Låt rörelse gå ett steg i taget och respektera minskad rörelse.
7. Kontrollera tangentbord, 200% zoom, smal mobil och faktiska kontraster innan publicering.

Undvik: Undvik toningar och glöd bakom text. Toningen hör hemma i logotypen och i sömmen.

Leverans: HTML-text, SVG-logotyp, Steget som favicon, sRGB-bilder, beskrivande alt-texter och tydliga länknamn. Se startsidan på palusa.se.

Jag designar en app (App)

Färg som hjälper dig framåt. I produkten följer du plattformen: rundade hörn, systemtypsnitt och invanda kontroller. PALUSA syns i färgroller, Steget och omsorgen om detaljer.

Färgrecept: Signatur. Bakgrund #F7F5F2, text #272330, accent #C0338B.

1. Separera färgroller: Sand eller systembakgrund, tydliga kort, primär text, sekundär text, kant, handling och status. Låt produktens kvadratfärg återkomma i utvalda detaljer.
2. Låt produktens innehåll dominera. Visa logotypen vid start eller i Om-vyn. Steget i monokrom fungerar som liten avsändare.
3. Produkten är rund: använd plattformens kontinuerliga hörn, ungefär 16–28 pt för kort. Varumärkets raka hörn hör till webb och marknadsmaterial.
4. Använd en primär knappstil och en konsekvent vald markering. Para markeringar med text, ikon eller form.
5. Designa normal-, fokus-, tryckt-, laddnings-, inaktivt- och feltillstånd samtidigt.
6. I en iOS-app: låt Dynamic Type, systemets kontroller och tillgänglighet styra. Använd SF Pro i täta produktvyer och Outfit i varumärkesbärande ytor som splash och onboarding.
7. Skapa mörkt läge med separata semantiska färger. Använd fjädring i gränssnittet och stegvis rörelse bara i varumärkesmoment som start och laddning.

Undvik: Undvik att använda samma röda uttryck för både produktfärg och en radera-handling utan etikett.

Leverans: En tabell med semantiska färger, komponenttillstånd och skisser för tomt, fel, laddning och innehåll.

Jag bygger en presentation (Presentation)

En tanke per bild. Titel- och avsnittsbilder får full volym i magenta. Faktabilder är ljusa och lugna. En presentation ska gå att förstå från andra sidan rummet.

Färgrecept: Full volym. Bakgrund #C0338B, text #FFFFFF, accent #FFFFFF.

1. Utgå från PowerPoint- eller Keynote-mallen under Mallar & resurser (16:9). Bygger du egen mall på 1920 × 1080 håller du minst 96 px marginal.
2. Använd Full volym till titel- och avsnittsbilder, Signatur eller Lugn till faktabilder och Midnatt för ett enstaka dramatiskt avsnitt.
3. Sätt titlar i Outfit 800, 64–120 pt, och löptext i 24–32 pt. Kontrollera alltid i visningsläget.
4. Ge varje bild ett budskap. Sikta på högst 3–5 korta punkter när en lista behövs.
5. Placera logotypen på titelsidan och slutbilden. På innehållsbilder räcker Steget som liten avsändare.
6. Låt diagram bära direkta etiketter, tydlig enhet och källa. Lyft en serie i magenta och håll övriga neutrala.
7. Exportera en PDF för delning och spara den redigerbara presentationen. Installera Outfit och Instrument Sans, eller kontrollera reservtypsnitten på den dator som ska visa den.

Undvik: Undvik att blanda alla sex originalfärger på varje bild eller lägga en toning bakom text.

Leverans: Redigerbar presentation, delnings-PDF och länkar till eventuella bildkällor. Mallar för PowerPoint och Keynote finns under Mallar & resurser.

Jag välkomnar en ny användare (App & webb)

Börja med nästa steg. En lugn, hjälpsam introduktion förklarar nyttan och gör första handlingen enkel.

Färgrecept: Klar. Bakgrund #F0F8FD, text #123C52, accent #0E658D.

1. Använd Himmel 50 som luftig grund och Himmel 900 till text.
2. Beskriv resultatet användaren får med en kort rubrik. Berätta vad första steget innebär.
3. Visa en uppgift i taget med tydlig progress om det behövs flera steg. Progress kan ritas som sömmen.
4. Ha en primär knapp med ett konkret verb: Skapa projekt, Välj bild eller Fortsätt.
5. Förklara varför en behörighet behövs precis före systemfrågan. Ge en användbar väg om användaren avstår.
6. Låt Steget visa att något förbereds, och gör illustrationer stödjande. Hela instruktionen ska också finnas i text.

Undvik: Undvik allmänna välkomstbudskap som inte hjälper användaren att börja.

Leverans: Flöde för första start, återkomst, nekad behörighet och avslutad introduktion.

Jag gör ett inlägg (Digital kommunikation)

Ett tydligt budskap. En hel färgyta, en tung rubrik och en liten avsändare. Studion talar magenta, produkterna talar i sin egen kvadratfärg.

Färgrecept: Full volym. Bakgrund #C0338B, text #FFFFFF, accent #FFFFFF.

1. Välj ett format för sammanhanget; mallen är 1080 × 1350. Kontrollera den aktuella kanalens beskärning före publicering.
2. Välj färg efter avsändare: magenta för studion, produktens kvadratfärg för en produkt, till exempel Indigo för Blixtra.
3. Håll viktig text minst 80 px från kanterna. Använd högst två typografiska nivåer utöver avsändaren och läs bilden i ungefär 320 px bredd.
4. Använd vit logotyp eller vitt Steget som avsändare. Produktens glyf får gärna stå i ett hörn.
5. Vill du ha variation: använd Väven som bakgrund och lägg texten på en opak panel.
6. Skriv viktig information också i inläggstexten och lägg till alt-text där kanalen stödjer det.

Undvik: Undvik små kontaktuppgifter inbakade i bilden och text direkt ovanpå Väven utan panel.

Leverans: PNG i sRGB, inläggstext och alt-text. Förhandsgranska kanalens beskärning.

Jag behöver en symbol (Ikon & avatar)

Fem rutor räcker. När logotypen inte får plats tar Steget över: favicon, avatar, splash och klistermärken.

Färgrecept: Signatur. Bakgrund #F7F5F2, text #272330, accent #C0338B.

1. Använd Steget i färg på ljus yta och helt vitt på magenta eller mörk yta. Hämta SVG-filerna under Mallar & resurser.
2. Håll minst 16 px storlek och en rutas friyta runt symbolen.
3. För en produktavatar: välj produktens kvadratfärg som yta och dess glyf i monokrom. Avatarer för produkter får rundade hörn.
4. Bygg aldrig om Steget med andra avstånd. Gapet är alltid 3/8 av en ruta.
5. Testa vid 16, 32 och 180 px innan du publicerar.

Undvik: Undvik att rotera, runda av, förskjuta eller färga om enskilda rutor.

Leverans: SVG för webb och PNG i 180 och 512 px för plattformar som kräver bitmapp.

Jag visar data (Diagram)

Gör skillnaden begriplig. Diagram ska i första hand förklara. Färg är ett stöd för mönster och jämförelser.

Färgrecept: Lugn. Bakgrund #F7F5F2, text #272330, accent #564797.

1. Välj diagram efter frågan: staplar för jämförelse, linjer för utveckling, tabell för exakta värden.
2. Börja med Himmel 700 för en vanlig serie och Magenta 700 för den viktiga markeringen. Etiketter och exakta värden är enfärgade och läsbara.
3. Vid flera serier: använd Violett, mörk Himmel och mörk Magenta samt olika markörer eller linjestilar.
4. Skriv enhet, period och källa nära diagrammet. Börja staplars värdeaxel vid noll.
5. Etikettera serier direkt där det går. Lägg till en text som sammanfattar insikten.
6. Visa exakta värden i en tillgänglig tabell när grafen innehåller viktig information.

Undvik: Undvik röd–grön som enda skillnad, 3D-effekter och färger som liknar varandra utan andra markörer.

Leverans: Diagram, datatabell och en kort text som förklarar huvudslutsatsen.

Jag behöver mörkt läge (App & webb)

Lugn även när det blir mörkt. Webben får ett neutralt mörkt läge med Kol och oförändrad magenta. Midnatt finns kvar för presentationer och Map My Day.

Färgrecept: Kväll. Bakgrund #121019, text #F7F5F2, accent #C0338B.

1. Välj Kol #121019 som grund och Natt #1C1924 som upphöjd yta för studions webb. Välj Midnatt #101C36 och #16264A för ett blått kvällsuttryck.
2. Använd Papper #F7F5F2 som primär text och #A9A3B4 som sekundär text. Länkar får Magenta 200 #EBB2D5.
3. Behåll Magenta 500 med vit text som primär handling. Färgytor och produktfärger är desamma i båda lägena.
4. Använd ljusa statustexter på mörka, svagt färgade statusytor. Testa kontrasten för varje par.
5. Visa logotypen direkt på den mörka ytan: färgoriginalet när det är tydligt, eller den vita enfärgade tillämpningen. Steget i färg fungerar på Kol.
6. Granska fokusmarkeringar, bilder och inaktiva tillstånd separat.

Undvik: Undvik att invertera hela skärmen automatiskt. Originalfärger behöver egna roller även i mörkt läge.

Leverans: Separata semantiska mörka färgroller och granskade skärmar för alla komponenttillstånd.

Jag beställer visitkort (Visitkort)

Litet format. Tydlig avsändare. Vit framsida med Steget och namnet. Baksida i full magenta med vit logotyp. Raka hörn och ett pålitligt tryckunderlag.

Färgrecept: Signatur. Bakgrund #F7F5F2, text #272330, accent #C0338B.

1. Utgå från 85 × 55 mm om tryckeriet inte anger ett annat format.
2. Framsida: vit yta, Steget i färg uppe till höger, namn i Outfit 800 och kontaktuppgifter i mörk text. Baksida: hel magenta med vit logotyp.
3. Begränsa innehållet till namn, roll och de kontaktvägar som verkligen behövs. Sikta på minst 8,5–9 pt text.
4. Håll viktig information minst 4 mm från skärkanten. Lägg 3 mm utfall där trycket går ända ut, som på baksidans magentayta.
5. Använd vektorgrafik för logotyp och Steget. Välj raka hörn; kortet är en varumärkesyta.
6. Be tryckeriet konvertera och provtrycka magentan med rätt ICC-profil. En hel färgyta visar färgavvikelser tydligt.

Undvik: Undvik att använda generiska CMYK-omräkningar som bindande färgrecept.

Leverans: Tryck-PDF enligt tryckeriets krav och godkänt korrektur. SVG-mallarna för fram- och baksida behöver färgkonverteras i ett layoutverktyg.

15 · Mallar & resurser — Från manual till material.

Hämta logotyper, Steget, färger och redigerbara grundmallar. Kopiera ett recept direkt, eller ta med hela systemet till ditt projekt.

Logotyp och symbol

• Färglogotyp · SVG — Vektorgrafik från original-PDF
• Färglogotyp · PNG — 2880 px bred · transparent bakgrund
• Mörk enfärgad · SVG — Samma geometri
• Vit enfärgad · SVG — Samma geometri
• Steget i färg · SVG — Ny i 3.0 · gap 3/8
• Steget mörkt · SVG — Enfärgat #272330
• Steget vitt · SVG — För magenta och mörka ytor
• Nio glyfer · SVG — Ark med namn och användning

SVG passar webb och layoutverktyg. PNG passar verktyg som inte stödjer SVG. Logotypfilerna är tätt beskurna; lägg till friyta i layouten. Använd original-PDF och färghantering vid tryck.

Färger och kod

• Designvariabler · CSS — Färger, tonpar, produktfärger, typografi, form, rörelse och tre teman
• Designvariabler · JSON — Primitiva värden, roller, recept och glyfer
• Färgkarta · SVG — Paletten, tonparen och produktfärgerna
• Designbrief · Markdown — Kopierbart underlag till designer, utvecklare eller AI

Använd färgroller i ditt projekt

<link rel="stylesheet" href="palusa-tokens.css">

<section class="palusa-theme">
  <!-- Ljust: Papper, Bläck och magenta. -->
</section>

<section class="palusa-theme" data-theme="dark">
  <!-- Kväll: Kol, Natt och samma magenta. -->
</section>

<section class="palusa-theme" data-theme="midnight">
  <!-- Midnatt: blått kvällsuttryck för presentationer. -->
</section>

Importen definierar variabler. Lägg själv till regler som background: var(--color-bg) och color: var(--color-text) på dina komponenter. JSON-filen är ett enkelt, dokumenterat utbytesformat; anpassa den vid import i ett specifikt designverktyg.

Redigerbara startmallar

Presentation, PowerPoint ↓

.pptx · 16:9 · 10 layouter och exempelbilder

Presentation, Keynote ↓

.key · 16:9 · 10 layouter och exempelbilder

Digitalt inlägg ↓

1080 × 1350 · redigerbar SVG

Visitkort, framsida ↓

85 × 55 mm + 3 mm utfall · RGB

Visitkort, baksida ↓

85 × 55 mm + 3 mm utfall · RGB

PowerPoint- och Keynote-mallen har tio layouter (titel, avsnitt, innehåll, två kolumner, nyckeltal, bild och text, endast rubrik, påstående, slut och en tom) och nio exempelbilder som du raderar när du är klar. Färgerna ligger i temat, Steget i layouterna, och diagrammet är ett riktigt, redigerbart diagram. Installera Outfit, Instrument Sans och JetBrains Mono innan du öppnar mallarna, annars byter programmet ut typsnitten. Öppna SVG-filerna i ett vektorverktyg för att redigera text och färgytor. Mallarna har avsiktliga textplatshållare som du byter innan användning. Visitkortens skärlinjer är guider som ska tas bort före export.

• E-postsignatur — Ifylld och klar · kopiera till Apple Mail, Outlook eller webbmejl
• Hela startpaketet — Logotyper, Steget, färger, designbrief och mallar

Snabbbrief att kopiera

PALUSA i ett stycke

Utgå från PALUSAs befintliga logotyp utan att ändra form, proportioner eller färgrutornas ordning. När logotypen inte får plats används Steget: fem rutor på ett 3 × 3-rutnät med gapet 3/8 ruta, i färgordningen #E62044, #564797, #3F59A5, #2EAAE1, #66B659. Sätt rubriker i Outfit 800 med tät spärrning, löptext i Instrument Sans och etiketter i JetBrains Mono; Helvetica Neue är reserv. Bygg webben på Papper (#F7F5F2), vita ytor och Bläck (#272330), med Kol (#121019) i mörkt läge. Magenta (#C0338B) är studions färg: primär handling och hel färgyta med vit text. Varje färg har ett tonpar (100/200 som yta, 900 som text). Toningen magenta–himmel finns bara i logotypen och som tunn söm. Varumärkets ytor har raka hörn; appar följer plattformen. Rörelse i varumärkesmoment går i hela rutor, 80–120 ms per steg. Kontrollera textkontrast, tangentbord, större text och minskad rörelse. Tonen är tydlig, varm och saklig.

Webbplats och förvaltning

• Startsidan i 3.0 — palusa.se · ljus, full volym
• Ursprunglig grafisk profil — Oförändrad PDF · referensunderlag
• Läs mig — Öppna, redigera och underhåll manualen
• Designläsning från 2.1 — Map My Day som underlag

Version 3.0, 17 oktober 2026. Originalpalettens sex HEX-värden och logotypen är oförändrade. Version 2.1 förankrade uttrycket i Map My Day; 3.0 lägger till Steget och glyferna, Outfit, full volym, tonpar, sömmen, formregeln, rörelse i steg och Väven. Uppdatera färgroller, mallar och designbrief tillsammans när systemet ändras. Kontrollera kontrast på nytt efter varje ändring och dokumentera datum och beslut.

16 · Visitkort & leverans — Visitkort, utan överraskningar.

Tryck används sparsamt i den här profilen. När det behövs prioriterar vi tydlig avsändare, bra läsbarhet och korrekt färghantering.

En enkel visitkortsprincip

85 × 55 mm som startformat

Framsidan är vit med Steget i färg, namnet i Outfit 800 och mörka kontaktuppgifter. Baksidan är hel magenta med vit logotyp. Håll informationen kort och hörnen raka.

Välj gärna ett matt eller obestruket papper som passar den lugna basen. Bedöm ett fysiskt prov: en hel magentayta visar tydligt hur papper, ytbehandling och tryck påverkar färgen.

Framsidans mall Baksidans mall

Från skärm till tryck

Kontrollera före leverans

• Namn, roll och kontaktuppgifter är korrekta.
• Logotyp och Steget har rätt proportioner och tillräcklig friyta.
• Text går att läsa i verklig storlek.
• Alla platshållare och mallguider är borttagna.
• Utfall, säkerhetsmarginal och format följer tryckeriets mall.
• Rätt ICC-profil och PDF-export är valda tillsammans med tryckeriet.
• Ett korrektur eller provtryck av magentan är granskat.

Mallarna är layoutunderlag

Visitkortsmallarna är redigerbara SVG-filer i RGB med 3 mm utfall och markerat slutformat. De är inte färdiga tryck-PDF:er. Öppna dem i ett layoutverktyg, byt uppgifter, ta bort guider och exportera enligt tryckeriets instruktioner.