Media
Farben, Schriften, Bewegungsmuster und Bildwelt des Justmann Racing Teams – dokumentiert anhand der aktuell live stehenden Website.
Über diese Seite
Diese Seite fasst die visuelle Identität von justmann-racing.team zusammen, so wie sie aktuell im Code umgesetzt ist. Sie dient als Referenz für Presse, Partner und für die eigene Weiterentwicklung der Seite.
Die Wortmarke „JUSTMANN.RACING“ steht als eigenständige Logodatei in farbiger, schwarz-weißer und negativer Ausführung zur Verfügung. Diese Seite dokumentiert die verbindlichen Anwendungen und bleibt zugleich ein lebendes Dokument für die Weiterentwicklung der Marke.
Farbpalette
Werte 1:1 aus src/index.css. Guards Red ist die einzige Akzentfarbe – ihr Name ist Programm: Sie lehnt sich an das klassische Porsche „Guards Red“ an, das auch bei den gezeigten Fahrzeugen vorkommt.
Hellmodus (Standard)
Paper White
#FFFFFF · hsl(0 0% 100%)
--background
Standard-Grundfläche im Hellmodus (Default der Seite).
Carbon Black
#0D0D0D · hsl(0 0% 5%)
--foreground
Haupttextfarbe auf hellem Grund, Basis für invertierte Flächen (Footer, Pillar-Sektionen).
Guards Red
#D6002F · hsl(350 100% 42%)
--primary
Einzige Akzentfarbe: aktive Links, Eyebrow-Labels, Accent-Bars, Progress-Linie im Hero.
Surface Grey
#F5F5F5 · hsl(0 0% 96%)
--secondary
Abgesetzte Flächen, z. B. Hintergrund von PageHero-Sektionen.
Hairline
#E0E0E0 · hsl(0 0% 88%)
--border
Rahmen und Trennlinien auf hellem Grund.
Muted Grey
#666666 · hsl(0 0% 40%)
--muted-foreground
Sekundärtext, Bildunterschriften, Meta-Angaben.
Dunkelmodus (.dark, aktuell nicht standardmäßig aktiv)
Track Black
#0F0F0F · hsl(0 0% 6%)
--background (.dark)
Grundfläche im Dunkelmodus.
Paper White
#F2F2F2 · hsl(0 0% 95%)
--foreground (.dark)
Text auf dunklem Grund.
Guards Red (dunkel)
#E6002F · hsl(350 100% 45%)
--primary (.dark)
Gleiche Rolle wie im Hellmodus, minimal aufgehellt für Kontrast auf Schwarz.
Typografie
Zwei Schriften, beide über Google Fonts eingebunden (siehe @import in index.css). Keine dritte Schrift im Einsatz.
Aa Bb Cc
Bebas Neue
Regular 400 · Versalien · Letter-Spacing 0.01em
Display-Schrift für H1–H6, Wortmarke „JUSTMANN.RACING“ und alle Eyebrow-Labels. Immer über font-display bzw. die Heading-Tags eingebunden, nie für Fließtext.
Aa Bb Cc
Barlow
Light 300 / Regular 400 / Medium 500 / SemiBold 600 / Bold 700
Fließtext, Absätze, Navigation, Buttons. Wird als Basis-Sans der ganzen Seite geladen (body-Element).
Logo & Wortmarke
Die Wortmarke ist in drei verbindlichen Varianten verfügbar. Ausreichend Freiraum und die Proportionen müssen bei jeder Größe erhalten bleiben.
Farbig
Schwarz-Weiß
Negativ
Bildwelt
- Durchgehend farbige, hochkontrastige Motorsport-Fotografie – Fahrzeuge in Bewegung, Rennstrecken-Atmosphäre, dunkle Hintergründe mit punktuellem Licht.
- Bewusster Gegensatz zu justmann.tech: Dort dominiert Schwarz-Weiß-Portraitfotografie, hier warme, farbige Renn- und Werkstattbilder.
- Bildformate im Code meist 4:3 oder großzügige 16:9-Hero-Ausschnitte, stets mit object-cover eingebunden.
- Kein Bildmaterial wird aktuell als separates Presse-Downloadpaket angeboten – Anfragen laufen über die Kontaktadresse unten.
Interaktion & Bewegung
Im Code als „Precision Instrument“-Motion-System bezeichnet (siehe Kommentar in index.css).
- Hero-Elemente erscheinen gestaffelt (hero-reveal-1 bis -4): Fade-in + leichtes Hochgleiten, 0–500ms versetzt.
- Eyebrow-Label wird von einem schmalen, vertikalen Accent-Bar in Guards Red begleitet, der beim Erscheinen von unten „aufwächst“.
- Hero-Bilder nutzen einen sehr langsamen Ken-Burns-Zoom (28s, alternierend) für dezente Lebendigkeit.
- Unter jedem PageHero läuft eine dünne, animierte Fortschrittslinie in Guards Red von links nach rechts.
- Zwei Button-Varianten: „Primary“ (gefüllt, Guards Red, Sheen-Effekt beim Hover) und „Outline“ (Rahmen, Unterstreichung wächst beim Hover von der Mitte nach außen).
- Alle Bewegungsmuster respektieren prefers-reduced-motion und werden dann deaktiviert.
Raster & Abstände
- Container durchgehend max-w-7xl, horizontales Padding px-6 (Mobile) bzw. lg:px-10 (Desktop).
- Eckenradius sehr klein (--radius: 0.125rem ≈ 2px) – Flächen wirken nahezu scharfkantig, deutlich reduzierter als Standard-UI-Radien.
- Sektionen wechseln bewusst zwischen hellen (bg-background/bg-white), invertierten (bg-foreground text-background) und abgesetzten (bg-secondary) Flächen, um Rhythmus zu erzeugen.
- Der PageHero-Baustein (Eyebrow, große Bebas-Headline, Subline, Progress-Linie) ist die zentrale, wiederverwendete Einstiegskomponente für jede Unterseite.
Presse & Anfragen
Für Bildmaterial, Interviewanfragen oder Fragen zur Markenverwendung:
info@justmann-racing.team