Skip to main content

​
Design Language Document: Tracing Insights F1 Web

This document provides a comprehensive overview of the design patterns, tokens, and code conventions used in the Tracing Insights F1 Web codebase. It is optimized for use by AI/LLMs during code generation.

​
1. Design Tokens

​
🎨 Color Palette

The system uses DaisyUI v4 semantic tokens within Tailwind CSS v3. The primary theme is mytheme, but team-specific themes are also defined. Standard Semantic Tokens:
  • --p (primary): #00ff00 (Tracing Insights Green)
  • --s (secondary): #ff00ff
  • --a (accent): #F471B5
  • --n (neutral): #1E293B
  • --b1 (base-100): #002451 (Deep Navy)
  • --in (info): #0CA5E9
  • --su (success): green
  • --wa (warning): orange
  • --er (error): red
Team Themes (Sample Values):
  • mercedes: primary #00d2be
  • ferrari: primary #e6194b
  • mclaren: primary #f58231
  • redbull: primary #ffe119

​
Typography

The system uses a mix of display and body fonts.
  • Display/Metal Heading: Bebas Neue (font-metalfont, font-sans). High-impact, uppercase style for titles and callouts.
  • Body Text: Roboto (font-roboto). Used for general readability and paragraphs.
  • Logo/Script: Great Vibes (font-logofont). Used sparingly for branding.

​
Spacing & Borders

  • Spacing Scale: Standard Tailwind scale (e.g., p-4, m-8, gap-6).
  • Border Radius: rounded-lg (default for cards), rounded-full (for pills/buttons), rounded-box (standard DaisyUI containers).
  • Shadows: shadow-xl (standard), shadow-primary/20 (glow effect for primary elements).

​
2. Layout System

​
Containers

  • Primary Container: container mx-auto max-w-1200
  • Article/Detail: mx-auto max-w-2xl (for reading focus)

​
Grid System

  • Listings: Standard responsive grid pattern: 
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

​
Breakpoints

The system adheres to standard Tailwind breakpoints:
  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px

​
3. Component Patterns

​
Cards (Tracing Insights Style)

Used for listing blog posts and analysis items.
  • Structure: card h-full bg-[#011627]/90 shadow-xl border border-primary/40 overflow-hidden
  • Interaction: hover:border-primary transition-all duration-300 transform hover:-translate-y-2 hover:shadow-primary/20 hover:shadow-2xl
  • Internal Elements: figure for images (with group-hover:scale-110), card-body for content.

​
Buttons

  • Standard: btn (DaisyUI).
  • Primary: btn btn-primary text-base-100.
  • Transitions: transform transition hover:scale-105 hover:shadow-md.

​
Selects & Controls

  • TomSelect Implementation: Standard selection UI used for year/event/driver filtering. 
    new TomSelect("#id", { plugins: ["dropdown_input", "remove_button"], ... });

​
Banners / Notifications

  • Animations: 
    <section class="opacity-0 -translate-y-2.5 transition-all ease-out bg-black ...">
  • States: Uses .hidden or opacity-0 with JavaScript for toggling.

​
4. Motion & Interaction

​
Standard Motion

  • Transitions: transition-all duration-300 ease-in-out (applied to cards, links, and buttons).
  • Banner Entrance: opacity-0 -translate-y-2.5 transitioning to opacity-100 translate-y-0.

​
Micro-interactions

  • Hover Scale: group-hover:scale-110 for images in cards.
  • Vertical Hover: hover:-translate-y-2 for interactive cards.
  • Pulse: animate-ping (standard DaisyUI) for live indicators.

​
5. Code Conventions

​
Django Template Structure

  • Base Extension: {% extends "base.html" %}.
  • Block Organization:
    • head: For page-specific meta tags and stylesheets.
    • content: Primary page body.
    • site_header: (Optional) Overrides for navigation.

​
Component Co-location

  • Small reusable HTML snippets are located in hf/templates/components/.
  • JavaScript state often resides in <script> tags at the bottom of templates or in hf/static/js/.

​
6. Usage Rules (LLM Instructions)

  1. Prefer Semi-Custom Cards: When creating cards, always wrap a DaisyUI .card in a group and apply hover:-translate-y-2 border-primary/40 hover:border-primary.
  2. Standard Containers: For main page content, wrap in <div class="container mx-auto max-w-1200">. For long-form text, use max-w-2xl.
  3. Typography Roles: Use font-metalfont (Bebas Neue) for H1-H3 headers and font-roboto for body content.
  4. Semantic Colors Only: Never hardcode colors like #00ff00. Use text-primary, bg-primary, or border-secondary.
  5. DaisyUI Hierarchy: Use .tabs-boxed for tabbed navigation and .navbar for headers.
  6. Animated Entrance: For banners or new sections, use opacity-0 -translate-y-2.5 with a DOMContentLoaded script to trigger opacity-100 translate-y-0.

​
⚠️ Inconsistencies

  • Container Max-Widths: Inconsistent usage of max-w-1200 vs max-w-7xl across listing pages. Rule: Prefer max-w-1200 for the main dashboard and max-w-2xl for articles.
  • Card Styling: Some cards use bg-[#011627]/90 while others use bg-base-100/20. Rule: Use bg-[#011627]/90 for primary content cards.
  • Inconsistent Buttons: Some buttons use manual bg-secondary instead of the DaisyUI .btn-secondary component class. Rule: Always use .btn.