Beckerbillett · Architektur № 02

PG 02 / 12 · Modul 01 · Architektur / atomic-level 04 TEMPLATES

M-01 modul · architektur · brand.identity IN: 80 yr heritage OUT: brand statement

SYSTEM. — die offene Architektur.

Ingenieurhaft, modular, anti-Mockup. SYSTEM. zeigt Beckerbillett von der Backend-Seite: Schnittstellen, Wartungsfenster, Reaktionszeiten, Architektur-Diagramme. Was die Wettbewerber als Render rendern, läuft bei uns als Endpoint.

// markenkern

Beckerbillett ist eine technische Plattform mit Druckerei im Erdgeschoss. Wir schreiben Code, der Tickets ausgibt — und drucken sie zur Not auch selbst.
Wir zeigen Architektur, nicht Marketing. Architekturskizzen, Schnittstellen-Listen, Uptime-Werte. Keine animierten Browserfenster auf Hochglanzhintergrund.
Vertikal integriert heißt: ein Stack-Owner pro Haus. Vom Kassen-Treiber bis zum Auswertungs-Dashboard — eine Verantwortung.

// charakter-vokabular

System · Architektur · Modul · Schnittstelle · Endpoint · Stack · Treiber · Wartungsfenster
Anbinden · Skalieren · Auswerten · Migrieren · Dokumentieren
Seit 1946 · Hamburg · Lift & Shift · ein Stack-Owner

Wir zeigen Architektur, nicht Marketing. Endpoint statt Hero-Mockup.

Wo SYSTEM läuft

GET /houses/active · Auswahl · 62 von 62 OK

[HOUSE-001]

Schauspielhaus Hamburg

Theater · seit 2017

[HOUSE-002]

Staatsoper Bremen

Oper · seit 2009

[HOUSE-003]

Schloss Drachenburg

Schloss · seit 2014

[HOUSE-004]

Zoologischer Garten Karlsruhe

Zoo · seit 2011

[HOUSE-005]

Phänomenta Lüdenscheid

Science Center · seit 2008

[HOUSE-006]

Sealife Konstanz

Aquarium · seit 2016

[HOUSE-007]

Stadttheater Gießen

Theater · seit 2003

+ 55 weitere

curl /houses
→ vollständige Liste

PG 03 / 12 · Modul 02 · Spektrum / atomic-level 01 ATOMS · color tokens

M-02 modul · spektrum · palette.spec IN: cd_anchor OUT: 8 color tokens

Cockpit-Dunkel. CD-Signal.

Tieferes Cockpit-Schwarzblau als Bühnenraum für CD-Dunkelblau und CD-Rot. Off-White und Slate für Daten-Sichtbarkeit. Rot ist Signal, Hellblau ist Architektur-Linie.

name

hex

role

chroma

usage

BG

System-BG

#0A0F1F

base · cockpit

low

Hero- und Daten-Sektionen. Standard.

PRI

CD-Dunkelblau

#102045

primary · anker

mid

Cards, Module-Frames, Headlines.

LIN

CD-Hellblau

#2E4577

line · architecture

mid

Blueprint-Grid, Diagramm-Linien.

SIG

CD-Rot

#E33539

signal · accent

high

CTAs, Endpoint-Marker, aktive Stati.

OFF

Off-White

#F6F7FA

data · light

low

Tabellen, dichte Architektur-Texte.

SL

Slate-Mono

#8A94B0

neutral · meta

low

Captions, Labels, Mono-Eyebrows.

RUL

Line-Strong

#1A2541

surface · line

low

Sektion-Trenner, Tabellen-Linien.

INK

Pure-Black

#000000

header · ink

none

Header, Footer, dichte Code-Bereiche.

// primary-bg

Cockpit-Schwarzblau — für alle Hero- und Daten-Sektionen. Nie als Akzent.

// signal

CD-Rot — CTAs, Endpoint-Marker, aktive Zustände. Niemals als Fläche > 12 %.

