diff --git a/skills/hyperframes/templates/presentations/8-bit-orbit/design.html b/skills/hyperframes/templates/presentations/8-bit-orbit/design.html new file mode 100644 index 000000000..bfedbaa00 --- /dev/null +++ b/skills/hyperframes/templates/presentations/8-bit-orbit/design.html @@ -0,0 +1,481 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + +
+ + + +
+
__NAME__
+ +
Onlinev1.0
+
+ + +
+
+
SYS_LOAD  ·  № 004
+
● READY
+
+

__NAME__

+
▸ PRESS START
+
+
DISCIPLINEGaming · Web3 · Indie
+
DISPLAY TYPEPRESS START 2P
+
ACCENT__ACCENT_LABEL__
+
BUILD07 · __SLIDE_COUNT__ FRAMES
+
+
+ + +
+
+
// MANIFESTO
+

type is display. color is signal. the page is a CRT. nothing is anti-aliased.

+
+
+ + +
+
+
01 // PALETTE
+

FOUR
PIXELS.

+

__PALETTE_LEDE__

+
+
+
01 // PAPER
__PRIMARY_NAME__
__PRIMARY__
Legible body type on dark.
+
02 // VOID
__SECONDARY_NAME__
__SECONDARY__
The canvas. The CRT off-state.
+
03 // PLAYER
__TERTIARY_NAME__
__TERTIARY__
Friendly signal. UI primary.
+
04 // ENEMY
__ACCENT_NAME__
__ACCENT__
Hostile signal. Alert states.
+
+
+ + +
+
+
02 // TYPOGRAPHY
+

PIXELS,
ALL THE WAY DOWN.

+

Press Start 2P carries display + headlines. VT323 runs body — a real terminal face, never anti-aliased. Silkscreen for the smallest chrome.

+
+
+
DISPLAYPress Start 2P11vw · letter-spacing 0.01em
HELLO WORLD.
+
HEADING 01Press Start 2P6vw · cyan + glow
CHAPTER 1
+
HEADING 02Press Start 2P4vw · drop shadow
SLIDE TITLE
+
LEADVT323 4002.2vw · terminal face
The lead carries the brief in a single screen of CRT text.
+
BODYVT323 40022px · 1.5 · 60ch

PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS. The body face is VT323 — a faithful terminal font. Use it for everything readable. Body copy below 24px is forbidden in 1080p compositions.

+
LABELPress Start 2P12px · 0.04em · lemon
// HUD · STATS · COIN: 0042
+
+
+ + +
+
+
03 // SURFACE
+

PIXEL
BORDERS.

+

3-pixel solid borders. Offset shadows in stepped colours — never blurred. Glow is reserved for accent text only.

+
+
+
+ // CARD · DEMO +

EXAMPLE CARD.

+

Configured border, padding, and stepped shadow. Glow is rare — only on text that wants to be remembered. Surfaces stay flat; the CRT does the lifting.

+
042
% READ-RATE
+
+ +
+
+ + +
+
+
04 // MOTION
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // EASING +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // TIMING +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ + +
+
+
05 // BACKGROUND
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • // GEOMETRY__BG_TYPE__
    • +
  • // DENSITY__BG_DENSITY__
    • +
  • // SPEED__BG_SPEED__
    • +
  • // STRENGTH__BG_STRENGTH__
    • +
  • // GRAIN__BG_GRAIN__
    • +
+
// SHADER CONFIG (JSON) +
__SHADER_CONFIG__
+
+
// VERTEX SHADER (GLSL) +
__SHADER_VERTEX__
+
+
// FRAGMENT SHADER (GLSL) +
__SHADER_FRAGMENT__
+
+
+
+
+ + +
+
+
06 // RULES
+

OK.
NO.

+

The CRT enforces these. Break any and the illusion collapses.

+
+
+

OK.

    __DOS__
+

NO.

    __DONTS__
+
+
+ + +
+
+
07 // FRAMES
+

__SLIDE_COUNT_WORD__
SCREENS.

+

The full template library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/biennale-yellow/design.html b/skills/hyperframes/templates/presentations/biennale-yellow/design.html new file mode 100644 index 000000000..bdbfb6831 --- /dev/null +++ b/skills/hyperframes/templates/presentations/biennale-yellow/design.html @@ -0,0 +1,376 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
— a season, 2026 —
+
+ +
+
+
Design System · № 017
+
__ACCENT_LABEL__
+
+

__NAME__.

+
+
DisciplineExhibition · Programme · Catalogue
+
DisplayNewsreader italic
+
SignalSolar __ACCENT__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ +
+
+
— Manifesto
+

the page is a poster. the sun is the argument. nothing is illustrated; the gradient does the speaking.

+
+
+ +
+
+
i — Palette
+

Parchment, indigo,
and a setting sun.

+

__PALETTE_LEDE__

+
+
+
i · parchment
__PRIMARY_NAME__
__PRIMARY__
Warm paper canvas.
+
ii · indigo
__SECONDARY_NAME__
__SECONDARY__
Type, lines, the literary voice.
+
iii · solar
__ACCENT_NAME__
__ACCENT__
The sun. Chapter washes and stat cards.
+
iv · burnt
__TERTIARY_NAME__
__TERTIARY__
The horizon. Accent voice on parchment.
+
+
+ +
+
+
ii — Typography
+

Newsreader,
set like a poster.

+

Newsreader italic at maximum optical size carries every headline. Inter handles body in 400. JetBrains Mono runs the smallest chrome.

+
+
+
DisplayNewsreader italic 50011vw · opsz 72
solar season.
+
Heading INewsreader italic 5007vw · burnt
chapter one
+
Heading IINewsreader italic 5004vw
A subheading sets the room.
+
LeadNewsreader italic 4002.2vw · 1.45
The lead carries the season's argument in one quiet, hopeful breath.
+
BodyInter 40016px · 1.75 · 62ch

Pack my box with five dozen liquor jugs. Body type stays at 400 weight. Below 24px is forbidden in 1080p compositions — measured at the screen. Italic carries emphasis; never bold.

+
LabelJetBrains Mono 50012px · 0.22em
// season · gallery · pp. 04 / 16
+
+
+ +
+
+
iii — Surface
+

Surfaces glow.

+

Cards carry a hidden sun-glow gradient — top-right radial, very low intensity. The card itself stays parchment; the glow is the atmosphere.

+
+
+
+ // gallery · card +

example.

+

Parchment surface with a top-right solar wash. One element bears the burnt accent. The gradient is atmospheric — never decorative.

+
+42%
+
+ +
+
+ +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — Guidelines
+

Sic et
non.

+

A short list. The atmosphere collapses the moment any of these are violated.

+
+
+

sic.

    __DOS__
+

non.

    __DONTS__
+
+
+ +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
rooms.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/block-frame/design.html b/skills/hyperframes/templates/presentations/block-frame/design.html new file mode 100644 index 000000000..f86681490 --- /dev/null +++ b/skills/hyperframes/templates/presentations/block-frame/design.html @@ -0,0 +1,377 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
v 1.0 · 2026
+
+ +
+
+ +
▸ DESIGN SYSTEM · № 002
+

__NAME_LINE1____NAME_LINE2__.

+

A neo-brutalist composition system. Thick borders. Hard shadows. Every element earns its place.

+
+
DisciplineEditorial · Web · Identity
+
Primary typeAnton 400
+
Signal__ACCENT_LABEL__
+
Doc07 sections · __SLIDE_COUNT__ templates
+
+
+
▸ TYPE LOUD
+
+
+ +
+
+ — Manifesto +

borders are structural. shadows are weight. tilt is intent.

+
+
+ +
+
+ 01 — Palette +

Four
Tokens.

+

__PALETTE_LEDE__

+
+
+
▸ Primary 01
__PRIMARY_NAME__
__PRIMARY__
Ink on dark surfaces.
+
▸ Secondary 02
__SECONDARY_NAME__
__SECONDARY__
Default ink. Borders.
+
▸ Tertiary 03
__TERTIARY_NAME__
__TERTIARY__
Bridge tone. Muted fills.
+
▸ Accent 04
__ACCENT_NAME__
__ACCENT__
The signature. Reserved.
+
+
+ +
+
+ 02 — Typography +

Big.
Heavy.

+

Anton 400 carries display. Inter 800–900 for headlines, 500 for body. DM Mono runs chrome.

+
+
+
DisplayAnton 40011vw · UPPER
HELLO WORLD.
+
H1Inter 9007vw · −0.03em
CHAPTER ONE
+
H2Inter 8004.2vw · −0.02em
SLIDE HEADLINES
+
LeadInter 5002vw
The lead carries the argument.
+
BodyInter 50017px · 60ch

Body copy below 24px is forbidden in video compositions.

+
LabelDM Mono 60013px · UPPER
▸ CHROME · LABELS · METADATA
+
+
+ +
+
+ 03 — Surface +

Borders.
Hard shadows.

+

Every container is a hard 4px black box. Shadows offset, never blurred. Lift comes from displacement.

+
+
+
+
+ ▸ EXAMPLE +

EXAMPLE CARD.

+

Configured borders, padding, offset shadow. Accent rationed to one element.

+
+42%
▸ SAMPLE
+
+ +
+
+ +
+
+ 04 — Motion +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ ▸ EASING +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ ▸ DURATION +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+ 05 — Background +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
+ + ▸ __BG_BADGE__ +
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
▸ SHADER CONFIG (JSON) +
__SHADER_CONFIG__
+
+
▸ VERTEX SHADER (GLSL) +
__SHADER_VERTEX__
+
+
▸ FRAGMENT SHADER (GLSL) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+ 06 — Guidelines +

Do.
Don't.

+

Not preferences. The system collapses the moment any of them slip.

+
+
+

DO.

    __DOS__
+

DON'T.

    __DONTS__
+
+
+ +
+
+ 07 — Templates +

__SLIDE_COUNT_WORD__
Frames.

+

The library at 1920×1080. Each thumbnail is the real slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/blue-professional/design.html b/skills/hyperframes/templates/presentations/blue-professional/design.html new file mode 100644 index 000000000..d0f69b085 --- /dev/null +++ b/skills/hyperframes/templates/presentations/blue-professional/design.html @@ -0,0 +1,363 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
v1.0 · 2026
+
+ +
+
+
Design System · No. 026
+
B2B · Advisory · 2026
+
+
+

Blue
Professional.

+
+
DisciplineB2B SaaS · Consulting · Advisory
+
DisplayGeist 700
+
Signal__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
Manifesto
+

the page is a document. type is precise. cobalt is the single voice — used confidently, never decorated.

+
+
+ +
+
+
01 — Palette
+

Cream, ink,
and a signal blue.

+

__PALETTE_LEDE__

+
+
+
01 · paper
__PRIMARY_NAME__
__PRIMARY__
Warm cream canvas.
+
02 · ink
__SECONDARY_NAME__
__SECONDARY__
Near-black. Body and bordering.
+
03 · slate
__TERTIARY_NAME__
__TERTIARY__
Mid-tone for chrome and labels.
+
04 · cobalt
__ACCENT_NAME__
__ACCENT__
The signal. Single confident accent.
+
+
+ +
+
+
02 — Typography
+

Geist,
tightly tracked.

+

Geist Sans handles both display and body — the same family at different weights and tracking. Tight letter-spacing on headlines (−0.05em). Geist Mono runs chrome labels and code.

+
+
+
DisplayGeist 70011vw · −0.065em
Hello, world.
+
Heading IGeist 6007vw · cobalt accent
Chapter one
+
Heading IIGeist 6004vw · −0.04em
A subhead sets the section.
+
LeadGeist 5002vw · −0.015em
The lead carries the brief in one direct, professional sentence.
+
BodyGeist 40016px · 1.75 · 62ch

Pack my box with five dozen liquor jugs. Body type stays at 400 weight. Below 24px is forbidden in 1080p compositions. The page reads as a quiet, trustworthy document — never marketing.

+
LabelGeist Mono 50012px · cobalt
// section · folio · 04 / 16
+
+
+ +
+
+
03 — Surface
+

White cards,
quiet shadows.

+

White cards on cream paper. 12px corners. A 1px hairline, an almost-invisible drop shadow at 4% opacity, and zero ornament. The shadow is the only lift.

+
+
+
+ // CARD +

Example card.

+

White card. 12px corners. A pill tag. One cobalt action button — the only accent on the card.

+
+42%
+ +
+ +
+
+ +
+
+
04 — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
05 — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
06 — Guidelines
+

Do.
Don't.

+

A short list. The system reads as marketing the moment any are broken.

+
+
+

Do.

    __DOS__
+

Don't.

    __DONTS__
+
+
+ +
+
+
07 — Templates
+

__SLIDE_COUNT_WORD__
frames.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/bold-poster/design.html b/skills/hyperframes/templates/presentations/bold-poster/design.html new file mode 100644 index 000000000..05b555958 --- /dev/null +++ b/skills/hyperframes/templates/presentations/bold-poster/design.html @@ -0,0 +1,381 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
__ACCENT_LABEL__
+
+ +
+
+
Design System · No. 027
+
▶ a magazine cover
+
+
+

