Brand & CI · Ticket-System v1
Alles ist ein Ticket.
Parmo bringt Organizer und Promoter zusammen: Stories gegen Gästeliste, Drinks und VIP, freigegeben erst, wenn die Story geprüft ist. Das Zeichen ist ein Ticket, und das ganze System folgt ihm. Hier steht, wie die Marke aussieht und klingt, und jede Datei liegt in jeder Größe zum Download bereit.
Teil 1
Idee
01 · Die Idee
Alles ist ein Ticket
Promoter tauschen Stories gegen Zugang, Organizer tauschen Zugang gegen geprüfte Reichweite. Das Ticket ist das eine Objekt, das beide Seiten schon als Deal verstehen: vorne steht, was versprochen ist, hinten wird abgerissen und behalten. Jede Karte in Parmo ist so ein Ticket.
Prinzip
Gedruckt, nicht gemalt
Fakten sehen gedruckt aus: Mono-Daten, Seriennummern, Barcodes. Das Muster kommt aus dem Event selbst, nie aus Stock-Grafik.
Prinzip
Beweis, den man sieht
Parmo prüft Stories. Stempel, Lochstreifen und Abriss zeigen diesen Beweis direkt, statt ihn in einem grauen Badge zu verstecken.
Prinzip
Ein Licht im Dunkeln
Überall Ink, ein Lime-Akzent, der immer „deins“ oder „los“ heißt: deine Belohnung, deine nächste Aktion, wo du gerade bist.
Teil 2
Logo
02 · Das Zeichen
Icon ohne Wortmarke
Ein Ticket, elf Grad schief, zwei Kerben, eine Perforation. Die Kachel-Varianten sind für App-Icons und Favicons, die freigestellten liegen auf jeder Fläche mit genug Kontrast.
03 · Lockups
Zeichen plus Wortmarke
Der Abstand zwischen Zeichen und Wort ist Teil der Datei. Nie selbst neu zusammensetzen: fertige Datei nehmen und skalieren.
04 · Wortmarke
Nur der Schriftzug
Für Stellen, an denen das Zeichen schon danebensteht oder kein Platz ist.
05 · Regeln
Damit es überall gleich aussieht
Schutzraum
Rundherum mindestens die halbe Höhe des Zeichens freihalten. Kein Text, keine Kante, kein Bildrand in dieser Zone.
Mindestgröße
Zeichen 16 px mit kleinem Schnitt, volles Ticket ab 32 px. Lockup ab 88 px Breite; darunter nur das Zeichen.
Untergrund
Auf Ink: Lime oder Weiß. Auf Hell: Ink oder die Kachel. Auf Fotos immer die Kachel, damit das Zeichen eine eigene Fläche hat.
Winkel
Das Ticket steht immer -11°. Es ist Teil der Datei; nie geraderücken, nie zusätzlich drehen.
Nicht machen
- · Zeichen und Wortmarke selbst neu anordnen oder den Abstand ändern
- · Drehen, spiegeln, verzerren oder den Winkel „geradeziehen“
- · Andere Farben als Lime, Ink und Weiß; Lime auf Weiß trägt keinen Kontrast
- · Schatten, Glow, Verlauf oder Kontur ergänzen
- · Die Perforation schließen oder die Kerben füllen: sie sind das Zeichen
- · Animierte Varianten. Die Marke steht still; Bewegung gehört der Oberfläche.
06 · Echte Größe
So klein darf es werden
Jedes Icon so groß, wie es ausgeliefert wird. Bei 16 px greift der kleine Schnitt: ein Perforationsschlitz wäre ein halbes Pixel breit, also fällt er weg und die Kerben werden tiefer.
Teil 3
Downloads
07 · Komplettpaket
Alles in einer Datei
Jedes Logo als SVG, jede PNG-Größe aus der Tabelle unten die fertigen Plattform-Dateien und das Social-Media-Kit, sortiert in Ordnern. Die SVGs sind die Originale; PNGs heißen <datei>-<höhe>.png.
08 · Alle Größen
Jede Datei, jede Höhe
SVG für alles, was skaliert (Web, Print, Präsentationen). PNG für Programme, die kein SVG nehmen. Die Zahl ist die Höhe in Pixeln; Zeichen sind quadratisch, Lockups und Wortmarken rechnen die Breite mit.
ZeichenHöhe in px
Kleiner SchnittHöhe in px · für alles unter 32 px
LockupsHöhe in px
09 · Plattform
Fertige Dateien pro Ziel
Nicht einfach skaliert: Alpha-Kanal, Radius und Sicherheitszone unterscheiden sich, weil die Plattformen es verlangen.
| Ziel | Spezifikation | Warum | Datei |
|---|---|---|---|
| favicon.ico | ICO | 16 / 32 / 48 px in einer Datei | favicon.ico |
| PWA klein | 192 × 192 PNG | Android-Homescreen, Manifest | icon-192.png |
| PWA groß | 512 × 512 PNG | Splash & Installer | icon-512.png |
| Apple Touch | 180 × 180 PNG | Ohne Alpha, ohne Radius: iOS maskiert selbst | apple-touch-icon-180.png |
| App Store / Play | 1024 × 1024 PNG | Ohne Alpha, sonst lehnt Apple ab | app-icon-1024.png |
| Android adaptiv | 1024 × 1024 PNG | Freigestellt, innerhalb der 66 %-Sicherheitszone | adaptive-icon-1024.png |
| Splash | 512 × 512 PNG | Freigestellt, Grund kommt aus app.json | splash-icon-512.png |
| Social-Profilbild | 1024 × 1024 PNG | Instagram, TikTok, LinkedIn: im Kreis-Beschnitt bleibt das Ticket ganz | mark-square-1024.png |
| E-Mail-Signatur | 234 × 48 PNG | Auf dunklem Grund; auf Weiß lockup-ink in derselben Höhe | lockup-neon-48.png |
| Social Card | 1200 × 630 PNG | Open Graph & Twitter | og-image.png |
10 · Social Media
Fertige Dateien in der Größe, die die Plattform verlangt. Gestrichelt: der Bereich, der überall sichtbar bleibt. Dort steht das Logo, und dort gehört eigener Text in den Vorlagen hin.
Bio112 / 150
Stories gegen Gästeliste, Drinks und VIP. Freigegeben, wenn die Story geprüft ist. 🎟️ Für Organizer & Promoter 👇
Profil
- · instagram.com/parmo.io
- · Link in Bio: parmo.io
- · Kategorie „Software“ oder „App-Seite“, Kontakt-Button per E-Mail




