Grafisk profil · v1.1
▸ Lobby · TäbyDokument · v1.1
Grafisk profil · brand book

Lobby Gaming,
visuell identitet.

Designsystemet för Täbys första medlemsägda spelcenter. Färger, typografi, komponenter och regler för hur Lobby ser ut, rör sig och låter. Version 1.1 bygger på det vi lärde oss när hemsidan byggdes om.

Version1.1 · 2026
Ersätterv1.0
Org.nr802557-1343
Kapitel12
01Kapitel ett · filosofi och ton

Viskar med
självförtroende.

Lobbys identitet förenar gamingens DNA (terminal, HUD, scanlines, pixlar) med en lugn premiumkänsla: mörka toner, fin typografi och mycket luft.

▸ I korthet

"Apple möter retro-arkadhall. Det här är inte en gaming-sajt som skriker. Det är en gaming-sajt som viskar med självförtroende."

  • [ 01 ]

    Disciplin

    Begränsad palett. Konsekventa avstånd. Inget visuellt brus.

  • [ 02 ]

    Värme

    Aldrig kallt eller stelt. Mänskligt språk, varm accent, mjuk atmosfär.

  • [ 03 ]

    Detalj

    HUD-hörn, scanlines, mjuka djupskuggor. Små saker som visar omsorg.

PG.001Kapitel 01 · Filosofi och ton
02Kapitel två · färgpalett

Två accenter.
Resten är mörker.

Två primära accenter, sex kategorifärger och ett textsystem byggt på vit med opacitet. Klicka på en färg för att kopiera koden.