__NAME__.

+
+
DisciplineManifesto · Vision · Editorial
+
DisplayShrikhand
+
Signal__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
// MANIFESTO
+

the page is a poster. one idea, set enormous. nothing else needs to be on it.

+
+
+ +
+
+ 01 — Palette +

Three tones,
one fire.

+

__PALETTE_LEDE__

+
+
+
01 · primary
__PRIMARY_NAME__
__PRIMARY__
Warm cream canvas.
+
02 · secondary
__SECONDARY_NAME__
__SECONDARY__
Near-black. Body and borders.
+
03 · tertiary
__TERTIARY_NAME__
__TERTIARY__
Mid-tone chrome and labels.
+
04 · accent
__ACCENT_NAME__
__ACCENT__
The signal. One element per slide.
+
+
+ +
+
+ 02 — Type +

Shrikhand,
maximum.

+

Shrikhand carries every headline at maximum size — a chunky display serif that owns the page. IBM Plex Sans handles body in 500. IBM Plex Mono runs chrome.

+
+
+
DisplayShrikhand 40011vw · maximum
hello world.
+
H1Shrikhand 4008vw · fire
chapter one
+
H2Shrikhand 4004.5vw
slide headlines.
+
LeadPlex Sans 6002vw
The lead carries the brief like a magazine deck — one bold paragraph.
+
BodyPlex Sans 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 500 weight. Below 24px is forbidden in 1080p compositions. Display does almost everything — body is for footnotes.

+
LabelPlex Mono 60012px · ink on fire
// label · fire chip
+
+
+ +
+
+ 03 — Surface +

One bar,
nothing else.

+

Every card gets a thick fire bar along the left edge — 8px, full-height. 2px ink border, zero radius. The bar is the chrome.

+
+
+
+
+ // CARD · EXAMPLE +

example card.

+

Fire bar left. 2px ink border. Shrikhand headline carries the page; body sits quietly underneath. Use accent for headlines, never for fills.

+
+42%
+
+
+ +
+
+ +
+
+ 04 — Motion +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // EASING +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // DURATION +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+ 05 — Background +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+ 06 — Rules +

Do.
Don't.

+

A short list. The poster reads as tame the moment any of these slip.

+
+
+

Do .

    __DOS__
+

Don't .

    __DONTS__
+
+
+ +
+
+ 07 — Templates +

__SLIDE_COUNT_WORD__
posters.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/broadside/design.html b/skills/hyperframes/templates/presentations/broadside/design.html new file mode 100644 index 000000000..fa551b11e --- /dev/null +++ b/skills/hyperframes/templates/presentations/broadside/design.html @@ -0,0 +1,345 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + + + +
+ +
+
__NAME__ / design system
+ +
v1.0 · 2026
+
+ +
+
+
Design System / № 001
+
HyperFrames · 2026
+
+

__NAME_LINE1____NAME_LINE2__.

+
+
DisciplineEditorial · Motion · Identity
+
Primary typeBarlow 900
+
Environment__ACCENT_LABEL__
+
Doc07 sections · __SLIDE_COUNT__ templates
+
+
+ +
+
+
— Manifesto
+

type is the image. accent is the environment. nothing is decorative; everything is structural.

+
+
+ +
+
+
01 — Palette
+

four colors.

+

__PALETTE_LEDE__

+
+
+
Primary · 01
__PRIMARY_NAME__
__PRIMARY__
Ink on dark surfaces.
+
Secondary · 02
__SECONDARY_NAME__
__SECONDARY__
Default canvas. Never pure #000.
+
Tertiary · 03
__TERTIARY_NAME__
__TERTIARY__
Borders, dividers.
+
Accent · 04
__ACCENT_NAME__
__ACCENT__
The environment. Reserved.
+
+
+ +
+
+
02 — Typography
+

words become
graphics.

+

Barlow at heaviest weights does the work. IBM Plex Mono runs chrome. Two families, no third.

+
+
+
DisplayBarlow 90013vw · −0.04em
hello world.
+
H1Barlow 8007.5vw · −0.03em
chapter one
+
H2Barlow 7004.5vw · −0.02em
Slide headlines.
+
LeadBarlow 4001.6vw
The lead carries the argument.
+
BodyBarlow 4001.2vw · 60ch

Body copy below 24px is forbidden in video compositions — measured at 1080p.

+
LabelPlex Mono 5000.72vw · uppercase
// chrome · labels · metadata
+
+
+ +
+
+
03 — Surface
+

slight corners.
quiet shadows.

+

Nearly flat. 4px corners everywhere. Shadows lift a hair — never advertise.

+
+
+
+ // example +

example card.

+

Configured corners, padding, shadow. Accent rationed to one element.

+
+42%
+
+ +
+
+ +
+
+
04 — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+
// easing
+

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+
// duration
+

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
05 — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
06 — Guidelines
+

do and
do not.

+

Not preferences. The system breaks the moment any of them slips.

+
+
+

do.

    __DOS__
+

don't.

    __DONTS__
+
+
+ +
+
+
07 — Templates
+

__SLIDE_COUNT_WORD__
frames.

+

The composition system at 1920×1080. Each thumbnail is the real slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/capsule/design.html b/skills/hyperframes/templates/presentations/capsule/design.html new file mode 100644 index 000000000..f25509c88 --- /dev/null +++ b/skills/hyperframes/templates/presentations/capsule/design.html @@ -0,0 +1,380 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
v 1.0 · 2026
+
+ +
+
+
Design System · № 018
+
__ACCENT_LABEL__
+
+

Capsule.

+
→ __ACCENT_LABEL__
+
+
DisciplineLifestyle · DTC · Creator
+
DisplayOutfit 900
+
Vibe__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
manifesto
+

the page is modular. every element is a capsule. corners are round; nothing is sharp.

+
+
+ +
+
+ 01 / palette +

Bone, ink,
and a pastel pop.

+

__PALETTE_LEDE__

+
+
+
01 · Primary
__PRIMARY_NAME__
__PRIMARY__
Warm canvas. Default surface.
+
02 · Secondary
__SECONDARY_NAME__
__SECONDARY__
Type and the closing frame.
+
03 · Tertiary
__TERTIARY_NAME__
__TERTIARY__
Calm capsule. Stat fills.
+
04 · Accent
__ACCENT_NAME__
__ACCENT__
Warm capsule. Manifesto fill.
+
+
+ +
+
+ 02 / type +

Outfit, chunky.

+

Outfit at 800–900 carries every headline. DM Sans handles body in 500. JetBrains Mono runs the pill labels. No third face.

+
+
+
DisplayOutfit 90011vw · −0.035em
Hello world.
+
H1Outfit 8007.5vw
Chapter One
+
H2Outfit 7004.2vw
Slide headlines.
+
LeadDM Sans 6002vw
The lead carries the brief like a soft, modular intro.
+
BodyDM Sans 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 500 weight. Below 24px is forbidden in 1080p compositions. Never bold; the colour does the lifting.

+
LabelJetBrains Mono 60012px · pill
// label · capsule · pill
+
+
+ +
+
+ 03 / surface +

Round corners,
every time.

+

Cards take 32px corners. Pills take 999px corners. Tags and labels are always pills. No hard edges anywhere.

+
+
+
+ → capsule · card +

Example.

+

32px rounded corners. Pill labels. Pastel fills used at module scale, never at letter scale. One pastel per card.

+
+42%
+
→ mint→ lilac→ lemon
+
+ +
+
+ +
+
+ 04 / motion +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ → easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ → duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+ 05 / background +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+ 06 / rules +

Yes.
No.

+

The capsule cracks the moment any of these slip.

+
+
+

Yes.

    __DOS__
+

No.

    __DONTS__
+
+
+ +
+
+ 07 / templates +

__SLIDE_COUNT_WORD__
capsules.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/cartesian/design.html b/skills/hyperframes/templates/presentations/cartesian/design.html new file mode 100644 index 000000000..cec3602cb --- /dev/null +++ b/skills/hyperframes/templates/presentations/cartesian/design.html @@ -0,0 +1,363 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
__ACCENT_LABEL__
+
+ +
+
+
Design System · № 028
+
A quiet thesis · 2026
+
+
+

__NAME__.

+
+
DisciplineThesis · White paper · Advisory
+
DisplayEB Garamond italic
+
Accent__ACCENT_LABEL__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ +
+
+
— Manifesto
+

the page is argument. type is thought. nothing competes with the line; the line is everything.

+
+
+ +
+
+
i — Palette
+

Warm neutrals,
tonal only.

+

__PALETTE_LEDE__

+
+
+
i · primary
__PRIMARY_NAME__
__PRIMARY__
Warm canvas. Unhurried.
+
ii · tertiary
__TERTIARY_NAME__
__TERTIARY__
Mid-tone for chrome.
+
iii · accent
__ACCENT_NAME__
__ACCENT__
The single accent.
+
iv · secondary
__SECONDARY_NAME__
__SECONDARY__
Body type and rule.
+
+
+ +
+
+
ii — Typography
+

EB Garamond,
italics rare.

+

EB Garamond at 500 carries both display and body — the same family across the document. Italics reserved for emphasis. JetBrains Mono runs section labels at 0.22em tracking.

+
+
+
DisplayGaramond italic 50011vw · −0.022em
quiet thesis.
+
Heading IGaramond italic 5007vw
chapter one
+
Heading IIGaramond italic 5004vw · deep
A subhead sets the argument.
+
LeadGaramond italic 4002.2vw · 1.45
The lead carries the argument with patience and a single unhurried breath.
+
BodyGaramond 40018px · 1.75 · 62ch

The reader is unhurried — every line should reward the pace. Body copy below 24px is forbidden in any composition above 1080p. Set generously; let the page breathe. Italic carries emphasis; the deep accent appears once per page, never more.

+
LabelJetBrains Mono 50012px · 0.22em
// folio · pp. 04 / 16 · chrome
+
+
+ +
+
+
iii — Surface
+

Paper, then
more paper.

+

Surfaces are nearly invisible. A 1px hairline, generous margins, and tonal contrast carry the structure. No filled cards, no shadows, no radius.

+
+
+
+ // exempla · card +

exempla.

+

A surface is a marginal thing. A hairline, perhaps; a small mark, perhaps. The page already does the work. Nothing about a surface should announce itself.

+
42%
+
+ +
+
+ +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // transition +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — Guidelines
+

Sic et
non.

+

A short list. The thesis loses its quiet authority the moment any are violated.

+
+
+

sic.

    __DOS__
+

non.

    __DONTS__
+
+
+ +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
folios.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/cobalt-grid/design.html b/skills/hyperframes/templates/presentations/cobalt-grid/design.html new file mode 100644 index 000000000..94224b353 --- /dev/null +++ b/skills/hyperframes/templates/presentations/cobalt-grid/design.html @@ -0,0 +1,359 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
v 1.0
+
+ +
+
+
Design System · No. 031
+
▢ Grid · 2026
+
+
+

Cobalt
Grid.

+
+
DisciplineSaaS · Engineering · Product
+
DisplaySpace Grotesk 700
+
Signal__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
+ MANIFESTO
+

the grid is structural. cobalt is position. nothing floats — every block snaps.

+
+
+ +
+
+ 01 / PALETTE +

Four cells.

+

__PALETTE_LEDE__

+
+
+
01 / paper
__PRIMARY_NAME__
__PRIMARY__
Warm off-white canvas.
+
02 / ink
__SECONDARY_NAME__
__SECONDARY__
Near-black. Type and grid.
+
03 / slate
__TERTIARY_NAME__
__TERTIARY__
Chrome and labels.
+
04 / cobalt
__ACCENT_NAME__
__ACCENT__
The signal. Block fills only.
+
+
+ +
+
+ 02 / TYPE +

Tight
grotesque.

+

Space Grotesk at 700 with aggressive negative tracking. Manrope handles body. JetBrains Mono runs cell labels and chrome.

+
+
+
DisplaySpace Grotesk 70011vw · −0.07em
hello world.
+
H1Space Grotesk 7007vw · −0.055em
chapter one
+
H2Space Grotesk 6004.2vw
section headlines.
+
LeadManrope 6002vw
The lead carries the brief in one direct sentence.
+
BodyManrope 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 500 weight. Below 24px is forbidden in 1080p compositions.

+
LabelJetBrains Mono 60012px · cobalt chip
// LABEL · CELL
+
+
+ +
+
+ 03 / SURFACE +

1px grid,
hard cells.

+

Every container snaps to a 96px base grid. 1px ink borders, zero radius. The grid is the chrome.

+
+
+
+ // CELL +

Example cell.

+

1px ink border. 6px cobalt tab top-left. Snaps to the grid. The accent appears once per slide.

+
+42%
+
+ +
+
+ +
+
+ 04 / MOTION +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // EASING +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // DURATION +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+ 05 / BACKGROUND +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+ 06 / RULES +

