{
  "name": "F1 style",
  "slug": "f1",
  "number": 7,
  "words": {
    "en": "Racing, Telemetry, Precise",
    "ko": "레이싱, 텔레메트리, 정밀함"
  },
  "source": [
    "https://www.formula1.com/en/results/2026/races"
  ],
  "touchpoints": "race broadcasts' timing tower and tyre graphics, the onboard display (shift lights, gear readout, dials), circuit maps with sector and mini-sector colours, speed and delta traces, pit boards and official timing documents",
  "sample": {
    "url": "https://styles.vizney.com/f1/",
    "data": "stints.csv",
    "topic": "Race debrief of Vizney Racing, a fictional team in a fictional 22-round series: rounds 16 Denver, 17 Seattle and 18 Boston, 20 cars, ours are car 27 (MAR) and car 12 (REY). Times in seconds, points 25-18-15-12-10-8-6-4-2-1"
  },
  "colors": {
    "canvas": {
      "hex": "#000000",
      "role": "page background, header and footer (formula1.com results pages put black and #15151e side by side, measured)"
    },
    "card": {
      "hex": "#15151e",
      "role": "every panel: figures, tables and the workbench sit on #15151e with 8px corners, no border and no shadow (formula1.com results panels, measured); the onboard display is a deeper #0d0d14 face with a 1px #303037 rim and 24px corners"
    },
    "plot": {
      "hex": "#15151e",
      "role": "chart background: the card itself, never a second panel"
    },
    "raise": {
      "hex": "#1c1c25",
      "role": "our rows in the timing tower and the bench, pit-cycle shading in Figure 3, the tooltip (formula1.com raised panel #1c1c25, measured)"
    },
    "sunk": {
      "hex": "#0d0d14",
      "role": "the onboard display's face, the circuit's track band, the code window and package panel, the rounds-to-go band, bar tracks in tables"
    },
    "hair": {
      "hex": "#303037",
      "role": "row rules and gridlines (formula1.com table rules, 1px #303037, measured)"
    },
    "rule": {
      "hex": "#47464c",
      "role": "header rules, position-box outlines, axis ticks, the neutral status band (formula1.com #47464c, measured)"
    },
    "ink": {
      "hex": "#ffffff",
      "role": "titles, values, our cars (the subject), the selected round and position boxes, the focus ring"
    },
    "body": {
      "hex": "#d9d9df",
      "role": "body text and table values (12.9:1 on the card)"
    },
    "muted": {
      "hex": "#aaaaaa",
      "role": "axis ticks, notes, subtitles and turn numbers (7.8:1 on the card)"
    },
    "text-2": {
      "hex": "#aaaaaa",
      "role": "labels, table heads and keys in condensed capitals (formula1.com table heads #aaaaaa, measured)"
    },
    "best": {
      "hex": "#8c51d9",
      "role": "purple: fastest of the race, as on timing screens. White text on it 4.9:1"
    },
    "good": {
      "hex": "#04a97a",
      "role": "green: improved, personal best, target or plan met. Text on it #15151e, 6.0:1"
    },
    "missed": {
      "hex": "#b88c19",
      "role": "yellow: target or plan missed, slower than before. Text on it #15151e, 5.9:1"
    },
    "focus": {
      "hex": "#ffffff",
      "role": "focus ring, 2px with a 2px offset"
    }
  },
  "data": {
    "surface": "#15151e",
    "categorical": [
      {
        "name": "soft (S)",
        "hex": "#cc3336",
        "text": "#ff8f87"
      },
      {
        "name": "medium (M)",
        "hex": "#b88c19",
        "text": "#f2c94c"
      },
      {
        "name": "hard (H)",
        "hex": "#d9dce2",
        "text": "#d9dce2"
      }
    ],
    "reference": [
      "#8c51d9"
    ],
    "other": "#5f6270",
    "comparison": "#aaaaaa",
    "marks": {
      "subject": "#ffffff",
      "second": "#b9bcc6",
      "rival": "#8b8f99",
      "grid": "#303037",
      "baseline": "#47464c",
      "target": "#ffffff",
      "best": "#8c51d9",
      "track": "#0d0d14",
      "hover": "#262631",
      "off": "#26262f"
    },
    "sequential": [
      "#5d3c94",
      "#7c54be",
      "#9973df",
      "#b598f2",
      "#d1befe"
    ],
    "diverging": [
      "#bb9ef9",
      "#946ade",
      "#6f4bac",
      "#4a4d57",
      "#7b5f06",
      "#a58108",
      "#d6ab32"
    ],
    "status": {
      "good": "#04a97a",
      "bad": "#b88c19",
      "best": "#8c51d9",
      "neutral": "#47464c"
    },
    "validation": {
      "tool": "dataviz validate_palette.js (OKLab), mode dark, on the card #15151e where every chart sits, run 2026-11-12",
      "status": "purple #8c51d9, green #04a97a, yellow #b88c19 and red #cc3336 pass every check with --pairs all: lightness band 0.48–0.67, chroma ≥ 0.1, worst CVD ΔE 9.7 (yellow↔green, protan; tritan 14.5), worst normal-vision ΔE 17.2, contrast ≥ 3:1. Status always carries a word and ▲/▼ as well",
      "tyres": "soft #cc3336 and medium #b88c19: CVD ΔE 10.5 (deutan), normal 19.8. Hard #d9dce2 is the white of the hard compound on purpose, so it sits above the lightness band and below the chroma floor; it separates from soft and medium by lightness (13.2:1 on the card) and every tyre mark carries its letter S, M or H",
      "subject": "our cars are white #ffffff (car 27) and #b9bcc6 (car 12), every other car #5f6270; a white mark always has a 2px card-colored gap around it",
      "sequential": "one purple hue #5d3c94 → #d1befe (dim to bright, because on a dark card a larger value is brighter): monotone lightness, adjacent ΔL ≥ 0.06, dim end 2.19:1, hue spread 1°",
      "diverging": "faster arm #6f4bac → #bb9ef9 and slower arm #7b5f06 → #d6ab32 each pass the ordinal checks (dim ends 2.83 and 3.01:1, hue spread ≤ 1°); midpoint #4a4d57",
      "text": "label steps on the card: purple #c4b5fd 9.8:1, green #6ee7a8 11.8:1, yellow #f2c94c 11.4:1, red #ff8f87 8.2:1; #aaaaaa 7.8:1"
    }
  },
  "code": {
    "background": "#0d0d14",
    "comment": "#aaaaaa",
    "string": "#6ee7a8",
    "number": "#f2c94c",
    "keyword": "#c4b5fd",
    "function": "#ff8f87",
    "property": "#d9d9df",
    "line-number": "#aaaaaa",
    "highlight": "#262631",
    "caret": "#ffffff",
    "note": "the screen's own text steps (purple keyword, green string, yellow number, red function), all ≥ 4.5:1 on #0d0d14"
  },
  "typography": {
    "sans": {
      "en": "Barlow",
      "ko": "Pretendard",
      "weights": [
        400,
        500,
        600
      ],
      "role": "titles, sentences, notes and table names. Barlow stands in for the broadcast sans; the official Formula 1 typefaces and Titillium Web are not used"
    },
    "display": {
      "en": "Barlow Condensed",
      "ko": "Pretendard",
      "weights": [
        500,
        600,
        700
      ],
      "role": "condensed capitals for labels, tiles and tabs (English only; Korean labels use Pretendard 600 without capitals) and every timing numeral: lap times, gaps, positions, car codes and the onboard display's digits stay Barlow Condensed in Korean too, with tabular figures"
    },
    "mono": {
      "family": "Roboto Mono",
      "weights": [
        400,
        500
      ],
      "role": "code and file names only"
    },
    "links": {
      "google": "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap",
      "pretendard": "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
    },
    "scale": {
      "headline": "31px/600 (ko 27px), line-height 1.22",
      "card-title": "18px/600 (ko 17px)",
      "label": "13.5px/600 condensed capitals, letter-spacing .08em",
      "tower": "17px/500 Barlow Condensed, tabular; our rows 600",
      "body": "15px/400 (ko 14.5px)",
      "note": "12.5px/400",
      "gear": "98px/700 Barlow Condensed, the P at half size and grey: the finishing position in the onboard display",
      "dial": "31px/700 Barlow Condensed in a 240° arc with a 9px stroke; scale ends 12.5px/600 #aaaaaa",
      "readout": "30px/700 Barlow Condensed, unit at 56%"
    }
  },
  "radius": {
    "panel": "8px",
    "display": "24px",
    "tab": "17px",
    "button": "18px",
    "chip": "4px",
    "tooltip": "6px",
    "tyre": "3px",
    "bar": "2px"
  },
  "spacing": {
    "page": "32px",
    "gap": "16px",
    "section": "56px",
    "card": "18px 20px 14px",
    "row": "34px",
    "cell": "0 10px",
    "footer": "22px 32px 36px"
  },
  "layout": {
    "maxWidth": "1400px",
    "columns": 12,
    "header": "60px",
    "maxViewsPerScreen": 7,
    "breakpoints": {
      "wide": 1360,
      "split": 1200,
      "mid": 1024,
      "narrow": 900,
      "phone": 640
    },
    "rows": [
      "header 60px, one line: team and report in condensed capitals, round tabs (pill, the selected one white with black text), EN/KO",
      "first screen, two columns (560px | 1fr): eyebrow (round · city · laps · date, FINAL CLASSIFICATION tag), the result in one or two sentences, the second car and points against plan, then the onboard display; Figure 1 circuit map on the right, the same height",
      "onboard display: 15 shift lights (last 15 laps against the winner: green quicker, yellow slower, dark in- or out-lap), pit stop average dial (2.0–3.5 s, white target tick 2.50), finishing position as the gear readout with ▲ from grid, team points dial (0–43, white plan tick), two readouts below (gap to win, best lap with a purple chip when it is the race's fastest)",
      "Figure 1 circuit map: the track as a dark band, 24 mini-sectors coloured by the best-lap gap to the winner on the diverging ramp, white S/F and sector lines, turn numbers outside, sector and lap gaps in the foot",
      "01 Race: Figure 2 timing tower with tyre stints (1.15) · Figure 3 gap to the winner by lap (1), pit cycles shaded and dashed, tyre strips below",
      "02 Lap: Figure 4 speed trace of both best laps and the running gap below (up = ahead, purple; down = behind, yellow), sector lines, turn numbers, a small circuit with the cursor position",
      "03 Pit lane and season: Figure 5 pit stops · Figure 6 season points; Table 1 stint report (lap bar, average lap, wear bar, best lap chip, stop, note)",
      "04 How it's built · 05 How the numbers are counted · footer"
    ]
  },
  "motion": {
    "ease": "cubic-bezier(.4,0,.2,1)",
    "grow": "0.5s, stints grow from the left, 120ms apart",
    "fade": "0.3s",
    "typing": "55ms per line, 380ms between steps",
    "lights": "0.25s fade, 40ms apart",
    "dial": "0.9s arc draw",
    "map": "0.3s fade per mini-sector, 28ms apart, in lap order"
  },
  "tools": {
    "tableau": {
      "palettes": "f1.tps",
      "fonts": "Tableau Book for text; Barlow and Barlow Condensed only if installed on every viewing machine and the server"
    },
    "powerbi": {
      "theme": "powerbi-theme.json",
      "fontFamily": "Barlow",
      "fallback": "Segoe UI",
      "visual": {
        "background": "card",
        "plot": "card",
        "border": null,
        "radius": 8
      }
    },
    "web": {
      "css": "tokens.css"
    }
  },
  "measured": {
    "date": "2026-11-11, built-in browser, formula1.com/en/results/2026/races and the round pages (race result, qualifying, starting grid, pit stop summary, fastest laps)",
    "page": "surfaces #000000, #15151e and #1c1c25; rules #303037 and #47464c; text #ffffff and #aaaaaa; table heads 14px/600 uppercase #aaaaaa, padding 16px 24px 16px 4px; cells 16px/600, 58px rows, 1px #303037 bottom rule; radii 8px, 50% and 1000px on site chrome",
    "notation": "race time 1:35:23.504; gaps +14.602s; lapped +2 laps; lap times 1:12.689; DNF, DNS, NC; positions P1 in broadcasts",
    "not_used": "logos, the Formula1 display face, Titillium Web, team colors and liveries, photos, real teams, drivers, circuits and results"
  },
  "notice": {
    "en": "Not an official Formula 1 design, and not affiliated with or endorsed by Formula 1. A reference style read from the publicly visible design of formula1.com and public touchpoints such as race broadcasts and timing documents; it carries no logo, typeface, photo or data of theirs. This website is unofficial and is not associated in any way with the Formula 1 companies. F1, FORMULA ONE, FORMULA 1, FIA FORMULA ONE WORLD CHAMPIONSHIP, GRAND PRIX and related marks are trade marks of Formula One Licensing B.V. Trademarks belong to their owners.",
    "ko": "Formula 1의 공식 디자인이 아니며 제휴·승인 관계가 없습니다. 공개된 웹사이트(formula1.com)와 경기 중계·타이밍 문서 등 공개된 접점에서 보이는 디자인을 읽어 낸 참고용 스타일이며 로고·서체·사진·데이터는 포함하지 않습니다. This website is unofficial and is not associated in any way with the Formula 1 companies. F1, FORMULA ONE, FORMULA 1, FIA FORMULA ONE WORLD CHAMPIONSHIP, GRAND PRIX and related marks are trade marks of Formula One Licensing B.V. 상표는 각 소유자의 것입니다.",
    "why": "Formula 1's guidelines ask for this exact sentence. The style, its folder and its slugs carry the F1 name by the owner's decision (2026-11-13); if the rights holder objects, the name, folder and posts change together"
  }
}