Signature-Motiv
Der Laden heisst nach der Rückseite der Platte — nach der Nummer, die niemand gekauft hat und die trotzdem oft die bessere ist. Deshalb bekommt hier jede Plakat-Aussage ihre ehrliche zweite Zeile, markiert vom Label-Ring mit Mittelloch.
A-Seite
Ebene 3 — Sticker-Versatz 4px 4px 0 0. Genau zwei Elemente pro Seite.
Formprinzip
3 px Aussenlinie in #271d1d um jedes interaktive Element. Kein
Weichzeichner auf der ganzen Seite — Blur ist immer 0.
Ebene 2
Rhythmus
Sektionen stossen randlos aneinander, das Padding sitzt innen
(--space-5 = 72 px). Die Farbkante ist der Trenner.
Sektion 5
Flächen-Budget — Dunkelanteil-Ziel 30 %
Dunkel zählt, was hellen Fliesstext erzwingt: #eb063e 19 % + 6 %, #6c0418 5 % = 30 %.
02 — Farben
Jeder Wert stammt aus der Logo-Messung. Kein Hex ist gemischt, kein Ton ist erfunden — die Arbeit war das Benennen und das Regeln.
Die Rollentrennung. Das Ladenrot bleibt
exakt #eb063e — es wird nicht abgedunkelt und nicht ersetzt. Aber es hat
zwei Aufgaben, und die vertragen nicht denselben Wert: als Fläche trägt
#eb063e die Seite, die Schrift darauf ist Weiss (4.54 : 1, AA).
Als Schrift auf hellem Grund wäre #eb063e mit 4.23 : 1 zu hell —
dafür gibt es die zweite gemessene Abstufung --brand-primary-ink
#ca002b (5.51 : 1). Zwei Abstufungen eines Rots sind Markenarbeit; das
Überschreiben der Marke wäre es nicht.
Verbotene Paarungen — hier live zu sehen
| Probe | Paarung | Ratio | Regel |
|---|---|---|---|
| Ruf an | #ffffff auf #eb063e | 4.54 | Erlaubt — die einzige Textfarbe unter 40 px auf Rot |
| Ruf an | #ebe5df auf #eb063e | 3.63 | Nur Plakatschrift ab 40 px. Als 18-px-Text verboten |
| Ruf an | #271d1d auf #eb063e | 3.62 | Nur als 3-px-Kontur. Als Schrift verboten |
| Ruf an | #eb063e auf #fdf5f5 | 4.23 | Verboten als Schrift. Die Marke wird deshalb nicht abgedunkelt — die Rolle wechselt |
| Ruf an | #ca002b auf #fdf5f5 | 5.51 | Erlaubt — --brand-primary-ink, die Schrift-Abstufung des Ladenrots |
| Ruf an | #ca002b auf #ebe5df | 4.74 | Erlaubt — rote Überschrift auf Sand |
| Ruf an | #ca002b auf #bc9c7a | 2.31 | Verboten. Auf dem Ausruf-Fond gibt es nur #271d1d |
| Ruf an | #271d1d auf #bc9c7a | 6.39 | Erlaubt — die Textfarbe des Ausruf-Abschnitts |
| Ruf an | #ffffff auf #bc9c7a | 2.57 | Verboten. Häufigste Falle dieser Palette |
| Ruf an | #ebe5df auf #bc9c7a | 2.06 | Verboten. Build-Blocker |
| Ruf an | #ebe5df auf #6c0418 | 10.07 | Erlaubt — der Textfond für längere Texte im Rot-Register |
Kundenwunsch offen
Blau. Das Blau im Logobild ist die Wand hinter dem Aufkleber, nicht das Logo — die Messung enthält keinen einzigen blauen Wert, und wir erfinden keinen. Blau kommt auf dieser Website deshalb nicht vor, auch nicht als verwandter Ersatz. Rot, Weiss und Schwarz tragen die Seite. Wenn das Türkis der Ladenwand mit soll: ein Foto der Wand oder ein Hex-/RAL-Wert genügt, dann wird nachgemessen und ein Blau-Token nachgezogen.
03 — Typografie
Caprasimo hat die fetten, runden Endungen der Logo-Kontur und nur ein Gewicht — sie trägt die Bühne, ohne dem Pinsel-Script Konkurrenz zu machen. Karla hält 18-px-Fliesstext darunter ruhig und bringt tabular-nums für die Kiste mit.
Schallplatten von 1960 bis 2000, CDs, Bilder und Skulpturen — und Kuriositäten aus meiner Zeit als Ausstatter von Filmen, Theater und Events.
Caprasimo existiert nie unter 40 px. Karla kennt 400 und 700 — Weight 500 und 600 gibt es in diesem Projekt nicht.
04 — Komponenten
Jeder Zustand ist ein Wert, kein Adjektiv. Fahr mit der Maus drüber, klick sie an, tabbe durch — Hover, Press und Fokus sind hier echt.
Default → Hover Fond #bc9c7a → Press Fond #271d1d mit translate(2px,2px) → Fokus 3-px-Ring #6c0418 mit 3 px Offset. Disabled: #e9e5e5 / #827373.
Jedes Feld hat ein sichtbares Label. Placeholder als Label-Ersatz ist ein Build-Blocker.
Das Beleg-Bauteil
Alle Zahlen mit tabular-nums. Zebra #e4dbd1, Hover #ccb49a, Press #bc9c7a. Der B-Seite-Chip markiert echte Raritäten — höchstens drei pro Registerseite.
10 — Bildsprache
Direkter Blitz, Sandtisch, ein Gegenstand, harter kurzer Schatten nach rechts unten. Verhältnis 0.73, Radius 0, 3-px-Kontur — Vorder- und Rückseite, immer beide. Bis zur Eröffnung läuft die Seite ohne ein einziges Foto.
Nie im Bild: Models, Nadel-im-Licht-Nahaufnahmen, Backsteinwände, Bokeh, Text, Türkis, Pink.
Hollerstr. 21 a, Büdelsdorf. Sonst nach telefonischer Absprache mit Termin.
