Styleguide

Die Marke ist Beere. Alles andere tritt dahinter zurück.

• Setze Logo, Primärbuttons und Markenflächen in mk-primaer (Beere #9e005d). Weiß darauf erreicht 8,0:1.
• Setze H1 bis H3 in mk-ueberschrift (Dunkelbeere #55002a), H4 und H5 in mk-ueberschrift-klein.
• Setze Fließtext in mk-text (Kohle #3f3b38), Leads und Metadaten in mk-text-gedaempft.
• Setze Links, Kicker und jeden Text in Petrol mit mk-link (#005b73). Petrol 500 (mk-akzent) ist nur Fläche, Icon, Akzentstrich oder Fokusring: Auf Weiß erreicht es 3,46:1 und fällt für Text durch.
• Nutze Messing (mk-messing-300) nur als Fläche mit dunklem Text darauf oder als Illustrationsfarbe. Als Text auf Weiß ist es mit 1,84:1 unlesbar.
• Setze Statusmeldungen als Paar aus Text und Fläche: mk-erfolg auf mk-erfolg-flaeche, mk-hinweis auf mk-hinweis-flaeche, mk-fehler auf mk-fehler-flaeche. Jede Meldung trägt zusätzlich ein Wort oder Icon, damit sie nicht nur über die Farbe lesbar ist.
• Nimm Zwischentöne nur aus den sechs Rampen (Beere, Petrol, Salbei, Messing, Rost, Sand, je elf Stufen in OKLCH). Erfinde keine eigenen.

Die Nebenfarben liegen auf berechneten Winkeln zur Beere. Petrol ist ein Split-Komplementär und stützt die Beere, ohne mit ihr zu konkurrieren. Salbei bringt das Grün für Natürlichkeit und Bestätigung. Rost ist bewusst rotorange, damit ein Fehler nie mit der Marke verwechselt wird.

LiebLicht, die Produktlinie für Erinnerungslichter, läuft vollständig auf Beere. Das frühere LiebLicht-Magenta #991D93 ist abgeschafft.

Ungültig, nicht mehr verwenden: #7B096C (altes Theme-Lila), #540349 (alte Überschriftenfarbe), #3f3a3d (alter Fließtext), #861f7d (falsches Logo-Violett), #9e1460 (Agentur-Originaldatei), #991D93 (LiebLicht-Magenta).

• Setze den Seitengrund in mk-grund (Weiß). Abgesetzte Bereiche laufen über den Creme-Verlauf von mk-flaeche-hell nach mk-flaeche, senkrecht nach unten.
• Setze keine farbigen Vollflächenbänder in den Seitenkopf. Der Kopf ist weiß.
• Dunkle Sektionen in mk-dunkel oder mk-dunkel-neutral gibt es nur als Hero oder Abschluss, nie mitten im Lesefluss.
• Ein Verlauf läuft in eine Richtung über höchstens zwei benachbarte Stufen derselben Familie. Nie zwischen zwei Markenfarben, also nie Beere nach Petrol.

Inter für alles auf dem Bildschirm, aus einer Familie, unterschieden über Schnitt, Größe, Farbe, Laufweite und Auszeichnung. Keine Serifenschrift.

• Überschriften unterscheiden sich vom Absatz in mindestens drei von fünf Achsen: Schnitt (700 gegen 400), Größe, Farbe (mk-ueberschrift gegen mk-text), Laufweite (−0,02em bei großen Graden), Auszeichnung (Versalien beim Kicker). Nur die Größe zu ändern reicht nicht. Kein Light-Schnitt in Überschriften.
• Nutze die Stile h1, h2, h3, karte-h3, h4, h5, lead, body, betont, kicker, button, klein und zahl. Auf der Website skalieren sie fluide zwischen den Werten, die bei jedem Stil stehen. Setze nie feste Pixelgrößen in einzelne Seiten.
• Setze Hervorhebungen im Fließtext in 500 (betont). 700 bleibt Überschriften vorbehalten.
• Setze Artikelnummern, EAN, Maße und Preise im Stil zahl mit font-feature-settings: "calt" 1, "ss02" 1, "tnum" 1. ss02 unterscheidet I, l und 1 sowie O und 0, das verhindert Lesefehler bei gravierten Nummern.
• Setze Kicker in Versalien mit Laufweite 0,13em, Schnitt 600, Farbe mk-link und dem Feature case.
• Halte das Zeilenmaß bei 62 Zeichen (mk-textmass).
• Lade Inter lokal aus der Originalausgabe von rsms.me, nie von Google Fonts. Die Google-Fassung hat weder ss02 noch die optische Größenachse.
• Belege und Briefbogen bleiben bei Roboto, Systemmails und Signaturen bei Arial 16 px.

Das Logo ist eine einfarbige Linienzeichnung: zwei Hände halten ein Herz, aus dem ein Zweig wächst, in einem offenen Kreis. Daneben die Wortmarke MANUFAKTUR KULTUR und der Claim. Acht Formen gibt es, jede in Beere, Weiß und Schwarz. Alle Dateien sind auf den Bildinhalt beschnitten.

• Nimm die Form lang mit Claim als Standard. Unter 40 px Höhe digital oder 12 mm im Druck wechselst du auf die Form ohne Claim, unter 28 px oder 8 mm auf das Signet.
• Halte rundum eine Schutzzone von einer halben Signethöhe frei.
• Setze das Logo in Beere auf hellen Grund, in Weiß auf Beere, Petrol, Kohle und Fotos, in Schwarz (mk-logo-schwarz) für einfarbigen Druck, Stempel, Gravur und Prägung.
• Verzerre, drehe oder färbe das Logo nie um. Keine Schatten, Konturen oder Verläufe, Wortmarke und Signet nie unterschiedlich einfärben, den Claim nie ohne Wortmarke verwenden.
• Baue das Favicon aus dem Signet, nicht aus der Rundmarke. Deren Rundtext ist bei 16 px nicht mehr lesbar.

Wann welche Form und welche Mindestgröße pro Druckverfahren gilt, steht in den Kapiteln Anwendungen und Produktion.

• Halte den Sektionsrhythmus über mk-sektion-oben und mk-sektion-unten (mobil mk-sektion-oben-mobil, mk-sektion-unten-mobil). Auf der Website sind das die Klassen pt40 und pb24. Erfinde keine eigenen Abstände pro Seite.
• Polstere Karten innen mit mk-abstand-3 und setze Karten im Raster mit mk-abstand-4 auseinander.
• Runde Buttons, Felder und Karten mit mk-radius ab, große Buttons und Bildkacheln mit mk-radius-gross, Pills mit mk-radius-klein.
• Trenne Bereiche mit einer Linie in mk-trennlinie, höchstens 220 px breit, zentriert, mit mk-abstand-5 darüber und darunter.

• Inhaltskarten bekommen einen 1-px-Rahmen in mk-rahmen und keinen Schatten.
• Schatten tragen nur schwebende Elemente: Menüs, Dialoge und der WhatsApp-Schwebebutton mit mk-schatten-schwebend, das Medaillon, das ins Kartenbild ragt, mit mk-schatten-medaillon.
• Der Fokusring ist 2 px in mk-akzent mit 2 px Abstand. Er erreicht auf Weiß und Creme mehr als 3:1.

Medaillons sind die Bildzeichen der Marke für Kacheln, Leistungen und Abschnitte. Sie leiten sich aus dem Signet ab: ein Kreis in mk-primaer, darin ein unterbrochener weißer Ring wie von Hand gezogen, darin eine weiße Linienzeichnung mit runden Enden und ein bis zwei vierzackige Funkelsterne.

• Nutze Medaillons statt nackter Font-Icons über Karten und Leistungen.
• Zeichne Linien mit 2,4 Einheiten Strichstärke im 96er-Raster, runde Enden und Ecken, nur Weiß. Der Inhalt bleibt zwischen 26 und 70.
• Lass ein Medaillon in Karten mit −42 px in das Bild ragen, mit mk-schatten-medaillon.
• Die fertigen Motive liegen unter Assets, Gruppe Medaillons. Neue Motive entstehen mit medaillons.py im Werkzeugordner und werden vor Gebrauch gerendert und angesehen.

Ikonografie

• Font Awesome erscheint nur klein und inline: der Pfeil in „Zum Produkt“, das WhatsApp-Zeichen im WhatsApp-Button. Als Kachel-Icon steht immer ein Medaillon.
• Keine Emojis in Oberflächen, Shop-Texten oder Mails.

• Zeige echte Fotos aus der Werkstatt: Hände, Material, Maschinen, fertige Stücke. Ruhiger Hintergrund, Tageslicht, keine gestellten Stockszenen.
• Kennzeichne KI-generierte Bilder, die echt wirken, direkt am Bild: „KI-generiertes Beispielbild – tatsächliche Gravur kann abweichen.“ Pflicht seit 02.08.2026. Echte Fotos und Linienillustrationen brauchen keine Kennzeichnung.
• Zeige keine Brandings von Zulieferern, insbesondere kein Probo-Logo. Die Produkte laufen unter eigener Marke.
• Platzhalterbilder tragen als Alt-Text ein Foto-Briefing: „Platzhalter – Foto: was fotografiert werden soll“.
• Setze das Logo auf Fotos nur in Weiß und nur auf einen dunklen, ruhigen Bereich. Sonst eine Abdunklung unterlegen.

ManufakturKultur spricht wie eine gute Werkstatt am Tresen: freundlich, konkret und ohne Umwege. Wer schreibt, erklärt, was möglich ist, und lädt zum Gespräch ein. Werbesprache, Superlative und Behördendeutsch passen nicht dazu.

Anrede und Ton

• Sprich Kundinnen und Kunden mit „Sie“ an, warm und persönlich. Produkttexte stehen neutral, ohne direkte Anrede.
• Schreib in kurzen, vollständigen Sätzen. Ein Gedanke pro Satz.
• Sag, was ihr tut, mit dem Verb vorne: „Wir gravieren“, „Wir besticken“, „Wir drucken“.
• Nenne Zahlen, Maße und Zeiten, wenn es sie gibt. „In der Regel in drei bis fünf Werktagen“ hilft mehr als „schnell“.
• Gendere über Paarformen („Kundinnen und Kunden“) oder neutrale Wörter („Team“, „alle, die …“). Kein Sternchen, kein Doppelpunkt.

So klingt es

Aus der Website, als Maßstab:

Vom einzelnen Geschenk bis zur größeren Bestellung setzen wir Ihre Idee so um, dass sie zum Anlass passt.

Besonders wichtig ist uns der direkte Austausch mit unseren Kundinnen und Kunden, damit jedes Ergebnis wirklich passt.

Am schnellsten: Schreiben Sie uns per WhatsApp

Was nicht vorkommt

• Keine Gedankenstriche (—) in Texten nach außen. Ein Komma, ein Punkt oder ein Doppelpunkt tun es.
• Keine Gegenüberstellungen nach dem Muster „nicht dies, sondern das“.
• Keine Aufzählungsfetzen wie „mehrmals täglich, auch abends“. Ganze Sätze.
• Keine Wörter wie „ehrlich“, „authentisch“, „einzigartig“ oder „mit Liebe gemacht“ als Behauptung. Zeig es am Beispiel.
• Keine Emojis.
• Kein Ortsanker im Produkttitel („aus Dortmund“, „Made in Dortmund“). Dortmund gehört in die Beschreibung und die Tags.
• Keine Pflegehinweise oder technischen Werte aus der Erinnerung. Nur aus echten Produktdaten.

Schreibweisen

Buttons und Handlungsaufforderungen

• Beginne Button-Texte mit einem Verb: „Zum Produkt“, „Anfrage senden“, „Gravur gestalten“. Nie „OK“, „Absenden“ oder „Hier klicken“.
• Wo eine Anfrage möglich ist, stehen zwei Wege nebeneinander: „Online-Anfrage“ und „WhatsApp-Anfrage“ (Komponente AnfrageZeile).
• Der WhatsApp-Link öffnet immer mit vorausgefülltem Text zum Thema der Seite:

Hallo ManufakturKultur! Ich interessiere mich für: {Thema}.
– Maße / Ausführung:
– Stückzahl:
– Wunschtermin:
– Gestaltung vorhanden (ja/nein):
Foto oder Skizze hänge ich gern direkt an.

• Setze die WhatsApp-Nummer gut sichtbar mit der Klasse mk-wa-number: fett, 18 bis 22 px, in mk-ueberschrift.

Fehlermeldungen und Hinweise

• Sag, was passiert ist und was die Person jetzt tun kann. „Die Datei ist größer als 20 MB. Bitte verkleinern Sie sie oder schicken Sie sie per WhatsApp.“
• Gib nie der Person die Schuld. Kein „falsche Eingabe“.

Dieses Kapitel regelt, wie die Marke und Kundendesigns in der eigenen Werkstatt gefertigt werden. Es ist Fassung 1 als Vorschlag: Die Grenzwerte sind übliche Startwerte der Verfahren, die Logo-Mindestgrößen sind daraus am Logo gemessen. Beides wird an den eigenen Maschinen mit einem Andruck geprüft und dann hier festgeschrieben. Felder mit „offen“ fehlen noch.

Welches Verfahren wofür

Markenfarben im Druck

• Die CMYK-Werte sind mit dem Profil FOGRA39 (gestrichenes Papier) aus dem Bildschirmwert gerechnet. Für Offset und Digitaldruck auf Papier passen sie, auf anderen Materialien entscheidet der Andruck.
• Pantone, HKS, Garn- und Folienfarbe werden einmal am Fächer neben einem Ausdruck in Beere abgemustert. Dabei Pantone Coated (C) und Uncoated (U) getrennt bestimmen. Die gefundenen Nummern kommen in diese Tabelle, danach gelten nur noch sie.
• Das einfarbige Schwarz ist 100 % K. Der Bildschirmwert #1d1d1b ist genau dieser Ton, deshalb ist es nicht reines #000.
• Auf dunklem Material kommt das Logo in Weiß. Bei DTF, UV-Druck und Siebdruck auf dunklem Grund liegt unter jeder Farbe ein weißer Unterdruck.

Logo-Mindestgrößen nach Verfahren

Gemessen an den Logo-Dateien: Die feinste Linie im Signet ist 1,32 % der Logohöhe, die Wortmarke ohne Claim hat Striche von 11,9 % ihrer Höhe, der Rundtext der Rundmarke nur 0,66 %. Daraus folgt pro Verfahren die kleinste Höhe, bei der keine Linie wegbricht. Die Breite der Form „lang“ ist das 4,6-Fache ihrer Höhe.

Was das praktisch heißt:

• Brustlogo auf Textil (80 bis 100 mm breit): Nimm die Wortmarke ohne Claim. Die Form „lang“ wäre dort nur etwa 20 mm hoch und verliert bei DTF, Siebdruck, Folie und Stick die feinen Linien im Signet.
• Rückenmotiv (250 bis 300 mm breit): Die Form „lang“ mit Claim ist für DTF und Siebdruck groß genug. Für Stick und Folie erst ab 76 mm Höhe.
• Signet allein auf Textil: ab 38 mm Höhe im Siebdruck, ab 31 mm im DTF.
• Gravur und UV-Druck: Hier gilt die allgemeine Regel aus dem Logo-Kapitel, 12 mm mit Claim, darunter ohne Claim, unter 8 mm nur das Signet.
• Offen: Für Stick und Folie fehlt eine vereinfachte Fassung des Signets mit kräftigeren Linien. Bis es sie gibt, wird dort die Wortmarke verwendet.

Verfahren im Einzelnen

DTF-Transferdruck

• Farben: CMYK plus Weiß, Verläufe und Fotos möglich.
• Datei: PNG mit transparentem Hintergrund, 300 dpi in Endgröße, oder PDF mit Vektoren. Druckfläche bis A3.
• Keine halbtransparenten Pixel an Kanten und keine weichen Schatten. Der Weißunterdruck macht sie als hellen Rand sichtbar.
• Freistehende Elemente mindestens 1 mm breit, damit sie auf dem Textil halten.

Siebdruck

• Farben: Volltonfarben, ein Sieb pro Farbe. Bis vier Farben bleibt es wirtschaftlich.
• Datei: Vektor-PDF oder SVG, jede Druckfarbe auf einer eigenen Ebene, Schriften in Pfade.
• Linien positiv ab 0,5 mm, negativ (ausgespart) ab 0,8 mm. Raster nur als grober Halbton, keine feinen Verläufe.

Stickerei

• Farben: bis sechs Garnfarben. Beere nach Garnfächer abmustern (offen).
• Datei: Vektor als Vorlage. Die Stickdatei wird pro Motiv und Größe einmal angelegt und archiviert.
• Linien unter 1 mm fallen weg, Schrift ab 5 mm Versalhöhe. Keine Verläufe.

Flex-, Flockfolie und Plott

• Farben: eine Folie pro Farbe, nur Vollton. Beere nach Folienfarbkarte abmustern (offen).
• Datei: Vektor nur aus geschlossenen Konturen, keine Überlappungen, keine Raster.
• Linien und Zwischenräume ab 1 mm, sonst lässt sich die Folie nicht entgittern.

UV-Druck

• Farben: CMYK plus Weiß plus Lack. Weiß als eigene Volltonfarbe „White“ anlegen, Lack als „Varnish“.
• Datei: PDF/X-4 in Endgröße. Bei randabfallendem Druck 2 mm Beschnitt.
• Linien ab 0,15 mm, Schrift ab 5 pt.

Lasergravur

• Ein Ton: Das Ergebnis ist der Materialton. Das Logo kommt immer in der schwarzen Fassung.
• Datei: SVG, PDF oder DXF für LightBurn, Schriften in Pfade. Fotos als Graustufen-PNG mit 300 bis 500 dpi.
• Linien ab 0,15 mm, Schrift ab 6 pt. Auf Glas und dunklem Holz vorher eine Probe auf Restmaterial.

Sublimation

• Farben: CMYK auf weißer, polyesterbeschichteter Oberfläche. Weiß wird nicht gedruckt, Weiß ist das Material.
• Datei: PNG oder JPG mit 300 dpi in Endgröße, bei randabfallendem Druck 3 mm Beschnitt.
• Beere wird nur mit dem Profil der Sublimationstinte farbtreu. Erster Auftrag in Beere mit Andruck.

Tampondruck

• Farben: ein bis zwei Volltonfarben.
• Datei: Vektor, Schriften in Pfade.
• Kleine Flächen: Signet oder Wortmarke ohne Claim, nie die Rundmarke unter 30 mm.

Checkliste für Kundendesigns

1. Rechte: Logos, Figuren, Fotos und Schriften gehören dem Kunden oder sind lizenziert. Fremde Marken und bekannte Figuren werden nicht nachgebaut.
2. Datei: Vektor für Sieb, Folie, Stick, Tampon und Gravur. Raster mit 300 dpi in Endgröße für DTF, UV und Sublimation.
3. Größe: Endmaß in Millimetern ist bekannt. Feinste Linie und kleinste Schrift halten die Grenzwerte des Verfahrens.
4. Farben: Anzahl passt zum Verfahren. Kundenfarben als Pantone oder HKS, sonst als CMYK mit Hinweis auf Abweichung.
5. Material: Textil- oder Materialfarbe ist bekannt. Bei dunklem Grund ist Weiß eingeplant.
6. Freigabe: Der Kunde hat eine Ansicht mit Maßen freigegeben, bei Sonderfarben und großen Mengen einen Andruck.

Logoformen

Jede Form gibt es in beere, weiss und schwarz. Die SVG-Dateien sind die erste Wahl. PNG nur für Office, Fremdsysteme und Social, JPG nur, wenn ein System es verlangt.

E-Mail-Signatur

Firmendaten und Gestaltung sind fest, variabel sind nur Name, Funktion und Kontakt. Der Signaturgenerator auf dem Styleguide baut sie und legt sie in die Zwischenablage.

• Schrift Arial, Helvetica, sans-serif, 16 px durchgehend, auch die Rechtszeile. Keine Webfonts.
• Links ein Balken in mk-primaer, 4 px breit, als gefüllte Tabellenzelle. Ein border-left rendert Outlook unzuverlässig.
• Logo mk_signatur_lang_720_weiss.png mit 200 px Anzeigebreite. PNG mit weißem Grund: Ein transparentes Logo verschwindet im Dunkelmodus, ein JPG zeigt Artefakte an den Linien.
• Reihenfolge: Name, Funktion, Marke und Anschrift, Kontakt, Logo, Rechtszeile.

Belege und Systemmails

• Belege und Briefbogen aus Odoo bleiben in Roboto mit Fußzeile in Roboto Condensed 7,5 pt. Nicht anfassen.
• Systemmails in Arial 16 px, Fett 700, Buttons in mk-primaer mit weißer Schrift.

Website in Odoo

Die Website läuft auf Odoo. Gestaltet wird zentral über Code-Blöcke im Website-Head, nie pro Seite.

• Ein Block für die Werte: mk-tokens enthält den Inhalt von mk-tokens.css. Neue Regeln schreiben var(--mk-primaer) statt eines Hexwerts. Dann kostet die nächste Farbänderung eine Zeile.
• Vorhandene Blöcke: mk-fluid-global (Schriftgrößen), mk-headings, mk-card-typo, mk-cta, mk-mass, mk-faq, mk-megamenu-styles, mk-mobile-accordion, mk-early-hamburger. Ein Block wird über seinen Marker ersetzt, nie doppelt eingefügt.
• Seitenkopf: weiße Sektion mit pt40 pb16, darin h1 und p.lead.
• Abgesetzter Bereich: Creme-Verlauf, darin Kicker, H2, Lead und Fließtext mit Klasse mk-mass.
• Karten: Bild mit loading="lazy", Medaillon mit −42 px ins Bild, Karten-H3, Text, Button unten. Rahmen 1 px, kein Schatten.
• Anfrage: Überall, wo ein Produkt oder eine Anfrage verlinkt ist, steht die AnfrageZeile mit zwei Buttons. Der schwebende WhatsApp-Button ist site-weit aktiv und wird nie zusätzlich eingebaut.
• Menüs: Inhalte immer in beiden Sprachkontexten pflegen (de_DE und en_US). Typografie in Menüs nur über das zentrale CSS, der Editor-Stil „Absatz“ zerstört Menü-Links.

Dateien und Ablage

• Styleguide online: manufakturkultur.grandposition.digital, mit allen Logo-Dateien, dem Logo-Paket als ZIP, den Tokens und dem Signaturgenerator.
• Tokens: mk-tokens.css und mk-palette.json werden von mk_tokens_build.py erzeugt. Werte nur dort ändern, dann Styleguide und dieses System neu schreiben.
• Logo-Originale der Agentur liegen archiviert im Ordner _alt. Zwei davon tragen das falsche Violett #9e1460 und werden nicht verwendet.