Do.
Don't.

+

A short list. The grid loses its structure the moment any slip.

+
+
+

Do.

    __DOS__
+

Don't.

    __DONTS__
+
+
+ +
+
+ 07 / TEMPLATES +

__SLIDE_COUNT_WORD__
frames.

+

Full library at 1920×1080.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + \ No newline at end of file diff --git a/skills/hyperframes/templates/presentations/coral/design.html b/skills/hyperframes/templates/presentations/coral/design.html new file mode 100644 index 000000000..c4b9a4986 --- /dev/null +++ b/skills/hyperframes/templates/presentations/coral/design.html @@ -0,0 +1,356 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
Issue 014 · 2026
+
+ +
+
+
Design System · № 014
+
A warm magazine · 2026
+
+

__NAME__.

+
+
DisciplineFashion · Beauty · Lifestyle
+
DisplayBebas Neue
+
Signal__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
— Manifesto
+

The page is a cover. Type is oversized. Coral is one breath, not many.

+
+
+ +
+
+ 01 — Palette +

Cream, ink,
warm, coral.

+

__PALETTE_LEDE__

+
+
+
01 · paper
__PRIMARY_NAME__
__PRIMARY__
Warm paper canvas.
+
02 · ink
__SECONDARY_NAME__
__SECONDARY__
Near-black, never pure.
+
03 · warm
__TERTIARY_NAME__
__TERTIARY__
Chrome and muted labels.
+
04 · coral
__ACCENT_NAME__
__ACCENT__
The single accent. One per slide.
+
+
+ +
+
+ 02 — Type +

Bebas, oversized.

+

Bebas Neue carries every headline at maximum size — tall, condensed, all caps. Manrope handles body in 400–500. JetBrains Mono runs chrome labels.

+
+
+
DisplayBebas Neue 40012vw · UPPERCASE
HELLO WORLD.
+
H1Bebas Neue 4008vw · coral
CHAPTER ONE
+
H2Bebas Neue 4005vw
SLIDE HEADLINES.
+
LeadManrope 5002vw
The lead carries the brief like a magazine deck — one quotable line.
+
BodyManrope 40016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 400 weight. Body copy below 24px is forbidden in 1080p compositions — measured at the screen.

+
LabelJetBrains Mono 50012px · coral
// ISSUE · LABEL · 04 / 16
+
+
+ +
+
+ 03 — Surface +

Cream inside
noir.

+

Cream surfaces sit inside noir canvases — like a magazine page tipped inside a black case. 1px hairlines only; never shadow, never gradient.

+
+
+
+ // editorial card +

EXAMPLE.

+

Cream card inside the noir canvas. One element bears the coral — never more. The hairline does the framing; nothing else needs to.

+
+42%
+
+ +
+
+ +
+
+ 04 — Motion +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+ 05 — Background +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config +
__SHADER_CONFIG__
+
+
// vertex shader +
__SHADER_VERTEX__
+
+
// fragment shader +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+ 06 — Rules +

YES.
NO.

+

A short list. The magazine softens the moment any are broken.

+
+
+

YES.

    __DOS__
+

NO.

    __DONTS__
+
+
+ +
+
+ 07 — Templates +

__SLIDE_COUNT_WORD__
covers.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/creative-mode/design.html b/skills/hyperframes/templates/presentations/creative-mode/design.html new file mode 100644 index 000000000..e786f5756 --- /dev/null +++ b/skills/hyperframes/templates/presentations/creative-mode/design.html @@ -0,0 +1,398 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
studio · 2026
+
+ +
+
+
// Design System · № 025
+
▶ Studio · 2026
+
+

CREA­TIVE
MODE.

+
+
DisciplineStudio · Agency · Creative
+
DisplayArchivo Black
+
Palette__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
// MANIFESTO
+

colour is structure. type is a block. nothing is neutral.

+
+
+ +
+
+ 01 — Palette +

Four VIVID
blocks.

+

__PALETTE_LEDE__

+
+
+
01 · green
__PRIMARY_NAME__
__PRIMARY__
Block A. Chapter, statement.
+
02 · pink
__SECONDARY_NAME__
__SECONDARY__
Block B. Cards, callouts.
+
03 · orange
__TERTIARY_NAME__
__TERTIARY__
Block C. Accent ink, end frames.
+
04 · yellow
__ACCENT_NAME__
__ACCENT__
Block D. Labels, highlights.
+
+
+ +
+
+ 02 — Type +

Archivo,
BLACK.

+

Archivo Black carries every headline — uber-heavy, slightly condensed, always uppercase. Manrope handles body in 500. JetBrains Mono runs chrome.

+
+
+
DisplayArchivo Black10vw · −0.035em
HELLO WORLD.
+
H1Archivo Black7vw · highlight
CHAPTER ONE
+
H2Archivo Black4.2vw
SLIDE HEADLINES.
+
LeadManrope 6002vw
The lead carries the brief like a magazine deck — one bold paragraph.
+
BodyManrope 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 500 weight. Below 24px is forbidden in 1080p compositions. Emphasis comes from highlight blocks; never italic, never bold.

+
LabelJetBrains Mono 60012px · yellow
// LABEL · YELLOW CHIP
+
+
+ +
+
+ 03 — Surface +

Three BARS,
one frame.

+

Cards open with three colour bars — equal thirds, green/pink/orange — across the top. 2px ink border, zero radius. The frame is the chrome.

+
+
+
+
+ // CARD · EXAMPLE +

EXAMPLE CARD.

+

Tri-bar on top. Highlight blocks inside the headline. Body in 500 sentence-case Manrope.

+
+42%
+
+ +
+
+ +
+
+ 04 — Motion +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // EASING +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // DURATION +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+ 05 — Background +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+ 06 — Rules +

YES.
NO.

+

A short list. The system loses its voltage the moment any are broken.

+
+
+

YES.

    __DOS__
+

NO.

    __DONTS__
+
+
+ +
+
+ 07 — Templates +

__SLIDE_COUNT_WORD__
FRAMES.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/daisy-days/design.html b/skills/hyperframes/templates/presentations/daisy-days/design.html new file mode 100644 index 000000000..94dfc1c2d --- /dev/null +++ b/skills/hyperframes/templates/presentations/daisy-days/design.html @@ -0,0 +1,450 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + + +
+ + +
+
+ + + + + + + + + + + + __NAME__ +
+ +
spring 2026
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + +
+
design system № 008
+
a friendly little system ☘
+
+

__NAME__

+

— a cheerful, handmade-feeling deck system —

+
+
DisciplineKids · Wellness · Craft
+
DisplayDM Serif italic
+
Mood__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ + +
+
+
— manifesto
+

the page is a garden. type is warm. nothing is sharp; everything is handmade.

+
+
+ + +
+
+
i — palette
+

Four seasons,
all friendly.

+

__PALETTE_LEDE__

+
+
+
Primary · 01
__PRIMARY_NAME__
__PRIMARY__
Warm paper canvas.
+
Secondary · 02
__SECONDARY_NAME__
__SECONDARY__
Warm dark for type and outlines.
+
Tertiary · 03
__TERTIARY_NAME__
__TERTIARY__
Calm, leafy, optimistic.
+
Accent · 04
__ACCENT_NAME__
__ACCENT__
The warm voice. Hearts and headlines.
+
+
+ + +
+
+
ii — typography
+

A serif,
a script, a sans.

+

DM Serif Display carries headlines — warm and italic-friendly. Caveat handles the handwritten asides. Quicksand keeps the body rounded and readable.

+
+
+
DisplayDM Serif italic10vw · −0.015em
sunny days.
+
Heading 1DM Serif Display7vw
chapter one
+
Heading 2DM Serif italic4vw · sage
A subheading sets the day.
+
HandCaveat 7005vw · blush
a friendly note —
+
LeadQuicksand 5002vw
The lead carries the brief in one bright, hopeful breath.
+
BodyQuicksand 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type is Quicksand 500 — rounded but never childish. Use Caveat for asides and margin notes; use serif italic for emphasis in a sentence.

+
+
+ + +
+
+
iii — surface
+

Soft corners.
A little tilt.

+

Cards round generously — 18–24px. A 2px ink outline holds everything together. Every surface tilts ±1.5° — never flat.

+
+
+
+ a friendly card! +

example card.

+

2px ink outline, 24px corners, a small tilt. A daisy circle on the top corner for warmth. Surfaces never align exactly — that's the whole point.

+
+42%
+
+ +
+
+ + +
+
+
iv — motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ — easing — +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ — duration — +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ + +
+
+
v — background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
__BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
shader config (json) +
__SHADER_CONFIG__
+
+
vertex shader (glsl) +
__SHADER_VERTEX__
+
+
fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ + +
+
+
vi — guidelines
+

Yes please.
No thank you.

+

A short list of rules. The garden softens the moment any are broken.

+
+
+
+

yes please.

+
    __DOS__
+
+
+

no thank you.

+
    __DONTS__
+
+
+
+ + +
+
+
vii — templates
+

__SLIDE_COUNT_WORD__
little garden plots.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/editorial-forest/design.html b/skills/hyperframes/templates/presentations/editorial-forest/design.html new file mode 100644 index 000000000..fcb6b4a65 --- /dev/null +++ b/skills/hyperframes/templates/presentations/editorial-forest/design.html @@ -0,0 +1,338 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
vol. i · 2026
+
+ +
+
+
Design System · No. 032
+
— an editorial in the woods
+
+

editorial forest.

+
+
DisciplineMagazine · Sustainability · Long-form
+
DisplayCormorant italic
+
Accent__ACCENT_LABEL__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ +
+
+
— Manifesto
+

the page reads like a field journal. type is slow; the accent is lantern light.

+
+
+ +
+
+
i — Palette
+

Forest, paper,
and a lantern.

+

__PALETTE_LEDE__

+
+
+
i · paper
__PRIMARY_NAME__
__PRIMARY__
Warm cream surfaces.
+
ii · forest
__SECONDARY_NAME__
__SECONDARY__
Deep canvas. Quiet, patient.
+
iii · sage
__TERTIARY_NAME__
__TERTIARY__
Chrome and muted labels.
+
iv · amber
__ACCENT_NAME__
__ACCENT__
The lantern. One per page.
+
+
+ +
+
+
ii — Typography
+

Cormorant italic,
set slow.

+

Cormorant Garamond italic carries every headline. Inter handles body in 400. JetBrains Mono runs the smallest chrome.

+
+
+
DisplayCormorant italic 50011vw · −0.02em
slow grove.
+
H1Cormorant italic 5007vw · amber
chapter one
+
H2Cormorant italic 5004vw
a subheading sets the section.
+
LeadCormorant italic 4002.2vw
The lead carries the argument with patience and warm light.
+
BodyInter 40016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays open and airy. Body copy below 24px is forbidden in 1080p compositions.

+
LabelJetBrains Mono 50012px · amber
// folio · pp. 04 / 16
+
+
+ +
+
+
iii — Surface
+

Paper inside
shade.

+

Cream surfaces sit inside the forest canvas. A short amber tick at the top-left of each card — like a marker on a trail.

+
+
+
+ // trail · marker +

example.

+

Cream card inside the forest. One amber element per card. No shadows; the contrast carries the lift.

+
+42%
+
+ +
+
+ +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — Guidelines
+

Sic et
non.

+

Short rules. The grove thins the moment any slip.

+
+
+

sic.

    __DOS__
+

non.

    __DONTS__
+
+
+ +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
clearings.

+

Full library at 1920×1080.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + \ No newline at end of file diff --git a/skills/hyperframes/templates/presentations/editorial-tri-tone/design.html b/skills/hyperframes/templates/presentations/editorial-tri-tone/design.html new file mode 100644 index 000000000..3e2ba1b41 --- /dev/null +++ b/skills/hyperframes/templates/presentations/editorial-tri-tone/design.html @@ -0,0 +1,380 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
issue 21 — 2026
+
+ +
+
+
Design System · № 021
+
A three-tone editorial · 2026
+
+

tri-tone.

+
+
DisciplineEditorial · Fashion · Lifestyle
+
DisplayInstrument italic
+
Palette__ACCENT_LABEL__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ +
+
+
— Manifesto
+

three tones, nothing else. each one has a job; never let them argue.

+
+
+ +
+
+
i — Palette
+

Three tones,
one support.

+

__PALETTE_LEDE__

+
+
+
i · pink
__PRIMARY_NAME__
__PRIMARY__
Dusty canvas. Default page.
+
ii · mustard
__TERTIARY_NAME__
__TERTIARY__
Warm middle. Chapter fills.
+
iii · burgundy
__SECONDARY_NAME__
__SECONDARY__
The voice. Headlines and accents.
+
iv · plum
__ACCENT_NAME__
__ACCENT__
Quiet depth. End frames.
+
+
+ +
+
+
ii — Typography
+

Instrument italic,
Bricolage body.

+

Instrument Serif italic carries every headline. Bricolage Grotesque handles body in 500 — a contemporary grotesque against a classical italic. JetBrains Mono for chrome.

