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