Styleguide für alle, die gestalten
So sieht Cycle Rosenheim aus – online und auf Papier
Logo, Farben, Schriften, Gestaltungselemente und Bildsprache an einem Ort. Dazu fertige Vorlagen für Social Media, die du direkt im Browser ausfüllst.
Logo, Farben, Schriften, Gestaltungselemente und Bildsprache an einem Ort. Dazu fertige Vorlagen für Social Media, die du direkt im Browser ausfüllst.
Cycle Rosenheim ist der Radladen in der Innenstadt – seit 40 Jahren, mit Werkstatt und echter Beratung. Die Gestaltung ist entsprechend: kräftige Farbflächen, große Versalien, wenig Schnickschnack. Etwas Schräge sorgt für Bewegung.
Petrol, Cyan und Gelb. Petrol als Grundfläche, Cyan als Signal, Gelb als kleiner Akzent. Dazu Schiefergrün und Steingrau.
Poppins für alles Digitale, Mark für Gedrucktes. Überschriften fett und in Großbuchstaben.
Aussagen sitzen auf Farbflächen, gern mit versetztem Schatten.
Für Aktionen: Inhalte 5° gedreht und 5° kursiv – wie im Kampagnenmotiv. Buttons bleiben gerade.
Das Logo gibt es nur in Schwarz oder Weiß. Es steht immer gerade – auch wenn das Motiv drumherum schräg gestellt ist. In Social-Media-Posts und Stories steht kein Logo, dort übernimmt das das Profilbild.
Weiß auf Petrol · Standard
Schwarz auf WeißSchwarz auf SteingrauWeiß auf SchiefergrünWeiß auf Cyan
Weiß auf ruhigem FotoPetrol ist die Hausfarbe und der Standard-Hintergrund – in Social Media, im Druck und künftig auch auf der Website. Darauf setzt Cyan die Signale, Gelb kommt sparsam als Hingucker dazu. Schiefergrün und Steingrau ergänzen für Balken und ruhige Flächen. Dunkelgrau bzw. Schwarz als Fläche gibt es nicht mehr. Cyan und Gelb entsprechen den Druck-Grundfarben und lassen sich in jedem Verfahren sauber wiedergeben. Weiß ist keine Markenfarbe – es ist einfach Papier bzw. Schrift auf dunklem Grund.
Die Hausfarbe: Standard-Hintergrund für Social Posts, Flyer und Plakate – gern als schräges Band wie im Plakat zum Test-Event.
Die Signalfarbe: Headline-Balken, Buttons, Preise, Hervorhebungen.
Der Akzent: sparsam einsetzen – kleine Hinweise und Störer auf Petrol oder im Foto. Pro Motiv höchstens ein gelbes Element. Nie mit Schwarz oder Dunkelgrau kombinieren, das wirkt zu sehr nach Lucky Bike.
Für Balken, Etiketten und Buttons neben Cyan – und im Website-Footer.
Heller, ruhiger Hintergrund – z. B. für die Angebote auf der Startseite.
CMYK-Werte für Petrol (Richtwert) und Steingrau bitte mit der Druckerei abstimmen – die Bildschirmfarben lassen sich nicht 1:1 umrechnen.
Ungefähre Verteilung in einem typischen Motiv: viel Petrol als Fläche, Cyan als Signal, Schiefergrün für Balken, ein Hauch Gelb.
Zwei verwandte, geometrische Schriften mit klarer Aufgabe: Poppins für Website, Social Media und alles am Bildschirm. Mark für Flyer, Plakate, Anzeigen und alles, was gedruckt wird. Hierarchie und Regeln sind bei beiden gleich.
Wir beraten dich persönlich, haben viele Testfahrräder da und helfen dir im Notfall schnell weiter. Ob Stadtrad, Faltrad oder E-Bike – bei uns findest du das passende Bike.
Die kursiven Schnitte sind im ZIP enthalten. Lizenz: SIL Open Font License (OFL.txt).
Mit diesen wenigen Bausteinen entstehen alle Motive. Weniger ist mehr: lieber ein starker Balken als drei schwache.
Text sitzt auf Cyan- oder Schiefergrün-Balken, die sich leicht überlappen dürfen. Der Balken ist immer nur so breit wie der Text.
Ein harter Schatten in Cyan, nach rechts unten versetzt. Hebt die wichtigste Aussage heraus – pro Motiv nur einmal.
Für Aktionen und laute Botschaften: der ganze Inhalt 5° gegen den Uhrzeigersinn gedreht und 5° kursiv geneigt. Fotos und Buttons (Call-to-Action) bleiben immer gerade.
Kleine Schilder in Schiefergrün für Kategorien und Stichworte. Auf Petrol werden sie Cyan.
Abgerundete Pille mit klarer Handlung. Cyan auf ruhigem Grund, Schiefergrün daneben für die zweite Handlung.
Ein einzelnes Wort in der Headline bekommt eine Cyan-Fläche – das Schlüsselwort der Botschaft.
Icons sind reine Linien-Icons aus Lucide (lucide.dev, frei nutzbar). Entscheidend ist die Strichstärke: immer 2,5 px – egal wie groß das Icon ist. Ein Icon in 72 px hat denselben Strich wie eines in 20 px.
Icons sparsam verwenden. Nur dort, wo sie wirklich helfen – z. B. bei Öffnungszeiten, Kontakt oder Leistungen. Pro Motiv höchstens ein bis zwei Icons, nie als Dekoration.
vector-effect: non-scaling-stroke bzw. bei Lucide absoluteStrokeWidth.Wir zeigen den Laden, die Werkstatt, die Menschen dahinter und Räder im echten Einsatz. Fotos sind hell, natürlich und ungefiltert.
Vorlagen & Beispiele
Sieben Vorlagen für Posts, Stories und Anzeigen. Im Vorlagen-Editor werden Texte direkt im Motiv geändert, ein eigenes Foto hochgeladen und das fertige Bild als PNG gespeichert. Jedes Beispiel unten lässt sich mit „Im Editor nachbauen“ direkt öffnen und anpassen.
Kein Logo in Social Media. Das Profilbild zeigt Cycle bereits – im Motiv selbst ist dafür kein Platz nötig. Der Editor lässt das Logo bei Posts und Stories automatisch weg.
Formate
Bei Stories liegen oben (ca. 250 px) die Profilzeile und unten (ca. 340 px) Button und Antwortfeld – rot markiert. Dort keine Texte platzieren. Der Editor zeigt diese Bereiche an.
Posts
Stories
Videos & Untertitel
Einmal im Jahr zur Inspektion –
dann fährt dein Rad wie neu.
Wenn ein Video Untertitel zeigt, stehen sie immer gleich da: weiße Schrift auf Cyan. Das ist sofort als Cycle erkennbar und auf jedem Bild lesbar.