Design systems
Figma / Public website reference / The editorial shell.
The editorial shell.
A separate public page family with search, topics, cards, and newsletter states.
SHORTCUTEditorial shell study
Reconstructed editorial specimen
Ideas worth sharing.
Work worth looking at.
The source blog uses a separate dark editorial shell. This specimen preserves that hierarchy and navigation distinction; story copy below is original reference content.
3 stories
No stories match. Clear the search to return to all examples.
Separate shell, shared discipline
The live Shortcut blog has its own masthead, topic navigation, search route, category labels, and newsletter form. This guide keeps it separate from the primary marketing shell. The reconstructed search filters local fixtures; the source search navigates to /blog/search-results/. The difference is deliberate and visible.
Keep editorial reading width near 65ch, preserve h1/h2 order, and provide a clear return path. Dates use a machine-readable time value. The opt-in checkbox is independent of email validity and is never preselected. Keep errors next to the form and preserve the address after failure.