My first fix was based on a wrong diagnosis. Prose width was not the problem:
Mintlify wraps every image in its zoom component, span[data-rmiz] >
span[data-rmiz-content] > picture.contents > img, so the width I put on a
surrounding div was absorbed by that wrapper and the image still rendered full
width with the card's text pushed out of view. Reading the served markup also
showed the build rewrites Tailwind classes into a mint-* namespace and drops what
it does not recognise, which is why object-right never appeared in the output at
all.
The thumbnail now uses an hf-peek class in custom.css, which collapses the zoom
wrapper and sizes the box directly. Custom classes survive the rewrite; utilities
are not dependable for anything load-bearing. Both findings are in AGENTS.md,
including the note that videos are not wrapped - which is why the identical card
on the quickstart worked with a video and failed with an image.
At this column width the breakout rendered 968px and dominated the page instead
of supporting it. The film is back inside a Frame at the column width. The part
worth keeping was the motion, not the size: it still autoplays muted on a loop
rather than sitting behind a play button, so the page is already moving when it
loads. Removed the now-unused wrapper CSS rather than leaving a dead rule.
The wrapper measured 609px tall against a 545px film - the theme's prose styles
apply a 2em margin to media, which rendered as a 64px black band above and below
it. Zeroed the margin inside the hero wrapper.
The film now reaches into the shell padding so it reads edge to edge, and it
autoplays muted on a loop instead of waiting behind a play button. Motion is
pre-attentive - the eye goes to it before any text is read - so a page that is
already moving answers 'what is this?' faster than a poster the reader has to
decide to click. Controls stay available for scrubbing and for unmuting once a
film with a real audio track is hosted.
Not implemented as 100vw: this column is not centred in the viewport because the
sidebar is a flex sibling, so the usual margin-left: calc(50% - 50vw) breakout
would sit off-centre. Noted in the CSS.
Checked it on the live preview instead of assuming: a whole guide page renders
about three <p> elements, because the content is lists, tables, cards, and code.
The selector matched one of them — the page description in the header — so the
rule capped nothing while reading as though it were load-bearing. Removed it and
corrected the width note in AGENTS.md, which claimed prose was held near 80
characters. The column measures 888px at 1600 and 1048px at 1920.
The previous attempt raised max-width on the article shell, which did nothing
visible: the shell was never hitting that cap. Measuring the chain showed the
left sidebar sits inside #body-content, whose max-w-8xl (1472px) was the binding
limit — 1432 inner minus a 287px sidebar minus 128px of shell padding minus 352px
of contents rail and gap lands on exactly the 664px column that was rendering.
Raising #body-content, dropping the shell cap, trimming the left padding, and
holding the contents rail to the 16rem it actually uses gives a measured column
of 728px at 1440, 888px at 1600, and 1048px at 1920 — the last of which was
previously stuck at 664 no matter how wide the display. No horizontal overflow at
any of those widths. Setting a width on #content-area is pointless, as it is a
flex item with grow that just fills the remainder; noted in the comment so the
next person does not repeat it.
Navigation: Start here now holds exactly the four entry points a person can be
sent - what it is, make one, choose a workflow, and the Studio overview. The
three pages that were sitting in it went where they belong: the project tour is
conceptual so it moved to Learn, authentication is configuration so it moved to
Developers, and the hosted AI-chat route is a creation surface so it moved to
Create with an agent.
Width: the theme capped the article shell at 72rem and reserved 28rem of every
wide viewport for the contents rail, leaving the reading column at ~664px on a
1600px screen - narrower than the 16:9 video the pages are supposed to show.
Raised the shell and returned 9rem from the gutter, taking the column to roughly
950px. Running prose is held near 80 characters because longer lines measurably
hurt reading; tables, cards, code, and media use the full width. Added .hf-wide
for visuals that should escape the measure entirely.
Components: the quickstart source chooser is now Tabs, which is what parallel
variants of one instruction want, and the help symptoms are visible sections with
their own anchors so support can link a symptom directly instead of the hub.
Wrote the doctrine into AGENTS.md - one component per job, cards never point at
anchors on their own page, no diagram that restates adjacent prose, and the rules
for custom React snippets (named exports, no third-party packages, no CDN).
The code-font rule also matched [class*="code"] and [class*="Code"], which
selects any element whose class merely contains that substring. Every Accordion
wrapper carries the Tailwind utility dark:bg-codeblock, so the whole accordion
inherited IBM Plex Mono: titles and body prose rendered as monospace, which read
like terminal output instead of sentences. This affected every accordion on the
site, including the source chooser that already existed on the quickstart page.
Scoped the rule to real code elements; syntax tokens inherit from pre.
Also reverted the workflow chooser to cards. Collapsing eight situations into
grey accordion rows removed duplication but made the page less inviting to scan,
and the eight starter requests it carried were a third copy - every workflow
guide already contains its own. The cards now link straight to those guides
rather than to anchors further down the page.
The `Copy page` dropdown panel rendered with a transparent background in
light mode because `docs/custom.css` defined `--background-light: #ffffff`
on `:root`. Mintlify's Maple theme owns that variable as a Tailwind color
(space-separated RGB used via `rgb(var(--background-light)/<alpha>)`), so
the hex override produced invalid CSS like `rgb(#ffffff/1)` and the
dropdown's `bg-background-light` class fell back to transparent. Dark
mode was unaffected because the dropdown panel uses `bg-background-dark`,
which custom.css didn't redefine.
Namespaced every custom variable with `--hf-` to make collisions
impossible, and updated the two consumers (`pre`, `::selection`, link
color in custom.css; `.tpl-card:hover` border in template-gallery.css).
* docs: apply HyperFrames design system to Mintlify theme
Update docs config and add custom CSS to match the HyperFrames brand:
- Switch theme from mint to maple, replace cyan palette with warm neutrals
- Add Inter (body/headings) and IBM Plex Mono (code) fonts
- Add custom.css with full light/dark mode CSS variables
- Default to light mode appearance
- Replace box-shadow hover effects with border-color (flat aesthetic)
- Add DESIGN.md to repo root as design system reference
- Fix docs CI to also trigger on DOCS_GUIDELINES.md pushes to main
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* docs: replace HeyGen logo with HyperFrames text wordmark
Replace 41KB HeyGen SVG logos with lightweight (~400B) text-based SVGs
rendering "HyperFrames" in Inter semibold with tight tracking, matching
the wordmark style on hyperframes.heygen.com.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* docs: use ABC Solar Display font for logo wordmark
Match the exact font rendering from hyperframes.heygen.com:
- Load ABC Solar Display Bold from HeyGen static assets CDN
- SVGs use 15.2px/600w/-0.15 letter-spacing (matches computed styles)
- Dark mode fill matches rgb(240,240,240) from the website
- Add @font-face in custom.css for site-wide availability
- Fix lefthook: remove css from oxfmt glob (oxfmt doesn't support CSS)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* docs: convert logo SVGs to outlined paths
SVG <text> elements don't render custom fonts when loaded as <img>
(browser security restriction). Convert the ABC Solar Display glyphs
to SVG paths extracted from the font outlines — renders identically
everywhere with zero font dependency. Remove @font-face for the
display font from custom.css since it's no longer needed.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* docs: constrain logo height to match website sizing
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Revert "docs: constrain logo height to match website sizing"
This reverts commit 89e9cb598e.
* docs: switch body font from Inter to TT Norms Pro
Use TT Norms Pro (from HeyGen static assets CDN) to match
hyperframes.heygen.com. Loads weights 400-700 via @font-face
with Inter as fallback.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ukimsanov