Markenkern
Bevor eine einzige Farbe oder Schrift feststeht, muss klar sein, wofür afroshop steht. Alles Visuelle unten leitet sich hiervon ab.
afroshop ist der Marktplatz, der Afro-Haarpflege so einfach, warm und schnell macht, wie sie es verdient — kuratiert statt beliebig, alltagstauglich statt einschüchternd.
Für wen
Menschen mit Afro- und Locken-Haar, die gezielte Produkte suchen statt sich durch ein Regal zu wühlen, das nicht für sie gemacht ist.
Rolle im Alltag
Schneller, verlässlicher Nachschub-Ort — nicht Ratgeber-Plattform, nicht Lifestyle-Magazin. Der Shop liefert, informiert kurz und tritt zurück.
Unterschied zum Regal
Kuration statt Vollsortiment: Jedes Produkt ist für Textur, Porosität und Pflegeroutine der Zielgruppe ausgewählt, nicht nur gelistet.
Logo
Die Wortmarke „afroshop“ in geometrischer Grotesk, kombiniert mit der Bildmarke — ein Schutzschild aus zwei gekreuzten, minimalistischen Speeren. Eine Anspielung auf afrikanische Symbolik (u. a. Flaggenmotive wie das kenianische Schild-und-Speere-Wappen), reduziert auf ihre reinste, zeitlose Form.
Der Mindestabstand rundum entspricht der Höhe des Symbols (Maß „X“). Innerhalb dieses Bereichs steht kein weiteres Element — kein Text, kein Bild, keine Kante.
Unterhalb dieser Breite verliert das Symbol Kontur-Schärfe, insbesondere in gedrucktem Rasterformat.
Als Favicon, App-Icon, Social-Avatar und Ladeindikator nutzbar — immer wenn der volle Schriftzug keinen Platz hat oder die Marke bereits etabliert ist (z. B. wiederkehrende App-Nutzer).
Die reine Wortmarke ohne Symbol kommt nur zum Einsatz, wenn die Bildmarke bereits prominent auf derselben Fläche sichtbar ist (z. B. neben einem Favicon im Browser-Tab).
Nicht verzerren
Nicht umfärben
Nicht auf unruhigem Grund
Nicht rotieren
Farbe
Erdige Basis aus der ursprünglichen Farbwelt-Inspiration, ergänzt um Ember — einen kräftigen, gesättigten Akzent, der der ruhigen Palette die Geschwindigkeit gibt, die ein Shop braucht.
Ember ist bewusst knapp gehalten — nur für Kaufabsicht-Momente (Add-to-Cart, Sale, Checkout). Wird Ember überall verwendet, verliert er seine Signalwirkung. Clay und Sage sind Zusatzfarben für Kategorien/Tags, nicht Teil der 60/30/10-Grundverteilung.
Weiß auf Clay erreicht nur 4.3:1 Kontrast — unter dem AA-Grenzwert (4.5:1) für Fließtext auf Buttons. Clay funktioniert als Link- und Akzentfarbe auf Cream, nicht als Button-Fläche mit weißer Beschriftung.
| Kombination | Kontrastverhältnis | Einsatz | Status |
|---|---|---|---|
| Espresso auf Cream | 15.9 : 1 | Fließtext, Überschriften | AAA |
| Weiß auf Ember | 4.75 : 1 | Primäre Buttons | AA |
| Clay-Dark auf Cream | 5.9 : 1 | Links, sekundärer Text | AA |
| Sage auf Sand | 2.78 : 1 | Nur für große Icons/Deko, nicht für Text unter 24px | Nur groß |
Typografie
Urbanist für Headlines — geometrisch und einstöckig wie die Wortmarke, mit genug Wärme, um nicht kalt zu wirken. Inter für Interface und Fließtext — neutral, extrem lesbar, hält jede Sprache und jede Größe sauber.
ohne Umwege.
Ob Produktbeschreibung, Warenkorb oder Filterleiste — Inter bleibt bei 13–16px scharf und unterscheidet zuverlässig zwischen I, l und 1. Für Preise nutzen wir tabellarische Ziffern, damit Beträge in Listen sauber untereinanderstehen.
| Display | 56–88px / Urbanist 700 | Neue Routine |
| H1 | 40px / Urbanist 700 | Kategorie-Titel |
| H2 | 28px / Urbanist 600 | Produktgruppe |
| Body | 16px / Inter 400 | Produktbeschreibung, Fließtext |
| UI Label | 14px / Inter 600 | In den Warenkorb |
| Caption | 12px / Inter 500 | Versand · 2–4 Werktage |
Form & Icons
Die Schildform aus der Bildmarke ist der wiederkehrende Formgeber — in Radien, Schnitten und im Icon-Strich. Icons: 1.6px Strich, runde Kappen, keine Füllung, 24×24-Raster.
Die Schildform wird zum Dekor-Element für Ladeindikatoren, Rating-Icon oder als beschnittene Bildmaske für Produktfotos — sparsam, nie als flächiges Muster.
UI-Komponenten
Die Bausteine für den Shop — direkt einsatzbereite Spezifikation für Buttons, Produktkarten und Navigationselemente.
Primary (Ember) ausschließlich für die eine Hauptaktion pro Ansicht. Secondary für gleichwertige Zweitaktionen. Ghost für niedrigschwellige Navigation innerhalb von Inhalten.
Curl Defining Cream, 250ml
Jamaican Black Castor Oil
Sulfatfreies Reinigungsshampoo
Bildsprache
Natürliches, warmes Licht statt Studio-Weißabgleich. Textur im Fokus — Locken, Produkttropfen, Hautnahes. Keine gestellten Lifestyle-Klischees, keine Stock-Ästhetik.
Diese Referenzaufnahmen setzen den Zielkorridor für zukünftige Produktionen: warme, natürliche Lichtstimmung statt Studio-Weißabgleich, Textur sichtbar statt geglättet, echte Alltagsszenen statt gestellte Posen. Kriterien für weitere Shootings: warme Farbtemperatur, sichtbare Haartextur in Nahaufnahmen, Diversität der Haartypen 3A–4C, Produkt immer mit erkennbarer Konsistenz (Creme, Öl, Schaum).
Anwendungsbeispiel
Alle Elemente zusammen: So könnte ein Ausschnitt der Startseite aussehen, gebaut ausschließlich mit den oben definierten Tokens und Komponenten.
Pflege, die deine Locken versteht.
Kuratierte Produkte für Textur 3A–4C — ausgewählt statt einfach gelistet, morgen bei dir.