+
+
+
DisplayInstrument italic11vw · −0.025em
slow magazine.
+
H1Instrument italic7vw · burgundy
chapter one
+
H2Instrument italic4vw
A subheading sets the section.
+
LeadBricolage 5002vw
The lead carries the argument like a magazine deck — one bold paragraph.
+
BodyBricolage 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 500 weight. Below 24px is forbidden in 1080p compositions. Italic is rare in body — emphasis comes from colour instead.

+
LabelJetBrains Mono 50012px · 0.2em
// issue · folio · 04 / 16
+
+
+ +
+
+
iii — Surface
+

Surfaces wear
a tri-bar.

+

Every card opens with a tri-coloured bar across the top — burgundy / mustard / plum, equal thirds. 1px burgundy border. No shadows.

+
+
+
+ // editorial · card +

example.

+

Tri-tone bar tops every card. 1px burgundy border, zero radius. The accent is always burgundy on pink; never mustard on pink.

+
+42%
+
+ +
+
+ +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — Guidelines
+

Sic et
non.

+

A short list. The composition reads as polite the moment any of these slip.

+
+
+

sic.

    __DOS__
+

non.

    __DONTS__
+
+
+ +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
spreads.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/emerald-editorial/design.html b/skills/hyperframes/templates/presentations/emerald-editorial/design.html new file mode 100644 index 000000000..a23739646 --- /dev/null +++ b/skills/hyperframes/templates/presentations/emerald-editorial/design.html @@ -0,0 +1,338 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
vol. i · 2026
+
+ +
+
+
Design System · No. 033
+
— a jewelled editorial
+
+
+

__NAME__.

+
+
DisciplineLuxury · Jewellery · Editorial
+
DisplayPlayfair italic
+
Accent__ACCENT_LABEL__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ +
+
+
— Manifesto
+

the page wears jewels sparingly. emerald is the room; gold is the single piece.

+
+
+ +
+
+
i — Palette
+

Four tones,
one gem.

+

__PALETTE_LEDE__

+
+
+
i · ivory
__PRIMARY_NAME__
__PRIMARY__
Warm paper.
+
ii · emerald
__SECONDARY_NAME__
__SECONDARY__
Deep canvas.
+
iii · jade
__TERTIARY_NAME__
__TERTIARY__
Chrome and labels.
+
iv · gold
__ACCENT_NAME__
__ACCENT__
Antique gold accent.
+
+
+ +
+
+
ii — Typography
+

Playfair italic,
set regally.

+

Playfair Display italic carries every headline. Inter handles body in 400. JetBrains Mono runs the smallest chrome.

+
+
+
DisplayPlayfair italic 60011vw · −0.022em
regal page.
+
H1Playfair italic 6007vw · gold
chapter one
+
H2Playfair italic 5004vw
a subhead sets the section.
+
LeadPlayfair italic 4002vw
The lead carries the argument with quiet elegance.
+
BodyInter 40016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 400 weight. Below 24px is forbidden.

+
LabelMono 50012px · gold
// folio · pp. 04 / 16
+
+
+ +
+
+
iii — Surface
+

Ivory cards,
gold clasp.

+

Ivory cards inside emerald. A 1px gold border — the clasp. Nothing else.

+
+
+
+ // jewel · card +

example.

+

Ivory card with a 1px gold border. The gold is the chrome — never apply shadows.

+
+42%
+
+ +
+
+ +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — Guidelines
+

Sic et
non.

+

Short rules. The atmosphere cheapens the moment any slip.

+
+
+

sic.

    __DOS__
+

non.

    __DONTS__
+
+
+ +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
jewels.

+

Full library at 1920×1080.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/grove/design.html b/skills/hyperframes/templates/presentations/grove/design.html new file mode 100644 index 000000000..be891ab57 --- /dev/null +++ b/skills/hyperframes/templates/presentations/grove/design.html @@ -0,0 +1,346 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
vol. i · 2026
+
+ +
+
+
Design System · № 010
+
A patient system · 2026
+
+

__NAME__.

+
+
DisciplineSustainability · Wellness · Wine
+
DisplayPlayfair italic
+
Accent__ACCENT_LABEL__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ +
+
+
— Manifesto
+

the page is shaded ground. type is patient. rust is the only flame.

+
+
+ +
+
+
i — Palette
+

Forest, paper,
and one ember.

+

__PALETTE_LEDE__

+
+
+
i · paper
__PRIMARY_NAME__
__PRIMARY__
Body and chapter surfaces.
+
ii · forest
__SECONDARY_NAME__
__SECONDARY__
The canvas. Deep, quiet, evergreen.
+
iii · moss
__TERTIARY_NAME__
__TERTIARY__
Chrome and quiet labels.
+
iv · rust
__ACCENT_NAME__
__ACCENT__
The single accent. Used sparingly.
+
+
+ +
+
+
ii — Typography
+

Playfair italic,
set with air.

+

Playfair Display carries every headline in italic. Source Sans 3 keeps the body open and readable. JetBrains Mono labels and tracks.

+
+
+
DisplayPlayfair italic 50011vw · −0.018em
slow grove.
+
H1Playfair italic 5007vw · rust
chapter one
+
H2Playfair italic 5004vw
A subheading sets the mood.
+
LeadSource Sans italic2vw · 1.55
The lead carries the argument with calm and care.
+
BodySource Sans 40016px · 1.75 · 60ch

Pack my box with five dozen liquor jugs. Body type stays open and airy. Body copy below 24px is forbidden in video compositions — measured at 1080p.

+
LabelJetBrains Mono 50012px · 0.18em · moss
// folio · pp. 04 / 16 · chrome
+
+
+ +
+
+
iii — Surface
+

Paper, then
more paper.

+

Surfaces are nearly invisible. A 1px hairline and one rust line where needed. Cream surfaces sit inside the forest canvas; they don't float above it.

+
+
+
+ // exempla · card +

exempla.

+

Cream surface inside the forest. One element bears the rust — never more. Hairlines optional; shadows forbidden.

+
+42%
+
+ +
+
+ +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config +
__SHADER_CONFIG__
+
+
// vertex shader +
__SHADER_VERTEX__
+
+
// fragment shader +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — Guidelines
+

Sic et
non.

+

The rules are short. The grove softens the moment any are violated.

+
+
+

sic.

    __DOS__
+

non.

    __DONTS__
+
+
+ +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
clearings.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/long-table/design.html b/skills/hyperframes/templates/presentations/long-table/design.html new file mode 100644 index 000000000..699bec9fa --- /dev/null +++ b/skills/hyperframes/templates/presentations/long-table/design.html @@ -0,0 +1,343 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
vol. i · 2026
+
+ +
+
+
Design System · No. 034
+
— a long-form ledger
+
+
+

__NAME__.

+
+
DisciplineLedger · Menu · Long-form
+
DisplayLora italic
+
Accent__ACCENT_LABEL__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ +
+
+
— Manifesto
+

the page is a shared table. every line has a place; nothing crowds.

+
+
+ +
+
+
i — Palette
+

Linen, ink,
and a clay pot.

+

__PALETTE_LEDE__

+
+
+
i · linen
__PRIMARY_NAME__
__PRIMARY__
Warm cream canvas.
+
ii · ink
__SECONDARY_NAME__
__SECONDARY__
Warm dark for type.
+
iii · oak
__TERTIARY_NAME__
__TERTIARY__
Chrome and muted labels.
+
iv · clay
__ACCENT_NAME__
__ACCENT__
Single accent. Set sparingly.
+
+
+ +
+
+
ii — Typography
+

Lora italic,
set across the page.

+

Lora italic carries every headline. Inter handles body in 400. JetBrains Mono runs column headers.

+
+
+
DisplayLora italic 50011vw · −0.022em
long table.
+
H1Lora italic 5007vw · clay
chapter one
+
H2Lora italic 5004vw
a subhead sets the section.
+
LeadLora italic 4002.2vw
The lead carries the day's argument like a menu's first course.
+
BodyInter 40016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays open and airy.

+
ColumnMono 50012px · clay
// column · pp. 04 / 16
+
+
+ +
+
+
iii — Surface
+

The ledger.

+

The signature surface is a table. Hairline rules between rows, italic labels in column one, clay numerals in the last column. Every datum has a seat.

+
+
+ + + + + + + + + +
ItemDetailQuantity
Corners__CORNER_RADIUS__
Padding__PADDING__
Gap__GAP__
Elevation__ELEVATION__
Density__DENSITY__
+
+
+ +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — Guidelines
+

Sic et
non.

+

Short rules. The table loses its calm the moment any slip.

+
+
+

sic.

    __DOS__
+

non.

    __DONTS__
+
+
+ +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
settings.

+

Full library at 1920×1080.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/mat/design.html b/skills/hyperframes/templates/presentations/mat/design.html new file mode 100644 index 000000000..4d6421db0 --- /dev/null +++ b/skills/hyperframes/templates/presentations/mat/design.html @@ -0,0 +1,365 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
vol. i · 2026
+
+ +
+
+
Design System · № 022
+
__ACCENT_LABEL__
+
+

__NAME__.

+
+
DisciplineArchitecture · Craft · Studio
+
DisplaySource Serif 500
+
Accent__ACCENT_LABEL__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ +
+
+
— Manifesto
+

the page has weight. the canvas is shade. rust is the only warmth, used sparingly.

+
+
+ +
+
+
i — Palette
+

Sage, bone,
and a burnt note.

+

__PALETTE_LEDE__

+
+
+
i · bone
__PRIMARY_NAME__
__PRIMARY__
Paper. Chapter surfaces.
+
ii · sage
__SECONDARY_NAME__
__SECONDARY__
The canvas. Dark, slow.
+
iii · moss
__TERTIARY_NAME__
__TERTIARY__
Chrome and muted labels.
+
iv · rust
__ACCENT_NAME__
__ACCENT__
The single accent. Used once.
+
+
+ +
+
+
ii — Typography
+

Source Serif,
quiet and warm.

+

Source Serif 4 at 500 carries headlines. Italic is reserved for emphasis. Source Sans 3 handles body in 400. JetBrains Mono runs chrome labels.

+
+
+
DisplaySource Serif 50011vw · −0.03em
slow weight.
+
H1Source Serif 5007vw · bone
chapter one
+
H2Source Serif italic 5004vw · rust
A subheading sets the section.
+
LeadSource Sans 4002vw · 1.55
The lead carries the brief slowly, like wood that needs to season.
+
BodySource Sans 40016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 400 weight. Below 24px is forbidden in 1080p compositions. The page should feel sat-in.

+
LabelJetBrains Mono 50012px · 0.2em
// folio · pp. 04 / 16 · chrome
+
+
+ +
+
+
iii — Surface
+

Bone inside
sage.

+

Cards rest on bone surfaces inside the sage canvas. A short 4px rust stripe marks the corner — like a wood inlay. No shadows; the bone is the lift.

+
+
+
+ // craft · card +

example card.

+

Bone surface inside the sage canvas. A short rust inlay marks the top-left corner. The card sits flat — weight comes from material contrast, not shadow.

+
+42%
+
+ +
+
+ +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — Guidelines
+

Sic et
non.

+

A short list. The atmosphere thins the moment any of these slip.

+
+
+

sic.

    __DOS__
+

non.

    __DONTS__
+
+
+ +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
frames.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/monochrome/design.html b/skills/hyperframes/templates/presentations/monochrome/design.html new file mode 100644 index 000000000..b6c91689e --- /dev/null +++ b/skills/hyperframes/templates/presentations/monochrome/design.html @@ -0,0 +1,350 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
vol. i · mmxxvi
+
+ +
+
+
Design System · № 012
+
a ledger, a record, a brief.
+
+

__NAME__.

+
+
DisciplineResearch · Policy · Ledger
+
DisplayLora italic
+
Accent__ACCENT_LABEL__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ +
+
+
— Manifesto
+

the page is a record. the type is the voice. there is no colour because colour is not the argument.

+
+
+ +
+
+
i — Palette
+

Two notes,
two greys.

+

__PALETTE_LEDE__

+
+
+
i · paper
__PRIMARY_NAME__
__PRIMARY__
Warm white. The canvas.
+
ii · ink
__SECONDARY_NAME__
__SECONDARY__
The voice.
+
iii · cipher
__TERTIARY_NAME__
__TERTIARY__
Captions and chrome.
+
iv · margin
__ACCENT_NAME__
__ACCENT__
Hairlines and dividers.
+
+
+ +
+
+
ii — Typography
+

Lora and
Jost.

+

Lora italic carries headlines and emphasis. Jost handles body in 400 weight. JetBrains Mono runs labels. No third face.

+
+
+
DisplayLora italic 50011vw · −0.025em
quiet record.
+
Heading ILora italic 5007vw
chapter one
+
Heading IILora italic 5004vw
A subhead sets the section.
+
LeadLora italic 4002.2vw · 1.45
The lead carries the argument in a single, unhurried breath.
+
BodyJost 40016px · 1.75 · 62ch

