novusedge/polished-artifacts/studio

Studio look

Paste tokens.css (this folder) at the top of the page's <style>. Use only its --pa-* tokens. The palette comes from openai.com's primitive colour variables (sampled 2026-10-12 from an archived article): the grey scale for neutrals, and blue, orange, green, purple and pink as the five categories (step 500 or 600 in light, 200 or 300 in dark).

Never

No OpenAI logo, wordmark, product names in headings, or anything that would make the page look like it comes from OpenAI. The site's typeface is proprietary, so tokens.css substitutes Hanken Grotesk from Google Fonts.

Type

• Hanken Grotesk for everything except code. Tight tracking: tokens.css sets -0.01em on body and -0.03em on h1.
• Scale: h1 64/64 weight 500, h2 28/34 weight 500, h3 20/28 weight 500, body 17/28, captions 14/20. Under 768px h1 drops to 40/44.
• Headings never go bold; weight 500 is the heaviest in the page.

Layout

• The header block is centred: a meta line (date, then category in --pa-text-2), the h1, a two-line lede at body size, and at most one pill button. Everything after it is left-aligned.
• Core's page grid (layout.css) with --pa-col 680px and --pa-col-wide 820px. Figures and image-led sections take .pa-span. Spacing only from --pa-space-*; 128px above the first section.
• Motion tokens come from OpenAI's stylesheets (sampled 2026-10-12): its primary curve cubic-bezier(.17, .17, .3, 1), ease-out-quint reveals, an in-out sine to exit, and 200, 300, 400 and 700ms durations. Reveals are slow and large: the long duration, one element at a time.

Surfaces

• --pa-bg is pure white or pure black. --pa-surface holds a note box, a table or a chart, with --pa-radius (8px) corners and 32px padding. No shadows, no borders on surfaces.
• Never a surface inside a surface.

Components

• Buttons are pills (border-radius: 999px), 40px tall: --pa-interactive background with --pa-bg text. A secondary button is --pa-surface with --pa-text text.
• Links: --pa-link with a 1px underline in --pa-text-2, offset 4px.
• "Show all": <summary> as a secondary pill.
• Key figure: the number at 64px weight 500, a 14px label in --pa-text-2 below. No container.

Charts

Recharts with --pa-cat-1…5, 4px rounded bar ends, axis text 14px --pa-text-2, direct <LabelList> labels. Colour lives only in figures; the rest of the page stays black and white. Each chart sits in a --pa-surface panel.

Diagrams

Paste core's mermaid.css after this look's tokens. Add pre.mermaid svg .node rect { rx: 8px; ry: 8px; }.

References

• OpenAI news, the model for the layout
• Hanken Grotesk