Farbwelt und Typografie
Verbindliches Farb- und Schriftsystem für Website, Shop, Belege, Systemmails, Präsentationen und Werkstattdrucksachen. Abgeleitet aus dem Logo, perzeptuell berechnet in OKLCH und durchgehend auf Kontrast geprüft.
Verbindliches Farb- und Schriftsystem für Website, Shop, Belege, Systemmails, Präsentationen und Werkstattdrucksachen. Abgeleitet aus dem Logo, perzeptuell berechnet in OKLCH und durchgehend auf Kontrast geprüft.
Entschieden am 08.09.2026
Im Unternehmen liefen mehrere Violetttöne nebeneinander. Die Messung am Original-Logo hat die Frage beantwortet: Beere #9e005d ist die Primärfarbe. Die Theme-Farben im Shop stehen seit dem 09.09.2026 darauf um.
| Wert | Stand 09.09.2026 | Farbton | Bewertung |
|---|---|---|---|
#9e005d | Logo, Briefbogen, Theme o-color-1 und o-color-5 seit 09.09.2026 | H 355° Beere | Das ist die Markenfarbe. Sie steht auf allen gedruckten Unterlagen. |
#7B096C | Theme o-color-1, ersetzt. Noch in 45 Views und im Head-Block. | H 335° Violett | 20° daneben. Liest sich neben dem Logo wie ein Fehler. |
#540349 | Theme o-color-5, ersetzt. Noch im Head-Block, in Views, Mails und Produkttexten. | H 335° Violett | Saubere dunkle Stufe, aber vom falschen Ton abgeleitet. |
#9e1460 | Logo_lang_4c und Logo_Signet_4c, die 4c-Master | H 354° Beere | Abstand 1,21 zu Beere, praktisch derselbe Ton. Auf #9e005d normalisiert. |
#861f7d | manufakturkulturlogo-website.svg | H 332° Violett | Abstand 7,34. Altstand, nicht weiterverwenden. |
#991D93 | Sub-Marke LiebLicht | H 330° Magenta | Bleibt. Eigene Marke mit eigenem Logo, bewusster Kontrast. |
Das Logo gewinnt. #9e005d ist Primärfarbe, alles andere richtet sich danach aus. Begründung: Das Logo liegt gedruckt vor, auf Briefbogen, Belegen und allem, was das Haus verlässt. Die Website dagegen bezieht ihre Farben aus einer Handvoll zentraler Stellen, nämlich den Theme-Farben und den Head-Blöcken. Die Farbe im Web zu ändern kostet einen Vormittag, ein neues Logo kostet jeden gedruckten Bestand.
Die bisherige Aubergine #540349 wird durch die hue-korrigierte Dunkelbeere #55002a ersetzt. Gleiche Helligkeit, gleiche Funktion, jetzt aus derselben Familie wie das Logo.
Kernpalette
Wer schnell etwas bauen muss, braucht nur diese Werte. Die Zahl auf der Fläche ist das gemessene Kontrastverhältnis gegen die jeweils lesbare Textfarbe.
#9e005d
beere-600Primärfarbe. Logo, Marke, Primärbutton, Markenflächen.
#55002a
beere-900Überschriften H1 bis H3, Ersatz für die bisherige Aubergine.
#1d96b4
petrol-500Sekundär. Icons, Flächen, Hover. Für Text die Stufe 700 nehmen.
#25956f
salbei-500Komplementär. Natürlichkeit, Erfolgsmeldungen, Ausgleich zur Beere.
#f7b32b
messing-300Tertiär. Wärme, Flamme, Hinweise. Nie als Textfarbe auf Weiß.
#ca5841
rost-500Signal. Fehler, Löschen, Achtung.
#f5f2f0
sand-100Flächen, abgesetzte Bereiche, Papierwirkung.
#3f3b38
sand-800Fließtext.
Vollständige Abstufungen
Die Stufen sind in OKLCH gerechnet, nicht in HSL. Dadurch wirkt der Sprung von 300 auf 400 in jeder Familie gleich groß, auch über verschiedene Farbtöne hinweg. Die kleine Zahl unter dem Hexwert ist der Kontrast gegen die aufgedruckte Textfarbe.
Marke, Primärbuttons, Überschriften. Stufe 600 ist das Logo, Stufe 900 die Überschriftenfarbe.
Interaktion, Links, Icons, Kicker. Ab Stufe 700 für Text auf Weiß geeignet.
Natürlichkeit und Handarbeit, Erfolgsmeldungen, Haken, Verfügbarkeitshinweise.
Wärme, Flamme, LiebLicht-Umfeld, Hinweise und Auszeichnungen. Nur als Fläche, nie als Text auf Weiß.
Fehler, Löschen, Pflichtfeldhinweise. Bewusst rotorange, damit es sich von der Beere unterscheidet.
Fließtext, Rahmen, Trennlinien, Flächen. Warm getönt, damit Grau nie kalt wirkt.
Harmonie
Alle Nebenfarben liegen auf berechneten Winkeln zur Beere, bei gleicher Helligkeit und Sättigung. Deshalb passen sie zusammen, ohne dass eine die andere erschlägt.
Der echte Komplementärwert liegt bei H 175° und damit im Grünen. Petrol sitzt bei H 220° und ist damit ein Split-Komplementär. Das ist die ruhigere Wahl: Ein exakter Gegenpol zieht neben einer starken Primärfarbe immer Aufmerksamkeit auf sich, ein Split-Wert stützt sie. Petrol steht außerdem seit Monaten im Shop und ist eingeführt. Der Grünton kommt als Salbei zusätzlich ins System, dort wo es um Natürlichkeit und Bestätigung geht.
Anwendung
| Element | Farbe | Wert | Regel |
|---|---|---|---|
| Fließtext | sand-800 | #3f3b38 | Auf Weiß und auf Creme. 11,1 zu 1. |
| Überschriften H1 bis H3 | beere-900 | #55002a | Immer fett. Größe, Farbe und Schnitt müssen sich vom Absatz unterscheiden. |
| H4 und H5 | beere-800 | #6c003a | Schnitt 600. |
| Gedämpfter Lead | sand-600 | #6a6562 | Unter der Überschrift, nie für ganze Absätze. |
| Kicker über der H2 | petrol-700 | #005b73 | Inter 600, Versalien, letter-spacing .13em, Feature case. |
| Textlink | petrol-700 | #005b73 | Unterstrichen. Hover petrol-800. |
| Primärbutton | beere-600 mit Weiß | #9e005d | Hover beere-700. 8,0 zu 1. |
| Sekundärbutton | Rahmen beere-600 | #9e005d | Transparente Fläche, Schrift beere-700. |
| Abgesetzte Fläche | sand-50 bis sand-100 | #faf8f6 nach #f5f2f0 | Als sanfter Verlauf, nicht als harte Farbfläche. |
| Rahmen und Karten | sand-200 | #dbd6d2 | 1 Pixel. Keine Schatten auf Inhaltskarten. |
| Trennlinie | beere-900 bei 15 Prozent | rgba(85,0,42,.15) | Maximal 220 Pixel breit, zentriert. |
| Erfolg | salbei-700 | #005f43 | Fläche salbei-50. |
| Hinweis | messing-700 | #6c4800 | Fläche messing-50. |
| Fehler | rost-700 | #862f1e | Fläche rost-50. |
| Dunkle Sektion | beere-950 oder sand-950 | #3b0019 · #1e1a17 | Sparsam. Nur Hero oder Abschluss, nie mitten im Lesefluss. |
Petrol als Textfarbe. #1d96b4 erreicht auf Weiß nur 3,46 zu 1 und fällt für Fließtext durch. Als Fläche, Icon oder große Auszeichnung ist es in Ordnung, für Links und Text ist #005b73 zu nehmen.
Messing als Textfarbe. #f7b32b erreicht 1,84 zu 1. Das ist auf Weiß unlesbar. Die Farbe ist eine Fläche, auf die dunkler Text kommt, oder eine Illustrationsfarbe. Nie umgekehrt.
Farbige Vollflächenbänder. Gilt unverändert: keine o_cc4-Bänder im Seitenkopf. Abgesetzte Bereiche laufen über den Creme-Verlauf.
Flächen
Verläufe laufen immer in eine Richtung und über höchstens zwei benachbarte Stufen derselben Familie. Keine Verläufe zwischen zwei Markenfarben, also nie Beere nach Petrol.
Typografie
Überschriften und Fließtext kommen aus einer Familie, unterschieden über Schnitt, Größe, Farbe, Laufweite und Auszeichnung. Keine Serifenschrift. Roboto entfällt auf der Website vollständig und bleibt nur für Belege und PDFs, in Systemmails bleibt Arial.
| Rolle | Schnitt | Weitere Merkmale |
|---|---|---|
| H1 bis H3 | Inter 700 | Farbe #55002a, letter-spacing −0,02em ab 1,8rem |
| H4 und H5 | Inter 600 | Farbe #6c003a |
| Kicker, Label, Pills | Inter 600 | Versalien, letter-spacing 0,13em, Farbe #005b73, Feature case |
| Lead unter der Überschrift | Inter 400 | Farbe #6a6562 |
| Fließtext | Inter 400 | 16,5 px Basis, Zeilenhöhe 1,62, Farbe #3f3b38 |
| Hervorhebung im Text | Inter 500 | nicht 700, das bleibt Überschriften vorbehalten |
| Navigation, Buttons, Formulare | Inter 500 und 600 | |
| Zahlen, SKU, EAN, Preise | Inter 400 | tabular-nums und ss02 |
| Systemmails | Arial, Helvetica, sans-serif | 400 und 700, Mindestgröße 16 px, keine Webfonts |
| Belege und Briefbogen | Roboto, Fußzeile Roboto Condensed 7,5 pt | unverändert, nicht anfassen |
Inter hat eine x-Höhe von 0,546, Roboto 0,528. Bei gleicher Pixelgröße wirkt Inter also rund drei Prozent größer. Damit der Lesefluss bleibt wie bisher, sinkt die clamp-Basis im Block mk-fluid-global um Faktor 0,967. Dabei müssen auch die vw-Koeffizienten mitskalieren, sonst stimmt die Verkleinerung nur an den Enden der Skala. Nachgemessen ergibt das 96,7 Prozent bei 390, 768, 1200 und 1600 Pixel Fensterbreite.
Geprüft am 08.09.2026: die Google-Fassung hat nur acht OpenType-Funktionen, nämlich calt ccmp dnom frac locl numr pnum tnum, und keine optische Größenachse. Die Originalausgabe von rsms.me hat 39 Funktionen und die Achse opsz 14 bis 32, die kleine Grade automatisch luftiger und große enger laufen lässt.
Entscheidend für den Shop sind zwei davon. ss02 heißt „Disambiguation" und macht aus der Folge Ill 1O0 eine lesbare Zeichenkette: kleines l bekommt einen Schwanz, großes I Serifen, die Null einen Schrägstrich. Bei gravierten Artikelnummern und EANs ist das Fehlervermeidung. case richtet Klammern und Striche auf Versalhöhe aus, was die gesperrten Kicker brauchen. Gleiche OFL-Lizenz, und da die Schrift ohnehin lokal ausgeliefert wird, gibt es keinen Grund für die beschnittene Fassung.
Subset auf latin und latin-ext, getrennt über unicode-range, damit eine deutsche Seite nur lädt, was sie braucht.
| Datei | Größe | Wird geladen |
|---|---|---|
inter-latin.woff2 | 67 KB | immer |
inter-latin-ext.woff2 | 127 KB | nur bei polnischen, tschechischen, türkischen Zeichen |
inter-italic-latin.woff2 | 74 KB | nur wenn kursiver Text auf der Seite steht |
inter-italic-latin-ext.woff2 | 140 KB | selten |
| Deutsche Seite gesamt | 67 KB, eine Datei | vorher Roboto: 322 KB in zehn Dateien |
Die Umstellung macht die Seite also um 255 KB pro Aufruf leichter. Eine eigene Monospace-Schrift ist nicht nötig, Inter hat Tabellenziffern.
Die verbindliche Regel lautet: Überschriften müssen sich in Größe, Farbe UND Schnitt vom Absatz unterscheiden. Fünf Achsen stehen zur Verfügung, mindestens drei sind zu nutzen. Schnitt 700 gegen 400. Größe über die clamp-Skala. Farbe #55002a gegen #3f3b38. Laufweite negativ bei großen Graden, weit bei Kickern. Auszeichnung durch Versalien beim Kicker. Wer nur die Größe ändert, verstößt gegen die Regel.
Logo
Lang, Rundmarke und Signet kommen aus den Originaldateien, auf den Inhalt beschnitten und auf Beere normalisiert. Die übrigen Kombinationen sind abgeleitet, nicht nachgezeichnet: das Logo besteht aus genau drei Pfaden, Signet, Wortmarke und Claim. Die weißen Fassungen sind neu, in den Originaldateien waren sie nicht enthalten.
#1d1d1b aus den Originaldateien, nicht reines Schwarz.| Regel | Wert |
|---|---|
| Zeichenfläche | Alle Dateien sind auf den Inhalt beschnitten. Eine Breitenangabe von 200 px ergibt also 200 px Logo. Die Originaldateien hatten 13 bis 23 Prozent Füllung, dort stimmte das nicht. |
| Schutzzone rundum | Halbe Signethöhe |
| Mindesthöhe digital, mit Claim | 40 px. Darunter die Fassung ohne Claim. |
| Mindesthöhe digital, ohne Claim | 28 px. Darunter nur das Signet. |
| Mindesthöhe Druck, mit Claim | 12 mm. Darunter ohne Claim, unter 8 mm nur Signet. |
| Logohöhe Website | Desktop 40 bis 48 px · Tablet 36 bis 40 px · Mobil 32 bis 36 px |
| Auf Fotos | Nur weiß, auf ausreichend dunklem und ruhigem Bereich. Sonst Abdunklung unterlegen. |
| E-Mail-Signatur | PNG mit weißem Grund, keine Transparenz. Grund siehe Abschnitt Werkzeuge. |
| Unzulässig | Verzerren, drehen, neu einfärben, Schatten, Kontur, Verlauf, Wortmarke und Signet unterschiedlich einfärben, Claim ohne Wortmarke verwenden, manufakturkulturlogo-website.svg weiterverwenden (falsches Violett #861f7d) |
Werkzeuge
Erzeugt E-Mail-Signaturen im Hausstandard. Firmendaten und Gestaltung sind fest, variabel sind nur Name, Funktion und Kontakt. Mit Anleitung für Outlook, Apple Mail, Gmail und Odoo.
Transparente PNG sind in Browsern völlig unproblematisch. In Mailprogrammen sind sie es nicht: im Dunkelmodus von Apple Mail, Outlook und Gmail wird der Hintergrund dunkel, und ein transparentes Logo mit dunkelroter Zeichnung verschwindet fast. Ältere Outlook-Versionen haben zusätzlich Macken mit Alphakanälen.
Die Lösung ist aber nicht JPG. Gemessen am gerenderten Original bei 720 px Breite:
| Format | Größe | max. Abweichung | Pixel mit Artefakt |
|---|---|---|---|
| PNG auf Weiß | 32,0 KB | 0 | 0,00 % |
| JPG Qualität 92, 4:4:4 | 49,9 KB | 30 | 5,58 % |
| JPG Qualität 85, 4:4:4 | 38,7 KB | 44 | 14,11 % |
| JPG Qualität 85, 4:2:0 | 29,0 KB | 69 | 25,48 % |
Das JPG ist größer und hat trotzdem Artefakte, weil JPEG für Fotos gebaut ist und an harten Kanten ringt. Bei einer flächigen Linienzeichnung komprimiert PNG besser. Verbindlich ist mk_signatur_lang_720_weiss.png. Die JPG-Fassungen liegen nur bereit, falls ein Fremdsystem sie verlangt.
| Datei | Zweck |
|---|---|
mk-tokens.css | Alle Farb- und Schrift-Tokens als CSS-Variablen |
mk-palette.json | Sechs Familien mal elf Stufen als JSON |
mk_lang_beere_1200.png | Logo als PNG, transparent, für Office und Fremdsysteme |
mk_signatur_lang_720_weiss.png | Logo für E-Mail-Signaturen. Weißer Grund statt Transparenz, 200 px Anzeigebreite bei doppelter Auflösung. |
mk_signet_beere_512.png | Signet als PNG |
Für die Umsetzung
Direkt in den Head-Block einsetzbar. Die Tokens gelten für Website, Präsentationen und alles Weitere, damit ein Wert nur an einer Stelle steht.
:root {
/* Semantisch */
--mk-primaer: #9e005d; /* Logo, Marke, Primärbutton */
--mk-primaer-hover: #83004a;
--mk-ueberschrift: #55002a; /* H1 bis H3 */
--mk-text: #3f3b38; /* Fließtext */
--mk-text-gedaempft: #6a6562; /* Lead */
--mk-link: #005b73;
--mk-flaeche: #f5f2f0; /* Creme */
--mk-rahmen: #dbd6d2;
--mk-erfolg: #005f43;
--mk-hinweis: #6c4800;
--mk-fehler: #862f1e;
/* Schrift */
--mk-font-body: Inter, "Odoo Unicode Support Noto", sans-serif;
--mk-font-features: "calt" 1;
--mk-font-code: "ss02" 1; /* Artikelnummern, EAN */
/* Vollständige Rampen */
--mk-beere-50: #ffebf7;
--mk-beere-100: #ffdbed;
--mk-beere-200: #ffc0da;
--mk-beere-300: #f6a0c2;
--mk-beere-400: #df78a3;
--mk-beere-500: #bb407a;
--mk-beere-600: #9e005d;
--mk-beere-700: #83004a;
--mk-beere-800: #6c003a;
--mk-beere-900: #55002a;
--mk-beere-950: #3b0019;
--mk-petrol-50: #c8ffff;
--mk-petrol-100: #b8f6ff;
--mk-petrol-200: #9ce4fb;
--mk-petrol-300: #77cce6;
--mk-petrol-400: #46adca;
--mk-petrol-500: #1d96b4;
--mk-petrol-600: #00738f;
--mk-petrol-700: #005b73;
--mk-petrol-800: #004559;
--mk-petrol-900: #003344;
--mk-petrol-950: #00202e;
--mk-salbei-50: #d0ffec;
--mk-salbei-100: #c1fadf;
--mk-salbei-200: #a6e8ca;
--mk-salbei-300: #84d0af;
--mk-salbei-400: #59b38e;
--mk-salbei-500: #25956f;
--mk-salbei-600: #0b7857;
--mk-salbei-700: #005f43;
--mk-salbei-800: #004931;
--mk-salbei-900: #003622;
--mk-salbei-950: #002313;
--mk-messing-50: #ffefab;
--mk-messing-100: #ffe39b;
--mk-messing-200: #ffce7e;
--mk-messing-300: #f7b32b;
--mk-messing-400: #cc9218;
--mk-messing-500: #a87600;
--mk-messing-600: #885d00;
--mk-messing-700: #6c4800;
--mk-messing-800: #523500;
--mk-messing-900: #3d2600;
--mk-messing-950: #261800;
--mk-rost-50: #ffe3d3;
--mk-rost-100: #ffd6c5;
--mk-rost-200: #ffbeac;
--mk-rost-300: #ffa18d;
--mk-rost-400: #e57c66;
--mk-rost-500: #ca5841;
--mk-rost-600: #a5422e;
--mk-rost-700: #862f1e;
--mk-rost-800: #691f11;
--mk-rost-900: #511206;
--mk-rost-950: #370601;
--mk-sand-50: #faf8f6;
--mk-sand-100: #f5f2f0;
--mk-sand-200: #dbd6d2;
--mk-sand-300: #c2bcb9;
--mk-sand-400: #a29d9a;
--mk-sand-500: #847f7c;
--mk-sand-600: #6a6562;
--mk-sand-700: #534f4c;
--mk-sand-800: #3f3b38;
--mk-sand-900: #2f2a27;
--mk-sand-950: #1e1a17;
}
✔ Theme-Farben, erledigt. o-color-1 auf #9e005d, o-color-5 auf #55002a, o-color-2 Petrol und o-color-3 Creme unverändert. Wichtig für Wiederholungen: NICHT make_scss_customization aufrufen. Die Methode legt eine zweite ir.asset-Direktive vom Typ replace auf dieselbe Zieldatei an, und der Asset-Bundler wirft dann auf jeder Seite 500, im Shop wie im Backend. Richtig ist, die vorhandene Anlage an ihrem Pfad in place zu überschreiben. Danach die Bundles web.assets_frontend.min.css und .min.js verwerfen, sonst bleibt das alte CSS liegen.
Offen: 636 Fundstellen. 13 im Head-Block, 413 in 45 Views, 28 in elf Mail-Templates, 113 in Produkttexten, 69 in Kategorietexten. Gemessen per RPC am 09.09.2026, deutlich mehr als ein Scan der gerenderten Seiten findet.
Head-Block mk-headings. Die fest eingetragene Überschriftenfarbe #540349 auf #55002a.
Head-Block mk-card-typo. Karten-H3 und der Petrol-Akzentstrich.
Trennlinien. Alle rgba(84,3,73,.15) auf rgba(85,0,42,.15).
Systemmails. Sektionsüberschriften und Summenlinie in den Templates 8, 20, 21, 22, 23, 33, 34, 59 sowie den Layouts 413 und 414.
Briefbogen. Die Fußzeilen-Trennlinie steht bereits auf #9e005d und ist damit als Einzige schon richtig.
Sinnvoll ist ein Skript, das alle Altwerte über die Views hinweg ersetzt, so wie es bei der Stilbereinigung gemacht wurde. Vorher jede Seite abrufen und die Fundstellen zählen.