​

Design Language Document: Tracing Insights F1 Web

This document describes the design patterns, tokens, and code conventions of the Tracing Insights F1 Web codebase. It is written for use by AI and LLM tools 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.