The reader is slow — every line should reward the pace. Body copy below 24px is forbidden in any composition above 1080p. Set generously; let the page breathe. Emphasis is italic, never bold.

+
LabelJetBrains Mono 50012px · 0.22em
// folio · pp. 04 / 16 · ledger
+
+
+ +
+
+
iii — Surface
+

Paper, then
more paper.

+

No filled containers. Surfaces are defined by 1px hairlines and generous margins. The page itself is the only object.

+
+
+
+ // exempla · card +

exempla.

+

A surface is a marginal thing — a hairline, perhaps; a numeral, perhaps. The page already does the work. Nothing about a surface should announce it.

+
42
+
+ +
+
+ +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // transition +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ + +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — Guidelines
+

Sic et
non.

+

A handful of rules. The record breaks the moment any are violated.

+
+
+

sic.

    __DOS__
+

non.

    __DONTS__
+
+
+ +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
folios.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/neo-grid-bold/design.html b/skills/hyperframes/templates/presentations/neo-grid-bold/design.html new file mode 100644 index 000000000..88c12dbdf --- /dev/null +++ b/skills/hyperframes/templates/presentations/neo-grid-bold/design.html @@ -0,0 +1,371 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
v 1.0
+
+ +
+
+
Design System · № 020
+
__ACCENT_LABEL__
+
+

Neo-Grid
Bold.

+
+
DisciplineDesign · Brand · Conference
+
DisplayBricolage 800
+
SignalNeon __ACCENT__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
// MANIFESTO
+

type is volume. neon is position. nothing rounds; everything cuts.

+
+
+ +
+
+ 01 / palette +

Paper, ink,
and a single neon.

+

__PALETTE_LEDE__

+
+
+
01 / paper
__PRIMARY_NAME__
__PRIMARY__
Warm off-white. Canvas.
+
02 / ink
__SECONDARY_NAME__
__SECONDARY__
Type and structural lines.
+
03 / grey
__TERTIARY_NAME__
__TERTIARY__
Chrome and muted labels.
+
04 / neon
__ACCENT_NAME__
__ACCENT__
The single voice. Block highlight.
+
+
+ +
+
+ 02 / type +

Bricolage,
cut tight.

+

Bricolage Grotesque at 800 carries every headline at maximum optical size. Inter handles body in 500. JetBrains Mono runs chrome labels and pull-quotes.

+
+
+
DisplayBricolage 80011vw · −0.045em
hello world.
+
H1Bricolage 8007vw · −0.035em
chapter one
+
H2Bricolage 7004.2vw · −0.028em
slide headlines.
+
LeadInter 6002vw
The lead carries the brief in one decisive sentence.
+
BodyInter 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 500 weight — never bold. Below 24px is forbidden in 1080p compositions.

+
LabelJetBrains Mono 60012px · 0.18em
// LABEL · NEON BLOCK
+
+
+ +
+
+ 03 / surface +

Hard lines,
neon bars.

+

2px ink borders on every container. Zero radius. A small neon bar on the top corner names the slide's signal. No shadows; the bar is the lift.

+
+
+
+ // card · example +

example card.

+

2px ink border. 12px neon bar top-right. One element bears the highlight; the rest holds black on paper.

+
+42%
+
+ +
+
+ +
+
+ 04 / motion +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // EASING +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // DURATION +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+ 05 / background +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+ 06 / rules +

YES.
NO.

+

Short rules. Break any and the grid loses its voltage.

+
+
+

YES.

    __DOS__
+

NO.

    __DONTS__
+
+
+ +
+
+ 07 / templates +

__SLIDE_COUNT_WORD__
frames.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/peoples-platform/design.html b/skills/hyperframes/templates/presentations/peoples-platform/design.html new file mode 100644 index 000000000..397bed164 --- /dev/null +++ b/skills/hyperframes/templates/presentations/peoples-platform/design.html @@ -0,0 +1,381 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
vote yes —
+
+ +
+
+
★ DESIGN SYSTEM · № 011
+
★ ★ ★
+
+

__NAME_LINE1__
__NAME_LINE2__.

+
— a system with a fist in the air —
+
+
DisciplineCivic · Campaign · Manifesto
+
DisplayAlfa Slab One
+
Fire__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
— manifesto
+

the page is a protest. type is volume. color is position, not decoration.

+
+
+ +
+
+ 01 — Palette +

Four positions.

+

__PALETTE_LEDE__

+
+
+
01 · paper
__PRIMARY_NAME__
__PRIMARY__
Common ground. The page.
+
02 · ink
__SECONDARY_NAME__
__SECONDARY__
Type and structural lines.
+
03 · navy
__TERTIARY_NAME__
__TERTIARY__
Authority and headlines.
+
04 · fire
__ACCENT_NAME__
__ACCENT__
The volume. One per slide.
+
+
+ +
+
+ 02 — Type +

Slab,
script, sans.

+

Alfa Slab One stamps the headlines. Caveat Brush handles the urgent hand. Source Sans keeps the body legible. JetBrains Mono runs chrome.

+
+
+
DisplayAlfa Slab One10vw · UPPERCASE
VOTE NOW.
+
H1Alfa Slab One7vw · navy
CHAPTER ONE
+
H2Alfa Slab One4.2vw
SLIDE HEADLINES.
+
HandCaveat Brush6vw · red · tilted
a hand-painted aside —
+
LeadSource Sans 6002vw
The lead carries the argument with conviction and one short breath.
+
BodySource Sans 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays open and direct. Below 24px is forbidden in any composition shown above 1080p.

+
LabelJetBrains Mono 60013px · ink on cream
★ POSTER · LABEL · 04 / 16
+
+
+ +
+
+ 03 — Surface +

Posters
and placards.

+

Every surface gets a 4px black border and a hard offset shadow in fire, navy, or ink. Surfaces tilt ±1°. Nothing is centered on a grid.

+
+
+
+ ▶ CARD · POSTER +

EXAMPLE PLACARD.

+

4px black border. 8px offset fire shadow. Slight tilt. The voltage is in the construction, not the content.

+
+42%
+
— says the data!
+
+ +
+
+ +
+
+ 04 — Motion +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ ▶ EASING +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ ▶ DURATION +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+ 05 — Background +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
▶ __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
▶ SHADER CONFIG +
__SHADER_CONFIG__
+
+
▶ VERTEX SHADER +
__SHADER_VERTEX__
+
+
▶ FRAGMENT SHADER +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+ 06 — Rules +

YES.
NO.

+

Short rules. Break any and the message loses its voice.

+
+
+

YES.

    __DOS__
+

NO.

    __DONTS__
+
+
+ +
+
+ 07 — Templates +

__SLIDE_COUNT_WORD__
posters.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/pin-and-paper/design.html b/skills/hyperframes/templates/presentations/pin-and-paper/design.html new file mode 100644 index 000000000..05c3a6064 --- /dev/null +++ b/skills/hyperframes/templates/presentations/pin-and-paper/design.html @@ -0,0 +1,413 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ + + + + + + + + + +
+
+ + __NAME__ +
+ +
field notes —
+
+ +
+ + + +
+
Design System · № 016
+
__ACCENT_LABEL__
+
+

__NAME__.

+
— small things, pinned —
+
+
DisciplineResearch · Essay · Reflection
+
DisplayCrimson italic
+
HandCaveat
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+ +
+
— manifesto
+

the page is a scrapbook. notes are pinned, never typed. nothing is finished — the truth is in the margin.

+
+
+ +
+ +
+
i — palette
+

Yellow paper,
ink-blue thread.

+

__PALETTE_LEDE__

+
+
+
i · paper
__PRIMARY_NAME__
__PRIMARY__
Yellow notebook stock.
+
ii · ink
__SECONDARY_NAME__
__SECONDARY__
Deepest blue. Type and lines.
+
iii · ochre
__TERTIARY_NAME__
__TERTIARY__
Aged margin warning tone.
+
iv · pen
__ACCENT_NAME__
__ACCENT__
Pen ink — the handwriting voice.
+
+
+ +
+ +
+
ii — typography
+

Crimson italic,
and a hand.

+

Crimson Pro italic carries every headline and lead. Caveat handles the handwritten asides — pinned notes in the margin. JetBrains Mono runs labels.

+
+
+
DisplayCrimson italic 60010vw · −0.025em
small things.
+
Heading ICrimson italic 6007vw · pen blue
chapter one
+
Heading IICrimson italic 6004vw
A subhead pins the section.
+
HandCaveat 7005vw · pen blue · tilt
— a handwritten note —
+
LeadCrimson italic 4002vw · 1.55
The lead pins the argument in one slow, sweetened breath.
+
BodyCrimson 40017px · 1.75 · 60ch

Pack my box with five dozen liquor jugs. Body type sets quietly — Crimson at 400, large for an essay feel. Below 24px is forbidden in 1080p compositions.

+
LabelJetBrains Mono 50012px · 0.18em
// pinned · folio · 04 / 16
+
+
+ +
+ +
+
iii — surface
+

Pinned,
not printed.

+

Every card is a pearl paper-2 surface pinned to the yellow page with a tilted safety pin. Cards tilt ±1°. Nothing aligns.

+
+
+
+ + — a pinned thought — +

example.

+

Pearl card pinned to yellow paper. 1px ink border, gentle tilt, a safety pin on the corner. The accent voice is always the handwritten one, never the typed.

+
+42%
+
+ +
+
+ +
+ +
+
iv — motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ — easing — +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ — duration — +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+ +
+
v — background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+ +
+
vi — guidelines
+

yes please.
no thank you.

+

A short list. The scrapbook tears the moment any are broken.

+
+
+

yes please.

    __DOS__
+

no thank you.

    __DONTS__
+
+
+ +
+
+
vii — templates
+

__SLIDE_COUNT_WORD__
pinned pages.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/pink-script/design.html b/skills/hyperframes/templates/presentations/pink-script/design.html new file mode 100644 index 000000000..ba3739476 --- /dev/null +++ b/skills/hyperframes/templates/presentations/pink-script/design.html @@ -0,0 +1,372 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
after hours · 2026
+
+ +
+
+
Design System · № 005
+
__ACCENT_LABEL__
+
+

__NAME__.

+
+
DisciplineFashion · Nightlife · Luxe
+
DisplayInstrument Serif italic
+
Signal__ACCENT_LABEL__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ +
+
+
— Manifesto
+

the page is nocturnal. the type is italic. the accent is worn, never decorated.

+
+
+ +
+
+
i — Palette
+

Four colours,
after midnight.

+

__PALETTE_LEDE__

+
+
+
i · pearl
__PRIMARY_NAME__
__PRIMARY__
Body type on noir. Rare and reserved.
+
ii · noir
__SECONDARY_NAME__
__SECONDARY__
The canvas. Velvet, never void.
+
iii · shadow
__TERTIARY_NAME__
__TERTIARY__
Muted chrome and dividers.
+
iv · rouge
__ACCENT_NAME__
__ACCENT__
The accent. One per slide, never more.
+
+
+ +
+
+
ii — Typography
+

Instrument italic,
almost always.

+

Instrument Serif carries every headline in italic. Inter handles body in lowercase 300. JetBrains Mono runs the smallest labels.

+
+
+
DisplayInstrument italic11vw · −0.02em
velvet rope.
+
Heading IInstrument italic7vw · pink
chapter one
+
Heading IIInstrument italic4.2vw
Slide titles set in italic serif.
+
LeadInter 4002vw · 1.55
The lead carries the argument with restraint.
+
BodyInter 30016px · 1.7 · 60ch

Pack my box with five dozen liquor jugs. Body text stays light — 300 weight, 1.7 line-height. Never bold. Never uppercase.

+
LabelJetBrains Mono12px · 0.22em
// after hours · 04 of 16 · table 11
+
+
+ +
+
+
iii — Surface
+

Velvet, not
plastic.

+

Hairline borders. No shadows. Surfaces emerge from the dark by tone alone — never by elevation.

+
+
+
+ // table 11 · exempla +

exempla.

+

One element bears the accent — never more. The card holds itself together with type, not chrome. Hairlines optional; shadows forbidden.

+
+42%
+
+ +
+
+ +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — Guidelines
+

Sic et
non.

+

The rules are short. The system breaks the moment any are violated.

+
+
+
+

sic.

+
    __DOS__
+
+
+

non.

+
    __DONTS__
+
+
+
+ +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
tables.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/playful/design.html b/skills/hyperframes/templates/presentations/playful/design.html new file mode 100644 index 000000000..3ee3a91fc --- /dev/null +++ b/skills/hyperframes/templates/presentations/playful/design.html @@ -0,0 +1,369 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
v 1.0 · 2026
+
+ +
+
+
Design System · № 023
+
__ACCENT_LABEL__
+
+

__NAME__.

+
+
DisciplineIndie · Creator · Lifestyle
+
DisplaySyne 800
+
Vibe__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
Manifesto
+

the page is sun-warm. type is round. every corner curves; nothing apologises.