// daten

Off-White & Slate — Tabellen, Listen, dichte Architektur-Texte.

// verboten

Verläufe · Orange · Grün · Pastell · Material-Schatten · Tailwind-Slate-#94a3b8.

PG 04 / 12 · Modul 03 · Schriftsatz / atomic-level 01 ATOMS · type tokens

M-03 modul · schriftsatz · typography.spec IN: google-fonts OUT: 3 families

Michroma. Barlow. JetBrains Mono.

Michroma trägt die Architektur-Headlines. Barlow Condensed bringt Body-Lesbarkeit in dichte Tabellen. JetBrains Mono ist die Sprache der Schnittstellen-Labels und Endpoint-Specs.

// display

familyMichroma

weight400

tracking−2 %

casemixed

BB.SYS

Hero · Module-Headers · System-Identifier

// subhead

familyMichroma

weight400

Eine Architektur. Sechs Sparten.

H2 · Modul-Headlines

// body

familyBarlow Condensed

weight400 Regular

line-h1.55–1.65

max-width60ch

Beckerbillett betreibt seit 1946 ein durchgängiges Stack-Modell: Druckerei, Hardware-Werkstatt, Software-Etage. Für Museen, Science Center, Theater und Schlösser bedeutet das: eine Wartungsverantwortung statt sechs Verträgen.

Body 17–18 px · Lead bis 22 px · tabellarisch dicht

// mono · endpoint

familyJetBrains Mono

weight500 Medium

tracking+18 %

[SYS-002] · ENDPOINT · /tickets/issue · UPTIME 99.92%

Eyebrows · Endpoint-Captions · Spec-Tabellen

PG 05 / 12 · Modul 04 · Markenanker / atomic-level 01 ATOMS · logo

M-04 modul · markenanker · logo.assets IN: cd_logo OUT: 4 placements

Unverändert,
neu inszeniert.

Das offizielle Logo bleibt. In SYSTEM. lebt es vor dunklen Architektur-Hintergründen. Auf Weiß-Sektionen erscheint die volle Wortmarke, auf dunklen Headern bevorzugt nur das rote „B"-Ticket-Icon.

Icon · on Cockpit

Icon · on Dunkelblau

Icon · on Hellblau

Full · on White

// anwendung

Mindestabstand zum Rand = Höhe des „B"-Tickets.
Auf Cockpit-BG nur die Icon-Variante einsetzen.
Full-Wortmarke auf hellen Sektionen (Off-White / White).
Minimalhöhe Web 28 px, Print 18 mm.

// ausschluss

Kein Logo auf Foto-Hintergrund oder Gradient.
Wortmarke nicht weiß überfärben — wenn nötig, neue weiße CD-Datei nutzen.
Kein Glow-Effekt, kein Tech-Halo.
Logo nicht auf Hellblau-Sektion (Kontrast zu schwach).

PG 06 / 12 · Modul 05 · API.docs / atomic-level 01 ATOMS · voice tokens

M-05 modul · api.docs · voice.spec IN: brand_position OUT: 5 principles

Architekt, der gut dokumentiert.

SYSTEM. spricht wie ein Solution-Engineer, der nichts verkaufen muss: präzise, mit konkreten Werten, ohne Adjektiv-Stapel. Wir nennen Zahlen statt Versprechen.

[voice.principles]
numbers_beat_adjectives= "99,92% Uptime statt 'extrem zuverlässig'"
name_the_endpoint        = "wenn es eine Schnittstelle gibt, kommt ihr Name in den Text"
architecture_first       = "'wie es gebaut ist' zuerst, 'was es kann' danach"
docs_as_cta              = "wir verlinken auf API-Doku, nicht auf Whitepaper"
maintenance_visible      = "wir reden über das, was nach Go-Live passiert"

