Visuell identitet

Stockholmare är en svensk digital tidskrift om berättelser från Stockholm, byggd som ett lyxigt, futuristiskt operativsystem: tätt, kompakt och exakt. Detta dokument är källan för allt som ser ut eller låter som Stockholmare. Färgerna kan bytas på ett ställe (avsnitt 4 och 11).

1. Varumärket i korthet

Fält	Värde
Namn	Stockholmare (alltid versal i S, aldrig "STOCKHOLMARE" i brödtext)
Kategori	Digital tidskrift / magasin, medlemsmodell via Ghost
Utgåvor	Svenska: stockholmare.se (grön). Internationell: stockholmare.com (accentfärg att besluta, se 4.7)
Redaktionens uppdrag	Berättelser, inte nyheter: stories om människor, platser och stunder i Stockholm
Signatur i sidfoten	"Från Stockholm med all vår kärlek"
Känsla	Operativsystem med lyx: hårlinjer, rutnät, mono-etiketter, statusrad, serif-rubriker
Veckokultur	Vecka visas i statusraden (svensk almanacka, t.ex. VECKA 43), eftersom veckan är central i Sverige
Lanseringsläge	Presentation torsdag 2026-10-22

Öppna beslut som behöver ägarens svar: slogan på en rad (ingen är fastställd), målgruppsbeskrivning i en mening, och om det internationella namnet ska vara "Stockholmare" eller "The Stockholmer".

2. Personlighet och principer

Stockholmare ska kännas som ett framtida operativsystem som fått en lyxig redaktion: tekniskt exakt men mänskligt, tätt men aldrig stressat.

Princip	Betyder	I praktiken
Tätt, aldrig luftigt	Ytan används till fullo, rytmen är exakt	Kompakta kort, lika höga rader, inga tomma ytor
Hårlinjer är ramverket	Struktur ritas med 1px linjer, inte skuggor	--color-rule mellan allt, ingen skugga på kort
System + serif	Mono för systemet, serif för berättelsen	JetBrains Mono för etiketter, serif för rubriker
Lyx genom kontroll	Lyx är precision, inte dekor	Numrerade celler, sand-detaljer, raka hörn (3px på knappar)
Berättelser först	Allt design stödjer läsningen	Rubrik, bild och byline får alltid mest plats
Sparsam rörelse	Inga blinkande gimmickar	Rörelse bara vid val, av vid prefers-reduced-motion
Tillgängligt som standard	Fungerar för alla och utan JS	Kontrast AA, synlig fokus, hover bara för mus

Tre ord att styra efter: Exakt. Varm. Svensk.

3. Logotyp

Logotypen är ett wordmark: namnet ”Stockholmare” som bild. Den finns i tre färgversioner (svart, grön och vit) och används på bakgrunderna som visas nedan. Sidhuvudet visar den svarta logotypen i ljust läge och inverterar den till vit i mörkt läge.

3.1 Varianter och bakgrunder

3.2 Ladda ned med genomskinlig bakgrund

Alla logotypfiler har genomskinlig bakgrund (rutmönstret visar det genomskinliga). Använd den svarta eller gröna på ljus bakgrund och den vita på mörk bakgrund.

3.3 Frizon och minsta storlek

3.4 Regler

Egenskap	Regel
Visad höjd i sidhuvud	24 px på mobil, 28 px på dator, bredd auto
Reservtext om bild saknas	Namnet i versaler, 19 px mobil / 26 px dator, fet
Ljust läge	Svart logotyp (originalfilen). Grön på vitt för färgtryck.
Mörkt läge	Vit logotyp. Ghost-inställningen dark_mode_logo är tom, så sajten inverterar den svarta filen till vit.
På grön yta (intro, sidfot)	Vit logotyp
Frizon	Minst x runt hela logotypen (x = höjden på det lilla ”o”)
Minsta storlek	20 px hög på skärm, 8 mm i tryck
Profilbild 1:1	Fyrkant, märket centrerat med minst 12 % marginal, inga texter; fungerar som cirkelbeskärning

3.5 Gör inte med logotypen

3.6 Använd varumärket i dokument och material

