Foundation demo // Composition patterns

How type blocks combine with rhythm, kickers and section leads.

Editorial composition defines the repeatable patterns that turn raw type scale into marketing pages, documentation and product UI—all from the same token set.

Composition Patterns Story Scene Typography Overview

Rhythm Vertical spacing from tokenized gaps

Hierarchy Kicker → Title → Lead → Body

Scenes Reuse rules in hero and story sections

Editorial Reusable Token-driven

Gap --vl-gap-section: 4rem Between major sections

Gap --vl-gap-block: 1.5rem Between heading and body

Gap --vl-gap-inline: 0.75rem Between kicker and title

Type Spec Design Tokens

<!-- Rhythm composition: gap tokens control all whitespace -->
<section style="gap: var(--vl-gap-section);">
  <header style="gap: var(--vl-gap-block);">
    <p class="vl-kicker">Act I // Topic</p>
    <h2 class="vl-title-lg">Section heading</h2>
    <p class="vl-body-lg">Lead paragraph...</p>
  </header>
  <p>Body text with detail.</p>
</section>

Change --vl-gap-section once to rescale the whitespace rhythm across every section on the page.

Act II // Reading hierarchy

Kicker → title → lead → body: one pattern, every section.

The four-block pattern establishes a predictable reading order. Kickers orient the reader, titles anchor the section, leads summarise and body copy delivers detail.

composition block <p class="vl-kicker">Foundation demo</p> <h2 class="vl-title-lg">Section heading</h2> <p class="vl-body-lg">Lead paragraph...</p> <p>Body text with detail...</p>

Principle

Always top-down.

Kicker first, then heading, then lead, then body. Never skip a level.

Act III // Scene reuse

Hero, feature and story scenes share composition rules.

The same kicker/title/lead/body pattern is used in hero reveals, feature sections and story pins. Only the visual treatment changes—the typographic structure stays identical.

Hero Scene Feature Scene Story Scene

Pattern

Same structure, different skin.

Every scene type uses kicker/title/lead/body. Motion and colour vary per context.

Act IV // Applied composition

Rhythm, hierarchy and scene reuse: three rules for editorial consistency.

Token-based spacing defines rhythm, the four-block pattern enforces hierarchy, and scenes inherit composition rules so every section looks coherent.

Rhythm Gap tokens control vertical whitespace across all sections.

Hierarchy Kicker → title → lead → body in every block.

Scenes Hero, feature and story sections share the same composition rules.

Tokens One change rescales rhythm across the entire page.