[voice.banned]
tokens = ["nahtlos", "seamless", "all-in-one", "Lösung für", "Plattform für", "Headless", "360°", "KI-gestützt", "State of the Art", "Ecosystem", "neu gedacht", "Maßstab", "zukunftssicher"]
note   = "'zukunftssicher' ist verbrannt — wir reden lieber über Migrationspfade"

// fünf prinzipien · klartext

Zahlen schlagen Adjektive. „99,92 % Uptime" statt „extrem zuverlässig".
Endpoint nennen. Wenn es eine Schnittstelle gibt, kommt ihr Name in den Text.
Architektur vor Wirkung. „Wie es gebaut ist" zuerst, „was es kann" danach.
Doku als CTA. Wir verlinken auf API-Doku, nicht auf Whitepaper.
Wartung sichtbar. Wir reden über das, was nach Go-Live passiert.

// verbrannte wörter

nahtlosseamlessall-in-oneLösung fürPlattform fürHeadless360°KI-gestütztState of the ArtEcosystemneu gedachtMaßstabzukunftssicher

hero · headline▶ vorschlag · bitte prüfen

Architektur als Argument.

Beckerbillett betreibt seit 1946 die Stack-Tiefe, die rein digitale Wettbewerber nicht haben. Druckerei, Kassen-Hardware, Backend, API — eine Verantwortung, sechs Sparten.

probe-01

tonalität: präzise
länge: 36 W

museum▶ vorschlag · bitte prüfen

Für Museen, die ihre Schnittstellen kennen wollen.

Beckerbillett.SYSTEM dokumentiert jeden Endpoint. Sie ziehen Ihre Besucher-Daten in Ihre Auswertung — ohne dritten Anbieter zwischen Ihren Häusern und Ihrem Controlling.

probe-02

tonalität: spec
länge: 36 W

about▶ vorschlag · bitte prüfen

80 Jahre. Ein Stack. Keine Akquisition.

Andere kaufen sich Druckereien zu. Wir hatten unsere Druckerei vor unserem Code. Das bedeutet: eine kausale Kette zwischen Bonrolle und Datenbank — gewachsen, nicht zusammengesteckt.

probe-03

tonalität: anker
länge: 36 W

cta-set▶ vorschlag · bitte prüfen

Demo am laufenden System

Demo anfragen → API-Doku ansehen → Beratungstermin →

probe-04

cta-hierarchie
primär · sek · tert

PG 07 / 12 · Manifest · Blueprint-Plate / atomic-level 04 TEMPLATES · governance

M-S modul · manifest · architektur.axioms IN: brand_discipline OUT: three statements

Drei Sätze, die jede
Architektur trägt.

Was SYSTEM. zusammenhält, wenn ein Pitch eskaliert oder ein Whitepaper geschrieben wird. Drei Axiome — als Blueprint-Print an die Wand der Engineering-Etage.

// axiom-01

Zahlen statt Adjektive.

„99,92 % Uptime / 12 mo" schlägt „extrem zuverlässig". Wenn die Bewegung quantifizierbar ist, wird sie quantifiziert.

// axiom-02

Endpoint statt Demo.

Wenn es eine Schnittstelle gibt, kommt ihr Name in den Text. API-Doku-Link schlägt Mockup-Slide. Architektur vor Wirkung.

// axiom-03

Wartung sichtbar.

Wir reden über das, was nach Go-Live passiert. Migrationspfade, nicht „zukunftssicher". Operations-Logbuch, nicht Roadmap.

PG 07 / 12 · Manifest · drei Axiome als SYSTEM-Anker → 08 / Modul 06 · Endpoint-Karte

PG 08 / 12 · Modul 06 · Endpoint-Karte / atomic-level 03 ORGANISMS · live data + media

M-06 modul · endpoint-karte · photography.spec IN: live_data OUT: floor-plan + photos

Hardware. Screens. Architektur.

SYSTEM.-Bildwelt zeigt, was Wettbewerber als Mockup rendern: echte Server-Racks, echte Kassendisplays in Theatern, echte Whiteboards mit Architektur-Skizzen. Plus die laufende Endpoint-Karte als Bewegtbild-Ersatz.

