LOBBY · TÄBY
DOCUMENT · v1.0
GRAFISK PROFIL · BRAND BOOK

Lobby Gamingvisuell identitet.

Komplett designsystem för Täbys första medlemsägda spelcenter. Färger, typografi, komponenter och regler som definierar hur Lobby ser ut, känns och kommunicerar.

Version 1.0 · Juni 2026
Org.nr 802557-1343
Format A4 · Print-redo
Sektioner 10 kapitel
▸ INNEHÅLLSFÖRTECKNING
01Filosofi & ton 02Färgpalett 03Typografi 04Spacing & layout 05Komponenter 06Effekter 07Logotyp 08Tonalitet 09Do's & Don'ts 10Snabbreferens
© 2026 · Lobby Gaming
IDEELL FÖRENING · MEDLEMSÄGD
01
Kapitel ett

Filosofi & ton.

Lobby Gamings visuella identitet förenar gaming-arvets DNA (terminal, HUD, scanlines, pixlar) med modern premium-estetik (mörk bakgrund, subtila glassmorphism, fin typografi, rikligt med utrymme).

▸ I korthet

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

▸ Tre grundprinciper
01 · DISCIPLIN

Begränsad palett. Konsekventa avstånd. Ingen visuell brus.

02 · VÄRME

Aldrig kallt eller stelt. Mänskligt språk, varm färgaccent, sublim atmosfär.

03 · DETALJ

HUD-hörn, scanlines, pulserande dots. Små saker som visar omsorg.

02
Kapitel två

Färgpalett.

Ett disciplinerat färgsystem med två primära accenter, fem sekundära för kategorisering, och ett strikt opacitet-baserat textsystem.

▸ Primärfärger
Lobby Amber
#F59E0Brgb(245, 158, 11)Primär accent · CTA · signal
Lobby Teal
#14B8A6rgb(20, 184, 166)Status · live · system
Lobby Dark
#0A0F1Argb(10, 15, 26)Huvudbakgrund
Lobby Dark Alt
#0D1420rgb(13, 20, 32)Sektion · varannan
Lobby Deep
#070C14rgb(7, 12, 20)Footer · djupaste
▸ Accentfärger för kategorier
Blue
#3B82F6rgb(59, 130, 246)Spel · Simon
Pink
#EC4899rgb(236, 72, 153)Skapa · pop
Green
#22C55Ergb(34, 197, 94)Familj · positivt
Purple
#A855F7rgb(168, 85, 247)Trygghet
Slate
#94A3B8rgb(148, 163, 184)Vardag · neutralt
Yellow
#FBBF24rgb(251, 191, 36)Highlights
▸ Textsystem (vit med opacitet)
100%Lobby är ett andra hemRubriker
92%Stark betoning i brödtextBold accents
85%Standard brödtext för läsningBody default
65%Lead text och subtila beskrivningarLead / desc
55%Hjälptext och metadataHelper text
42%LABELS · METADATALabels
32%PG.001 · KAPITEL 01Page numbers
✓Gör detta: Amber endast för CTA och primära signaler. Teal endast för status och liv.
✕Inte detta: Använd aldrig ren #000 eller #FFF som bakgrund. Aldrig regnbåge.
03
Kapitel tre

Typografi.

Två fontfamiljer i hård kombination: Poppins för läsbarhet och värme, Space Mono för teknisk precision och gaming-DNA.

▸ Fontfamiljer
PRIMÄR · SANS-SERIF
Poppins

För brödtext, rubriker och beskrivande text. Varm och läsbar.

300 400 600 700 800 900
SEKUNDÄR · MONOSPACE
Space Mono

För metadata, kod, terminal-känsla, badges och numrering.

400 700
▸ Typografisk hierarki
Hero Title
HERO TITLE
Poppins 900 · clamp(3.6rem, 8.5vw, 6rem)
letter-spacing -0.045em
Section Title
SECTION TITLE
Poppins 800 · clamp(2.6rem, 5.5vw, 4.2rem)
letter-spacing -0.04em
Card Title
CARD TITLE
Poppins 700 · 1.7rem
letter-spacing -0.02em
Subtitle / H4
SUBTITLE
Poppins 700 · 1.1rem
letter-spacing -0.015em
Lead text. Lite längre och med lättare vikt för att skapa lugn i designen.
LEAD TEXT
Poppins 300 · clamp(1.05rem, 1.6vw, 1.2rem)
line-height 1.7
Brödtext för längre stycken och beskrivande innehåll på sajten.
BODY
Poppins 400 · 0.95rem
line-height 1.6
META · LABELS
META / LABEL
Space Mono 700 · 0.7rem
letter-spacing 0.14em UPPERCASE
PG.001 · KAPITEL 01
PAGE NUMBER
Space Mono 700 · 0.62rem
letter-spacing 0.18em UPPERCASE
▸ Kursiv emphasis

Tre kompisar. En idé.

Italic + 40% opacity = kontrast utan att skrika

04
Kapitel fyra

Spacing & layout.

Systematiska avstånd för rytm och hierarki. Generös luft är en del av Lobbys premium-känsla.

▸ Container & breddar
Max-width1200px
Padding desktop48px sides
Padding mobile24px sides
Breakpoint≤640px mobile
▸ Sektionsavstånd
Section top desktop
120px
Section bot desktop
88px
Section top mobile
88px
Section bot mobile
64px
▸ Komponentavstånd
Mellan kort (grid)16-20px
Mellan sektioner72-96px
Mellan element24-32px
Inom kort (padding)28-44px
▸ Border-radius
Pills / badges
50px
Buttons / inputs
8-12px
Cards
14-20px
Hero / large
20-24px
05
Kapitel fem