▸ Primära accenter och bakgrunder
▸ Kategorifärger · en per område
▸ Textsystem · vit med opacitet
100Rubriker
92Betoning i text
85Brödtext
65Ingress, beskrivning
55Hjälptext
50Etiketter
42Sidnummer
✓Gör: Amber för CTA, markörer och stora siffror. Teal för status och avbockat. Text på amber är alltid mörk (#0A0F1A).
✕Undvik: Ren svart eller vit bakgrund. Vit text på amber. Alla kategorifärger samtidigt.
PG.002Kapitel 02 · Färgpalett
03Kapitel tre · typografi

Två familjer.
Tydlig arbetsdelning.

Poppins för värme och läsbarhet. Space Mono för teknisk precision och gaming-DNA.

Primär · sans-serifPoppins

Rubriker och brödtext. Varm, rund och lättläst i alla storlekar.

300400600700800900
Sekundär · monospaceSpace Mono

Etiketter, sidnummer, taggar, siffror och knappar. Alltid versaler i etiketter. Siffrorna är lika breda, så räknare hoppar aldrig i sidled.

400700
▸ Hierarki
  • Ett andra hemHeroPoppins 900 · clamp(3.2rem, 8vw, 6rem) · −0.045em
  • Tre kompisar. En idé.KapitelrubrikPoppins 800 · clamp(2.4rem, 5.2vw, 4rem) · andra raden kursiv, 40 %
  • KortrubrikKortPoppins 700 · 1.5rem · −0.02em
  • Ingress, lite längre och lättare, som skapar lugn.IngressPoppins 300 · clamp(1.05rem, 1.6vw, 1.2rem) · radhöjd 1.7
  • Brödtext för längre stycken och beskrivande innehåll.BrödtextPoppins 400 · 0.95rem · radhöjd 1.6
  • Etikett · metadataEtikettSpace Mono 700 · 0.7rem · 0.14em · versaler
PG.003Kapitel 03 · Typografi
04Kapitel fyra · mått och layout

Luft är
en del av premium.

Systematiska avstånd ger rytm och hierarki.

Max-bredd1200pxInnehållet
Sidmarginal48 / 24pxDator / mobil
Sektion120 / 88pxTopp / botten, dator
Sektion mobil88 / 64pxTopp / botten
Mellan kort16–20pxRutnät
Mellan block72–104pxInom en sektion
Kortens padding28–44pxEfter storlek
Brytpunkter1060 / 900 / 640Meny / spalter / mobil
Pills och knapparradie 50pxAlla knappar är piller
Små kortradie 14pxAktiviteter, rutor
Panelerradie 20pxHUD-paneler
Telefonramradie 24 / 17pxRam / skärm
PG.004Kapitel 04 · Mått och layout
05Kapitel fem · komponenter

Byggblocken.
Prova dem.

Delarna som återkommer över hela sajten. Hovra över dem för att se hur de beter sig.

▸ Knappar
▸ Bli medlem →Läs mer →

Primär: amber med mörk text, ett ljussvep vid hover. Bara en primär knapp per vy. Sekundär: tunn kant som ljusnar. Mindre viktiga länkar blir textlänkar, inte knappar.

▸ Märken och status
PopulärastPågårPlanerad

Amber-märke för det som ska lyftas. Teal-status för det som är live eller klart. Ren text, ingen pulserande prick.

▸ HUD-hörn · signaturen

Fyra L-formade hörn på alla större paneler. Vid hover växer de från 10 till 14 px och blir amber, panelen lyfter 4 px och ett svagt ljus följer musen. border: 1.5px solid rgba(255,255,255,.18)

▸ Sidnummer
PG.005Kapitel 05 · Komponenter

Varje kapitel slutar som en sida i en bok. Amber nummer, en linje och kapitlets namn. Kapitel börjar med ett stort amber nummer och samma nummer som kontur i bakgrunden.

▸ Statistik · rullande siffror
Medlemskap179 kr
Unga män1 av 4

Etikett i grå mono, värde i stor amber mono. Stora siffror rullar som en arkadräknare när de syns och vid hover, cirka 0,6 sekunder. Hovra över rutan.

▸ Listrader och numrering
  • [ 01 ]

    Hovra över raden

Listor är rader, inte kort. Vid hover växer en amber linje fram och rubriken glider 4 px. Numrering bara där ordningen betyder något. Avbockat visas med teal ✓, pågående med amber prick.

PG.005Kapitel 05 · Komponenter
06Kapitel sex · rörelse och hover · nytt i v1.1

Levande,
aldrig stökigt.

Allt på sidan svarar när man rör vid det, men med samma lugna språk överallt. Ingen dekorativ puls eller glöd.

  • [ 01 ]

    Ljuset följer musen

    Ett svagt ljus följer pekaren över paneler och kort (vit 5,5 %). Över siffror och rader är ljuset varmt (amber 7 %).

  • [ 02 ]

    Amber linje växer fram

    Rader i listor får en amber linje underst som växer från vänster, 0,45 s. Nummer och rubrik glider 4 px.

  • [ 03 ]

    Lyft och hörn

    Kort lyfter 4 px med djupare skugga, HUD-hörnen växer och blir amber. Pilar flyttar sig 3–4 px åt höger.

  • [ 04 ]

    Djup i heron

    Bilden lutar högst 5° mot musen och panelen framför rör sig lite mer, med mjuk eftersläpning.

  • [ 05 ]

    Rullande räknare

    Stora siffror rullar en gång när de syns och vid hover. Typsnittet är mono, så inget hoppar.

  • [ 06 ]

    Bara med mus

    Allt detta är av på mobil och för den som valt "minska rörelse". Då visas allt direkt och stilla.

Hover.25scubic-bezier(.2,.6,.2,1)
Reveal vid scroll.8stranslateY 20px → 0
Linje i rader.45sscaleX 0 → 1
Ljussvep på knapp.7sbara primär
PG.006Kapitel 06 · Rörelse och hover
07Kapitel sju · bilder och skärmbilder · nytt i v1.1

Visa känslan.
Var ärlig om vad det är.

Konceptbilder visar hur Lobby kan kännas. Skärmbilder visar det som faktiskt finns.

▸ Konceptbilder som kameraflöde

Bilder ramas in som ett kameraflöde: HUD-hörn, svaga scanlines, mörk tona uppe och nere, och etiketter som CAM 01 · LOUNGE och KONCEPT i teal. Under bildgalleriet står alltid att bilderna är AI-genererade utifrån våra egna beskrivningar.

Välj varma, levande rum. Undvik bilder som ser ut som kontor eller konferensrum, och stora skärmar med actionspel där målgruppen är bred.

▸ Skärmbilder från appen

Riktiga skärmbilder, inte ritade telefoner. Tas i medlemsläget och visas uppifrån, med appens eget sidhuvud. Ramen är 6 px mörk kant, radie 24 / 17 px, så att inget innehåll hamnar i hörnen. Tre telefoner får gärna överlappa och fläkta ut sig vid hover.

PG.007Kapitel 07 · Bilder och skärmbilder
08Kapitel åtta · logotyp

Fyra pixlar.
Ett ord.

Märket är ett pixelrutnät och ordmärket är LOBBY i Space Mono. De kan användas var för sig eller tillsammans.

Märke · pixelrutnät

2×2 med kvadrater (blå, rosa) på ena diagonalen och cirklar (amber, teal) på den andra. Ordningen är alltid densamma. 26 px i meny, 30 px i sidfot, 36–48 px och uppåt i marknadsföring.

Ordmärke
LOBBY/ TÄBY

Space Mono 700, 0.16em spärrning. Tillägget (GAMING, / TÄBY, 65+) står i 42 % vit.

Tillsammans
LOBBYGAMING

Märket till vänster, 12 px avstånd. Vid hover glider bitarna isär och vrider sig lite, en liten blinkning åt arkadarvet.

PG.008Kapitel 08 · Logotyp
09Kapitel nio · tonalitet och röst

Som en vän.
Aldrig som en reklambyrå.

Lobby pratar som en vän som råkar vara riktigt bra på det de gör. Direkt, varmt och ärligt.

✓Du-form, alltid. Aldrig "kunden". Du är medlem och delägare.
✓Variera rytmen. Kort mening. Sedan en längre. Sedan kort igen.
✓Aktiv form. "Vi bygger", inte "bygget pågår".
✓Var ärlig. Lova aldrig sånt som inte är klart. Skriv "planen är" och "senast uppdaterad".
✓Prata om platsen, inte om åldern. "Ett andra hem. Mitt i Täby." Säg vem det är för i en etikett, inte i rubriken.
✕Aldrig stelt ("Vi hälsar er varmt välkomna att ta del av…") och aldrig klyschor ("Epic", "Legendary", l33t-speak).
▸ Centrala fraser

  • "Ett andra hem"

  • "Du är delägare, inte kund"

  • "Ingen ska behöva vara ensam"

▸ Gaming-DNA i text, sparsamt
// SystemdataCAM 01 · LoungePG.001[ 01 ]
PG.009Kapitel 09 · Tonalitet och röst
10Kapitel tio · det som känns AI · nytt i v1.1

När det känns
genererat.

Det vi lärde oss när hemsidan byggdes om. Använd som checklista när något "är bra men känns lite AI".

  • [ 01 ]

    En signal per idé

    Visa inte samma sak tre gånger. En tidslinje räcker, utan progressbar och mätare ovanpå.

  • [ 02 ]

    Rader före kort

    Kort med färgad vänsterkant är det tydligaste AI-mönstret. Använd typografiska rader och luft i stället.

  • [ 03 ]

    Mono med måtta

    Mono-etiketter och terminalrutor som [X] överallt blir en kostym. Spara dem för hero, siffror och sidnummer.

  • [ 04 ]

    Inga spelramar

    "Uppdrag", "level up" och poäng på allt känns påklistrat. Gaming-DNA ska viska.

  • [ 05 ]

    Vanliga ord

    Stryk poetiska slutklämmar som "en handskakning i taget". Säg det som det är.

  • [ 06 ]

    Mänskliga spår

    Ett uppdateringsdatum, riktiga namn och riktiga skärmbilder visar att det finns människor bakom.

PG.010Kapitel 10 · Det som känns AI
11Kapitel elva · gör och undvik

Det här
är inte Lobby.

Gå igenom listan innan något publiceras.

✕Neon som dunkar. Vi är subtila, inte cyberpunk.
✕Glitch-effekter. Vi är polerade, inte trasiga.
✕Regnbåge av färger. En kategorifärg per område.
✕Skriktypsnitt. Inga Impact eller Bebas Neue.
✕Generiska stockbilder och ritade telefonmockups.
✕Vita bakgrunder och ljust tema. Lobby är alltid mörkt.
✕Pulserande prickar och glöd. Lugna, statiska accenter.
✕Hårda, platta skuggor och skarpa hörn.
✕Emojis i rubriker.
✕Vit text på amber. Texten på amber är alltid mörk.
PG.011Kapitel 11 · Gör och undvik
12Kapitel tolv · snabbreferens

En sida
bredvid datorn.

Allt du behöver för att bygga något Lobby-troget.

TextPoppins300 · 400 · 600 · 700 · 800 · 900
EtiketterSpace Mono400 · 700, versaler
Bakgrund#0A0F1AAlt #0D1420 · djup #070C14
Accenter#F59E0BTeal #14B8A6 för status
Text100 → 42 %Vit med opacitet
Container1200pxMarginal 48 / 24px
Sektion120 / 88pxMobil 88 / 64px
Radier50 · 20 · 14Knapp · panel · kort
HUD-hörn10 → 14pxAmber vid hover
Skugga0 18 45rgba(0,0,0,.38)
Atmosfär.012 / .02Scanlines / brus, fixerade
Rörelse.25 / .8sHover / reveal
▸ Ändringslogg
  • v1.1Nya kapitel: rörelse och hover, bilder och skärmbilder, det som känns AI. Ändrat: alla knappar är piller (radie 50px), text på amber är alltid mörk, teal används även för avbockat, terminalraden i heron är borttagen och terminalrutor ersätts av ✓ och prickar.
  • v1.0Första versionen: filosofi, färg, typografi, mått, komponenter, effekter, logotyp, ton, gör och undvik, snabbreferens.
PG.012Kapitel 12 · Snabbreferens