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