yzlnew/infra-skills/openai-dotcom-viz

OpenAI dotcom figures

Reproduce the two figure types OpenAI uses in its posts, as self-contained HTML/SVG (no Vega, D3, Mermaid, or build step):

1. Bar charts — grouped or single-series. → see "Bar charts" below.
2. Flow / process diagrams — e.g. the "Quality assurance pipeline". → see

"Flow diagrams" below.

Both share one design system: the real OpenAI Sans font (loaded from OpenAI's public CDN), near-black ink #0d0d0d, and a pink accent. The full color palette (6 hues × 5 shades) and token rules are in references/design-spec.md — read it when you need extra hues, more series, or to theme surrounding page elements so everything reads as one system.

Bar charts

Use the bundled renderer assets/openai-chart.js — a zero-dependency function that draws the chart into an <svg> from a data spec. It injects the font + the chart styles itself, so a <script src> plus a spec is all a page needs.

<script src="assets/openai-chart.js"></script>
<svg id="chart"></svg>
<script>
renderOpenAIBarChart("#chart", {
  title: "Share of Dataset Flagged by Issue Type",
  yAxisTitle: "Percent of total dataset",
  valueFormat: "percent",            // values are fractions (0.144 -> "14.4%")
  yMax: 0.20, yTickStep: 0.05,
  categories: ["Overly strict\ntests", "Low-coverage\ntests", /* … */],  // \n wraps a label
  series: [
    { name: "Human supervised agent review", values: [0.144, 0.041, /* … */] },
    { name: "Human annotations",             values: [0.178, 0.094, /* … */] }
  ]
});
</script>

Colors auto-assign from the palette, so you usually pass only names + values. assets/chart-example.html reproduces the reference figure.

Spec fields: categories (use \n to wrap), series[] ({name, values[], fill?, stroke?}), title, yAxisTitle, valueFormat ("percent" default | "number" | fn), yMax, yTickStep/yTicks, width/height, bottomMargin (raise if labels clip), legend:false, palette (override colors). The look — one-hue bars with a darker same-hue stroke, rounded rects, black y-axis with ticks and no gridlines, circle legend left-aligned to the axis, value labels above bars, −45° category labels — is baked in.

Flow diagrams

These are hand-arranged, not generated (branching/alignment are judgement calls). The skill gives you the primitives and the look; you assemble the layout. Include assets/openai-figure.css, wrap the diagram in <div class="oai-figure">, add the arrow marker once, and compose from .box / .subbox / .pill / .conn. Copy assets/flow-example.html (a complete working pipeline) as a start.

Read references/flow-diagram.md for: the primitives, the open-chevron arrow marker, rounded-corner connector recipes, and the column layout approach. Key style points: rounded boxes + 1.5px black keylines, monospace UPPERCASE pills (.pill, .pill.accent = solid pink, .pill.dotted = stippled pink), thin open-chevron connectors (never filled triangles), rounded corners on turns, and a dashed shaft for a negative/"did-not-happen" branch.

Gotcha: never put a literal three-dash arrow inside an HTML comment — the -->

inside it closes the comment early and leaks text onto the page.

Fonts & offline

OpenAI Sans loads over the network from cdn.openai.com (CORS-open). For strictly offline/print output, download the four weights (OpenAISans-{Regular,Medium,Semibold,Bold}.woff2 under https://cdn.openai.com/common/fonts/openai-sans/) and inline them as base64 @font-face src:url(data:font/woff2;base64,…), replacing the CDN URLs. Otherwise it falls back to Helvetica/Arial — close but not exact. (OpenAI's monospace, used for pill labels, is not on the public CDN; a generic monospace matches the look.)

Verifying output

Render headless and eyeball it (give the font time to load, or you'll snapshot the fallback):

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless --disable-gpu --hide-scrollbars --window-size=1000,760 \
  --screenshot=out.png --virtual-time-budget=3500 "file://$PWD/figure.html"