H4H × Imp Pulse · August 21, 2026

Landing page design direction (Marquee Stack)

← Back to package

Imp Pulse × H4H — Landing Page Design Brief

Context

This page adapts an already-designed six-frame Instagram carousel and a Facebook announcement post into a single scrolling web experience. The carousel graphics already exist and establish a locked visual system: charcoal-black grain, one bright orange, one gold, heavy condensed uppercase display type, thin rules, orange solid bars, and a warm radial glow bleeding in from the lower right.

Because the printed/social assets already exist and will run alongside the page, the page is NOT free to invent a new aesthetic. It must read as the same campaign. This is a partial-replication constraint: the carousel is the ground-truth spec for color, type weight and tone.

Three Approaches Considered

1. Field Dispatch A page built like a documentary field report — typewriter labels, ledger rules, photographic evidence, wide margins. Treats the Cebu program as reportage and the festival as the dateline. Probability: 0.07

2. Marquee Stack Built from the language of stacked festival billing and hand-pasted street posters: enormous type running edge to edge, names as slabs, torn horizontal registers, a ticker in constant motion. Loud, physical, print-first. Probability: 0.06

3. Token Ledger Organized around the ₱200 token as the central object — circular motifs, a counting rhythm, receipt-like alignment, mission-forward and quiet. Probability: 0.04

Chosen Approach: Marquee Stack

Chosen because it is the only one of the three that already agrees with the existing carousel frames, which are themselves enormous condensed type on black with orange bars. It extends the assets rather than fighting them, and a festival announcement should feel loud.

Design Movement

Late-1990s/2000s tour-poster and hip-hop mixtape cover typography crossed with Swiss editorial discipline — the scale and swagger of street billing, but set on a strict baseline grid with real hierarchy. Think Reid Miles' Blue Note covers updated for a rap festival: type as architecture, not decoration.

Core Principles

  1. Type is the image. Names are set at display scale and function as the primary graphic. Photography is secondary and always partially covered by type.
  2. Stacked registers, not cards. The page reads as a vertical stack of full-bleed horizontal bands with hard edges between them. Almost no rounded corners, almost no floating boxes.
  3. Asymmetry by offset. Content sits on a 12-column grid but nearly every band starts at a different column. Nothing is centered except deliberate stingers.
  4. One ownable orange. A single saturated orange carries every accent, bar, rule and hover. Gold appears only for quotes and credentials. Nothing else.

Color Philosophy

Near-black ground (oklch(0.16 0.008 60)) because the carousel is black and because a night-and-heat palette suits an open-air festival that runs into the evening. The orange is the sunset over Negros Oriental — warm, tropical, loud, and the single most recognizable element of the campaign. Gold is reserved for credibility: quotes, the UN Global Compact line, Grammy references. Assigning gold exclusively to earned credentials means the palette itself encodes the argument that these people are serious.

Layout Paradigm

A stack of full-bleed bands with hard horizontal rules, deliberately avoiding a centered single-column layout. The roster is a stacked billing list, not a grid of cards: six full-width rows, each expanding on hover/tap to reveal accolades, with the name set in enormous condensed type and the index number (01–06) hanging in the left margin. Bands alternate their content offset between the left third and the right two-thirds so the eye zig-zags down the page.

Signature Elements

  1. The orange bar. A solid full-width orange band with black uppercase text, lifted directly from the bottom of every carousel frame. Used as the section terminator and the primary CTA.
  2. Hanging index numerals. Large outlined 01–06 numerals in the left margin of each roster row, echoing the "FRAME n / 6" badges.
  3. The moving ticker. A continuously scrolling marquee of the campaign line and event details, referencing both the "marquee" name and the physical experience of a festival site.

Interaction Philosophy

Interactions should feel like paste-up and reveal — things slide, wipe and expand rather than fade politely. Hover on a roster row wipes an orange fill in from the left and lifts the accolades into view. Nothing bounces; everything is fast and mechanical.

Animation

Typography System

Brand Essence

A St. Louis music-and-mission collective bringing a Grammy-winning crew to a Negros Oriental festival stage — for an audience that can verify the charity work one island away. Personality: credible, loud, grounded.

Brand Voice

Declarative and short. States facts and lets them carry weight; never sells. Example lines: - "The work got here before the music did." - "He made the record. He's playing it live." Banned: "Join us on a journey", "Get started today", exclamation stacking.

Wordmark & Logo

H4H × IMP PULSE set as a lockup in Archivo Black with the multiplication cross in orange at reduced size and optical center — the cross is the mark. A standalone graphic symbol builds on this: an orange circular token form with a bite/notch, referencing both a ₱200 meal token and a vinyl record label.

Signature Brand Color

oklch(0.72 0.19 52) — a hot sunset orange. Every accent on the page is this color; nothing competes with it.

Content Spine (from the social assets)

  1. Hero — H4H is joining Imp Pulse, Aug 21, Mango Ranch, Valencia
  2. The Cebu story — Currency of Caring since February, the campaign line
  3. Roster billing — six entries in carousel order: H4H, Bledsoe, Wright, FOMO, Koko, DJ Sno
  4. Stage segment — what happens during the 20–30 minutes
  5. The booth — credentials wall, tokens, all day
  6. CTA — tickets + festival details

Style Decisions