+
+
+ +
+
+ 01 / palette +

Peach, ink,
and a coral sun.

+

__PALETTE_LEDE__

+
+
+
01 / peach
__PRIMARY_NAME__
__PRIMARY__
Sun-warm canvas.
+
02 / ink
__SECONDARY_NAME__
__SECONDARY__
Warm dark. Type and borders.
+
03 / tan
__TERTIARY_NAME__
__TERTIARY__
Mid-tone chrome.
+
04 / coral
__ACCENT_NAME__
__ACCENT__
The sun. Single accent, used loud.
+
+
+ +
+
+ 02 / type +

Syne, chunky & warm.

+

Syne at 800 carries every headline — its quirky bowls and wide caps make even capitals feel warm. Sora handles body in 500. JetBrains Mono runs labels.

+
+
+
DisplaySyne 80011vw · −0.035em
hello world.
+
H1Syne 8007.5vw · coral
chapter one
+
H2Syne 7004.2vw
slide headlines.
+
LeadSora 6002vw
The lead carries the brief in a single sun-warm paragraph.
+
BodySora 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 500 weight. Below 24px is forbidden in 1080p compositions. The page wants air; never crowd.

+
LabelJetBrains Mono 60012px · pill
☼ label · sunny chip
+
+
+ +
+
+ 03 / surface +

Round, warm,
sun-touched.

+

28px corners on cards. Labels are pills. Every card gets a small coral sun on top-right. No drop shadows; the ink border carries the lift.

+
+
+
+ ☼ card · example +

example card.

+

28px corners. 2px ink border. A coral sun on top-right. The accent is rationed: one sun, one coral element per card.

+
+42%
+
+ +
+
+ +
+
+ 04 / motion +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ ☼ easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ ☼ duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+ 05 / background +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
☼ __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
☼ shader config (json) +
__SHADER_CONFIG__
+
+
☼ vertex shader (glsl) +
__SHADER_VERTEX__
+
+
☼ fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+ 06 / rules +

Yes.
No.

+

A short list. The day clouds the moment any are broken.

+
+
+

Yes.

    __DOS__
+

No.

    __DONTS__
+
+
+ +
+
+ 07 / templates +

__SLIDE_COUNT_WORD__
sunny frames.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/raw-grid/design.html b/skills/hyperframes/templates/presentations/raw-grid/design.html new file mode 100644 index 000000000..688f156f7 --- /dev/null +++ b/skills/hyperframes/templates/presentations/raw-grid/design.html @@ -0,0 +1,390 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
v 1.0 · 2026
+
+ +
+
+
Design System · No. 030
+
__ACCENT_LABEL__
+
+

__NAME__.

+
+
DisciplineFounder · Demo day · Brand
+
DisplaySpace Grotesk 700
+
PullPink · Sage
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
+ manifesto
+

borders are structural. tilt is energy. nothing apologises — every block earns its place.

+
+
+ +
+
+ 01 / palette +

Four blocks.

+

__PALETTE_LEDE__

+
+
+
01 / paper
__PRIMARY_NAME__
__PRIMARY__
Warm canvas.
+
02 / ink
__SECONDARY_NAME__
__SECONDARY__
Near-black. Borders, type.
+
03 / sage
__TERTIARY_NAME__
__TERTIARY__
Cool pull. Calm callouts.
+
04 / pink
__ACCENT_NAME__
__ACCENT__
Warm pull. Headlines, accents.
+
+
+ +
+
+ 02 / type +

Space Grotesk,
punched.

+

Space Grotesk 700 carries every headline at maximum scale. Manrope handles body in 500. JetBrains Mono runs labels and chrome. Tight tracking, hard cuts.

+
+
+
DisplaySpace Grotesk 70011vw · −0.05em
hello world.
+
H1Space Grotesk 7007vw · pulled
chapter one
+
H2Space Grotesk 6004.2vw
slide headlines.
+
LeadManrope 6002vw
The lead carries the brief in one direct, founder-voice sentence.
+
BodyManrope 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 500 weight. Below 24px is forbidden in 1080p compositions. The pull blocks do the lifting; body stays quiet.

+
LabelJetBrains Mono 60012px · pink chip
// label · pink chip
+
+
+ +
+
+ 03 / surface +

Thick borders,
offset shadow.

+

3px ink border on every card, 6px offset shadow (no blur), and a ±1° tilt. Surfaces never align to the grid — that's the whole point.

+
+
+
+ + card · example +

example card.

+

3px ink border. 6px offset shadow. ±1° tilt. The pull block carries the meaning; body stays minimal.

+
+42%
+ +
+ +
+
+ +
+
+ 04 / motion +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ + easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ + duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+ 05 / background +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+ 06 / rules +

Yes.
No.

+

A short list. The grid loses its energy the moment any of these slip.

+
+
+

Yes .

    __DOS__
+

No .

    __DONTS__
+
+
+ +
+
+ 07 / templates +

__SLIDE_COUNT_WORD__
frames.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/retro-windows/design.html b/skills/hyperframes/templates/presentations/retro-windows/design.html new file mode 100644 index 000000000..b5a3410c8 --- /dev/null +++ b/skills/hyperframes/templates/presentations/retro-windows/design.html @@ -0,0 +1,587 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + + +
+ + +
+
+
__NAME__ — Design System.html
+
_□×
+
+
+ File + Edit + View + Insert + Format + Tools + Help +
+
+ + +
+
+
+ Welcome.exe + _□× +
+
+
+

__NAME__.

+

— A nostalgic deck system, modeled on a workstation from 1995. —

+
+
+
DisciplineRetro · Tech · Y2K
+
TypePixelify Sans
+
Chrome__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+
+
+ + +
+
+
+ Manifesto.txt + _□× +
+
+
i
+

The page is a desktop. Surfaces are 3D. Chrome is structural — not nostalgic for its own sake.

+
+
+
+ + +
+
+
Palette.exe — 01 of 07_□×
+
+ 01 +

Four system colours.

+

__PALETTE_LEDE__

+
+
+
+
Swatches.dll_□×
+
+
+
+
01 · primary
+
__PRIMARY_NAME__
+
__PRIMARY__
Workstation chrome. Default surface.
+
+
+
02 · secondary
+
__SECONDARY_NAME__
+
__SECONDARY__
Type and bevel shadows.
+
+
+
03 · tertiary
+
__TERTIARY_NAME__
+
__TERTIARY__
Input fields, bevel highlights.
+
+
+
04 · accent
+
__ACCENT_NAME__
+
__ACCENT__
Active titlebar; accent type.
+
+
+
+
+
+ + +
+
+
Typography.exe — 02 of 07_□×
+
+ 02 +

Pixelify Sans,
everything else.

+

Pixelify Sans handles every weight. VT323 stands in for terminal output and status bars. No third face.

+
+
+
+
Specimen.dll_□×
+
+
DisplayPixelify Sans 70010vw · −0.01em
HELLO WORLD.
+
H1Pixelify Sans 7007vw · navy
Chapter One
+
H2Pixelify Sans 7004vw
Slide titles in pixel sans.
+
LeadPixelify Sans 5002vw
The lead carries the brief in a single screen of pixel type.
+
BodyPixelify Sans 50014px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 500 weight. Below 24px is forbidden in 1080p compositions. Never use anti-aliased system stacks; the pixel face is the whole point.

+
MonoVT323 40022px · status bar
Ready · 1024×768 · NUM ▣
+
+
+
+ + +
+
+
Surface.exe — 03 of 07_□×
+
+ 03 +

Bevels do
the lifting.

+

Every surface is a 3D bevel — light from the top-left, shadow to the bottom-right. Inset for inputs, outset for buttons. No drop shadows.

+
+
+
+
Surface.dll_□×
+
+
+
+ Card.exe +

Example Card.

+

Inset bevel for the card body. Buttons get outset bevels — pressed buttons invert. Bevels do the work; no shadow, no radius.

+
+42%
+
+
+
+
    +
  • Corners__CORNER_RADIUS__
    • +
  • Padding__PADDING__
    • +
  • Gap__GAP__
    • +
  • Elevation__ELEVATION__
    • +
  • Density__DENSITY__
    • +
+
+
+
+
+
+ + +
+
+
Motion.exe — 04 of 07_□×
+
+ 04 +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+
Motion.dll_□×
+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+
+
+ + +
+
+
Background.exe — 05 of 07_□×
+
+ 05 +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
+
Background.dll_□×
+
+
+
// __BG_BADGE__
+
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+
+
+ + +
+
+
Rules.exe — 06 of 07_□×
+
+ 06 +

Allowed.
Forbidden.

+

The system collapses the moment any of these slip.

+
+
+
+
Rules.dll_□×
+
+
+
+

Allowed.

+
    __DOS__
+
+
+

Forbidden.

+
    __DONTS__
+
+
+
+
+
+ + +
+
+
Templates.exe — 07 of 07_□×
+
+ 07 +

__SLIDE_COUNT_WORD__
windows.

+

The full library at 1920×1080. Each thumbnail is the live slide window, scaled.

+
+
+
+
Templates.dll_□×
+
+
+
+
+
+ + + + + + +
+ Start + + __NAME__ — DS + Templates + 12:00 PM +
+ + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/retro-zine/design.html b/skills/hyperframes/templates/presentations/retro-zine/design.html new file mode 100644 index 000000000..66bbdfa6e --- /dev/null +++ b/skills/hyperframes/templates/presentations/retro-zine/design.html @@ -0,0 +1,385 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
__ACCENT_LABEL__
+
+ +
+
PRINTED IN
ONE PASS
+
+
DESIGN SYSTEM · № 029
+
— a riso-printed zine
+
+
— a small magazine, riso-printed —
+

__NAME__.

+
+
DisciplineZine · Music · Indie press
+
DisplayBebas Neue
+
Hand__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
— manifesto
+

print once, in one colour. text is large. nothing is digitally smooth — the grain stays.

+
+
+ +
+
+
i — palette
+

Four plates,
one press.

+

__PALETTE_LEDE__

+
+
+
01 · primary
__PRIMARY_NAME__
__PRIMARY__
Newsprint beige. Canvas.
+
02 · secondary
__SECONDARY_NAME__
__SECONDARY__
Outline ink. Borders, type.
+
03 · tertiary
__TERTIARY_NAME__
__TERTIARY__
Warm pull. Stat shadow.
+
04 · accent
__ACCENT_NAME__
__ACCENT__
The signal. Headlines and chapter fills.
+
+
+ +
+
+
ii — type
+

Bebas tall,
Caveat scribble.

+

Bebas Neue carries every display headline. Caveat handles the handwritten notes and rubber-stamp marks. PT Sans is the workhorse body — warm and printable. JetBrains Mono labels.

+
+
+
DisplayBebas Neue11vw · uppercase
HELLO WORLD.
+
H1Bebas Neue8vw · green
CHAPTER ONE
+
H2Bebas Neue4.2vw
SLIDE HEADLINES.
+
HandCaveat 7005vw · green · tilt
— a margin scribble —
+
LeadPT Sans 7002vw
The lead carries the brief like a back-cover blurb in a printed zine.
+
BodyPT Sans 40016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 400. Below 24px is forbidden in 1080p compositions. The grain texture lives in the canvas — never on the type.

+
LabelPlex Mono 50012px · ink
// PAGE · LABEL · 04 / 16
+
+
+ +
+
+
iii — surface
+

2px outline,
offset stamp.

+

Every card gets a 2px ink outline and a 5–6px offset stamp behind it in green or ochre — the riso "misregistration" effect. No shadows, no blur.

+
+
+
+ — page card — +

EXAMPLE CARD.

+

2px ink outline. Green stamp offset 5–6px behind. The misregister is the chrome — never apply digital shadows on top.

+
+42%
+
— nice number!
+
+ +
+
+ +
+
+
iv — motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ — easing — +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ — duration — +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — rules
+

YES —
NO —

+

A short list. The riso loses its character the moment any are broken.

+
+
+

YES —

    __DOS__
+

NO —

    __DONTS__
+
+
+ +
+
+
vii — templates
+

__SLIDE_COUNT_WORD__
pages.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/sakura-chroma/design.html b/skills/hyperframes/templates/presentations/sakura-chroma/design.html new file mode 100644 index 000000000..cf6f3e017 --- /dev/null +++ b/skills/hyperframes/templates/presentations/sakura-chroma/design.html @@ -0,0 +1,435 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
サクラ・クロマ
+
+ +
+
+
+
☑ Design System / № 013
+
★ MMXXVI
+
+

__NAME__.

+
桜・色彩 — a system in four ribbons
+
+
CATEGORYCatalogue · Hardware · Music
+
DISPLAYOswald 700
+
SIGNAL__ACCENT_LABEL__
+
VOLUME
+
+
+ +
+
+
☑ MANIFESTO
+

the deck is a product page. each slide is a catalogue entry. ribbons are not decoration — they are category.

+
+
+ +
+
+ 01 — Palette +

Cream, ink,
and four ribbons.

+

