mirror of https://github.com/hanzoai/frames.git synced 2026-09-24 00:08:03 +00:00

Files

T

zooqueenandHanzo Dev 70b41673a3 frames: rebrand the fork to Hanzo Frames

Forked from HyperFrames (Apache-2.0), full history preserved.

Hosts are mapped explicitly and BEFORE the identifier rename, because
hyperframes.heygen.com is not decoration: 175 of its occurrences are $schema
identifiers that a validator dereferences. A blind rename would have left them
naming a host that never serves them. The schema files are in this repo under
docs/schema, so the mapped host is one we can actually serve -- that is the
condition that makes the rewrite safe, and serving them is a deploy task, not
an edit. docs/schema/hyperframes.json is renamed to frames.json to match the
identifier it is now published under.

api.heygen.com and the CLI auth against heygen.com are left UNRENAMED on
purpose. They are a dependency on HeyGen's SaaS, not a name of ours to take,
and the right move is to remove that integration rather than rebrand it.

LICENSE and CREDITS.md are untouched; NOTICE records the lineage.

Co-authored-by: Hanzo Dev <[email protected]>

2026-07-28 23:42:24 -07:00

11 KiB

Raw Blame History

Frames Design System & Style Guide

Use this guide to configure Mintlify docs or any other platform to match the Frames brand.

Color Palette

Light Mode

Token	Hex	Usage
`--bg`	`#f6f5f1`	Page background
`--surface`	`#ffffff`	Cards, panels, elevated surfaces
`--surface2`	`#eeedea`	Secondary surfaces, timeline, subtle backgrounds
`--border`	`#e0dfdb`	Default borders
`--border-light`	`#d0cfcb`	Hover/active borders
`--text`	`#1a1a1a`	Primary body text
`--text-secondary`	`#6b6b6b`	Secondary/muted text
`--text-tertiary`	`#999999`	Tertiary/placeholder text
`--heading`	`#0a0a0a`	Headings, nav brand, buttons
`--code-bg`	`#ffffff`	Code block backgrounds

Accent Colors (Light)

Token	Hex	Usage
`--accent-green`	`#1a7a0a`	Success, recommended badges
`--accent-green-light`	`rgba(26,122,10,0.07)`	Green badge backgrounds
`--accent-green-border`	`rgba(26,122,10,0.25)`	Green badge borders
`--accent-blue`	`#2563eb`	Links, info badges
`--accent-blue-light`	`rgba(37,99,235,0.06)`	Blue badge backgrounds
`--accent-blue-border`	`rgba(37,99,235,0.2)`	Blue badge borders
`--accent-purple`	`#7c3aed`	Highlights, special elements
`--accent-purple-light`	`rgba(124,58,237,0.06)`	Purple badge backgrounds
`--accent-purple-border`	`rgba(124,58,237,0.2)`	Purple badge borders

Syntax Highlighting (Light)

Token	Hex	Usage
`--syntax-keyword`	`#9333ea`	Keywords (const, let, function)
`--syntax-function`	`#0891b2`	Function names
`--syntax-string`	`#16a34a`	Strings, values
`--syntax-number`	`#d97706`	Numbers
`--syntax-property`	`#6366f1`	Object properties
`--syntax-punctuation`	`#aaaaaa`	Brackets, semicolons
`--syntax-tag`	`#b45309`	HTML/JSX tags
`--syntax-attribute`	`#555555`	HTML attributes
`--syntax-comment`	`#bbbbbb`	Comments

Dark Mode

Token	Hex	Usage
`--bg`	`#0a0a0a`	Page background
`--surface`	`#141414`	Cards, panels, elevated surfaces
`--surface2`	`#1a1a1a`	Secondary surfaces
`--border`	`#2a2a2a`	Default borders
`--border-light`	`#3a3a3a`	Hover/active borders
`--text`	`#e5e5e5`	Primary body text
`--text-secondary`	`#a0a0a0`	Secondary/muted text
`--text-tertiary`	`#666666`	Tertiary/placeholder text
`--heading`	`#f5f5f5`	Headings
`--code-bg`	`#141414`	Code block backgrounds

Accent Colors (Dark)

Token	Hex	Usage
`--accent-green`	`#22c55e`	Success, recommended badges
`--accent-green-light`	`rgba(34,197,94,0.1)`	Green badge backgrounds
`--accent-green-border`	`rgba(34,197,94,0.3)`	Green badge borders
`--accent-blue`	`#3b82f6`	Links, info badges
`--accent-blue-light`	`rgba(59,130,246,0.1)`	Blue badge backgrounds
`--accent-blue-border`	`rgba(59,130,246,0.3)`	Blue badge borders
`--accent-purple`	`#a78bfa`	Highlights, special elements
`--accent-purple-light`	`rgba(167,139,250,0.1)`	Purple badge backgrounds
`--accent-purple-border`	`rgba(167,139,250,0.3)`	Purple badge borders

