JoyOS Lab · Internal · 12 May

Sidebar redesign — six bets, side by side

The current sidebar reads muddled: section headers feel weaker than the items beneath them, the active state whispers, and the Coming-Soon labels feel pasted on. Each variant below makes a different argument about how hierarchy, density, and brand should resolve. Same labels, same content, six different design instincts.

Editorial Sections 01 / 06

The bet: sections become typographic anchors, not invisible glue. Roman numerals + uppercase tracked labels + a hairline rule give the sidebar a magazine-spread cadence.

  • Sections lead with italic serif numerals; items hang underneath as a clean column.
  • Active item gets an inset bronze rail and a gradient wash — present, not loud.
  • Coming-Soon collapses to a single italic word; no stock-gray pills.
Rail + Reveal 02 / 06

The bet: Linear's split — icon rail + contextual reveal — fixes the hierarchy problem by separating it. Section headers literally are the rail icons.

  • 60px icon rail at left is the section switcher; right panel shows items for the active section.
  • Active rail icon gets a bronze inset block and warm-tinted background.
  • Dot leaders instead of icons inside the reveal — quieter, more list-like.
Operator Console 03 / 06

The bet: dense beats noisy. Strip chevrons, tighten leading, switch section heads to all-caps mono — and the chrome stops fighting the items.

  • Sections always-expanded, mono uppercase heads with a trailing hairline.
  • Active state is a 2px bronze rail at the row's leading edge + warm tint.
  • Footer carries a live status pulse — "operator" tone, not "wellness app."
Cream Cards 04 / 06

The bet: sections become tactile objects. Each group sits on a faintly cream-tinted card; the active item inverts to full cream, like a journal-page bookmark.

  • Group cards with serif italic heads + a small mono count badge.
  • Active item flips to cream-on-dark — feels like ink on paper.
  • Coming-Soon is a single bronze dot — no language, no clutter.
Numbered Journal 05 / 06

The bet: lean all the way into the journaling brand. Items are numbered like a daily plan; section heads are big serif anchors with an italic count.

  • Mono index numerals before each item; continuous count across sections.
  • Active label gets a fading bronze underline — like a marginal mark.
  • Section heads at 24px italic Newsreader give the sidebar real typographic voice.
Sectioned Pills 06 / 06

The bet: loud active, quiet rest. One bronze pill carries all the visual weight; everything else gets out of its way.

  • Section heads are heavyweight tracked uppercase with a fading hairline.
  • Active = full bronze gradient pill, dark text — unmistakable but contained.
  • Hover magnetics: items nudge 2px right toward the cursor (200ms cubic-bezier).