Setting the file. One moment.
Skill 22 · Hyperframes Creative
Subchapter 22.16
references/visual-styles.mdMarkdown12 KBView on GitHub
Named visual identities for HyperFrames videos. Each style is grounded in a real graphic design tradition and expressed as a DESIGN.md-compatible token block. Use them as starters — copy the YAML into your project’s design.md front matter, then customize.
How to pick: Match mood first, content second. Ask:
How to use: Copy the style’s YAML token block into design.md front matter. Add ## Overview, ## Colors, ## Typography, ## Elevation, ## Components, ## Do's and Don'ts prose sections to complete the file.
| Style | Mood | Best for | Transition shader |
|---|---|---|---|
| Swiss Pulse | Clinical, precise | SaaS, data, dev tools, metrics | Cinematic Zoom or SDF Iris |
| Velvet Standard | Premium, timeless | Luxury, enterprise, keynotes | Cross-Warp Morph |
| Deconstructed | Industrial, raw | Tech launches, security, punk | Glitch or Whip Pan |
| Maximalist Type | Loud, kinetic | Big announcements, launches | Ridged Burn |
| Data Drift | Futuristic, immersive | AI, ML, cutting-edge tech | Gravitational Lens or Domain Warp |
| Soft Signal | Intimate, warm | Wellness, personal stories, brand | Thermal Distortion |
| Folk Frequency | Cultural, vivid | Consumer apps, food, communities | Swirl Vortex or Ripple Waves |
| Shadow Cut | Dark, cinematic | Dramatic reveals, security, exposé | Domain Warp |
Mood: Clinical, precise | Best for: SaaS dashboards, developer tools, APIs, metrics
name: Swiss Pulse
colors:
primary: "#1a1a1a"
on-primary: "#ffffff"
accent: "#0066FF"
typography:
headline:
fontFamily: Helvetica Neue
fontSize: 5rem
fontWeight: 700
label:
fontFamily: Inter
fontSize: 0.875rem
fontWeight: 400
stat:
fontFamily: Helvetica Neue
fontSize: 7rem
fontWeight: 700
rounded:
none: 0px
sm: 2px
spacing:
sm: 8px
md: 16px
lg: 32px
motion:
energy: high
easing:
entry: "expo.out"
exit: "power4.in"
ambient: "none"
duration:
entrance: 0.4
hold: 1.5
transition: 0.6
atmosphere:
- grid-lines
- registration-marks
transition: cinematic-zoomGrid-locked compositions. Every element snaps to an invisible 12-column grid. Numbers dominate the frame at 80–120px. Animated counters count up from 0. Hard cuts, no decorative transitions. Nothing floats.
Mood: Premium, timeless | Best for: Luxury products, enterprise software, keynotes, investor decks
name: Velvet Standard
colors:
primary: "#0a0a0a"
on-primary: "#ffffff"
accent: "#1a237e"
typography:
headline:
fontFamily: Inter
fontSize: 3rem
fontWeight: 300
letterSpacing: 0.15em
textTransform: uppercase
body:
fontFamily: Inter
fontSize: 1rem
fontWeight: 300
lineHeight: 1.6
rounded:
sm: 0px
md: 2px
spacing:
sm: 16px
md: 32px
lg: 64px
motion:
energy: calm
easing:
entry: "sine.inOut"
exit: "power1.in"
ambient: "sine.inOut"
duration:
entrance: 1.2
hold: 3.0
transition: 1.5
atmosphere:
- subtle-grain
- hairline-rules
transition: cross-warp-morphGenerous negative space. Symmetrical, centered, architectural precision. Thin sans-serif, ALL CAPS, wide letter-spacing. Sequential reveals with long holds. Nothing snaps — everything glides with intention. Luxury takes its time.
Mood: Industrial, raw | Best for: Tech news, developer launches, security products, punk-energy reveals
name: Deconstructed
colors:
primary: "#1a1a1a"
on-primary: "#f0f0f0"
accent: "#D4501E"
typography:
headline:
fontFamily: Space Grotesk
fontSize: 4rem
fontWeight: 700
label:
fontFamily: Space Mono
fontSize: 0.75rem
fontWeight: 700
textTransform: uppercase
rounded:
none: 0px
spacing:
sm: 4px
md: 12px
lg: 24px
motion:
energy: high
easing:
entry: "back.out(2.5)"
exit: "steps(8)"
ambient: "elastic.out(1.2, 0.4)"
duration:
entrance: 0.3
hold: 1.0
transition: 0.5
atmosphere:
- scan-lines
- glitch-artifacts
- grain-overlay
transition: glitchType at angles, overlapping edges, escaping frames. Bold industrial weight. Gritty textures: scan-line effects, glitch artifacts baked into design. Text SLAMS and SHATTERS. Letters scramble then snap to final position. Intentional irregularity — nothing should feel polished.
Mood: Loud, kinetic | Best for: Big product launches, milestone announcements, high-energy hype videos
name: Maximalist Type
colors:
primary: "#0a0a0a"
on-primary: "#ffffff"
accent-red: "#E63946"
accent-yellow: "#FFD60A"
typography:
headline:
fontFamily: Anton
fontSize: 8rem
fontWeight: 400
textTransform: uppercase
subhead:
fontFamily: Space Grotesk
fontSize: 3rem
fontWeight: 700
rounded:
none: 0px
spacing:
sm: 0px
md: 8px
motion:
energy: high
easing:
entry: "expo.out"
exit: "back.out(1.8)"
ambient: "power3.out"
duration:
entrance: 0.3
hold: 0.8
transition: 0.4
atmosphere:
- type-layers
- color-blocks
transition: ridged-burnText IS the visual. Overlapping type layers at different scales and angles, filling 50–80% of frame. Bold saturated colors — maximum contrast. Everything kinetic: slamming, sliding, scaling. 2–3 second rapid-fire scenes. No static moments. Fast arrivals, hard stops.
Mood: Futuristic, immersive | Best for: AI products, ML platforms, data companies, speculative tech
name: Data Drift
colors:
primary: "#0a0a0a"
on-primary: "#e0e0e0"
accent-purple: "#7c3aed"
accent-cyan: "#06b6d4"
typography:
headline:
fontFamily: Inter
fontSize: 2.5rem
fontWeight: 200
letterSpacing: 0.05em
body:
fontFamily: Inter
fontSize: 0.875rem
fontWeight: 300
rounded:
sm: 4px
md: 12px
full: 9999px
spacing:
sm: 16px
md: 32px
lg: 64px
motion:
energy: moderate
easing:
entry: "sine.inOut"
exit: "power2.out"
ambient: "sine.inOut"
duration:
entrance: 1.0
hold: 2.5
transition: 1.5
atmosphere:
- particle-field
- light-traces
- radial-glow
transition: gravitational-lensThin futuristic sans-serif — floating, weightless, minimal. Fluid morphing compositions. Extreme scale shifts (micro → macro). Particles coalesce into numbers. Light traces data paths through the frame. Smooth, continuous, organic. Nothing hard.
Mood: Intimate, warm | Best for: Wellness brands, personal stories, lifestyle products, human-centered apps
name: Soft Signal
colors:
primary: "#FFF8EC"
on-primary: "#2a2a2a"
accent-amber: "#F5A623"
accent-rose: "#C4A3A3"
accent-sage: "#8FAF8C"
typography:
headline:
fontFamily: Playfair Display
fontSize: 3rem
fontWeight: 400
fontStyle: italic
body:
fontFamily: Inter
fontSize: 1rem
fontWeight: 300
lineHeight: 1.7
rounded:
sm: 8px
md: 16px
lg: 24px
full: 9999px
spacing:
sm: 12px
md: 24px
lg: 48px
motion:
energy: calm
easing:
entry: "sine.inOut"
exit: "power1.inOut"
ambient: "sine.inOut"
duration:
entrance: 1.0
hold: 3.0
transition: 1.5
atmosphere:
- soft-gradient
- warm-grain
transition: thermal-distortionHandwritten-style or humanist serif fonts. Personal, lowercase, delicate. Close-up framing: single element fills the frame. Slow drifts and floats, never snaps. Soft organic motion. Nothing should feel hurried or polished. Intimate, never corporate.
Mood: Cultural, vivid | Best for: Consumer apps, food platforms, community products, festive launches
name: Folk Frequency
colors:
primary: "#ffffff"
on-primary: "#1a1a1a"
accent-pink: "#FF1493"
accent-blue: "#0047AB"
accent-yellow: "#FFE000"
accent-green: "#009B77"
typography:
headline:
fontFamily: Fredoka One
fontSize: 4rem
fontWeight: 400
body:
fontFamily: Nunito
fontSize: 1rem
fontWeight: 600
rounded:
sm: 8px
md: 16px
lg: 32px
full: 9999px
spacing:
sm: 8px
md: 16px
lg: 32px
motion:
energy: high
easing:
entry: "back.out(1.6)"
exit: "elastic.out(1, 0.5)"
ambient: "sine.inOut"
duration:
entrance: 0.5
hold: 1.5
transition: 0.8
atmosphere:
- pattern-tiles
- confetti-burst
- color-blocks
transition: swirl-vortexBold warm rounded type. Pattern and repetition — folk art rhythm and density. Layered compositions with rich visual texture. Every frame feels handcrafted. Colorful motion: elements bounce, pop, spin into place with joy. Overshoots feel intentional. Celebratory energy.
Mood: Dark, cinematic | Best for: Security products, dramatic reveals, investigative content, intense launches
name: Shadow Cut
colors:
primary: "#0a0a0a"
on-primary: "#f0f0f0"
surface: "#3a3a3a"
accent: "#C1121F"
typography:
headline:
fontFamily: Oswald
fontSize: 4rem
fontWeight: 700
textTransform: uppercase
body:
fontFamily: Inter
fontSize: 0.875rem
fontWeight: 400
rounded:
none: 0px
sm: 2px
spacing:
sm: 8px
md: 16px
lg: 48px
motion:
energy: moderate
easing:
entry: "power3.out"
exit: "power4.in"
ambient: "sine.inOut"
duration:
entrance: 0.8
hold: 2.5
transition: 1.2
atmosphere:
- deep-shadow
- vignette
- grain-overlay
transition: domain-warpNear-monochrome: deep blacks, cold greys, stark white + one blood accent. Sharp angular text like film noir title cards. Heavy contrast, no softness. Elements emerge from darkness — reveal is the narrative. Slow creeping push-ins, dramatic scale reveals. The pause before the hit matters. Domain Warp dissolves reality before the next scene.
| If the content feels… | Use… |
|---|---|
| Data-driven, analytical, technical | Swiss Pulse |
| Premium, enterprise, luxury | Velvet Standard |
| Raw, punk, aggressive, rebellious | Deconstructed |
| Hype, loud, high-energy launch | Maximalist Type |
| AI, ML, speculative, futuristic | Data Drift |
| Human, warm, personal, wellness | Soft Signal |
| Cultural, fun, consumer, festive | Folk Frequency |
| Dark, dramatic, intense, cinematic | Shadow Cut |
These 8 styles are starters — not constraints. Create your own:
colors (2–5 tokens), typography (2–3 scales), rounded, spacing, motion (energy + easing + duration + atmosphere + transition){colors.accent}, {typography.headline} in component definitionsThe pattern: YAML tokens (what) → prose rationale (why) → components (how they combine).