Gäller brev, rapporter, presentationer, e-post och allt annat som bär namnet Stockholmare. Mallarna nedan är förslag att utgå från.

Del	Regel
Logotyp	Uppe till vänster. Bredd 40 mm på A4 (minst 38 mm). Svart eller grön på vitt, vit på grön eller svart. Frizon enligt 3.3.
Marginaler	20 mm runt text. Linjer är 0,5 pt i #bebebe, aldrig skuggor.
Rubriker	Source Serif 4, fet (800). I Word och PowerPoint: Georgia, fet.
Brödtext	Source Serif 4, 11 pt, radavstånd 1,5. I Word: Georgia 10,5 pt.
Etiketter, sidfot, sidnummer	JetBrains Mono, 8 pt, versaler, teckenavstånd +0,14 em. I Word: Consolas eller Courier New.
Färger i dokument	Text #14130f. Rubrik #14130f eller #174834. Gröna ytor #174834 med text #f6f3ea och detaljer #e9ddb5.
Sidfot	”STOCKHOLMARE · stockholmare.se” till vänster, sidnummer ”1 / 3” till höger, båda i mono.
Presentation	Omslag på grön yta med vit logotyp. Innersidor på papper (#f0ede6) eller vitt. Bilder utan ram, högst sex rader text per sida.
E-postsignatur	Namn (serif, fet), titel och Stockholmare i mono-versaler, stockholmare.se i grönt. Svart logotyp, högst 120 px bred, ingen bakgrundsfärg.
Filnamn	stockholmare-typ-åååå-mm-dd, till exempel stockholmare-rapport-2026-10-22.pdf.

Logotypfilerna ovan kan laddas ned som PNG (2000 × 425 px, genomskinlig bakgrund). En SVG-källa saknas ännu och bör läggas i en delad mapp.

4. Färg

En enda färg styr varumärket: Stockholmare-grön. Resten är varma neutraler (Stone-paletten) plus sand som detaljfärg. Värdena nedan är hämtade ur det live temat 2026-10-20.

4.1 Kärnpalett

Kärnfärgerna. Rutorna visar färgen, kontrasten mot vald textfärg (WCAG) och värden för skärm och tryck. CMYK är en omräkning av RGB: be tryckeriet om ett provtryck innan stora upplagor.

4.2 Neutraler

Neutraler i ljust och mörkt läge. Vänster halva är ljust, höger är mörkt.

4.3 Härledda gröna tokens

Dessa räknas ut från varumärkesfärgen och behöver inte ändras för hand.

4.4 Kontrast (uppmätt, WCAG)

Par	Kvot	Resultat
Bläck på papper	15,9:1	AAA
Grön på papper	8,9:1	AAA
Sand på grön	7,7:1	AAA
Kräm på grön	9,4:1	AAA
Mint på mörkt papper	10,8:1	AAA
ink-mute på papper	4,65:1	AA (endast små etiketter, minst 10px mono)
Online-grön på papper	2,6:1	Endast dekor, aldrig text

4.5 Regler

• Grön text i mörkt läge = --ah-green (mint), aldrig --color-accent.
• --color-accent-contrast får inte läggas på en grön fyllning (den vänder till mörk i mörkt läge); använd kräm #f6f3ea.
• Sand används bara på grön yta, inte som bakgrund eller på papper.
• Inga extra färger för kategorier. Skillnad görs med mono-etikett och nummer.
• Intro, sidfot och Status-fönster är alltid gröna, i både ljust och mörkt läge.

4.6 Så byter du en färg

Vill du ändra	Gör så	Filer
Varumärkesfärgen (allt grönt, inkl. mörkt läge)	Ghost Admin → Design → Branding → Accent color. Alla gröna tokens i 4.3 följer automatiskt	Ingen kod
Sand	Ändra --hm-sand (värdet #e9ddb5 står hårdkodat på 26 ställen i frame.css; sök och ersätt alla)	assets/css/frame.css
Mint / mörkt grön text	Ändra --sys-on i html.dark (frame.css 26.1)	frame.css
Online-grön (lampor)	Ändra --sys-on i :root (frame.css 26.1)	frame.css
Papper, bläck eller neutraler	Ändra Stone-blocket :root[data-palette="Stone"]	assets/css/index.css
Hårlinjer	Två tokens i frame.css sektion 1	frame.css

Efter byte: kontrollera tabellen i 4.4 igen, gör hård uppdatering (Ctrl+Shift+R) och granska ljust och mörkt läge. Kodens reservvärde för grön är #33493f, men det live inställda värdet i Ghost är #174834 och gäller.

4.7 Engelska utgåvan (beslut kvar)

Svenska utgåvan är grön. För stockholmare.com rekommenderas en marinblå accent (förslag #1d3a5f, ej testad) så att utgåvorna skiljs åt med bara en inställning. Två hårdkodade värden måste då göras till tokens först: mint #7ee0a3 i mörkt läge och den gröna statuspricken (frame.css 569).

5. Typografi

Två röster: en serif för berättelsen och en mono för systemet. Typsnitten väljs i Ghost (Design → Typografi) och faller annars tillbaka på nedanstående.

Roll	Typsnitt	Token	Används för
Rubrik	Source Serif 4 (fallback Georgia)	--font-heading	Artikel- och kortrubriker, 700–800
Brödtext	Source Serif 4	--font-body	Artiklar och ingresser
System	JetBrains Mono	--font-mono	Etiketter, flikar, statusrad, knappar, innehållsförteckning, nummer
Sans (reserv)	Inter	--font-sans	Endast nödfall

Element	Storlek / vikt	Typsnitt
Omslagsrubrik	clamp(32px, 2,4vw + 18px, 60px) / 800	Serif
Kortrubrik (Fler berättelser)	22px / 700, radavstånd 1,14, −0,02em	Serif
Skribentnamn	38px / 700, radavstånd 1,1	Serif
Innehållsförteckning	13px / 400, nummer 700	Mono
Etiketter, flikar, statusrad	10–12px versaler, teckenavstånd 0,14–0,16em	Mono
Brödtext i artiklar	Serif, standard från Ghost-temat	Serif

Regler: serif bara för det som ska läsas som text. Allt som ser ut som ett gränssnitt (etikett, nummer, knapp, tid) är mono. Versaler bara i mono-etiketter.

6. Gränssnittsspråk

Varumärkets signatur är gränssnittet: det ska se ut som ett litet, exakt operativsystem.

6.1 Mått och tokens

Token	Värde	Används för
--sec-gap	30px	Luft mellan webparts (enda måttet för detta)
--col-pad	20px	Sidopadding i kolumner, annonser
--cg	16 / 20 / 24px (mobil / 640px / 1024px)	Mellanrum mellan kort
--btn-radius	3px	Knappar (allt annat är rått, 0 radie)
--cb-h	52px	Mobilens verktygsrad
--cb-icon	44 / 48px	Ikoncell i verktygsraden
--container-news	1280px	Maxbredd; ingen linje går utanför den
--wp-line	= --color-rule	Ram runt varje webpart

6.2 Motiv

Motiv	Beskrivning
Hårlinjer	1px, --color-rule mellan allt; inga skuggor
Gröna terminalfönster	Grön yta med 28px rutnät, sand mono-text, versaler, teckenavstånd 0,16em
Statusrad	Systemstatus, Stockholm-tid, datum och VECKA (t.ex. "SYSTEM ONLINE / STOCKHOLM 03:26 / TIS 20 OKT 2026 / VECKA 43")
Numrerade celler	01, 02 … som löpnummer på kort och sektioner
Sökarhörn	Viewfinder-hörn på bilder, tydliga vid hover/fokus
Linjal	Tickar med ett ljusstråle under mobilmenyn
Rombmarkering	Diamant framför titlar och valda celler
Intro	Grön helyta med logotyp vid första besöket

6.3 Layout

• Framsidan: Omslag | Innehåll, Veckobrev, annons, Scenen, Fler berättelser (06–11), Status, Rekommenderat.
• Varje webpart är en egen ruta med hårlinje runt; under 640px går de kant i kant.
• Veckobrevet och Anmärkning är medvetet kant i kant och får aldrig ram eller padding.
• Mobil: dock-rad längst ner (Hem, Meny, Sök, Tema, Prenumerera).

6.4 Rörelse och interaktion

• Hover bara under (hover: hover) and (pointer: fine).
• Synlig :focus-visible på allt klickbart.
• Entré- och parallaxrörelse bara om prefers-reduced-motion: no-preference.
• Inget blinkande utom brödsmulans markör, som stängs av vid reducerad rörelse.
• Allt ska fungera utan JavaScript.

7. Bild och illustration

Bilder bär berättelsen. De ska vara varma, verkliga och stockholmska, och får aldrig konkurrera med systemgränssnittet runt dem.

Regel	Detalj
Redaktionella foton	Riktiga platser och människor i Stockholm; naturligt ljus; låga, beskärda format (16:10 på kort, 16:7 bred)
Beskurning	Ingen ram runt bilder; sökarhörn är det enda gränssnittsdraget
Bildtext	FIG.-rad i mono, bara om bildtext finns
Alt-text	Beskriv innehållet; dekorativa bilder får alt=""
Sociala bilder	Inga texter i bilden; motiv om berättelser (stories, inte sagoböcker)
Undvik i sociala bilder	Linjal, tabeller, ramar och gröna prickar som motiv
Skydd på text	Text över bild alltid på mörk toning (kontrast minst 5,99:1, ofta högre)

Mall för AI-bilder (anpassa motiv)

Editorial illustration for a Stockholm storytelling magazine. Warm, cinematic, natural light. Muted palette anchored in deep green (#174834) with sand (#e9ddb5) and cream (#f6f3ea) accents. Subject: [en person som berättar / en stad som lyssnar / ljus i en fönsterruta]. No text, no logo, no ruler, no frame. Clean negative space on the left third for a title overlay. Square 1:1 safe crop, also works as 3:1 banner.

Använd samma mall för profilbild, omslag och nyhetsbrevsbild; byt bara motiv och bildformat.

8. Röst och ton

Stockholmare låter som en klok, lite ironisk stockholmare som bjuder på kaffe: varm, torr, exakt och aldrig påträngande.

Princip	Gör	Gör inte
Kort	En tanke per mening, aktivt språk	Långa bisatskedjor, klyschor
Varm	Skriv till en person ("du")	Myndighetsspråk, utropstecken i massor
Torr humor	Underdrift, mild självironi	Sarkasm mot läsare, hurtighet
Konkret	Platser, namn, siffror, detaljer	Vaga superlativ ("fantastisk", "unik")
Systemröst i gränssnittet	Korta mono-etiketter i versaler	Förklara gränssnittet i meningar

Mikrotexter (svenska / engelska)

Plats	Svenska	Engelska
Omslagets knapp	LÄS ARTIKELN	READ ARTICLE
Omslagets flagga	OMSLAGET	COVER
Rubrik under korten	Fler berättelser	More stories
Länk till arkiv	Alla artiklar	All articles
Primär knapp	Prenumerera	Subscribe
Inloggning	Logga in	Sign in
Statusrad	SYSTEM ONLINE · STOCKHOLM · VECKA 43	SYSTEM ONLINE · STOCKHOLM · WEEK 43
Sidfot	Från Stockholm med all vår kärlek	From Stockholm with all our love (att bekräfta)

Svenska är källspråket. Etiketter läggs som CSS-etiketter per språk (:lang(sv) / :lang(en)) eller i locales/sv.json och en.json. Skriv "vecka" med väckans nummer, aldrig "w.".

9. Sociala medier

Samma namn, samma profilbild och samma bio på alla kanaler. Reservera handtaget stockholmare överallt (tillgänglighet ej kontrollerad) och länka till stockholmare.se. Bildmåtten nedan är ungefärliga plattformsmått och bör kontrolleras mot plattformens aktuella krav innan produktion.

Kanal	Prioritet	Profilbild	Banner / omslag
Instagram	Hög	1080×1080 (visas som cirkel)	Ingen banner; 1080×1350 inlägg
LinkedIn (sida)	Hög	400×400	1584×396
Facebook (sida)	Hög	1080×1080	1640×624 (säker yta mitten)
X / Bluesky	Hög	1080×1080	1500×500
YouTube	Medel	800×800	2560×1440 (säker yta 1546×423)
Nyhetsbrev (Veckobrevet)	Hög	–	1200×630
TikTok	Medel	720×720 (visas som cirkel)	Ingen banner; video 1080×1920 (9:16)
Pinterest	Medel	600×600	Pins 1000×1500 (2:3); omslag på tavlor
Medium	Medel (länka tillbaka till artiklarna)	Fyrkant, minst 600×600	Rubrikbild 1500×750 per artikel
Reddit	Låg (delta, självpromota sällan)	256×256	1920×384

TikTok (prioriterad): korta berättelser i 9:16, 15–60 sekunder, första sekunden är motivet. Profilbild, namn och bio som ovan; ingen logotyp inbränd i videon, men sand text (#e9ddb5) på mörk toning för undertexter. Undertexta alltid (tillgänglighet) och använd samma handtag, stockholmare.

Profilbild

• Fyrkant 1:1, märket centrerat med minst 12% marginal så att cirkelbeskärning fungerar.
• Bakgrund: Stockholmare-grön #174834 med märket i kräm #f6f3ea.
• Inga texter; märket ska läsas i 40px.

Banner

• Motiv om berättelser, inga texter, ingen linjal, tabell, ram eller grön prick (se avsnitt 7).
• Lugn yta i mitten så att profilbilden inte täcker motivet.

Bio (mall)

Svenska: Berättelser från Stockholm. Varje vecka. · stockholmare.se

Engelska: Stories from Stockholm. Every week. · stockholmare.com

Bion är ett förslag tills en slogan är beslutad (se avsnitt 1).

10. Tillgänglighet och mätbara krav

Målet är WCAG 2.2 AA på alla sidor, i ljust och mörkt läge, på mobil, surfplatta och dator.

Krav	Mått
Textkontrast	Minst 4,5:1 (se 4.4); stor text minst 3:1
Klickyta	Minst 24×24px (sidfotens länkar 24px höga); ikonceller 44–48px
Fokus	Synlig :focus-visible på allt klickbart
Hover	Bara för mus: (hover: hover) and (pointer: fine)
Rörelse	Av vid prefers-reduced-motion
Utan JS	Innehåll och navigation fungerar utan JavaScript
Rubriker	En h1 per sida (utskriftsrubriken är ett stycke, inte h1)
Bilder	Alt-text eller alt="" om dekorativ
Sidtitel	{{meta_title}} med " – Sida N" på sidor 2 och framåt
Hjälpsidor	Annons- och hjälpsidor (slug börjar med ad-, samt nivaer) har noindex
Test före lansering	320, 390, 820, 1024, 1440px, mörkt läge, tangentbord, skärmläsare

11. Teknisk källa

Temat är ett Ghost-tema (Tailwind v4, Alpine) som heter "stockholmare". Ghost sparar temainställningar per temanamn, så byt aldrig namn utan att planera för det.

Vad	Var det bor
Varumärkesfärg	Ghost Admin → Design → Branding (--ghost-accent-color)
Logotyper	Ghost Admin → Design → Branding (logotyp) och temainställningen dark_mode_logo
Typsnitt	Ghost Admin → Design → Typografi, reserv i assets/css/index.css
Palett (papper, bläck)	assets/css/index.css, block [data-palette="Stone"]
Allt systemutseende	assets/css/frame.css (laddas sist, numrerade sektioner, "Contents" högst upp)
Framsidans layout	assets/css/home.css, partials/home-body.hbs, frame.css sektion 40
Sidhuvud, statusrad	partials/header/compact.hbs, partials/header/status.hbs
Språketiketter	locales/sv.json, locales/en.json
Byggd CSS	assets/built/css.css (kan inte byggas om; patchas som text och späglas till index.css)

Arbetsregler

• Ändra värdet där regeln bor. Lägg aldrig en ny regel med samma väljare längre ned.
• Ta bort kod i stället för att dölja den (inga display:none-rester).
• Uppdatera "Contents" i frame.css och CLAUDE.md efter varje ändring.
• Radera aldrig partials/navigation.hbs eller content-cta.hbs; Ghost renderar dem själv.
• Efter ändring: hård uppdatering (Ctrl+Shift+R), kontrollera mobil, surfplatta, dator och mörkt läge.

12. Gör och gör inte, checklista, öppna beslut

Så ska det se ut, och så ska det inte göra. Rutorna visar exemplen; kryss och bock gäller bara det som visas.

Checklista före publicering

• Kontrast enligt 4.4 efter varje färgbyte
• Ljust och mörkt läge på 320, 390, 820, 1024, 1440px
• Hård uppdatering och cookie/intro-flöde testat
• Metabeskrivning och titel på varje indexerbar sida
• Hjälpsidor (annonser) är noindex
• CLAUDE.md och frame.css "Contents" uppdaterade

Öppna beslut

Beslut	Läge
Slogan på en rad	Ej bestämd
Accentfärg för engelska utgåvan	Förslag marinblå, ej testad (4.7)
Cookie-banner	Beslut kvar
Sidorna Om oss och skribentsidan (The Old Writer)	Ska fixas och bli indexerbara före torsdag 2026-10-22
Scenen (sida)	Fortfarande utkast
Logotypfiler och SVG-källa	Ska läggas i delad mapp
Ghost-sitemapen listar fortfarande noindex-sidor	Öppen

Varumärket i allt material

Reglerna gäller allt som görs i Stockholmares namn, av oss eller av andra: broschyrer, dokument, presentationer, video, ljud, sociala medier, e-post, annonser och skyltar. Frågor om ett material som saknas här går till kontaktpersonen nedan.

Material	Varumärke	Tillgänglighet
Broschyr och tryck	Logotyp i svart eller grön på vit yta, med frizon. Sand och kräm används på grön yta.	Kontrast minst 4,5:1 i tryckt färg. Brödtext minst 9 pt. Färg får aldrig vara enda bärare av information. Erbjud en tillgänglig digital version.
Dokument och PDF	Använd dokumentmallen A4: logotyp överst, rubriknivåer och sidfot enligt mallen.	Taggad PDF med dokumenttitel, språk och riktiga rubriker. Alt-text på bilder, logisk läsordning, tabeller med rubrikceller.
Presentationer	Använd bildmallen: grön yta, sand detaljer, logotyp i hörnet.	Text minst 24 pt, ett budskap per bild, alt-text på bilder, unika bildrubriker och logisk läsordning.
Video	Logotyp i hörnet eller i slutbild. Varumärkesfärger i grafik och undertexter.	Undertexter och transkript, ljudbeskrivning när bilden bär information, inga blinkningar över tre per sekund, inget automatiskt ljud.
Ljud och podd	Ljudlogotyp och omslag enligt logotypreglerna.	Transkript publiceras med avsnittet.
Sociala medier	Profilbild och omslag med godkänd logotyp. Samma färger och ton som på webben.	Alt-text på varje bild. Undertexter på video. Text i bild upprepas i inlägget. Hashtaggar med versal per ord (#StockholmareKultur). Emoji sparsamt och aldrig som ersättning för ord.
E-post och nyhetsbrev	Logotyp i sidhuvud, varumärkesfärger, samma typsnitt eller säker reservfont.	Riktig text, inte en bild. Alt-text, beskrivande länktexter (inte "klicka här"), text minst 16 px, tillräcklig kontrast.
Annonser och banners	Godkänd logotyp och färgpar. Se gör och gör inte ovan.	Kontrast minst 4,5:1 (3:1 för stor text). Budskapet ska inte finnas enbart i bilden. Ingen blinkande rörelse.
Skyltar och evenemang	Logotyp med frizon, endast godkända färgpar.	Stor, tydlig text med hög kontrast. Information ska finnas även digitalt i tillgänglig form.

Alla material ska dessutom följa tillgänglighetsredogörelsen: kontrastkraven gäller även tryck och video, och färgparen på den här sidan är de som är mätta.