Komponenter.

UI-byggblock som upprepas över hela sajten. Varje komponent har strikt definierade tillstånd för hover, active, focus.

▸ Knappar
▸ Bli medlem →
Primary CTA
Amber bakgrund, svart text, pill-form. För huvudåtgärder.
Läs mer →
Secondary CTA
Genomskinlig med subtil border. Backdrop-blur.
▸ Badges & status
STATUS · AKTIV
Status badge (teal)
För system, live, operationellt. Pulserande dot.
FIL #007 · ACTIVE
Active badge (amber)
För filer, sektioner, primära markörer.
▸ HUD-hörn (signaturelement)

Fyra L-formade hörn på alla större kort och containers. Expanderar vid hover (10px → 14px) och byter färg.

width: 10px · border: 1.5px solid rgba(255,255,255,.18)

▸ Terminal-prompt
>öppna varför.md

Visuellt ankarpunkt i början av varje sektion. Teal prompt, grå kommando, blinkande amber kursor.

▸ Page footer
PG.001KAPITEL 01 · STARTEN

Varje sektion avslutas med detta element. Page number i amber, dividing line, sektionsnamn i UPPERCASE.

▸ Numerical tags & stats
[ 01 ]
Numerical tag
Space Mono i amber. För listor och sektioner.
MEDLEMSAVGIFT179 kr
Stat block
Label i grå monospace, value i stor amber.
06
Kapitel sex

Effekter & textur.

Subtila visuella lager som ger djup utan att störa. Allt är så pass diskret att det knappt märks medvetet, men adderar enorm produktionsvärde.

▸ Atmosfärslager
SCANLINES

CRT-känsla utan att vara störande.

repeating-linear-gradient(0deg, transparent 2px, rgba(255,255,255,.012) 3px)
NOISE

SVG fractalNoise, 4% opacity, blend overlay.

opacity: .04; mix-blend-mode: overlay
BACKDROP-BLUR

Glassmorphism på paneler.

backdrop-filter: blur(12-20px)
▸ Animationer
Pulse (status dots)2s ease-in-out infinite
Cursor blink1.06s steps(1) infinite
Hover transitions0.25s cubic-bezier(.2,.6,.2,1)
Reveal on scroll0.8s cubic-bezier(.2,.6,.2,1)
Card hover lifttranslateY(-6px) + shadow
07
Kapitel sju

Logotyp & brand mark.

Logotypen består av en pixel-grid och ordmärke. Båda kan användas separat eller tillsammans.

▸ Brand mark · pixel-grid

Fyrkantigt 2×2 grid med växlande pixel/cirkel-former i fyra färger. Diagonalmönster: kvadrater (blå/rosa) på en diagonal, cirklar (amber/teal) på den andra.

Storlekar: 26px (nav) · 30px (footer) · 36-48px+ (marknadsföring)

▸ Ordmärke
LOBBY / TÄBY

Space Mono · weight 700 · letter-spacing 0.16em

▸ Kombinerad användning
LOBBY Gaming
08
Kapitel åtta

Tonalitet & röst.

Lobby pratar som en vän som vet vad de gör, inte som en marknadsavdelning. Direkt, varmt och självmedvetet.

▸ Skrivregler
✓Du-form, alltid. Aldrig "ni" eller "kunden". Du är medlem.
✓Korta meningar. Sedan en längre. Sedan kort igen.
✓Aktiv form. "Vi bygger" inte "Bygget pågår".
✓Lite självmedvetenhet. "Vissa delar kan komma att utebli eller förändras."
✕Aldrig formellt: "Vi hälsar er varmt välkomna..."
✕Aldrig gaming-klyschor: "Epic", "Legendary", l33t-speak.
▸ Centrala fraser

"Ett andra hem"

"Medlemsägt"

"För alla åldrar, mot ensamhet"

"Du är delägare, inte kund"

▸ Gaming-DNA i copy

Tekniska termer används stilfullt, aldrig överdrivet:

SYSTEMDATA v.01 STATUS · AKTIV FAS 02/05 [ 01 ] > init lobby.exe
09
Kapitel nio

Do's & Don'ts.

Det här är inte Lobby. Använd som en checklist innan du publicerar något.

✕Neonfärger som dunkar. Vi är subtila, inte cyberpunk.
✕Glitch-effekter. Vi är polerade, inte trasiga.
✕RGB-regnbåge. Vi har en disciplinerad palett.
✕Skrik-fonter. Inga Impact eller Bebas Neue.
✕Stockphotos. Inga generiska "folk som gamar"-bilder.
✕Vita bakgrunder. Lobby är alltid mörkt.
✕Drop shadows som platta. Endast subtila djup.
✕Skarpa hörn. Allt har border-radius.
✕Emojis i rubriker. Endast som kategorimarkörer.
✕Comic Sans, Papyrus. Behöver väl inte sägas.
10
Kapitel tio

Snabbreferens.

En sida att skriva ut och tejpa upp bredvid datorn. Allt som behövs för att bygga något Lobby-troget.

Font · bodyPoppins 300/400/600/700/800/900
Font · metaSpace Mono 400/700
BG main#0a0f1a
BG alt#0d1420
Accent primär#f59e0b (amber)
Accent sekundär#14b8a6 (teal)
Text opacity100/85/65/42/18 %
Pills / badgesborder-radius 50px
Cardsborder-radius 14-20px
Container max1200px · padding 48
Section padding120px desktop / 88px mobile
HUD-hörn10×10 → 14×14 hover
Scanlines.012 opacity
Noise.04 opacity blend overlay
Blur12-20px på paneler
Hover transition0.25s cubic-bezier
Reveal scroll0.8s + translateY 20px
TonApple meets retro arcade