f1-design

Implements Formula 1 broadcast HUD and telemetry overlay design standards for racing interfaces.

Updated Sep 7, 2026
One-click install
npx skills add https://github.com/grandff/free-iracing-overlay --skill f1-design-grandff
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: f1-design
Source: https://github.com/grandff/free-iracing-overlay/tree/main/skill/f1-design
Command: npx skills add https://github.com/grandff/free-iracing-overlay --skill f1-design-grandff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing an authentic Formula 1 broadcast-style overlay requires deep knowledge of F1's official visual language—timing towers, steering wheel displays, sector colors, and team branding—which is easy to get wrong and end up with generic esports-style skins. ## Core Features & Use Cases - Official F1 Timing Tower Spec: Defines the leaderboard layout with position, driver codes, team color bars, tire compound badges, and fixed-width gap columns. - Cockpit Telemetry Hub: Specifies the 15-segment rev light LED bar, gear box, speed display, DRS/ERS badges, pedal traces, and lap delta pills. - Race Color Semantics: Enforces purple/green/yellow sector timing colors and tire compound colors (soft, medium, hard, intermediate, wet). - Use Case: When building an iRacing overlay widget, apply this standard to render a leaderboard that matches real F1 TV graphics with tabular numerals, carbon slate materials, and team color accents. ## Quick Start Use the f1-design skill to style my leaderboard widget according to the official F1 broadcast timing tower specification.

Frequently Asked Questions about f1-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design an F1-style timing tower leaderboard?

Position a 280-300px panel at the top-left with compact 26-28px rows containing position, three-letter driver codes, tire badges, and fixed-width gap columns. Add 3.5px team color vertical bars and an F1 red header line with a lap counter.

What fonts should I use for F1 broadcast graphics?

Use the official Formula1 font family (Display-Bold, Regular, Wide) if available locally. Fallbacks include Titillium Web for timing towers, Chakra Petch for telemetry digits, and Barlow Condensed for compact labels.

What do purple, green, and yellow sectors mean in F1 timing?

Purple (#B055F5) marks the session overall best time, green (#00D26A) marks a personal best, and yellow/amber (#FFD100) indicates a slower time than the previous lap. These colors apply to sector times and delta badges.

How do I prevent numbers from jittering in a live telemetry HUD?

Apply font-variant-numeric: tabular-nums or font-feature-settings 'tnum' to all lap times, intervals, speed, and RPM values. This guarantees fixed-width digit geometry so layouts stay stable at 60-144Hz update rates.

What colors represent F1 tire compounds?

Soft (S) is red #E10600, medium (M) is yellow #FFD100, hard (H) is white #FFFFFF, intermediate (I) is green #39B54A, and wet (W) is blue #0090FF. Render them as circular badges with a colored ring and letter.