mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-08-31 02:41:44 +00:00
James RussoandClaude Opus 4.6
fe9cd301ec
* 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>
142 lines
3.4 KiB
CSS
142 lines
3.4 KiB
CSS
/* HyperFrames Design System — Mintlify Theme Overrides */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
|
|
|
/* ── TT Norms Pro (matches hyperframes.heygen.com) ── */
|
|
|
|
@font-face {
|
|
font-family: 'TT Norms Pro';
|
|
src: url('https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Normal.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TT Norms Pro';
|
|
src: url('https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Medium.woff2') format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TT Norms Pro';
|
|
src: url('https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_DemiBold.woff2') format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TT Norms Pro';
|
|
src: url('https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Bold.woff2') format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* ── Light mode (default) ── */
|
|
|
|
:root {
|
|
--background: #f6f5f1;
|
|
--background-light: #ffffff;
|
|
--surface2: #eeedea;
|
|
--border-color: #e0dfdb;
|
|
--border-color-light: #d0cfcb;
|
|
--text: #1a1a1a;
|
|
--text-secondary: #6b6b6b;
|
|
--text-tertiary: #999999;
|
|
--heading: #0a0a0a;
|
|
--code-bg: #ffffff;
|
|
|
|
--accent-green: #1a7a0a;
|
|
--accent-green-light: rgba(26, 122, 10, 0.07);
|
|
--accent-green-border: rgba(26, 122, 10, 0.25);
|
|
--accent-blue: #2563eb;
|
|
--accent-blue-light: rgba(37, 99, 235, 0.06);
|
|
--accent-blue-border: rgba(37, 99, 235, 0.2);
|
|
--accent-purple: #7c3aed;
|
|
--accent-purple-light: rgba(124, 58, 237, 0.06);
|
|
--accent-purple-border: rgba(124, 58, 237, 0.2);
|
|
|
|
--selection-bg: rgba(128, 128, 128, 0.2);
|
|
}
|
|
|
|
/* ── Dark mode ── */
|
|
|
|
.dark,
|
|
[data-theme="dark"] {
|
|
--background: #0a0a0a;
|
|
--background-light: #141414;
|
|
--surface2: #1a1a1a;
|
|
--border-color: #2a2a2a;
|
|
--border-color-light: #3a3a3a;
|
|
--text: #e5e5e5;
|
|
--text-secondary: #a0a0a0;
|
|
--text-tertiary: #666666;
|
|
--heading: #f5f5f5;
|
|
--code-bg: #141414;
|
|
|
|
--accent-green: #22c55e;
|
|
--accent-green-light: rgba(34, 197, 94, 0.1);
|
|
--accent-green-border: rgba(34, 197, 94, 0.3);
|
|
--accent-blue: #3b82f6;
|
|
--accent-blue-light: rgba(59, 130, 246, 0.1);
|
|
--accent-blue-border: rgba(59, 130, 246, 0.3);
|
|
--accent-purple: #a78bfa;
|
|
--accent-purple-light: rgba(167, 139, 250, 0.1);
|
|
--accent-purple-border: rgba(167, 139, 250, 0.3);
|
|
|
|
--selection-bg: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* ── Typography ── */
|
|
|
|
body {
|
|
font-family: 'TT Norms Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'TT Norms Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
h1, h2 {
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
h3 {
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Code font — IBM Plex Mono (loaded via Google Fonts above) */
|
|
code, pre, pre code, kbd,
|
|
[class*="code"],
|
|
[class*="Code"] {
|
|
font-family: 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;
|
|
}
|
|
|
|
/* ── Code blocks ── */
|
|
|
|
pre {
|
|
background: var(--code-bg) !important;
|
|
border: 1px solid var(--border-color) !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
/* ── Selection ── */
|
|
|
|
::selection {
|
|
background: var(--selection-bg);
|
|
}
|
|
|
|
/* ── Links ── */
|
|
|
|
a:not([class]) {
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
a:not([class]):hover {
|
|
opacity: 0.85;
|
|
}
|