endpoint · live in

response · ms

throughput · /min

status

last · tick

/tickets/issue · Schauspielhaus Hamburg12 ms1 642OK0,4 s

/seasons/sold-out · Staatsoper Bremen38 ms214OK12 s

/uptime/12mo · Operations Hamburg5 ms—OK1 m

/prerelease/forecast · Oper Frankfurt142 ms38CHECK3 m

/houses/active · 62 Häuser bundesweit28 ms62OK8 m

Auswahl aus 142 produktiven Endpoints · Stand 21.05.2026 · 14:33 UTC · Werte sind Capture-Snapshots

Kassen-Display · Foyer

Whiteboard · Architektur

Editor · Config

Technikraum · Cockpit

3D-Browser-Mockup

// anwendung

Echte Hardware, echte Screens, echte Architektur-Diagramme.
Tieflichtige Aufnahmen — Cockpit-Stimmung erlaubt.
Detail-Crops & Top-Down-Aufnahmen (Tastatur, Display, Rack-Port).
Whiteboard-Skizzen mit Handschrift sichtbar.
Vor-Ort in Theatern, Museen, Kassen-Räumen.

// ausschluss

Keine 3D-Mockups oder animierten Browser-Fenster (gomus-Standard).
Keine glücklichen-Mitarbeiter-Stockphotos.
Keine Team-Fotos auf „Über uns".
Keine KI-Generierungen.
Keine isolierten Geräte auf weißem Studio-Hintergrund.

PG 09 / 12 · Modul 07 · Schaltplan-Symbole / atomic-level 01 ATOMS · icon tokens

M-07 modul · schaltplan · iconography.spec IN: wireframe-set OUT: 6 symbols

Wireframe-Linien, technisch.

Selbe Stroke-Disziplin wie WERK. (1.5 px, square caps), aber thematisch näher an Schaltplänen: Ports, Knoten, Datenflüsse, Module. Wirkung: technische Zeichnung, nicht App-Tile.

RACKServer · Stack

NODEService · Modul

GRIDLayout · Plan

TRENDUptime · Δ

CFGKonfig · System

TBLEndpoint-Map

// spec

Grid 24 × 24 (auch 48 × 48 für Hero-Icons).
Stroke 1.5 px · square caps + joins.
Knoten-Punkte erlaubt — bei Schaltplan-Symbolen.
Akzent-Farbe: CD-Rot für aktive/aktuelle Zustände.

// ausschluss

Keine 3D-Icons · keine Schatten · keine Gradients.
Keine Round-Caps oder Round-Joins.
Keine Emoji-style-Icons.
Keine Hover-Glow-Effekte.

PG 10 / 12 · Modul 08 · Topologie / atomic-level 02 MOLECULES · pattern composites

M-08 modul · topologie · patterns.spec IN: brand_lines OUT: 4 structures

Blueprint-Grid. Datenfluss.
Signal-Linie.

Vier Grafik-Elemente machen SYSTEM. wiedererkennbar — niemals als Wallpaper. Das Blueprint-Grid lebt nur im Hero, sonst dezent in Stand-In-Photo-Kacheln.

P-01blueprint · 80 px · hero-only

Blueprint-Grid

P-02signal-linie · CD-Rot · 1 px

Signal-Linie

P-03knoten · slate · 32 px

Knoten-Pattern

P-04signal-block · CD-Rot voll

Signal-Block

// anwendungsregeln

Blueprint-Grid: ausschließlich Hero-Hintergrund. Niemals unter Body-Text oder Daten-Tabellen.
Signal-Linie: horizontal als Sektionstrenner, vertikal als Daten-Achse (max. 1× pro Sektion).
Knoten-Pattern: für Architektur-Visualisierungen und Stats-Tafeln.
Signal-Block: ausschließlich für CTA-Akzente oder als Highlight-Box hinter einer Zahl.

