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.
The “JUSTMANN.RACING” wordmark is available as a standalone logo asset in colour, black-and-white and reversed versions. This page documents the approved applications while remaining a living reference for the brand’s continued development.
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).
Logo & wordmark
The wordmark is available in three approved variants. Clear space and proportions must be preserved at every size.
Colour
Black & white
Reversed
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.
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.
Press & enquiries
For imagery, interview requests or questions about brand usage:
info@justmann-racing.team