From cd7cc648d6528ce290219e8d05032c10fa010f99 Mon Sep 17 00:00:00 2001 From: Vance Ingalls Date: Sun, 17 May 2026 13:33:39 -0700 Subject: [PATCH] feat(skills): 5 more hand-crafted design.html templates Add bespoke designs for coral, sakura-chroma, monochrome, peoples-platform, grove. Palette tokenized. Total hand-crafted: 13. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../templates/presentations/coral/design.html | 525 +++++++++------ .../templates/presentations/grove/design.html | 495 ++++++++------ .../presentations/monochrome/design.html | 515 +++++++++------ .../peoples-platform/design.html | 537 ++++++++++------ .../presentations/sakura-chroma/design.html | 605 ++++++++++++------ 5 files changed, 1651 insertions(+), 1026 deletions(-) diff --git a/skills/hyperframes/templates/presentations/coral/design.html b/skills/hyperframes/templates/presentations/coral/design.html index c5c4b19132..8c7bef8fc1 100644 --- a/skills/hyperframes/templates/presentations/coral/design.html +++ b/skills/hyperframes/templates/presentations/coral/design.html @@ -5,301 +5,414 @@ __NAME__ — Design System - - + + + + - -
-
__NAME__
- +
Coral
+ +
Issue 014 · 2026
-
-

__NAME_LINE1____NAME_LINE2__.

+
+
+
Design System · № 014
+
A warm magazine · 2026
+
+

CORAL.

-
Templatecoral
-
Typesystem-ui
-
Accent__ACCENT_LABEL__
-
Doc07 sections · __SLIDE_COUNT__ templates
+
DisciplineFashion · Beauty · Lifestyle
+
DisplayBebas Neue
+
SignalCoral #F2674E
+
Volume06 sections · 07 frames
-
+
-
— Manifesto
-

Cream and coral on near-black, set in oversized Bebas Neue.

+
— Manifesto
+

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

-
+
-
01 — Palette
-

four colors.

-

__PALETTE_LEDE__

+ 01 — Palette +

Cream, ink,
warm, coral.

+

Warm cream paper. Near-black ink — never pure. A burnt warm tone for chrome. Coral as the single accent — used loud, used once.

-
Primary
__PRIMARY_NAME__
__PRIMARY__
Canvas.
-
Secondary
__SECONDARY_NAME__
__SECONDARY__
Ink.
-
Tertiary
__TERTIARY_NAME__
__TERTIARY__
Muted. Borders.
-
Accent
__ACCENT_NAME__
__ACCENT__
Signal. Reserved.
+
01 · paper
cream.
__PRIMARY__
Warm paper canvas.
+
02 · ink
noir.
__SECONDARY__
Near-black, never pure.
+
03 · warm
earth.
__TERTIARY__
Chrome and muted labels.
+
04 · coral
coral.
__ACCENT__
The single accent. One per slide.
-
+
-
02 — Typography
-

type scale.

+ 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.

-
Displaysystem-ui
hello world.
-
H1system-ui
chapter one
-
H2system-ui
Slide headlines.
-
Bodysystem-ui

Body copy below 24px is forbidden in video compositions.

-
Labelmonospace
// chrome · labels · metadata
+
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
-

corners. depth.

+ 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.

- // example -

example card.

-

Configured corners, padding, shadow.

+ // 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%
    -
  • Corners__CORNER_RADIUS__
    • -
  • Padding__PADDING__
    • -
  • Gap__GAP__
    • -
  • Elevation__ELEVATION__
    • -
  • Density__DENSITY__
    • +
  • Page margin144 PX
    • +
  • Column gap96 PX
    • +
  • Border1 PX
    • +
  • ShadowNONE
    • +
  • DensityLOW
-
+
-
04 — Motion
-

__EASING_HEADLINE__

-

__EASING_LEDE__

+ 04 — Motion +

Slow.
Deliberate.

+

Motion is unhurried. Long durations, gentle eases. The page should feel like a magazine page being turned — slow, intentional.

-
// easing
-

__EASING_NAME__

-

__EASING_DESC__

- 
__EASING_VALUE__
+ // easing +

SLOW OUT.

+

Long tail, soft landing. Use for headline entrances and any element that should feel placed.

+ 
cubic-bezier(0.22, 1, 0.36, 1)
-
// duration
-

__DURATION_DEFAULT__

-

__DURATION_DESC__

- 
__DURATION_VALUES__
+ // duration +

1.2 SEC.

+

Slides resolve in 1.2 seconds. Headlines enter in 0.8. Hovers in 0.3.

+ 
--dur-slide: 1.2s
+--dur-enter: 0.8s
+--dur-hover: 0.3s
-
+
-
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 — Guidelines
-

do and don’t.

+ 05 — Rules +

YES.
NO.

+

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

-

do.

    __DOS__
-

don't.

    __DONTS__
+

YES.

    +
  • Set every headline in Bebas Neue, maximum size, uppercase.
    • +
  • Use coral for exactly one element per slide.
    • +
  • Keep all body type in Manrope 400. Never bold.
    • +
  • Place cream surfaces inside the noir canvas — never floating.
    • +
  • Use 1px hairlines only; no shadows or gradients.
    • +
+

NO.

    +
  • Introduce a second accent. Coral is the only voice.
    • +
  • Set headlines in serif or italic. Bebas is the page.
    • +
  • Use pure black (#000) — always the warm noir.
    • +
  • Crowd the margin. The page wants breath.
    • +
  • Apply shadows. The page is flat by design.
    • +
-
+
-
07 — Templates
-

__SLIDE_COUNT_WORD__
frames.

+ 06 — Templates +

Seven
covers.

+

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

-