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.

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.

Primär
Primärmark.svgLime auf Ink, abgerundete Kachel. Das Zeichen, wenn nur eines gebraucht wird.
Invers
Inversmark-inverse.svgInk auf Lime, für helle Flächen
Vollformat
Vollformatmark-square.svgOhne Radius, für App-Icons, die das OS selbst maskiert
Lime, freigestellt
Lime, freigestelltmark-lime.svgNur die Silhouette, auf dunklem Grund
Weiß, freigestellt
Weiß, freigestelltmark-white.svgEinfarbig auf dunklem Grund
Ink, freigestellt
Ink, freigestelltmark-ink.svgEinfarbig auf hellem Grund
Kleiner Schnitt
Kleiner Schnittmark-small.svgOhne Perforation, tiefere Kerben: Pflicht unter 32 px

03 · Lockups

Zeichen plus Wortmarke

Der Abstand zwischen Zeichen und Wort ist Teil der Datei. Nie selbst neu zusammensetzen: fertige Datei nehmen und skalieren.

Neon
Neonlockup-neon.svgFreigestelltes Zeichen in Lime + Wortmarke in Weiß. Das Lockup der Website und der App.
Standard
Standardlockup.svgKachel + Wortmarke in Ink, heller Grund
Standard invers
Standard inverslockup-dark.svgKachel + Wortmarke in Weiß, dunkler Grund
Einfarbig Weiß
Einfarbig Weißlockup-white.svgEine Farbe, dunkler Grund
Einfarbig Ink
Einfarbig Inklockup-ink.svgEine Farbe, heller Grund. Das Lockup in unseren E-Mails.

04 · Wortmarke

Nur der Schriftzug

Für Stellen, an denen das Zeichen schon danebensteht oder kein Platz ist.

Ink
Inkwordmark.svgHeller Grund
Weiß
Weißwordmark-white.svgDunkler Grund
Lime
Limewordmark-lime.svgDunkler Grund, als Akzent

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.

Parmo Icon 16 Pixel16 px
Parmo Icon 32 Pixel32 px
Parmo Icon 48 Pixel48 px
Parmo Icon 64 Pixel64 px
Parmo Icon 128 Pixel128 px

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.

parmo-brand-kit.zipSVG + PNG, rund 2 MB

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.

09 · Plattform

Fertige Dateien pro Ziel

Nicht einfach skaliert: Alpha-Kanal, Radius und Sicherheitszone unterscheiden sich, weil die Plattformen es verlangen.

ZielSpezifikationWarumDatei
favicon.icoICO16 / 32 / 48 px in einer Dateifavicon.ico
PWA klein192 × 192 PNGAndroid-Homescreen, Manifesticon-192.png
PWA groß512 × 512 PNGSplash & Installericon-512.png
Apple Touch180 × 180 PNGOhne Alpha, ohne Radius: iOS maskiert selbstapple-touch-icon-180.png
App Store / Play1024 × 1024 PNGOhne Alpha, sonst lehnt Apple abapp-icon-1024.png
Android adaptiv1024 × 1024 PNGFreigestellt, innerhalb der 66 %-Sicherheitszoneadaptive-icon-1024.png
Splash512 × 512 PNGFreigestellt, Grund kommt aus app.jsonsplash-icon-512.png
Social-Profilbild1024 × 1024 PNGInstagram, TikTok, LinkedIn: im Kreis-Beschnitt bleibt das Ticket ganzmark-square-1024.png
E-Mail-Signatur234 × 48 PNGAuf dunklem Grund; auf Weiß lockup-ink in derselben Höhelockup-neon-48.png
Social Card1200 × 630 PNGOpen Graph & Twitterog-image.png

Teil 4

Social Media

10 · Social Media

Instagram

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
Profilbild
Profilbild1080 × 1080 pxWird als kleiner Kreis gezeigt; 1080 hochladen, damit es überall scharf bleibt.
Highlight-Cover
Highlight-Cover1080 × 1920 pxStory im Highlight ablegen, dann als Cover wählen: Instagram schneidet den Kreis aus der Mitte.
Post-Vorlage (4:5)
Post-Vorlage (4:5)1080 × 1350 pxLeere Fläche für Text oder Foto, Lockup unten links. Das Raster zeigt 3:4, die Ränder fallen weg.
Story-Vorlage (9:16)
Story-Vorlage (9:16)1080 × 1920 pxOben 250 px und unten 250 px liegen Profilzeile und Antwortfeld: dort nichts Wichtiges.

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
Profilbild
Profilbild1080 × 1080 pxKreis, mindestens 200 px; 1080 hochladen.
Video-Cover (9:16)
Video-Cover (9:16)1080 × 1920 pxRechts liegen die Buttons, unten die Caption: Text nur im markierten Bereich. Im Raster zeigt TikTok 3:4 aus der Mitte.

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
Profilbild
Profilbild400 × 400 pxKreis, 400 × 400.
Header
Header1500 × 500 pxUnten links überdeckt das Profilbild den Header, oben und unten schneidet X je nach Bildschirm ab: Logo nur im markierten Bereich.
Post-Bild (16:9)
Post-Bild (16:9)1600 × 900 pxVorlage für Bilder im Feed, Lockup unten links.

