# Icons *Brand OS 2.4.0 · Referenz mit allen Motiven: `design/icons.html` · Dateien: `assets/icons/` · Katalog: `assets/katalog.yaml`* Dreißig Piktogramme für Präsentationen, Angebote, Websites und Werkzeuge. Eine dünne schwarze Linie und ein Farbfleck in der Form, um die es geht. Ein Icon hilft, wenn jemand schneller findet, was er sucht. Es hilft nicht, wenn eine Seite nur voller aussehen soll. ## Motive Idee (`idee`) · Recherche (`lupe`) · Strategie (`kompass`) · Ziel (`zielscheibe`) · Kampagne (`megafon`) · Dialog (`sprechblase`) · Copy (`schreibmaschine`) · Code (`code`) · Design (`stift`) · Foto (`kamera`) · Video (`video`) · Web (`browser`) · Mobil (`smartphone`) · Mailing (`mail`) · Termin (`kalender`) · Zeit (`uhr`) · Wirkung (`chart`) · Standort (`ort`) · Telefon (`telefon`) · Ansprechpartner (`person`) · Team (`team`) · Party (`glas`) · Highlight (`stern`) · Unterlage (`dokument`) · Download (`download`) · Weiter (`pfeil`) · Erledigt (`check`) · Neu (`plus`) · Achtung (`achtung`) · Herzblut (`herz`) ## Dateien - `assets/icons/hell//icon_.svg` — schwarze Linie, für Offwhite und Weiß - `assets/icons/dunkel//icon_.svg` — Linie Offwhite, für Schwarz - `` ist `gelb`, `tuerkis`, `koralle` oder `mono` (nur Linie) - `assets/icons/icon_sprite.svg` — alle hellen Fassungen als `` ## Bauplan 1. **Raster 24 × 24, Schutzzone 2.** Alles Wichtige liegt zwischen 3 und 21. Skaliert wird nur im Ganzen. 2. **Linie 1 in Schwarz.** Runde Enden, runde Ecken an Knicken, keine zweite Strichstärke. Auf Schwarz wird die Linie Offwhite. 3. **Ein Farbfleck pro Icon.** Er liegt deckungsgleich hinter der Linie und füllt die Form, um die es geht. Nie zwei Farben in einem Icon. 4. **Jedes Icon in jeder Farbe.** Die Farbe trägt keine Bedeutung, sie richtet sich nach der Unterlage. 5. **Unter 20 px nur Mono.** Der Farbfleck wird bei 16 px zum Krümel. ## Wann ein Icon, wann etwas anderes - **Icon, Orientierung:** Leistungen, Agenda, Kontaktdaten, Positionen im Angebot, Navigation, Tabellenköpfe. Überall, wo Dinge gleicher Art nebeneinander stehen. - **Illustration, Gedanke:** Kapiteltrenner, Erklärungen, Workshop-Karten. Dafür gibt es `assets/grafiken/` und `assets/illustrationen/`. - **Foto, Beweis:** echte Projekte und echte Menschen. Ein Icon ersetzt nie ein Projektfoto und nie das Foto im Kreis neben einem Namen. - **Nichts, das Wort reicht:** Ein-Wort-Headlines, Zitate, Leitideen und der Claim stehen ohne Icon. ## Größe und Fassung je Medium | Medium | Größe | Fassung | Höchstens | |---|---|---|---| | Präsentation 16:9 | 3 bis 5 % der Folienbreite (bei 1920 px 56 bis 96 px) | Farbe | 6 pro Folie | | Angebot, Konzept, A4 | 8 bis 12 mm | Farbe, im Fließtext Mono | 1 pro Position | | Website | 24 bis 32 px, Leistungsübersicht 48 bis 64 px | Farbe, Navigation Mono | 1 pro Kachel | | Social Media | 15 bis 25 % der Kachelbreite | Farbe | 1 pro Kachel | | Werkzeuge (C3 Play u. a.) | 16 bis 20 px | Mono | 1 pro Knopf | | Fließtext, Tabelle | Schriftgröße × 1,25 | Mono | 1 pro Zeile | ## Abstand und Ausrichtung 1. Abstand zum Text ist die halbe Icon-Größe, links daneben oder darüber. 2. Neben dem Text oben bündig zur ersten Zeile, nicht mittig zum ganzen Absatz. 3. In einer Reihe ist alles gleich: Größe, Farbe, Abstand, Position zum Text. 4. Stehen Icons über Spalten, beginnen alle Icons und alle Headlines auf derselben Linie. ## Farbe 1. **Eine Farbe pro Fläche.** Eine Folie, eine Seite, eine Kachel: eine Icon-Farbe. Über ein Dokument darf sie wechseln, etwa pro Kapitel. 2. **Nie Ton in Ton.** Auf gelber, türkiser oder koralliger Fläche immer Mono. 3. **Gelb nur, wenn sonst nichts gelb ist.** Steht auf der Fläche schon das Lockup oder ein gelber Anstecker, Türkis oder Koralle nehmen. 4. **Ausnahme Prinzip C3.** Bei curious, clever und creative gelten die Phasenfarben: Türkis, Koralle, Gelb. Nur dort trägt die Farbe eine Bedeutung. 5. **Werkzeuge bleiben Mono.** Dort zeigt die Ampel den Status (✓ Türkis, ! Gelb, × Koralle). Ein farbiges Icon daneben würde wie ein Status gelesen. ## Bedeutung und Menge 1. **Ein Icon pro Aussage**, und eine Aussage pro Icon: Was im Dokument einmal „Termin“ ist, bleibt der Kalender bis zur letzten Seite. 2. **Nie ohne Wort.** Allein dürfen nur Download, Weiter und Neu stehen, und auch die nur in Werkzeugen und auf Websites. 3. **Ab sieben wird es eine Liste.** Mehr als sechs Icons auf einer Fläche lenken ab. 4. **Das Glas gehört der Party.** Es steht für die Partymetapher und den uneingeladenen Gast, also immer für die Marke, um die es geht. Für Veranstaltungen den Kalender nehmen. ## Wo Icons nicht hingehören Aufs Cover und neben das Logo · in Headlines, Leitideen und den Claim · als Aufzählungszeichen in Fließtext-Listen · auf Fotos, auch nicht mit Kasten dahinter · als Ersatz für Logo, „echte“-Lockup oder Illustration · in Kundenauftritte mit eigenem Iconset. ## Technik 1. **Dateien nicht verändern.** Nicht umfärben, nicht nachzeichnen, nicht aus zwei Icons eins bauen. Fehlt ein Motiv, beim Creative Strategy Studio anfragen. 2. **Immer SVG, immer eingebettet** mit `data-c3-asset="icon_"` und `data-c3-version`. In Keynote, PowerPoint und InDesign die SVG platzieren, nicht als PNG exportieren. Nur proportional skalieren. 3. **Web und Werkzeuge über das Sprite.** Steht Text daneben, bekommt das Icon `aria-hidden="true"`, steht es allein, ein `aria-label`. ## Vor dem Einsetzen kurz fragen 1. Findet jemand mit dem Icon schneller, was er sucht? 2. Steht ein Wort daneben? 3. Haben alle Icons auf dieser Fläche dieselbe Größe und dieselbe Farbe? 4. Ist die Icon-Farbe eine andere als die Fläche dahinter? 5. Würde der uneingeladene Gast damit sympathisch wirken oder aufdringlich?