__PALETTE_LEDE__

+
+
+
01 // PAPER
__PRIMARY_NAME__
__PRIMARY__
Catalogue paper.
+
02 // INK
__SECONDARY_NAME__
__SECONDARY__
Headlines, borders, lines.
+
03 // RED
__ACCENT_NAME__
__ACCENT__
Primary ribbon. Headlines, alerts.
+
04 // BLUE
__TERTIARY_NAME__
__TERTIARY__
Secondary ribbon. Subheads.
+
+
+ +
+
+ 02 — Type +

Oswald,
condensed and bold.

+

Oswald 700 stamps every headline. Noto Sans handles the body in 500 weight. Noto Sans JP carries the bilingual moments. JetBrains Mono for technical labels.

+
+
+
DisplayOswald 70010vw · UPPERCASE
CHROMA 04.
+
H1Oswald 7007vw · blue
CHAPTER ONE
+
H2Oswald 7004.2vw
SLIDE HEADLINES.
+
JPNoto Sans JP 7005vw
+
LeadNoto Sans 6002vw
The lead carries the brief like a back-cover blurb on a cassette.
+
BodyNoto Sans 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 500 weight. Below 24px is forbidden in 1080p compositions. The page reads as a JIS-spec sheet — every fact has a checkbox.

+
LabelJetBrains Mono 60013px · cream on ink
☑ CATALOG · LABEL · TYPE-IV
+
+
+ +
+
+ 03 — Surface +

Cards as
cassette cases.

+

Every card opens with a diagonal-ribbon strip on top. Then a 3px ink border, 0 radius, JIS-spec checkboxes beneath the headline.

+
+
+
+
+
+ ☑ TYPE-IV · METAL +

EXAMPLE CARD.

+

Each card opens with a diagonal-ribbon header strip. Bevels are forbidden; the page is print. The accent always lives in the strip — never below it.

+
+42%
+
+ STOCK : 120 GSM CREAM + INK : 2-PLATE OFFSET + BORDER : 3 PX SOLID +
+
+
+ +
+
+ +
+
+ 04 — Motion +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+
EASING.dll
+
+

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+
+
DURATION.dll
+
+

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+
+ + +
+
+ 05 — Background +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
☑ __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
☑ SHADER CONFIG (JSON) +
__SHADER_CONFIG__
+
+
☑ VERTEX SHADER (GLSL) +
__SHADER_VERTEX__
+
+
☑ FRAGMENT SHADER (GLSL) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+ 06 — Rules +

Allowed.
Forbidden.

+

The catalogue stays in print the moment any of these slip.

+
+
+
+
☑ ALLOWED
+
+

YES.

+
    __DOS__
+
+
+
+
☒ FORBIDDEN
+
+

NO.

+
    __DONTS__
+
+
+
+
+ +
+
+ 07 — Templates +

__SLIDE_COUNT_WORD__
cassette frames.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/scatterbrain/design.html b/skills/hyperframes/templates/presentations/scatterbrain/design.html new file mode 100644 index 000000000..4d5ba1702 --- /dev/null +++ b/skills/hyperframes/templates/presentations/scatterbrain/design.html @@ -0,0 +1,394 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
— workshop, 2026
+
+ +
+
ok!
+
yes!
+
+
Design System · № 024
+
— a brainstorm
+
+

scatterbrain.

+
— a deck for thinking out loud —
+
+
DisciplineWorkshop · Brainstorm · Ideation
+
DisplayShrikhand
+
Hand__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
— manifesto
+

thinking is messy. notes are tilted. nothing is finished — that's the point.

+
+
+ +
+
+
i — palette
+

Four sticky
colours.

+

__PALETTE_LEDE__

+
+
+
yellow note
__PRIMARY_NAME__
__PRIMARY__
Headlines and starting points.
+
pink note
__SECONDARY_NAME__
__SECONDARY__
Warm thoughts, problems.
+
blue note
__TERTIARY_NAME__
__TERTIARY__
Cool thoughts, decisions.
+
green note
__ACCENT_NAME__
__ACCENT__
Outcomes, agreements.
+
+
+ +
+
+
ii — type
+

Shrikhand, Zilla,
a hand.

+

Shrikhand carries every display headline — its chunky display serif holds attention. Zilla Slab handles body in 500. Caveat is the hand — every note gets a handwritten label.

+
+
+
DisplayShrikhand 40010vw · upright
scatter idea!
+
H1Shrikhand 4007vw · orange
chapter one
+
H2Zilla Slab 6004vw · slab body
a subheading sets the section.
+
HandCaveat 7005vw · tilted · ink
— a margin note —
+
LeadZilla Slab 6002vw
The lead carries the brief like a marker on a wall.
+
BodyZilla Slab 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 500 weight slab. The slab anchors the playful display — think strategy notebook, not magazine.

+
LabelJetBrains Mono 50012px · sticky
// LABEL · STICKY
+
+
+ +
+
+
iii — surface
+

Tilted,
but readable.

+

Every card tilts ±1.5°. 1px ink border, 6px offset shadow (no blur). The handwritten label sits at a different angle to the card.

+
+
+
+ — a sticky note — +

example.

+

1px ink border. 6px offset shadow. ±1.5° tilt. The handwritten note tilts the other way. Suns, arrows, and exclamations are allowed in the margin.

+
+42%
+
— ooh nice!
+
+ +
+
+ +
+
+
iv — motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ — easing — +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ — duration — +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
— __BG_BADGE__ —
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
— shader config (json) — +
__SHADER_CONFIG__
+
+
— vertex shader (glsl) — +
__SHADER_VERTEX__
+
+
— fragment shader (glsl) — +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — guidelines
+

yes!
no.

+

A short list. The board tidies the moment any of these slip.

+
+
+

yes!

    __DOS__
+

no.

    __DONTS__
+
+
+ +
+
+
vii — templates
+

__SLIDE_COUNT_WORD__
workshops.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/signal/design.html b/skills/hyperframes/templates/presentations/signal/design.html new file mode 100644 index 000000000..26e95f7fd --- /dev/null +++ b/skills/hyperframes/templates/presentations/signal/design.html @@ -0,0 +1,365 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
vol. i · 2026
+
+ +
+
+
Design System · № 019
+
__ACCENT_LABEL__
+
+
+

signal.

+
+
DisciplineInvestor · Advisory · Policy
+
DisplaySpectral 600 / italic
+
Accent__ACCENT_LABEL__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ +
+
+
— Manifesto
+

the page is a statement of record. type is sober. gold is the signal, used once.

+
+
+ +
+
+
i — Palette
+

Navy, bone,
and a signal.

+

__PALETTE_LEDE__

+
+
+
i · Primary
__PRIMARY_NAME__
__PRIMARY__
Chapter and stat surfaces.
+
ii · Secondary
__SECONDARY_NAME__
__SECONDARY__
The canvas. Quiet authority.
+
iii · Tertiary
__TERTIARY_NAME__
__TERTIARY__
Chrome and muted labels.
+
iv · Accent
__ACCENT_NAME__
__ACCENT__
The single signal. Reserved.
+
+
+ +
+
+
ii — Typography
+

Spectral roman,
italics rare.

+

Spectral at 600 weight roman carries headlines — sober, never decorative. Italic is reserved for emphasis. Inter handles body in 400. JetBrains Mono runs the chrome.

+
+
+
DisplaySpectral 600 roman10vw · −0.025em
Statement of record.
+
Heading ISpectral 600 roman7vw · bone on navy
Chapter One
+
Heading IISpectral 600 roman4vw
A subhead sets the section.
+
LeadInter 5002vw · 1.5
The lead carries the argument in one declarative sentence.
+
BodyInter 40016px · 1.75 · 62ch

Pack my box with five dozen liquor jugs. Body type stays at 400 weight. Below 24px is forbidden in 1080p compositions. Italic only for short emphasis — never for whole sentences.

+
LabelJetBrains Mono 50012px · 0.22em
// section · folio · pp. 04 / 16
+
+
+ +
+
+
iii — Surface
+

Bone inside
navy.

+

Cards and ledgers sit on bone paper inside the navy canvas. A 2px gold tick marks every card. No shadows; the bone surface is the lift.

+
+
+
+ // statement · card +

Statement of record.

+

Bone surface, 1px navy border, a 2px gold tick at the top-left. The card sits flat on the navy canvas — no shadow, no radius.

+
+42%
+
+ +
+
+ +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — Guidelines
+

Sic et
non.

+

A short list. The signal weakens the moment any are broken.

+
+
+

sic.

    __DOS__
+

non.

    __DONTS__
+
+
+ +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
records.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/soft-editorial/design.html b/skills/hyperframes/templates/presentations/soft-editorial/design.html new file mode 100644 index 000000000..921f0588b --- /dev/null +++ b/skills/hyperframes/templates/presentations/soft-editorial/design.html @@ -0,0 +1,370 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
spring · 2026
+
+ +
+
+
Design System · № 006
+
A Sunday supplement · 2026
+
+

__NAME_LINE1____NAME_LINE2__.

+
+
DisciplineMagazine · Gallery · Long-form
+
DisplayCormorant italic
+
Accents__ACCENT_LABEL__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ +
+
+
— Manifesto
+

the page is sunlight. the type is unhurried. the colours are seasons, not signals.

+
+
+ +
+
+
i — Palette
+

Paper, ink,
and three seasons.

+

__PALETTE_LEDE__

+
+
+
i · paper
__PRIMARY_NAME__
__PRIMARY__
Warm canvas. Never white.
+
ii · ink
__SECONDARY_NAME__
__SECONDARY__
The body voice. Warm dark.
+
iii · sage
__TERTIARY_NAME__
__TERTIARY__
Chrome and quiet labels.
+
iv · blush
__ACCENT_NAME__
__ACCENT__
The first accent. Warm and worn.
+
+
+ +
+
+
ii — Typography
+

Cormorant,
set generously.

+

Cormorant Garamond carries both display and body. Italics for emphasis, roman for accent words. Inter sans is reserved for the smallest UI, JetBrains Mono for chrome labels.

+
+
+
DisplayCormorant italic 50011vw · −0.018em
quiet spring.
+
Heading ICormorant italic 5007vw
chapter one
+
Heading IICormorant italic 5004vw · sage
A subheading sets the mood.
+
LeadCormorant italic 4002.2vw · 1.45
The lead drifts across the page like a Sunday morning.
+
BodyCormorant 40016px · 1.75 · 62ch

The reader is unhurried — every line should reward the pace. Body copy below 24px is forbidden in any composition above 1080p. Set generously; let the page breathe. Italic carries emphasis; the accent colour is a season worn lightly.

+
LabelJetBrains Mono 50012px · 0.18em
// folio · chrome · pp. 04 / 16
+
+
+ +
+
+
iii — Surface
+

Paper, then
more paper.

+

Surfaces are nearly invisible — a hairline border, perhaps, but no shadows. The page is the surface; the canvas is the page.

+
+
+
+ // exempla · card +

exempla.

+

A surface is a marginal thing. A border, perhaps; a numeral, perhaps; otherwise the type alone must hold the page together. The accent is rationed: one season per slide.

+
+42%
+

// q on q · sample stat

+
+ +
+
+ +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
vi — Guidelines
+

Sic et
non.

+

The rules are few. The page softens the moment any are violated.

+
+
+
+

sic.

+
    __DOS__
+
+
+

non.

+
    __DONTS__
+
+
+
+ +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
spreads.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/stencil-tablet/design.html b/skills/hyperframes/templates/presentations/stencil-tablet/design.html new file mode 100644 index 000000000..e33c61323 --- /dev/null +++ b/skills/hyperframes/templates/presentations/stencil-tablet/design.html @@ -0,0 +1,383 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
__ACCENT_LABEL__
+
+ +
+
+
▪ Design System · № 015
+
__ACCENT_LABEL__ · __DATE__
+
+

__NAME__

+
+
DisciplineMuseum · Heritage · Research
+
DisplayBig Shoulders Stencil
+
Palette__ACCENT_LABEL__
+
Volume07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
▪ MANIFESTO
+

the page is excavated. type is stamped. colour is strata, not decoration.

+
+
+ +
+
+ 01 — Palette +

Six
earth strata.

+

__PALETTE_LEDE__

+
+
+
01 · bone
__PRIMARY_NAME__
__PRIMARY__
+
02 · ink
__SECONDARY_NAME__
__SECONDARY__
+
03 · umber
__TERTIARY_NAME__
__TERTIARY__
+
04 · terra
__ACCENT_NAME__
__ACCENT__
+
05 · ochre
ochre.
#C9A157
+
06 · moss
moss.
#7E8456
+
+
+ +
+
+ 02 — Type +

Stencil cut,
heavy stamped.

+

Big Shoulders Stencil Display carries every headline — cut, condensed, uppercase. Inter handles body in 500. JetBrains Mono runs labels with field-notes spacing.