13 · Social Media

LinkedIn

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

Logo der Unternehmensseite
Logo der Unternehmensseite400 × 400 pxQuadrat, 400 × 400.
Titelbild Unternehmensseite
Titelbild Unternehmensseite1128 × 191 pxDas Logo der Seite liegt links unten über dem Bild, auf dem Handy wird seitlich beschnitten.
Titelbild persönliches Profil
Titelbild persönliches Profil1584 × 396 pxFür Gründer und Team: links überdeckt das Profilfoto das Bild.
Post-Bild
Post-Bild1200 × 627 pxVorlage für Bilder im Feed, Lockup unten links.

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
Profilbild
Profilbild800 × 800 pxKreis, 800 × 800.
Banner
Banner2560 × 1440 pxDer Fernseher zeigt alles, das Handy nur die Mitte (1546 × 423): nur dort steht das Logo.
Thumbnail-Vorlage
Thumbnail-Vorlage1280 × 720 pxUnten rechts liegt die Videolänge: Text dort freihalten.
Wasserzeichen
Wasserzeichen150 × 150 pxFreigestellt, einfarbig Weiß: Kanal anpassen → Branding → Video-Wasserzeichen.

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.

Ink#050507surfaceGrundfläche jeder Seite
Chrome#0c0d11chromeTab-Leiste, Sidebar, Eingabefelder
Paper#f5f6f8inkText auf Ink, helle Druckflächen
Lime#c2ff3daccentDas Zeichen, Belohnungen, die eine Hauptaktion
Lime hell#a6ff6baccentDeepVerlaufsende im Button
Auf Lime#0b0c07onAccentText auf Lime, nie Weiß

Status: eine Farbe, eine Bedeutung

Geprüft#4ade80positiveVerified
Live#38bdf8infoPosted, Lochstreifen
Achtung#fbbf24warningInvited, offene Anfragen
Fehler#ff5f6ddangerFailed, Reversed, Löschen

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.

StubVorschlaglinear-gradient(158deg, #16181d, #0b0c10)stubFläche jedes Tickets. Ersetzt den Glas-Verlauf auf Karten.
Stub hellVorschlag#16181dstubTopOberer Verlaufsstopp, Kanten und Kerben auf hellen Stubs
PerforationVorschlagrgba(255,255,255,0.20)perforation2 px gestrichelte Abrisslinie
Lime FlächeVorschlagrgba(194,255,61,0.14)accentSoftAusgewählter Chip, aktiver Tab. Web nutzt .14, Mobile .15: auf .14 vereinheitlichen.

Mengenverhältnis auf einem Screen

Textstufen

StufeWertFür
Primär#f5f6f8Titel, Fließtext, Werte
Mistrgba(245,246,248,0.70)Zweite Zeile, Line-up
Faintrgba(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.JJ und HH: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.

Admit one · PromoterNº NA-1710

Nachtschicht

In 19 TagenTechno
Datum
17.10.26
Einlass
23:00
Stadt
DUS

Gästeliste +1

  1. 1Sicherheitsdruck. Zwei Ringfelder, deren Mittelpunkte aus dem Titel gerechnet werden. Jedes Event bekommt sein Muster, ohne Flyer; derselbe Titel druckt immer dasselbe.
  2. 2Seriennummer. Nº + Initialen der ersten zwei Wörter + Tag + Monat. Kurz genug, um sie an der Tür vorzulesen.
  3. 3Perforation. Trennt das Event (oben) vom Deal (unten). Die Kerben haben die Farbe dessen, was hinter der Karte liegt.
  4. 4Datenzeile. Immer Mono, immer dieselben drei Felder: Datum, Einlass, Stadt.
  5. 5Barcode. Auf Event-Tickets Dekor. Auf einer einlösbaren Belohnung der echte Türcode.
  6. 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.

RequestedInvitedAcceptedDeclinedPostedVerifiedRewardedCancelledFailedReversed
24 Stunden online14 h geschafft · 10 h offen

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

Phone390 × 844 · Rand 16 bis 20 px
Web1440 · Sidebar 248 · Innenabstand 36 bis 40
Abstände4 · 8 · 12 · 16 · 20 · 24 · 28 · 40 · 56
Radius Ticket24 bis 26
Radius Listen-Stub18 bis 22
Radius Button, Feld13 bis 15
Radius Stempel6, die einzige fast eckige Kante
Touch-Zielmindestens 44 × 44
Schattennur 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

SagenNichtWarum
OrganizerBusiness, Kunde„Business“ steht in der Datenbank, nicht im Text.
PromoterInfluencer, CreatorEin Nightlife-Job, kein Content-Genre.
InvitedOfferedDer Promoter liest es; aus seiner Sicht wurde er eingeladen.
GigAuftrag, JobEin Promoter auf einem Event.
VerifiedApprovedNiemand 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.txt
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.
parmo-ticket-tokens.json
{
  "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

ADMIT 1
  • · 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!

ADMIT 1