Skip to content

Slide 01 / 07

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

Readout

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

18 of 30, Editorial

Sidebar Rail.

A table of contents on the left; click or key through the slides on the right.

Look
As designed

How it moves

App-like and calm. The rail shows every slide title, marks where you are, and fills a progress line. Good for reviews, docs and training.

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

Palette

  • Background#f3f4f2
  • Text#17191c
  • Muted#6b6f74
  • Accent#2439ff
  • Surface#ffffff
  • Hairlinergba(23,25,28,.11)

Type: Instrument Sans. Corners: 14px.

Layout

  • Two columns filling the viewport: a fixed 300px rail on the left and the slide stage on the right. The rail's background is the page background nudged 8% toward the ink (color-mix), separated from the stage by a 1px line (rgba(23,25,28,.11)).
  • Rail, top to bottom: the deck name (bold) with a muted one-line subtitle; then, vertically centered, the full list of slide titles as a table of contents; then a 2px progress line filled to current/total in accent (#2439ff) with a small "03 of 07" label under it.
  • Each rail row is a button. a two-digit tabular number in 0.8rem, then the title, 0.6rem 0.8rem padding, 10px radius. Future rows are muted; rows already seen are slightly stronger; hover brightens to full ink; the active row is full ink, weight 600, on a 10% accent tint, with a 3px accent bar sitting in the rail's left margin (outside the row, flush with the rail edge).
  • Stage. 8vh 6vw padding, content column max-width 62rem, vertically centered, left-aligned. Slide header = small accent kicker (chapter or section name), title clamp(2.2rem,4.2vw,4.2rem) weight 700 letter-spacing -0.02em, then a muted lede. Body objects follow with 2rem gaps.
  • Transition. the outgoing slide fades and lifts 40px up; the incoming slide fades and rises 40px from below (550ms, cubic-bezier(.22,1,.36,1), 120ms delay). Objects inside the incoming slide stagger in 90ms apart.
  • Under 900px the rail becomes a horizontal, scrollable top bar and the stage stacks below it.

Navigation. ← → ↑ ↓ Space PageUp/PageDown move; clicking a rail row jumps; Home/End; number keys 1-9 jump. No wheel navigation (the stage may scroll on small screens).