Skip to content

Slide 01 / 07

Click the deck, then use the arrow keys like a real presentation.

Readout

Family
Editorial
Theme
Light
Type
Space Grotesk
Accent
#2439ff
Corners
14px
Moves on
Keys, swipe
Studio
Ready

25 of 30, Editorial

Split Panel.

A solid color panel wipes in on the left with the title; content lands on the right.

Look
As designed

How it moves

Bold and graphic. Each slide gets its own panel color from a fixed rotation, so the deck reads as a series of posters.

This is the specification the Studio sends to the model, written for Split Panel's own look. Change the look in the Studio and every value follows.

Palette

  • Background#f6f5f0
  • Text#141414
  • Muted#66655f
  • Accent#2439ff
  • Surface#ffffff
  • Hairlinergba(20,20,20,.1)

Type: Space Grotesk. Corners: 14px.

Layout

  • Every slide is a two-column grid, 42% / 58%, filling the viewport. The left column is a solid color panel; the right column is the content area on the page ground (#f6f5f0).
  • Panel. padding 7vh 4vw, flex column with space-between. Top: the slide number "02 / 07" in 1rem at 70% opacity (the cover shows the deck's subtitle instead). Bottom: the title at clamp(2.4rem,5.2vw,5.6rem), weight 700, letter-spacing -0.03em, line-height .95, followed by a one-line sub in 1.05rem at 80% opacity, max-width 26ch. Panel text is white, or the ink color on the gold panel.
  • Panel colors rotate per slide through a fixed palette, set inline per slide with --panel: cobalt #2439ff, coral #ff5a3c, forest #1f6f50, plum #5b2a86, ink #141414, gold #d9a21b (with --panel-fg:#141414). Inside each slide the accent used by objects (kickers, accent cards, rings, bars) equals that slide's panel color, so the right side always answers the left.
  • Content. padding 7vh 5vw, vertically centered column with 1.6rem gaps, objects only (the title already lives on the panel).
  • Transition. the incoming panel wipes in from the left edge (clip-path inset(0 100% 0 0) → inset(0 0 0 0)) over 800ms with cubic-bezier(.77,0,.18,1); the content then fades and slides in from the right (24px, 600ms) starting at 450ms. The outgoing slide fades underneath over 500ms.
  • Small muted counter bottom-right of the page. Under 760px the panel becomes a 38vh top band.

Navigation. ← → ↑ ↓ Space PageUp/PageDown; Home/End; number keys.