+
+
+
DisplayStencil 90010vw · UPPERCASE
STRATUM IV.
+
H1Stencil 9007vw · terra
CHAPTER ONE
+
H2Stencil 7004.2vw
SLIDE HEADLINES.
+
LeadInter 6002vw
The lead carries the field note in one calm paragraph.
+
BodyInter 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays at 500 weight. Below 24px is forbidden in 1080p compositions. Treat captions as field annotations.

+
LabelJetBrains Mono 60013px · bone on ink
▪ STRATUM · LABEL · 04 / 16
+
+
+ +
+
+ 03 — Surface +

Cards as
tablets.

+

Every card is a clay tablet — 2px ink border, no radius, a single colored bar stamped across the top to indicate stratum.

+
+
+
+ ▪ STRATUM IV +

EXAMPLE TABLET.

+

2px ink border. A colored bar across the top names the stratum. Every tablet inherits the colour assigned to its layer; only one stratum per slide.

+
+42%
+
+ +
+
+ +
+
+ 04 — Motion +

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ ▪ EASING +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ ▪ DURATION +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+ 05 — Background +

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+ 06 — Rules +

STAMPED.
NOT STAMPED.

+

The dig stops the moment any of these are violated.

+
+
+

STAMPED.

    __DOS__
+

NOT STAMPED.

    __DONTS__
+
+
+ +
+
+ 07 — Templates +

__SLIDE_COUNT_WORD__
tablets.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/studio/design.html b/skills/hyperframes/templates/presentations/studio/design.html new file mode 100644 index 000000000..23a78fdf0 --- /dev/null +++ b/skills/hyperframes/templates/presentations/studio/design.html @@ -0,0 +1,376 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + +
+ +
+
__NAME__
+ +
V 1.0
+
+ +
+
+
DESIGN SYSTEM · № 007
+
▶ __NAME__ 2026
+
+

__NAME__.

+
+
DISCIPLINEStudio · Agency · Brand
+
DISPLAYAnton
+
SIGNAL__ACCENT_LABEL__
+
BUILD07 sections · __SLIDE_COUNT__ frames
+
+
+ +
+
+
— MANIFESTO
+

The page shouts. Type is weapon. Volt is one voice — but it is loud.

+
+
+ +
+
+
01 — PALETTE
+

FOUR
VOLTS.

+

__PALETTE_LEDE__

+
+
+
01 // PAPER
__PRIMARY_NAME__
__PRIMARY__
Off-white body type on black.
+
02 // VOID
__SECONDARY_NAME__
__SECONDARY__
The canvas. Near-pure, never grey.
+
03 // GREY
__TERTIARY_NAME__
__TERTIARY__
Chrome and muted labels.
+
04 // VOLT
__ACCENT_NAME__
__ACCENT__
The signal. One element per slide.
+
+
+ +
+
+
02 — TYPE
+

ANTON
UP.

+

Anton handles every headline — tall, condensed, always uppercase. Inter does body in 500 weight. JetBrains Mono runs chrome.

+
+
+
DISPLAYAnton 40013vw · uppercase
HELLO WORLD.
+
H1Anton 4008vw · volt
CHAPTER ONE
+
H2Anton 4005vw
SLIDE HEADLINES.
+
LEADInter 6002vw
The lead carries the brief in one decisive line.
+
BODYInter 50016px · 60ch

Pack my box with five dozen liquor jugs. Body type stays sentence-case Inter 500. Never bold; the page is already loud enough. Body copy below 24px is forbidden in video compositions — measured at 1080p.

+
LABELJetBrains Mono 60012px · 0.16em
// SECTION · LABEL · METADATA
+
+
+ +
+
+
03 — SURFACE
+

HARD
EDGES.

+

Surfaces are 1px sharp. No corners. No shadows. Volt blocks frame the type, never decorate it.

+
+
+
+ № 1 + ▶ CARD · EXAMPLE +

EXAMPLE CARD.

+

Hard 1px border. Zero radius. One volt block carries the meaning. Everything else stays out of the way.

+
+42%
+
+ +
+
+ +
+
+
04 — MOTION
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ ▶ EASING +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ ▶ DURATION +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ +
+
+
05 — BACKGROUND
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • // GEOMETRY__BG_TYPE__
    • +
  • // DENSITY__BG_DENSITY__
    • +
  • // SPEED__BG_SPEED__
    • +
  • // STRENGTH__BG_STRENGTH__
    • +
  • // GRAIN__BG_GRAIN__
    • +
+
// SHADER CONFIG (JSON) +
__SHADER_CONFIG__
+
+
// VERTEX SHADER (GLSL) +
__SHADER_VERTEX__
+
+
// FRAGMENT SHADER (GLSL) +
__SHADER_FRAGMENT__
+
+
+
+
+ +
+
+
06 — RULES
+

YES.
NO.

+

The studio runs on these. Break any and the voltage drops.

+
+
+
+

YES.

+
    __DOS__
+
+
+

NO.

+
    __DONTS__
+
+
+
+ +
+
+
07 — TEMPLATES
+

__SLIDE_COUNT_WORD__
FRAMES.

+

The full library at 1920×1080. Each thumbnail is the live slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/user-design/design.html b/skills/hyperframes/templates/presentations/user-design/design.html new file mode 100644 index 000000000..a0e0c7d3f --- /dev/null +++ b/skills/hyperframes/templates/presentations/user-design/design.html @@ -0,0 +1,510 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + + +
+
__NAME__
+
+ Palette + Type + Surface + Motion + Background + Guidelines + Templates +
+
+ + +
+
+
+
Design System · v1.0
+

__NAME__.

+

Palette, typography, surface, motion, and composition guidelines — configured and ready to build.

+
+
Explore
+
Export
+
+
+
+
+
+
Primary__PRIMARY__
+
Secondary__SECONDARY__
+
Tertiary__TERTIARY__
+
Accent__ACCENT__
+
+
+
+
+
TOKENS4 colors · 2 fonts
+
RADIUS__CORNER_RADIUS__
+
MOTION__EASING_NAME__
+
DENSITY__DENSITY__
+
+
+ + +
+

Color is signal. Type is structure. Space is intentional.

+
+ + +
+
+
01 — PALETTE
+

Four tokens.

+

__PALETTE_LEDE__

+
+
+
01 · __PRIMARY_NAME__
primary
__PRIMARY__
Text color on canvas.
+
02 · __SECONDARY_NAME__
secondary
__SECONDARY__
Canvas background.
+
03 · __TERTIARY_NAME__
tertiary
__TERTIARY__
Muted, supporting tone.
+
04 · __ACCENT_NAME__
accent
__ACCENT__
__ACCENT_LABEL__
+
+
+ + +
+
+
02 — TYPOGRAPHY
+

Type hierarchy.

+

Display, heading, body, label — scaled for 1920×1080 video frames.

+
+
+
DISPLAYDisplay Font~96px
Aa
+
HEADING 01Display Font~56px
Heading One
+
HEADING 02Display Font~40px
Heading Two
+
BODYBody Font17px · 1.5

Pack my box with five dozen liquor jugs. Body text at reading size, set for comfortable line length and rhythm across compositions.

+
LABELMono11px · 0.06em
LABEL · METADATA · v1.0
+
+
+ + +
+
+
03 — SURFACE
+

Containers.

+

Radius __CORNER_RADIUS__, padding __PADDING__, gap __GAP__. Elevation: __ELEVATION__.

+
+
+
+ CARD +

Example card

+

Configured with current radius, padding, and elevation tokens. Surfaces use the secondary color with hairline borders.

+
42
metric
+
+ +
+
+ + +
+
+
04 — MOTION
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ EASING +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ TIMING +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ + +
+
+
05 — BACKGROUND
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
__BG_BADGE__
+
+
    +
  • GEOMETRY__BG_TYPE__
    • +
  • DENSITY__BG_DENSITY__
    • +
  • SPEED__BG_SPEED__
    • +
  • STRENGTH__BG_STRENGTH__
    • +
  • GRAIN__BG_GRAIN__
    • +
+
SHADER CONFIG (JSON) +
__SHADER_CONFIG__
+
+
VERTEX SHADER (GLSL) +
__SHADER_VERTEX__
+
+
FRAGMENT SHADER (GLSL) +
__SHADER_FRAGMENT__
+
+
+
+
+ + +
+
+
06 — GUIDELINES
+

Do & Don't.

+

Rules that keep the system coherent.

+
+
+

Do

    __DOS__
+

Don't

    __DONTS__
+
+
+ + +
+
+
07 — TEMPLATES
+

Slides.

+

Template slides at 1920×1080, scaled to fit.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + + diff --git a/skills/hyperframes/templates/presentations/vellum/design.html b/skills/hyperframes/templates/presentations/vellum/design.html new file mode 100644 index 000000000..4391cd943 --- /dev/null +++ b/skills/hyperframes/templates/presentations/vellum/design.html @@ -0,0 +1,426 @@ + + + + + +__NAME__ — Design System + + + + + + + + + + + + + + + + +
+ + +
+
__NAME__ — a design system
+ +
vol. i · mmxxvi
+
+ + +
+
+
Design System · № 003
+
Quartō · mmxxvi
+
+

__NAME__.

+
+
DisciplineEditorial · Research · Brief
+
Primary typeCormorant italic
+
Accent__ACCENT_LABEL__
+
Volumevii sections · __SLIDE_COUNT__ slide types
+
+
+ + +
+
+
— Manifesto
+

type holds silence. the page is the argument. the reader is a slow walker, and the deck is a long sentence.

+
+
+ + +
+
+
i — Palette
+

Four colours,
quietly composed.

+

__PALETTE_LEDE__

+
+
+
i · paper
__PRIMARY_NAME__
__PRIMARY__
Body text on dark. Rare and reserved.
+
ii · ink
__SECONDARY_NAME__
__SECONDARY__
The canvas. Cool, never cold.
+
iii · margin
__TERTIARY_NAME__
__TERTIARY__
Chrome, marginalia, the spine.
+
iv · gold
__ACCENT_NAME__
__ACCENT__
The accent. Used sparingly.
+
+
+ + +
+
+
ii — Typography
+

Cormorant,
almost always italic.

+

Cormorant Garamond does nearly all the speaking — italics for emphasis, roman for accent words. Inter holds the sans column for small chrome, JetBrains Mono runs labels.

+
+
+
+
DisplayCormorant italic 50011vw · italic · -0.02em
+
quiet argument.
+
+
+
Heading ICormorant italic 6007vw · italic · -0.01em
+
chapter one
+
+
+
Heading IICormorant italic 5004.2vw · gold
+
A subheading sets the section.
+
+
+
LeadCormorant italic 4002.2vw · 1.45 · 38ch
+
The lead carries the argument in a single, unhurried breath.
+
+
+
BodyCormorant 40018px · 1.7 · 62ch
+

The reader is a slow walker — every line should reward the pace. Body copy below 24px is forbidden in any composition rendered above 1080p. Set generously; let the page breathe. Use italic for emphasis, never bold.

+
+
+
LabelJetBrains Mono 50012px · 0.16em · teal
+
// chrome · folio · marginalia · note
+
+
+
+ + +
+
+
iii — Surface
+

Paper, then
ink.

+

Surfaces are nearly invisible. Hairline borders, no shadows. The page is the surface; the canvas is the page.

+
+
+
+ № 1 + // exempla · card +

Exempla.

+

A surface is a marginal thing. A border, perhaps; a numeral, perhaps; otherwise the words alone must hold the page together. The accent is rationed: precisely one gilded element per surface.

+
42%
+

// quarter on quarter · exempla

+
+ +
+
+ + +
+
+
iv — Motion
+

__EASING_HEADLINE__

+

__EASING_LEDE__

+
+
+
+ // easing +

__EASING_NAME__

+

__EASING_DESC__

+ 
__EASING_VALUE__
+
+
+ // duration +

__DURATION_DEFAULT__

+

__DURATION_DESC__

+ 
__DURATION_VALUES__
+
+
+
+ + +
+
+
v — Background
+

__BG_HEADLINE__

+

__BG_LEDE__

+
+
+
// __BG_BADGE__
+
+
    +
  • Geometry__BG_TYPE__
    • +
  • Density__BG_DENSITY__
    • +
  • Speed__BG_SPEED__
    • +
  • Strength__BG_STRENGTH__
    • +
  • Grain__BG_GRAIN__
    • +
+
// shader config (json) +
__SHADER_CONFIG__
+
+
// vertex shader (glsl) +
__SHADER_VERTEX__
+
+
// fragment shader (glsl) +
__SHADER_FRAGMENT__
+
+
+
+
+ + +
+
+
vi — Guidelines
+

Sic et
non.

+

The rules are short. The system collapses the moment any are violated.

+
+
+
+

sic.

+
    __DOS__
+
+
+

non.

+
    __DONTS__
+
+
+
+ + +
+
+
vii — Templates
+

__SLIDE_COUNT_WORD__
folios.

+

The full template library at 1920×1080. Each thumbnail is the real slide, scaled.

+
+
+
+ + + + + + + +__SHADER_SCRIPT__ + + +