11 · Social Media
TikTok
Fertige Dateien in der Größe, die die Plattform verlangt. Gestrichelt: der Bereich, der überall sichtbar bleibt. Dort steht das Logo, und dort gehört eigener Text in den Vorlagen hin.
Bio61 / 80
Stories gegen Gästeliste & VIP. Geprüft, dann freigegeben. 🎟️
Profil
- · tiktok.com/@parmo.io
- · Link in Bio (ab Business-Konto oder 1.000 Followern): parmo.io
- · Kein Header: das Profilbild trägt die Marke allein


12 · Social Media
X
Fertige Dateien in der Größe, die die Plattform verlangt. Gestrichelt: der Bereich, der überall sichtbar bleibt. Dort steht das Logo, und dort gehört eigener Text in den Vorlagen hin.
Bio85 / 160
Stories gegen Gästeliste, Drinks und VIP. Freigegeben, wenn die Story geprüft ist. 🎟️
Profil
- · x.com/parmo_app
- · Link-Vorschau kommt automatisch aus der Website (og-image.png, 1200 × 630)
- · Website-Feld: parmo.io



13 · Social Media
Fertige Dateien in der Größe, die die Plattform verlangt. Gestrichelt: der Bereich, der überall sichtbar bleibt. Dort steht das Logo, und dort gehört eigener Text in den Vorlagen hin.
Slogan der Unternehmensseite83 / 120
Der Marktplatz für Organizer und Promoter: geprüfte Instagram-Stories gegen Zugang.
Profil
- · linkedin.com/company/parmo
- · Branche „Software-Entwicklung“, Website parmo.io
- · Link-Vorschau kommt aus og-image.png