PG 11 / 12 · Modul 09 · Refresh-Rate / atomic-level 02 MOLECULES · motion composites

M-09 modul · refresh-rate · motion.spec IN: user_action OUT: state-change

Präzise. Schnell. Mechanisch.

SYSTEM. bewegt sich wie eine gut konfigurierte CLI: kurz, eindeutig, kein Schnickschnack. Die einzigen erlaubten Animationen sind State-Wechsel (Hover, Active, Focus) und die Live-Pulse-Indikatoren in den Endpoint-Tabellen.

// duration

120 ms

Knapper als WERK. — System-Reaktionszeit, nicht handwerklicher Übergang. Max. 200 ms für Sektions-Reveals.

// easing

linear oder cubic-bezier(0.4, 0, 0.2, 1)

Material-Style „Standard easing". Niemals Spring, Bounce, Elastic.

// trigger

×0

Keine Scroll-Animationen. Keine Auto-Play. Reduced-motion: 0,01 ms. Live-Pulse ausnahmsweise erlaubt.

PG 12 / 12 · Modul 10 · ./reject / atomic-level 04 TEMPLATES · governance

M-10 modul · reject · donts.list IN: brand_drift OUT: rejection

Was SYSTEM. niemals ist.

SYSTEM. unterscheidet sich vor allem von gomus (digitaler Ticketing-Newcomer, reines SaaS ohne eigene Hardware-Werkstatt). Wer einen dieser Punkte verletzt, klingt wie ein digitaler Newcomer ohne Hardware-Erbe.

// reject · visual

Keine 3D-Mockups von Browser-Fenstern oder Mobile-Devices.
Keine animierten Hero-Browser-Frames (gomus-Standard).
Keine bunten App-Tiles oder Material-Cards mit Schatten.
Keine Iconographie mit Color-Fills (Duotone-Verbot).
Keine Round-Corner größer als 2 px.
Keine Glow-Effekte oder „Tech-Lens-Flare".
Blueprint-Grid niemals als Wallpaper außerhalb des Heros.

// reject · sprache

Keine SaaS-Floskeln („nahtlos / seamless / all-in-one / 360°").
Keine Zukunfts-Behauptungen („zukunftssicher / next-gen / future-proof").
Keine Adjektiv-Stapel statt Zahlen.
Keine Heldengeschichten über Beckerbillett — Heldin ist die Architektur.
Keine „Customer Journey"- oder „Funnel"-Sprache.

PG 12 / 12 · Ende der Module · Cockpit vollständig

SYSTEM. — die offene Architektur.

// markenkern

// charakter-vokabular

Wo SYSTEM läuft

Cockpit-Dunkel. CD-Signal.

// primary-bg

// signal

// daten

// verboten

Michroma. Barlow. JetBrains Mono.

Unverändert,neu inszeniert.

// anwendung

// ausschluss

Architekt, der gut dokumentiert.

// fünf prinzipien · klartext

// verbrannte wörter

Drei Sätze, die jedeArchitektur trägt.

Zahlen statt Adjektive.

Endpoint statt Demo.

Wartung sichtbar.

Hardware. Screens. Architektur.

// anwendung

// ausschluss

Wireframe-Linien, technisch.

// spec

// ausschluss

Blueprint-Grid. Datenfluss.Signal-Linie.

// anwendungsregeln

Präzise. Schnell. Mechanisch.

// duration

// easing

// trigger

Was SYSTEM. niemals ist.

// reject · visual

// reject · sprache

So sähe diese Richtung im Web aus

Wie liest sich diese Architektur für dich?

Erster Eindruck

Konzept & Idee

Farben

Schriften

Aufbau & Lesbarkeit

Sprache & Tonalität

Gesamteindruck

Unverändert,
neu inszeniert.

Drei Sätze, die jede
Architektur trägt.

Blueprint-Grid. Datenfluss.
Signal-Linie.