Overview

This is the brand spec for any HyperFrames animation embedded in an article on this blog. It exists so a new animation reaches for the site's actual purple/mono identity by default, instead of borrowing whatever color scheme happens to belong to the tool or product the article is about.

The Frame

  • One accent, one register. Pick light or dark for the whole clip and stay there — don't mix the light accent (#7c3aed) with the dark background, or vice versa. Default to the dark register for code/terminal-heavy content (logs, diffs, token counters); it reads better than light-on-white for monospace blocks. Use the light register when the clip is mostly prose/UI, matching the site's default mode.
  • Flat surfaces only. Hairline border (1px solid border), max 6px radius, no drop shadows or gradients — mirrors the theme exactly. The one exception in the source stylesheet is a 3px accent ring on focused form inputs; don't reuse that for anything but an actual focus state.
  • Mono is for chrome, not body copy. JetBrains Mono (with Fira Code / Cascadia Code fallback) is reserved for the site title, eyebrows/kickers, code, and status lines — exactly how the theme uses it. Body and headline text stay in the system sans stack.
  • Status colors are a utility, not brand tokens. error (#c13d55) comes straight from the theme's own .subscribe-error; ok (#4fd18b) has no theme equivalent and is a deliberate, muted addition for pass/fail states — don't promote either to "accent."

Composition Rules

  • Background fills the frame with colors.<register>.bg; content containers use colors.<register>.bg-subtle with a colors.<register>.border hairline — never a third surface color.
  • Titles/eyebrows follow the theme's own casing: eyebrows and kickers are uppercase mono with wide tracking; headlines are sentence case, sans, weight 700–800, tight tracking (-0.02em). Sourced from ghost-theme/assets/css/screen.css, not invented per-project.
  • Keep any pass/fail or diff-style content color-blind-checkable: don't rely on ok/error color alone when the text itself already says "ok"/"FAILED".

Using this spec in a new animation project

  1. Scaffold as usual: npx hyperframes init articles/<slug>/animation --non-interactive --example blank.
  2. Copy this file in: cp hyperframes/frame.md articles/<slug>/animation/frame.md.
  3. hyperframes-creative resolves frame.md first (before design.md/DESIGN.md) and treats its frontmatter as normative brand truth — read it before choosing any color or font by hand.
  4. If the theme's palette in ghost-theme/assets/css/screen.css ever changes, update the colors / typography blocks here first, then re-render any animation that should pick up the change.