Syntax Highlighting (Dark)

Token	Hex	Usage
`--syntax-keyword`	`#c084fc`	Keywords
`--syntax-function`	`#22d3ee`	Function names
`--syntax-string`	`#4ade80`	Strings, values
`--syntax-number`	`#fbbf24`	Numbers
`--syntax-property`	`#818cf8`	Object properties
`--syntax-punctuation`	`#666666`	Brackets, semicolons
`--syntax-tag`	`#fb923c`	HTML/JSX tags
`--syntax-attribute`	`#a0a0a0`	HTML attributes
`--syntax-comment`	`#555555`	Comments

Typography

Font Families

Token	Stack	Usage
`--font-display`	`'ABC Solar Display', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif`	Headlines, nav brand
`--font-body`	`'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`	Body text, UI elements
`--font-mono`	`'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace`	Code, terminals

Google Fonts Import

@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");

Type Scale

Element	Size	Weight	Letter Spacing	Line Height
H1	`clamp(2.6rem, 6vw, 4.5rem)`	400	`-0.02em`	1.0
H2	`clamp(1.6rem, 3.5vw, 2.2rem)`	400	`-0.02em`	1.2
H3	`1rem`	600	`-0.01em`	1.4
Body	`1rem`	400	`normal`	1.6
Body Small	`0.95rem`	400	`normal`	1.7
Caption	`0.82rem`	400	`normal`	1.6
Code	`0.75rem`	400	`normal`	1.9
Mono Small	`0.65rem`	500	`normal`	1.6

Spacing

Token	Value	Usage
`xs`	`0.25rem` (4px)	Tight gaps
`sm`	`0.5rem` (8px)	Small gaps
`md`	`1rem` (16px)	Default gaps
`lg`	`1.5rem` (24px)	Section gaps
`xl`	`2rem` (32px)	Large spacing
`2xl`	`4rem` (64px)	Section padding
`3xl`	`8rem` (128px)	Hero/footer padding

Border Radius

Token	Value	Usage
`sm`	`4px`	Badges, small elements
`md`	`6px`	Buttons, inputs
`lg`	`8px`	Cards, panels
`xl`	`10px` - `12px`	Large cards

Shadows & Effects

No heavy shadows — Frames uses a flat, minimal aesthetic
Borders over shadows — Use 1px solid var(--border) instead of box-shadows
Backdrop blur for nav: backdrop-filter: blur(12px)
Selection color: rgba(128,128,128,0.2) (light) / rgba(255,255,255,0.15) (dark)

Mintlify Configuration

The docs site at docs/docs.json implements this design system. Key settings:

{
  "theme": "maple",
  "colors": {
    "primary": "#0a0a0a",
    "light": "#f6f5f1",
    "dark": "#0a0a0a"
  },
  "background": {
    "color": {
      "light": "#f6f5f1",
      "dark": "#0a0a0a"
    }
  },
  "fonts": {
    "family": "Inter",
    "heading": { "family": "Inter" }
  },
  "appearance": {
    "default": "light"
  }
}

Additional overrides (code font, CSS variables, heading tracking) live in docs/custom.css.

Component Patterns

Cards

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.card:hover {
  border-color: var(--border-light);
}

Buttons

.btn-primary {
  font-size: 0.8rem;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  background: var(--heading);
  color: #fff;
  font-weight: 500;
}

[data-theme="dark"] .btn-primary {
  background: var(--heading);
  color: #0a0a0a;
}

Code Blocks / Terminals

.terminal {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.terminal-bar {
  display: flex;
  gap: 5px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.terminal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-light);
}

.terminal-body {
  padding: 0.85rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.9;
}

Badges

.badge-green {
  color: var(--accent-green);
  background: var(--accent-green-light);
  border: 1px solid var(--accent-green-border);
}

.badge-blue {
  color: var(--accent-blue);
  background: var(--accent-blue-light);
  border: 1px solid var(--accent-blue-border);
}

.badge-purple {
  color: var(--accent-purple);
  background: var(--accent-purple-light);
  border: 1px solid var(--accent-purple-border);
}

Animation Guidelines

Duration: 0.15s - 0.2s for micro-interactions, 0.5s for reveals
Easing: ease or ease-out for most transitions
Hover states: Use opacity: 0.85 or border color changes
Scroll reveals: translateY(20px) with opacity fade

Brand Assets

Logo: "Frames" in --font-display at 600 weight
Primary color: #0a0a0a (near-black)
Warm neutral palette: Beige/cream tones, not pure grays

11 KiB Raw Blame History