Die Token zum Einziehen. Eine Datei, sie liegt schon im Projekt:
padelsmart-screens/ci.css. Sie enthält Hell und Dunkel, die Marke, die
Radien und die Statusfarben – und ist dieselbe Quelle, aus der App und Website leben.
Der Kern für das Cockpit:
:root{
--brand:#7B2CF7; /* Marke – Auswahl, aktiver Navigationspunkt, Hauptknopf */
--lime:#C5F733; /* Akzent auf dunklem Grund – Referenzen, Betriebsbereit */
--fd:'Baloo 2'; /* Überschriften und alle Zahlen */
--fb:'Inter'; /* Fließtext, Tabellen, Beschriftungen */
--r-klein:22px; --r-pille:100px; --gap-raster:16px;
}
[data-theme="dark"]{
--bg:#0E0921; --card:#16112e; --ink:#fff; --body:#b9b3d6; --dim:#8b84b0;
--line:rgba(255,255,255,.07); --soft:rgba(255,255,255,.05); --chipbg:#241a45;
--ok:#3ED88A; --warn:#FFB74A; --crit:#FF6683; /* auf dunklem Grund heller */
}
Drei Kleinigkeiten, die überall greifen:
1 ·
padelsmart wird
klein geschrieben – auch im Seitentitel und
im Browser-Tab. Ausnahme:
PADELSMART_KV, das ist ein Cloudflare-Binding
und darf nicht umbenannt werden.
2 · Das Logo ist eine
Wortmarke, kein Farbverlaufs-Block – und es gibt sie
zweimal:
logo-lilaweis.svg für dunklen Grund,
logo-dunkel.png für hellen. Beide tragen ein eingebettetes Bild und lassen
sich
nicht per CSS umfärben; auf dem falschen Grund verschwindet „smart".
3 ·
Baloo 2 für Überschriften und Zahlen,
Inter für alles andere.
Beide liegen als TTF in
padelsmart-screens/fonts/. (In der App steht im
Code noch ein Kommentar, Saira sei die Standardschrift – das stimmt nicht mehr:
gemessen rendert sie Inter.)
Icons: unser eigener Satz – alle aus einer Quelle. Am 07.09. wurde Phosphor
projektweit entfernt: es war nie unser Sortiment, hatte sich aber über die App gelegt.
Jedes Zeichen hier ist selbst gezeichnet, im Raster
1.8 1.8 20.4 20.4,
volle Formen mit Aussparung,
fill="currentColor". Zwanzig davon entstanden
am 07.09. neu, weil es sie im Satz noch nicht gab.
Das gepflegte Inventar liegt unter
/icons.
⚠
Vorher war es unsauber, und das lag an mir: ich hatte 16 Icons per
Augenschein aus dem Code zugeordnet und danebengegriffen –
pfeil war ein
Kalender,
warn ein Rückwärtspfeil,
filter eine Lupe. Dazu drei
verschiedene viewBoxen nebeneinander, also drei verschiedene optische Gewichte.
Die Radien sind an der laufenden App gemessen, nicht geschätzt – am 19.08. in
app-demo im Browser abgelesen:
28 px für Karten und Blöcke,
99 px für Pillen und Knöpfe,
14 px für kleine Bedienelemente wie
Filterfelder und Zeit-Kacheln. Diese Vorlage benutzt exakt dieselben Werte.
Was diese Vorlage nicht kann: Vier deiner Seiten wurden in der Aufnahme nie
geöffnet – Spiele, Erstattungen, Rechnungen, Nachrichtenausgang. Sie stehen in der
Navigation, aber ich kenne ihren Inhalt nicht. Sie fallen vermutlich unter Muster 2
oder 3; falls nicht, schick einen Screenshot und ich lege ein Muster nach.
