JUSTMANN.RACING
    Press & Corporate Identity

    Media

    Colours, typefaces, motion patterns and imagery of the Justmann Racing Team, documented from the currently live website.

    About this page

    This page summarises the visual identity of justmann-racing.team as currently implemented in code. It serves as a reference for press, partners, and for further development of the site itself.

    Unlike justmann.tech, there is no formally approved brand guideline with exported logo files yet – the “JUSTMANN.RACING” wordmark currently exists only as set type (Bebas Neue), not as a standalone image asset. Treat this page as a living document rather than a finalised press kit.

    Colour palette

    Values taken 1:1 from src/index.css. Guards Red is the single accent colour – the name is deliberate, echoing the classic Porsche “Guards Red” also seen on the cars shown on the site.

    Light mode (default)

    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.

    Dark mode (.dark, not active by default)

    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.

    Typography

    Two typefaces, both loaded via Google Fonts (see the @import in index.css). No third face is in use.

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

    Imagery

    • Consistently full-colour, high-contrast motorsport photography – cars in motion, track atmosphere, dark backgrounds with focused light.
    • A deliberate contrast to justmann.tech: that site is dominated by black-and-white portraiture, this one by warm, colourful racing and workshop imagery.
    • Image ratios in code are mostly 4:3 or generous 16:9 hero crops, always rendered with object-cover.
    • No imagery is currently offered as a separate press download package – enquiries go through the contact address below.

    Interaction & motion

    Referred to in the code as the “Precision Instrument” motion system (see the comment in index.css).

    • Hero elements appear staggered (hero-reveal-1 to -4): fade-in plus a slight rise, offset 0–500ms.
    • The eyebrow label is accompanied by a thin vertical accent bar in Guards Red that grows upward on entry.
    • Hero images use a very slow, alternating Ken Burns zoom (28s) for subtle liveliness.
    • A thin animated progress line in Guards Red runs left to right beneath every PageHero.
    • Two button variants: “primary” (filled Guards Red, sheen effect on hover) and “outline” (bordered, underline grows outward from the centre on hover).
    • All motion respects prefers-reduced-motion and is disabled accordingly.
    PrimaryOutline

    Grid & spacing

    • Containers consistently use max-w-7xl, with horizontal padding px-6 (mobile) / lg:px-10 (desktop).
    • Corner radius is very small (--radius: 0.125rem ≈ 2px) – surfaces read as near-sharp, well below typical UI defaults.
    • Sections deliberately alternate between light (bg-background/bg-white), inverted (bg-foreground text-background) and raised (bg-secondary) surfaces to create rhythm.
    • The PageHero block (eyebrow, large Bebas headline, subline, progress line) is the central, reused entry component for every sub-page.

    Notes for future work

    • No exported logo (SVG/PNG) exists yet – only the set wordmark. A real press kit would first need a designed, exported logo.
    • The duplicate red definition (token vs. hardcoded #E30613) should be unified.
    • This page reflects the current state and is not a formally approved style guide – additions and corrections are explicitly welcome.

    Press & enquiries

    For imagery, interview requests or questions about brand usage:

    info@justmann-racing.team