Flayronge
Primärfarbe
#FF7C00So sieht
FLAYTEX aus.
Farben, Zeichen und Regeln für einen gemeinsamen Markenauftritt.
Brand-Kit laden
Drei Farben. Eine Identität.
Flayronge setzt den Akzent. Graphit und Kreide geben dem Inhalt Raum.
Graphit
Dunkler Hintergrund
#101010Kreide
Heller Hintergrund
#F6F3EELesbarkeit gehört zur Marke.
- Graphit auf Flayronge
- 7,37:1 Geeignet
- Kreide auf Graphit
- 17,19:1 Geeignet
- Flayronge auf Kreide
- 2,33:1 Kein Fließtext
Farbe und Kontrast anwenden
Die drei HEX-Werte sind die verbindliche Grundlage dieses Entwurfs. „Flayronge“, „Graphit“ und „Kreide“ sind vorgeschlagene Farbnamen. RGB ist für digitale Anwendungen maßgeblich. Druckwerte müssen mit dem verwendeten Farbprofil abgestimmt werden.
Orange bleibt gezielt: primäre Aktionen, aktive Elemente und ausgewählte Markenflächen. Nicht jeder Rahmen, jedes Icon oder jede Überschrift ist orange. Auf orangefarbenen Buttons stehen dunkler Text und dunkle Icons. In der hellen Ansicht verwenden Textlinks den abgeleiteten Funktionston #984500 (5,95:1 auf Kreide); das Markenorange selbst bleibt unverändert.
Für normalen Text mindestens 4,5:1, für großen Text mindestens 3:1. Kontrast ist nur ein Teil der Barrierefreiheit, keine pauschale WCAG-Zertifizierung. W3C-Kontrastanforderungen
Ein Quadrat. Das originale FX.
Das FX-Signet steht immer in einer quadratischen Einsatzfläche. Auf Flayronge ist das Logo immer weiß, niemals dunkel oder orange.
Signet: 8 u breit, ungefähr 6 u hoch.
Empfohlenes Raster; das Original bleibt unverzerrt.
#FFFFFF#FF7C00
#1010101:1-Fläche, proportional zentriert
Schutzraum bleibt vollständig frei
Empfehlung: Kachel ab 48 × 48 px
So rechnest du die Kästchen um.
Bei 96 × 96 px ist 1 u = 8 px: Das Signet ist 64 px breit, links und rechts bleiben je 16 px frei, oben und unten ungefähr 24 px. Das Raster skaliert mit. Seine Linien werden nicht mit ausgegeben.
Raster, Schutzraum und Produktnamen
Quadratische FX-Einsatzfläche und Weiß auf Orange sind feste Vorgaben. Das hier vorgeschlagene Konstruktionsraster hat 12 × 12 Kästchen. Das Signet sitzt mittig, ist 8 u breit und im Originalverhältnis ungefähr 6 u hoch. Seitlich bleiben je 2 u, oben und unten ungefähr 3 u frei. Dieser Schutzraum gehört zur Datei; ihn nicht wegschneiden oder durch zusätzliche Inhalte belegen.
Die Original-SVG hat eine viewBox von 130,60 × 98,00. Diese Geometrie bleibt unverändert. Quadratisch ist die Fläche, nicht die Silhouette: Niemals Breite und Höhe unabhängig auf 1:1 ziehen. Die quadratischen Downloads enthalten die Originalpfade unverzerrt mit transparentem Rand. Keine weitere Innenpolsterung hinzufügen.
Digital empfehlen wir mindestens 48 × 48 px für die gesamte Kachel, entsprechend 32 px Signetbreite. Beispiel 96 × 96 px: Signethöhe exakt 48,02 px, vertikaler Freiraum je 23,99 px. Die ungefähr 6 u erklären sich aus dem unveränderten Originalverhältnis. Raster und Mindestgröße sind Empfehlungen zur Freigabe.
Auf Orange ist das Logo reinweiß (#FFFFFF), nicht Kreide. Weiß ist dafür eine funktionale Logo-Farbe, keine zusätzliche Hintergrundfarbe. Die Regel gilt für Logos; auf orangefarbenen Buttons bleiben Text und Icons dunkel, damit sie lesbar sind. Auf Bildern zuerst eine ruhige, ausreichend kontrastreiche Fläche schaffen.
Die vorhandenen Banner zeigen die Produktarchitektur: FX + FLAYTEX + Trennlinie + FORMS beziehungsweise INTRA. Die quadratische Einsatzfläche gilt für das alleinstehende FX-Signet, nicht als Format für das gesamte horizontale Produktlogo. Wortmarke und Produktzusatz aus den Originaldateien übernehmen, nicht aus einer ähnlichen Schrift neu zusammensetzen.
No-Gos. So bitte nicht.
Diese Beispiele sind bewusst falsch. Form, Farbe und Freiraum bleiben eindeutig.
DM Sans gibt den Ton an.
Auf der Website bereits im Einsatz. Klar im Interface, ausdrucksstark im großen Maßstab.
Für Menschen.
Für Communitys.
DM Sans
Regular 400 / Medium 500 / Bold 700
Titel64 / 1,05
Abschnitt40 / 1,15
Fließtext16 / 1,6
Metadaten14 / 1,5
JetBrains Mono
Für Code, Farbwerte und technische Angaben.
--flaytex-primary: #ff7c00;Schriftgrößen, Lizenzen und Tonalität
Die Größen sind eine vorgeschlagene digitale Skala, angegeben als Schriftgröße in Pixeln / Zeilenhöhe. Auf kleinen Displays werden Überschriften fließend kleiner; Fließtext bleibt mindestens 16 px. Lange Texte linksbündig setzen, Zeilen nicht unnötig breit machen und echte Schriftschnitte verwenden.
DM Sans und JetBrains Mono wurden in der bereitgestellten Website nachgewiesen. Die Fonts werden lokal geladen; ihre SIL-Open-Font-Lizenzen liegen im Brand-Kit. Die Schrift der grafischen Wortmarke ist damit nicht identifiziert. Logo-Dateien bleiben eigenständige Marken-Assets.
Die Sprache ist direkt und hilfreich. Menschen mit „du“ ansprechen, Aktionen konkret benennen: „Änderungen speichern“ statt „Loslegen“. Status erklären, statt Fehler nur farbig zu markieren. FORMS und INTRA bleiben Produktzusätze; FLAYTEX bleibt der Absender.
Raum, Raster und ruhige Geometrie.
Ein Rhythmus
Abstände aus 8, 16, 24, 40 und 64 px.
Geometrie im Hintergrund
Punkte und Kreise rahmen die Marke. Sie überlagern keine Inhalte.
Bewegung mit Zweck
Kurzes Feedback statt Dauerschleifen. Reduzierte Bewegung respektieren.
Flächen, Icons und Animationen
Diese ergänzenden Regeln sind Vorschläge. Flächen werden zuerst durch Abstand und Helligkeit getrennt, nicht durch immer mehr Karten. Die abgeleiteten Neutralwerte sind Funktionstöne, keine zusätzlichen Markenfarben. Einheitliche Radien: 4 px für Dokument- und Markenflächen; produktbezogene UI-Komponenten behalten ihr zentral definiertes System.
Icons kommen aus einer einheitlichen Familie und übernehmen die Textfarbe. Auf orangefarbenen Aktionen sind Text und Icon beide Graphit. Aktive Zustände bleiben auch ohne Farberkennung verständlich; Tastaturfokus ist sichtbar und sofort erkennbar.
Interaktionsfeedback etwa 120 bis 220 ms; gezielte Einblendungen höchstens etwa 420 ms. Nur opacity und transform animieren. Kein Pulsieren, keine Layoutsprünge, keine automatisch laufenden Hintergründe. Bei prefers-reduced-motion entfallen räumliche Übergänge.
Eine Familie. Eigene Produkte.
FORMS und INTRA teilen Absender, Farbwelt und Zeichen.
Was die bestehenden Vorlagen zeigen
Beide Banner verwenden das orange FX-Signet, eine helle FLAYTEX-Wortmarke, einen abgesetzten Produktnamen und eine warme dunkle Fläche. Angeschnittene Kreise und zurückhaltende Punkte sind wiederkehrende Markenmotive.
Die untersuchte FORMS-Website nutzt DM Sans und JetBrains Mono, aktuell aber teils #FC7F03 und #13100D statt der hier vorgegebenen Werte. Dieser Leitfaden vereinheitlicht auf #FF7C00, #101010 und #F6F3EE. Die Website und die Originalbanner wurden nicht verändert; alte Farbabweichungen werden nicht als neue Markenfarben übernommen.
Taglines in bestehenden Bannern gehören zum jeweiligen Produkt. Dieser Entwurf erklärt sie nicht zum allgemeinen FLAYTEX-Claim. Ein vollwertiges SVG der Wortmarke und der Produkt-Lockups würde den nächsten Ausbau verbessern.
Die richtigen Dateien. Direkt griffbereit.
Quadratische FX-Dateien mit Schutzraum, Originale, Design-Tokens und dieser Leitfaden als Offline-Paket.
FX quadratisch, Weiß Für Flayronge; transparenter Schutzraum enthalten
Brand-Kit laden
SVGFX quadratisch, Flayronge Für Graphit; transparenter Schutzraum enthaltenSVGFX quadratisch, Graphit Für Kreide; transparenter Schutzraum enthaltenSVGFX-Quelldatei Original, unverändert; für die Anwendung quadratische Dateien nutzen
SVGINTRA-Banner Original, 1088 × 256 pxPNGFORMS-Banner Original, 2720 × 960 pxPNGDesign-Tokens Helle und dunkle AnsichtCSSDesign-Tokens Farben, Schriften und EmpfehlungenJSONGrundlage und Freigabe dieses Leitfadens
Arbeitsentwurf für das FLAYTEX-Team, Entwicklung und externe Gestalter. Die drei Farbwerte, die quadratische FX-Einsatzfläche und Weiß auf Orange sind deine Vorgaben. Signet und Banner sind die bereitgestellten Originaldateien. Schriftfamilien wurden an der lokalen FORMS-Website geprüft.
Farbnamen, konkretes 12er-Konstruktionsraster mit Schutzraum, Mindestgröße, Typografieskala, Funktionstöne und Bewegungsregeln sind neu formulierte Empfehlungen und noch durch die Markenverantwortlichen freizugeben. Aus der bloßen Bereitstellung der Logos folgt keine allgemeine Nutzungsfreigabe für Dritte.
Das Paket enthält den offline nutzbaren Leitfaden, die drei Original-Assets, drei quadratische FX-Ableitungen mit unveränderten Originalpfaden, beide lokal verwendeten Schriftdateien samt OFL-Lizenzen und CSS-/JSON-Tokens. Es enthält keine Website-Zugangsdaten oder fremden Kundeninhalte.