[ukimsanov]

What

Light mode in the docs takes the Studio app's own light palette instead of hyperframes.dev's beige ground. Dark mode doesn't change (it's already the app's Night palette).

• Page: the app's warm paper #f2f0ed, replacing the beige and the still image of hyperframes.dev's moving ground.
• Cards, callouts, code blocks: the app's near-white card colour with its card shadow, replacing frosted cream.
• Text: the app's ink levels (--ink, --ink2, --ink3).
• Links: the app's light accent ink (green), replacing hyperframes.dev's deep green.
• Header: frosted paper.
• Catalog pages: their --ve-* colours read the same tokens.
• Kept: the Download pill (ink with paper text), the TT Norms headlines, the code colours from the browser editor, and the darker mid-greys that keep small text readable.

Inspiration page (/examples), two fixes Ular asked for in the same pass:

• The two film rows can be moved by hand. They drifted on a CSS animation inside a clipped box, so nothing could scroll them. Now a script moves them, the same way the homepage showcase does: drag a row, swipe sideways on a trackpad, or shift+wheel. A plain vertical wheel still scrolls the page, a drag doesn't open a film, a click still does, and keyboard focus brings a card into view.
• The remix shelves stack in columns. They were a two- or three-column grid of cards with different shapes, so each grid row stretched to its tallest card and left holes. Now each column stacks its cards with an even 16px gap (masonry). Cards no longer line up across columns; that's the trade-off.

Why

The docs are where people learn the Studio app, and in dark mode they already look like it. In light mode they looked like the website instead: beige, cream cards and a frozen frame of hyperframes.dev's animated ground. A side-by-side on the Quickstart and the CLI reference read calmer and closer to the app on the app's paper (Ular picked it on 26 Oct). Both modes now come from one source: packages/desktop/src/index.css.

How we'll know: a side-by-side of the app and a docs page in light mode reads as one product, and Download Studio clicks from the docs (PostHog docs-navbar source) hold or rise.

Related work

Follows the docs look PR (#6393), which brought dark mode to the app's Night palette and light mode to hyperframes.dev's ground. This replaces the light half. The ground image on static.heygen.ai is no longer used.

How

• docs/custom.css: the light :root tokens take the app's light values (--paper, --card, --field, --ink*, --line*, --accent-ink, --shadow-card). The <html> background image rule is removed. Cards drop their frosted blur for the app's card shadow. Catalog --ve-* values point at the tokens instead of fixed cream and ink.
• Plain code text (GitHub light's default rgb(31, 35, 40), a cool near-black that the earlier mapping missed) now uses the page ink.
• docs/docs.json: the light background is #f2f0ed, and the primary colour is the app's ink as hex (#181716, from oklch(0.205 0.003 70)).
• The mid-grey override stays: the app's own gray-500 would read 4.3:1 on this paper, below the 4.5:1 minimum for small text.
• docs/snippets/film-rows.jsx: the drift, drag, swipe and focus logic is ported from web-marketing's HyperFramesShowcase.tsx (same 6px click-vs-drag threshold, same fling, same "only animate on screen"), adapted to the docs' two rows (90s and 105s per loop, opposite directions). The CSS keyframe drift is removed. The one-preview-at-a-time rule and the pause button are unchanged; the pause button now stops the scripted drift. Reduced motion skips the script and keeps the rows still and natively scrollable.
• docs/snippets/remix-shelf.jsx and custom.css: the shelf is .hf-remix-shelf with CSS columns (columns: 2 16rem, tall shelves 3 9.5rem) and break-inside: avoid on each card.

Test plan

• Contrast on the paper (cards in brackets): ink 15.7:1 (17.2), ink2 8.0:1 (8.8), ink3 5.2:1 (5.7), links 6.3:1 (6.8), mid-grey small text 4.8:1 and up
• Colour inventory of every rendered text, background and border colour on 10 page types in light mode (introduction, quickstart, rendering, CLI reference, catalog, a catalog block, Studio app, vs Remotion, lint rules, changelog): no beige or cream left; see "Colours outside the palette" below
• Manual, in Chrome: Quickstart, Catalog and the CLI reference at 1440px and at phone width (390px) in light and dark. Light is the paper #f2f0ed with no background image; dark is still Night #201e1c; no sideways scroll; 0 page errors
• mint broken-links: no broken links; bun run lint: 0 warnings, 0 errors; deletion guard passes; mint validate passes (docs/ is outside oxfmt via .prettierignore)
• Inspiration in Chrome (1440px): rows drift about 70px/s in opposite directions; a 250px drag moves the row 250px and opens nothing; a sideways swipe moves the row; a vertical wheel scrolls the page; a plain click opens the film; shelves are 2 and 3 columns with every gap 16px (19 and 22 cards); reduced motion: no transform, rows scroll natively; 390px: 1 and 2 columns, no sideways scroll; 0 page errors
• check:docs-snippet-motion and its tests: 14 pass, 0 fail
• Unit tests added/updated (styles and a docs snippet; the motion checks cover the snippet)
• Comments follow CONTRIBUTING.md "Comments"

Colours outside the palette

After the change, these are the only rendered colours not from the app's tokens:

• black and near-black behind videos and film placeholders, plus the dark play button on films (they sit on video);
• grey text inside one catalog block's own live preview (the block's own styling);
• Mintlify's small white icon tiles (#fff, one step lighter than the app's card colour).

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

[mintlify]

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated
hyperframes	🟢 Ready	View Preview	Oct 26, 2026, 11:44 AM

💡 Tip: Enable Automations to automatically generate PRs for you.

[mintlify]

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated
hyperframes	🟡 Building	–	Oct 26, 2026, 11:37 AM

💡 Tip: Enable Automations to automatically generate PRs for you.

[jrusso1020]

We found no blocking issue at this head. The light tokens match Desktop Graphite, measured text/link contrast passes, and sampled hosted Night styling is preserved. Chromium replays cover drag versus click, cancellation, wheel scrolling, reduced motion, offscreen cleanup and single-film playback; all 14 source motion checks pass. We did not measure FPS, GPU cost or physical-phone behavior.

[miguel-heygen]

Independent review at fe6e69217f502b8cd1bdb09cdaca9f4bf5f5e654.

docs/snippets/film-rows.jsx:136 pairs its animation frames, observer and pointer/wheel listeners with teardown; reduced motion bypasses the script and leaves native scrolling. docs/custom.css:60 supplies legible light tokens: independently measured text/link contrast is 15.74, 8.02, 5.20 and 6.25:1 on paper.

Audited all four changed files and the /examples consumers. Read Rames’s full same-head review; no additional blocker found. The hosted Mintlify branch preview was exercised in Chromium: a 200px mouse drag moves the row without opening a film; ordinary mouse click and keyboard Enter open the film, Escape closes it, and only the dialog film plays with sound. Scripted horizontal wheel events move the row and vertical events remain uncancelled. Light/dark samples, 390px layout, column shelves and reduced-motion native scrolling pass. The two changed snippets retain the single-film handoff.

Local exact-source motion guard and all 14 motion-check tests pass. CI snapshot: 24 success, 37 skipped, no failures. No uncaught page errors; the preview’s unchanged GitHub repository/star request returns 403 (logged AxiosError), outside the changed rendering paths. Physical touch/trackpad, FPS/GPU, every docs page and native Desktop were not tested; this is hosted public preview evidence, not production/native acceptance.

Verdict: APPROVE
Reasoning: The palette and interaction changes satisfy the inspected contracts, with passing exact-source checks and hosted route controls. No blocking defect found.

— Magi