JUSTMANN.RACING
    Presse & Corporate Identity

    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.

    Anders als bei justmann.tech gibt es hier noch kein offiziell verabschiedetes Marken-Regelwerk mit exportierten Logo-Dateien – die Wortmarke „JUSTMANN.RACING“ existiert bislang ausschließlich als gesetzter Text (Bebas Neue) und nicht als eigenständige Bilddatei. Diese Seite ist daher bewusst als lebendes Dokument zu verstehen, nicht als final freigegebenes Presskit.

    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).

    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.
    PrimaryOutline

    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.

    Beobachtungen für künftige Arbeiten

    • Es existiert noch kein exportiertes Logo (SVG/PNG) – nur die gesetzte Wortmarke. Für ein echtes Presskit müsste zunächst ein Logo gestaltet und exportiert werden.
    • Die doppelte Rot-Definition (Token vs. hartkodiertes #E30613) sollte vereinheitlicht werden.
    • Diese Seite bildet den Ist-Zustand ab und ist kein offiziell freigegebenes Styleguide-Dokument – Ergänzungen und Korrekturen sind ausdrücklich willkommen.

    Presse & Anfragen

    Für Bildmaterial, Interviewanfragen oder Fragen zur Markenverwendung:

    info@justmann-racing.team