14 · Social Media
YouTube
Fertige Dateien in der Größe, die die Plattform verlangt. Gestrichelt: der Bereich, der überall sichtbar bleibt. Dort steht das Logo, und dort gehört eigener Text in den Vorlagen hin.
Kanalbeschreibung (Anfang)171 / 1000
Stories gegen Gästeliste, Drinks und VIP. Freigegeben, wenn die Story geprüft ist. 🎟️ Hier zeigen wir, wie Parmo für Organizer und Promoter funktioniert. Mehr auf parmo.io
Profil
- · Profil noch nicht angelegt
- · Handle passend zu den anderen Profilen wählen
- · Kanal-Links: parmo.io, Instagram, TikTok, LinkedIn




Teil 5
System
15 · Farben
Ink, Paper, ein Lime
Die Werte kommen direkt aus @parmo/tokens, also aus derselben Quelle wie Web und App. Das Ticket-System bringt keinen neuen Farbton; die gestrichelt umrandeten Felder sind Vorschläge, die noch nicht in den Tokens stehen.
Status: eine Farbe, eine Bedeutung
Neu im Ticket-System
Keine neuen Farbtöne, nur eine Fläche und eine Linie für das Ticket, plus eine Vereinheitlichung. Noch nicht in @parmo/tokens; wer sie einführt, trägt sie dort und in globals.css ein.
Mengenverhältnis auf einem Screen
Textstufen
| Stufe | Wert | Für |
|---|---|---|
| Primär | #f5f6f8 | Titel, Fließtext, Werte |
| Mist | rgba(245,246,248,0.70) | Zweite Zeile, Line-up |
| Faint | rgba(245,246,248,0.55) | Kicker, Hinweise. Untergrenze für WCAG AA, nie blasser. |
16 · Typografie
Laute Titel, gedruckte Fakten
Zwei Familien: Plus Jakarta Sans trägt die Nacht, JetBrains Mono trägt den Beweis.
Display
Plus Jakarta Sans 800 kursiv · VERSALIEN · Zeilenhöhe .9 · -0.03em
Nachtschicht
Screen-Titel
800 kursiv · 38 px Phone, 44 px Web
Gigs
Gedrucktes
JetBrains Mono 600 · Datum, Uhrzeit, Seriennummer, Zähler, Codes
FR 17.10.26 · 23:00 · Nº NA-1710
Kicker
800 · 10 bis 11 px · Versalien · +0.16em · Faint
Admit one · Promoter
Fließtext
400 bis 600 · 14 bis 16 px · Zeilenhöhe 1.5
Lass die Story bis Sa 23:12 online. Löschst du sie früher, gibt es keine Belohnung.
- · Kursive Versalien für Namen von Dingen (Events, Screens, Belohnungen). Nie für Sätze oder Buttons.
- · Alles, was auf einem echten Ticket gedruckt stünde, in Mono: Datum, Uhrzeit, Nummer, Zähler, Code, Preis.
- · Datenzeilen:
TT.MM.JJundHH:MM, 24 Stunden. Im Fließtext „Fr 17. Okt“. - · Lange deutsche Titel mit weichem Trennstrich umbrechen, statt unter 20 px zu schrumpfen.
- · Nur diese zwei Familien, keine Serifen. Beide sind in Web (
next/font) und App schon geladen.
17 · Das Ticket
Anatomie
Ein Objekt in vier Formen. Wer es verstanden hat, kann jeden Parmo-Screen bauen.
Nachtschicht
- Datum
- 17.10.26
- Einlass
- 23:00
- Stadt
- DUS
Gästeliste +1
- 1Sicherheitsdruck. Zwei Ringfelder, deren Mittelpunkte aus dem Titel gerechnet werden. Jedes Event bekommt sein Muster, ohne Flyer; derselbe Titel druckt immer dasselbe.
- 2Seriennummer. Nº + Initialen der ersten zwei Wörter + Tag + Monat. Kurz genug, um sie an der Tür vorzulesen.
- 3Perforation. Trennt das Event (oben) vom Deal (unten). Die Kerben haben die Farbe dessen, was hinter der Karte liegt.
- 4Datenzeile. Immer Mono, immer dieselben drei Felder: Datum, Einlass, Stadt.
- 5Barcode. Auf Event-Tickets Dekor. Auf einer einlösbaren Belohnung der echte Türcode.
- 6Belohnung. Der einzige Lime-Text auf dem Ticket. Noch keine Belohnung: [Belohnung] in Faint, nie eine Lücke.
Hochformat
Event-Detail, Belohnungs-Pass, Vorschau beim Anlegen. Druckfläche 200 bis 250 px, waagerechte Perforation.
Querformat
Jede Listenzeile: Event-Feed, Belohnungen. Druckfläche links, senkrechte Perforation, 80 px Datumsabriss rechts.
Banner
Web-Kopfzeilen und „Heute Abend“ im Dashboard. Druckfläche links, 300 bis 400 px Datenspalte rechts.
Pass
Eine Person statt eines Events: das Promoter-Profil. Das Muster kommt aus dem Instagram-Handle.
18 · Stempel & Status
Stempel statt Badges
Ein Status ist etwas, das dem Ticket passiert ist, also wird er aufgestempelt: umrandet, Mono, leicht schief. Nie eine gefüllte Pille. Die Beschriftungen kommen aus der App.
Der Lochstreifen: ein Loch pro Stunde, die eine Story online bleiben muss. Ersetzt jeden Fortschrittsbalken, bei dem es um Zeit geht.
19 · Layout & Form
Maße, Abstände, Radien
| Phone | 390 × 844 · Rand 16 bis 20 px |
|---|---|
| Web | 1440 · Sidebar 248 · Innenabstand 36 bis 40 |
| Abstände | 4 · 8 · 12 · 16 · 20 · 24 · 28 · 40 · 56 |
| Radius Ticket | 24 bis 26 |
| Radius Listen-Stub | 18 bis 22 |
| Radius Button, Feld | 13 bis 15 |
| Radius Stempel | 6, die einzige fast eckige Kante |
| Touch-Ziel | mindestens 44 × 44 |
| Schatten | nur Tickets: 0 20px 46px rgba(0,0,0,.42) |
Teil 6
Sprache & Werkzeuge
20 · Tonalität
Wie der Promoter an der Tür
Direkt, warm, mit etwas Haltung, nie verkäuferisch. Auf Deutsch immer „du“. Die Zahlen geben an, der Text bleibt bescheiden. Schwächen nennen wir, bevor der Kunde sie findet.
Klingt nach Parmo
- Poste die Events, auf die du sowieso gehst.
- Lass die Story bis Sa 23:12 online. Löschst du sie früher, gibt es keine Belohnung.
- Keine Lust mehr, deinen Promotern hinterherzurennen? Wir machen das.
- Alle Promoter sind geprüft. Keine Bots, keine Fake Accounts.
Klingt nicht nach Parmo
- „Sichere dir exklusive Rewards und boost deine Reichweite!“
- „Unsere Lösung ermöglicht es Ihnen …“ (Sie-Form, Konzernton)
- „Die beste Reichweite der Stadt“ (Superlativ ohne Zahl)
- „Deine Einreichung wird bearbeitet“ (sag, was wann geprüft wird)
Wörter
| Sagen | Nicht | Warum |
|---|---|---|
| Organizer | Business, Kunde | „Business“ steht in der Datenbank, nicht im Text. |
| Promoter | Influencer, Creator | Ein Nightlife-Job, kein Content-Genre. |
| Invited | Offered | Der Promoter liest es; aus seiner Sicht wurde er eingeladen. |
| Gig | Auftrag, Job | Ein Promoter auf einem Event. |
| Verified | Approved | Niemand genehmigt: Parmo prüft, dass die Story online blieb. |
21 · Checkliste
Machen und lassen
Machen
- Jede Karte als Ticket bauen: Druckfläche, Perforation, Daten.
- Das Muster aus dem Titel des Events drucken. Kein Flyer nötig.
- Status als Stempel in seiner festen Farbe.
- Datum, Uhrzeit, Zähler und Codes in Mono.
- Eine Lime-Hauptaktion pro Screen.
- Den Lochstreifen, wenn Zeit bewiesen wird.
Nicht machen
- Helles Theme oder eine zweite Akzentfarbe.
- Gefüllte Status-Badges oder Farbe ohne Beschriftung.
- Verlaufsflächen, Blobs oder Glas-Blur als Hauptlook.
- Emoji, Stock-Illustrationen, Serifenschrift.
- Weiß auf Lime oder Lime auf großen Flächen.
- Das Ticket je Genre umfärben: das Muster wechselt, die Palette nie.
22 · Für Code und KI
Brief und Tokens
Den Brief vor jeder Design-Anfrage in ein KI-Tool einfügen: er fasst das ganze System in Klartext zusammen (auf Englisch, das lesen alle Modelle). Die Tokens sind dasselbe als JSON für Code.
PARMO DESIGN BRIEF · Ticket system v1 (source: https://parmo.io/de/brand)
WHAT PARMO IS
Marketplace for nightlife events. Organizers brief campaigns, promoters post Instagram stories, Parmo checks the stories stay online, rewards (guest list, drink balance, VIP) release on proof. Promoters use phones at night; organizers use laptops.
CORE IDEA: EVERYTHING IS A TICKET
Every card is a ticket stub: a printed FACE on top (title + pattern), a PERFORATION (2px dashed line with two round notches), a DATA half below (mono date/doors/city, barcode, reward). Events, gigs, rewards, the promoter profile ("pass") and stat tiles all use it. Status is a RUBBER STAMP, never a filled badge.
COLOUR (dark only)
- Ink #050507 page. Chrome #0c0d11 bars, sidebars, inputs. Stub surface linear-gradient(158deg,#16181d,#0b0c10).
- Paper #f5f6f8 text; secondary rgba(245,246,248,0.70); labels rgba(245,246,248,0.55) (never fainter).
- Lime #c2ff3d is the ONLY accent (gradient partner #a6ff6b); text on lime is #0b0c07. Lime only for: primary button, reward text, active nav, logo, focus ring. About 5% of a screen.
- Status: Verified #4ade80, Posted/live #38bdf8, Invited #fbbf24, Failed/Reversed #ff5f6d, Rewarded = lime, Accepted = paper, Requested/Declined/Cancelled = grey tiers.
- Lines: rgba(255,255,255,.12) hairline, .16 card border, .20 perforation. Glow: soft radial lime 8-16% in page corners only.
TYPE
- Plus Jakarta Sans. Titles 800 italic UPPERCASE, line-height .9, tracking -0.03em. Body 400-600 sentence case.
- JetBrains Mono 600 for anything printed: dates 17.10.26, times 23:00, serials Nº NA-1710, counts, codes, stamps.
- Kickers 10-11px 800 uppercase, letter-spacing .16em, colour rgba(245,246,248,0.55). No third typeface, no serif.
TICKET SPEC
- Radius 24-26 (large), 20 (list). Border 1px rgba(255,255,255,.16). Shadow inset 0 1px 0 rgba(255,255,255,.3), 0 20px 46px rgba(0,0,0,.42).
- Face pattern: two repeating-radial-gradient ring fields, centres from a hash of the title; lime rings 12% alpha, white rings 6%, step 6-9px; bottom fade to #0b0c10.
- Perforation: border-top 2px dashed rgba(255,255,255,.2), 20px in from the sides; notches are 24px circles in the PAGE colour, centred on the card edge.
- Serial: "Nº " + initials of the first two title words + DDMM. Barcode: 30-40 bars, 1-3px wide, 1-2px gaps, seeded from title + date; the real door code on a ready reward.
- List row: face left, vertical perforation, 80px date stub right (weekday in lime, day in 40px mono, month + time).
STAMPS
Mono 10-12px 600, uppercase, letter-spacing .14em, 2px border in the status colour, radius 6, no fill, rotated -6 to +6 degrees. Labels: Requested, Invited, Accepted, Declined, Posted, Verified, Rewarded, Cancelled, Failed, Reversed.
PROGRESS
Punch strip: 24 holes, one per hour a story must stay online; punched = filled status colour, open = 1px ring.
COMPONENTS
Primary button: height 52 (44 min), radius 15, lime gradient 140deg, #0b0c07 text 800. Secondary: chrome fill, 1px .16 border. Chips: full pill; selected = lime 14% fill + lime 45% ring + lime text. Phone tab bar: chrome, top edge a dashed perforation; tabs Events, Gigs, Rewards, Notifications, Profile. Web sidebar 248px, right edge a perforation. Icons: 1.8px line icons. No emoji.
LOGO
A lime ticket tilted -11 degrees with two notches and a dotted tear line, plus the "Parmo" wordmark. Never re-rotate, recolour, stretch, add glow or place white on lime. Files: https://parmo.io/brand/
VOICE
Direct, warm, a bit of attitude, never salesy. German uses "du". Numbers brag, copy stays modest. Say organizer and promoter (never business), Invited (never offered), gig, story, Verified. Buttons say what happens: Join event, Accept, Post story.
NEVER
Light theme. Second accent. Filled status badges. Big gradient washes or glass blur as the look. Emoji. Serif. White on lime. Large lime fills.{
"name": "parmo-ticket-system",
"version": "1.0.0",
"theme": "dark-only",
"color": {
"accent": "#c2ff3d",
"accentDeep": "#a6ff6b",
"accentRgb": "194, 255, 61",
"onAccent": "#0b0c07",
"accentSoft": "rgba(194,255,61,0.15)",
"surface": "#050507",
"ink": "#f5f6f8",
"chrome": "#0c0d11",
"card": "rgba(255,255,255,0.055)",
"line": "rgba(255,255,255,0.12)",
"glassLine": "rgba(255,255,255,0.16)",
"faint": "rgba(245,246,248,0.55)",
"mist": "rgba(245,246,248,0.70)",
"danger": "#ff5f6d",
"positive": "#4ade80",
"info": "#38bdf8",
"warning": "#fbbf24",
"stub": {
"value": "linear-gradient(158deg, #16181d, #0b0c10)",
"status": "proposed"
},
"perforation": {
"value": "rgba(255,255,255,0.20)",
"status": "proposed"
}
},
"stamp": {
"requested": "rgba(245,246,248,0.70)",
"offered": "#fbbf24",
"accepted": "#f5f6f8",
"declined": "rgba(245,246,248,0.55)",
"posted": "#38bdf8",
"verified": "#4ade80",
"paid": "#c2ff3d",
"cancelled": "rgba(245,246,248,0.55)",
"failed": "#ff5f6d",
"clawed_back": "#ff5f6d"
},
"font": {
"display": {
"family": "Plus Jakarta Sans",
"weight": 800,
"style": "italic",
"transform": "uppercase",
"tracking": "-0.03em",
"leading": 0.9
},
"body": {
"family": "Plus Jakarta Sans",
"weight": [
400,
500,
600
]
},
"data": {
"family": "JetBrains Mono",
"weight": 600,
"numeric": "tabular-nums"
}
},
"radius": {
"ticket": 24,
"stub": 20,
"control": 14,
"stamp": 6,
"pill": 9999
},
"space": [
4,
8,
12,
16,
20,
24,
28,
40,
56
],
"ticket": {
"border": "1px solid rgba(255,255,255,0.16)",
"perforation": {
"border": "2px dashed rgba(255,255,255,0.20)",
"inset": 20,
"notch": 24
},
"serial": "Nº {INITIALS}-{DD}{MM}",
"date": "DD.MM.YY",
"time": "HH:mm"
},
"punchStrip": {
"holes": 24,
"unit": "hour"
},
"touchTarget": 44
}Fragen zur Verwendung? Kontakt
Teil 7
Maskottchen
23 · Maskottchen
Das ist Stubbi
Stubbi ist das Ticket, lebendig geworden. Er erklärt, was im Produkt passiert: Er winkt zur Begrüßung, grübelt, während die Story geprüft wird, jubelt, wenn sie hält, und reißt sich an der Perforation ab, wenn die Belohnung freigegeben ist. Jede Bewegung steht für einen Moment im Ablauf.
Normalversion
- · Immer Lime auf Ink, nie umfärben.
- · Stubbi erklärt, er verkauft nicht: kurze Sätze, per du.
- · Ruhig, wenn Bewegung stört: ohne Animation steht er so.
Hi, ich bin Stubbi!