Skip to content

Commit fe9cd30

Browse files
jrusso1020claude
jrusso1020
and
claude
authored
docs: apply HyperFrames design system to Mintlify theme (heygen-com#225)
* 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 89e9cb5. * 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>
1 parent 1c61a0b commit fe9cd30

8 files changed

Lines changed: 491 additions & 621 deletions

File tree

‎.github/workflows/docs.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ on:
99
branches: [main]
1010
paths:
1111
- "docs/**"
12+
- "DOCS_GUIDELINES.md"
1213

1314
concurrency:
1415
group: docs-${{ github.ref }}

‎DESIGN.md‎

Lines changed: 301 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,301 @@
1+
# HyperFrames Design System & Style Guide
2+
3+
Use this guide to configure Mintlify docs or any other platform to match the HyperFrames brand.
4+
5+
---
6+
7+
## Color Palette
8+
9+
### Light Mode
10+
11+
| Token | Hex | Usage |
12+
| ------------------ | --------- | ------------------------------------------------ |
13+
| `--bg` | `#f6f5f1` | Page background |
14+
| `--surface` | `#ffffff` | Cards, panels, elevated surfaces |
15+
| `--surface2` | `#eeedea` | Secondary surfaces, timeline, subtle backgrounds |
16+
| `--border` | `#e0dfdb` | Default borders |
17+
| `--border-light` | `#d0cfcb` | Hover/active borders |
18+
| `--text` | `#1a1a1a` | Primary body text |
19+
| `--text-secondary` | `#6b6b6b` | Secondary/muted text |
20+
| `--text-tertiary` | `#999999` | Tertiary/placeholder text |
21+
| `--heading` | `#0a0a0a` | Headings, nav brand, buttons |
22+
| `--code-bg` | `#ffffff` | Code block backgrounds |
23+
24+
#### Accent Colors (Light)
25+
26+
| Token | Hex | Usage |
27+
| ------------------------ | ----------------------- | ---------------------------- |
28+
| `--accent-green` | `#1a7a0a` | Success, recommended badges |
29+
| `--accent-green-light` | `rgba(26,122,10,0.07)` | Green badge backgrounds |
30+
| `--accent-green-border` | `rgba(26,122,10,0.25)` | Green badge borders |
31+
| `--accent-blue` | `#2563eb` | Links, info badges |
32+
| `--accent-blue-light` | `rgba(37,99,235,0.06)` | Blue badge backgrounds |
33+
| `--accent-blue-border` | `rgba(37,99,235,0.2)` | Blue badge borders |
34+
| `--accent-purple` | `#7c3aed` | Highlights, special elements |
35+
| `--accent-purple-light` | `rgba(124,58,237,0.06)` | Purple badge backgrounds |
36+
| `--accent-purple-border` | `rgba(124,58,237,0.2)` | Purple badge borders |
37+
38+
#### Syntax Highlighting (Light)
39+
40+
| Token | Hex | Usage |
41+
| ---------------------- | --------- | ------------------------------- |
42+
| `--syntax-keyword` | `#9333ea` | Keywords (const, let, function) |
43+
| `--syntax-function` | `#0891b2` | Function names |
44+
| `--syntax-string` | `#16a34a` | Strings, values |
45+
| `--syntax-number` | `#d97706` | Numbers |
46+
| `--syntax-property` | `#6366f1` | Object properties |
47+
| `--syntax-punctuation` | `#aaaaaa` | Brackets, semicolons |
48+
| `--syntax-tag` | `#b45309` | HTML/JSX tags |
49+
| `--syntax-attribute` | `#555555` | HTML attributes |
50+
| `--syntax-comment` | `#bbbbbb` | Comments |
51+
52+
---
53+
54+
### Dark Mode
55+
56+
| Token | Hex | Usage |
57+
| ------------------ | --------- | -------------------------------- |
58+
| `--bg` | `#0a0a0a` | Page background |
59+
| `--surface` | `#141414` | Cards, panels, elevated surfaces |
60+
| `--surface2` | `#1a1a1a` | Secondary surfaces |
61+
| `--border` | `#2a2a2a` | Default borders |
62+
| `--border-light` | `#3a3a3a` | Hover/active borders |
63+
| `--text` | `#e5e5e5` | Primary body text |
64+
| `--text-secondary` | `#a0a0a0` | Secondary/muted text |
65+
| `--text-tertiary` | `#666666` | Tertiary/placeholder text |
66+
| `--heading` | `#f5f5f5` | Headings |
67+
| `--code-bg` | `#141414` | Code block backgrounds |
68+
69+
#### Accent Colors (Dark)
70+
71+
| Token | Hex | Usage |
72+
| ------------------------ | ----------------------- | ---------------------------- |
73+
| `--accent-green` | `#22c55e` | Success, recommended badges |
74+
| `--accent-green-light` | `rgba(34,197,94,0.1)` | Green badge backgrounds |
75+
| `--accent-green-border` | `rgba(34,197,94,0.3)` | Green badge borders |
76+
| `--accent-blue` | `#3b82f6` | Links, info badges |
77+
| `--accent-blue-light` | `rgba(59,130,246,0.1)` | Blue badge backgrounds |
78+
| `--accent-blue-border` | `rgba(59,130,246,0.3)` | Blue badge borders |
79+
| `--accent-purple` | `#a78bfa` | Highlights, special elements |
80+
| `--accent-purple-light` | `rgba(167,139,250,0.1)` | Purple badge backgrounds |
81+
| `--accent-purple-border` | `rgba(167,139,250,0.3)` | Purple badge borders |
82+
83+
#### Syntax Highlighting (Dark)
84+
85+
| Token | Hex | Usage |
86+
| ---------------------- | --------- | -------------------- |
87+
| `--syntax-keyword` | `#c084fc` | Keywords |
88+
| `--syntax-function` | `#22d3ee` | Function names |
89+
| `--syntax-string` | `#4ade80` | Strings, values |
90+
| `--syntax-number` | `#fbbf24` | Numbers |
91+
| `--syntax-property` | `#818cf8` | Object properties |
92+
| `--syntax-punctuation` | `#666666` | Brackets, semicolons |
93+
| `--syntax-tag` | `#fb923c` | HTML/JSX tags |
94+
| `--syntax-attribute` | `#a0a0a0` | HTML attributes |
95+
| `--syntax-comment` | `#555555` | Comments |
96+
97+
---
98+
99+
## Typography
100+
101+
### Font Families
102+
103+
| Token | Stack | Usage |
104+
| ---------------- | ----------------------------------------------------------------------------- | ---------------------- |
105+
| `--font-display` | `'ABC Solar Display', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif` | Headlines, nav brand |
106+
| `--font-body` | `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` | Body text, UI elements |
107+
| `--font-mono` | `'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace` | Code, terminals |
108+
109+
### Google Fonts Import
110+
111+
```css
112+
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap");
113+
```
114+
115+
### Type Scale
116+
117+
| Element | Size | Weight | Letter Spacing | Line Height |
118+
| ---------- | ------------------------------ | ------ | -------------- | ----------- |
119+
| H1 | `clamp(2.6rem, 6vw, 4.5rem)` | 400 | `-0.02em` | 1.0 |
120+
| H2 | `clamp(1.6rem, 3.5vw, 2.2rem)` | 400 | `-0.02em` | 1.2 |
121+
| H3 | `1rem` | 600 | `-0.01em` | 1.4 |
122+
| Body | `1rem` | 400 | `normal` | 1.6 |
123+
| Body Small | `0.95rem` | 400 | `normal` | 1.7 |
124+
| Caption | `0.82rem` | 400 | `normal` | 1.6 |
125+
| Code | `0.75rem` | 400 | `normal` | 1.9 |
126+
| Mono Small | `0.65rem` | 500 | `normal` | 1.6 |
127+
128+
---
129+
130+
## Spacing
131+
132+
| Token | Value | Usage |
133+
| ----- | --------------- | ------------------- |
134+
| `xs` | `0.25rem` (4px) | Tight gaps |
135+
| `sm` | `0.5rem` (8px) | Small gaps |
136+
| `md` | `1rem` (16px) | Default gaps |
137+
| `lg` | `1.5rem` (24px) | Section gaps |
138+
| `xl` | `2rem` (32px) | Large spacing |
139+
| `2xl` | `4rem` (64px) | Section padding |
140+
| `3xl` | `8rem` (128px) | Hero/footer padding |
141+
142+
---
143+
144+
## Border Radius
145+
146+
| Token | Value | Usage |
147+
| ----- | --------------- | ---------------------- |
148+
| `sm` | `4px` | Badges, small elements |
149+
| `md` | `6px` | Buttons, inputs |
150+
| `lg` | `8px` | Cards, panels |
151+
| `xl` | `10px` - `12px` | Large cards |
152+
153+
---
154+
155+
## Shadows & Effects
156+
157+
- **No heavy shadows** — HyperFrames uses a flat, minimal aesthetic
158+
- **Borders over shadows** — Use `1px solid var(--border)` instead of box-shadows
159+
- **Backdrop blur** for nav: `backdrop-filter: blur(12px)`
160+
- **Selection color**: `rgba(128,128,128,0.2)` (light) / `rgba(255,255,255,0.15)` (dark)
161+
162+
---
163+
164+
## Mintlify Configuration
165+
166+
The docs site at `docs/docs.json` implements this design system. Key settings:
167+
168+
```json
169+
{
170+
"theme": "maple",
171+
"colors": {
172+
"primary": "#0a0a0a",
173+
"light": "#f6f5f1",
174+
"dark": "#0a0a0a"
175+
},
176+
"background": {
177+
"color": {
178+
"light": "#f6f5f1",
179+
"dark": "#0a0a0a"
180+
}
181+
},
182+
"fonts": {
183+
"family": "Inter",
184+
"heading": { "family": "Inter" }
185+
},
186+
"appearance": {
187+
"default": "light"
188+
}
189+
}
190+
```
191+
192+
Additional overrides (code font, CSS variables, heading tracking) live in `docs/custom.css`.
193+
194+
---
195+
196+
## Component Patterns
197+
198+
### Cards
199+
200+
```css
201+
.card {
202+
background: var(--surface);
203+
border: 1px solid var(--border);
204+
border-radius: 12px;
205+
overflow: hidden;
206+
transition: border-color 0.2s;
207+
}
208+
209+
.card:hover {
210+
border-color: var(--border-light);
211+
}
212+
```
213+
214+
### Buttons
215+
216+
```css
217+
.btn-primary {
218+
font-size: 0.8rem;
219+
padding: 0.4rem 1rem;
220+
border-radius: 6px;
221+
background: var(--heading);
222+
color: #fff;
223+
font-weight: 500;
224+
}
225+
226+
[data-theme="dark"] .btn-primary {
227+
background: var(--heading);
228+
color: #0a0a0a;
229+
}
230+
```
231+
232+
### Code Blocks / Terminals
233+
234+
```css
235+
.terminal {
236+
background: var(--code-bg);
237+
border: 1px solid var(--border);
238+
border-radius: 8px;
239+
overflow: hidden;
240+
}
241+
242+
.terminal-bar {
243+
display: flex;
244+
gap: 5px;
245+
padding: 10px 14px;
246+
border-bottom: 1px solid var(--border);
247+
}
248+
249+
.terminal-dot {
250+
width: 8px;
251+
height: 8px;
252+
border-radius: 50%;
253+
background: var(--border-light);
254+
}
255+
256+
.terminal-body {
257+
padding: 0.85rem 1.1rem;
258+
font-family: var(--font-mono);
259+
font-size: 0.8rem;
260+
line-height: 1.9;
261+
}
262+
```
263+
264+
### Badges
265+
266+
```css
267+
.badge-green {
268+
color: var(--accent-green);
269+
background: var(--accent-green-light);
270+
border: 1px solid var(--accent-green-border);
271+
}
272+
273+
.badge-blue {
274+
color: var(--accent-blue);
275+
background: var(--accent-blue-light);
276+
border: 1px solid var(--accent-blue-border);
277+
}
278+
279+
.badge-purple {
280+
color: var(--accent-purple);
281+
background: var(--accent-purple-light);
282+
border: 1px solid var(--accent-purple-border);
283+
}
284+
```
285+
286+
---
287+
288+
## Animation Guidelines
289+
290+
- **Duration**: 0.15s - 0.2s for micro-interactions, 0.5s for reveals
291+
- **Easing**: `ease` or `ease-out` for most transitions
292+
- **Hover states**: Use `opacity: 0.85` or border color changes
293+
- **Scroll reveals**: `translateY(20px)` with opacity fade
294+
295+
---
296+
297+
## Brand Assets
298+
299+
- **Logo**: "HyperFrames" in `--font-display` at 600 weight
300+
- **Primary color**: `#0a0a0a` (near-black)
301+
- **Warm neutral palette**: Beige/cream tones, not pure grays

0 commit comments

Comments
 (0)