Layout patterns

One glanceable operational home: status modules around a primary live surface

Hierarchy

Global status strip → primary live module → secondary modules → drill-in pages

Responsive

Modules reflow by priority order; secondary modules collapse behind tabs on mobile

Use when

ops/life dashboards · many heterogeneous live signals · daily-driver home screens

Avoid when

single-task tools · content reading · first-run products with no data yet

seen in: worldmonitor, helm, yuuki-os

Persistent list pane + detail pane; selection drives the right side

Hierarchy

Collection filters → list → selected item → item sections

Responsive

Panes stack; list becomes full-screen, detail pushes with back affordance

Use when

item-centric work (issues, emails, contracts) · high-frequency triage

Avoid when

few items · linear narratives · phone-first products (needs stacking)

seen in: linear, abeto-messenger

Main canvas + collapsible right inspector bound to current selection

Hierarchy

Canvas object → inspector groups → property rows

Responsive

Inspector becomes bottom sheet on touch; canvas keeps full bleed

Use when

editors · design/config tools · anything with canvas + properties

Avoid when

browse/consume products · no meaningful selection model

seen in: chatcut, figma-school

Dense always-on wall of live panels with semantic status color

Hierarchy

Severity → subsystem → panel → event log

Responsive

Panels virtualize into a priority feed on small screens

Use when

24/7 ops · trading · infra observability · 多-signal intelligence

Avoid when

casual use · marketing · low-data products

seen in: worldmonitor, edge-terminal, quantdesk

Typographic content stream with strong art direction per entry

Hierarchy

Masthead → featured → chronological stream → entry

Responsive

Single column early; type scale steps down one notch only

Use when

briefs/digests · journals · curated media

Avoid when

task tools · data entry

seen in: anibrief, dramabrief, market-brief

The query box IS the homepage; results are the product

Hierarchy

Query → ranked results → detail; filters as refinement, not navigation

Responsive

Identical shape at all sizes; keyboard on desktop, thumb reach on mobile

Use when

reference lookups · catalogs with known-item seeking · internal tools

Avoid when

discovery/browse products · narrative marketing

seen in: raycast, kotoba

Filter context bar + chart grid + drill-down tables

Hierarchy

Time/segment context → KPI row → charts → underlying rows

Responsive

KPI row scrolls horizontally; charts stack full-width; tables become cards

Use when

BI · product analytics · financial review

Avoid when

real-time ops (use Monitoring) · content products

seen in: stripe-docs, careeratlas

Visual grid with lightbox/detail overlay; the artwork is the interface

Hierarchy

Collections → grid → item overlay → metadata

Responsive

Column count fluid; overlay becomes full-screen page on mobile

Use when

photo/video libraries · asset managers · portfolios

Avoid when

text-heavy tools

seen in: pocket-vlog, shots-live

Status columns with draggable cards; position encodes workflow state

Hierarchy

Board → column (status) → card → card detail

Responsive

Columns become swipeable pages; drag replaced by move menu on touch

Use when

staged workflows · pipelines (jobs, deals, applications)

Avoid when

unordered lists · time-series work · >7 statuses

seen in: application-hq

Chronology as the spatial axis — events, media, or plans in order

Hierarchy

Era/day grouping → event → detail

Responsive

Horizontal timelines rotate to vertical on mobile — never scroll sideways for primary content

Use when

histories · itineraries · activity feeds · roadmaps

Avoid when

unordered catalogs · status-driven work

seen in: atlasyuu, friday

One project's home: identity header, health signals, recent activity, entry points

Hierarchy

Identity → health/stats → activity → resources

Responsive

Sections stack in priority order

Use when

hub pages inside multi-project tools

Avoid when

single-project products (make it the whole app instead)

seen in: vercel, helm

Grouped forms with a stable section nav; boring on purpose

Hierarchy

Section nav → group → field row → help text

Responsive

Section nav becomes accordion/select on mobile

Use when

configuration of any product

Avoid when

frequently-used workflows (promote those out of settings)

seen in: linear, vercel

Focused stepper that defers everything not needed for first value

Hierarchy

Progress → single decision per step → skip affordance

Responsive

Identical single-column shape everywhere

Use when

first-run · required setup · progressive profiling

Avoid when

returning users · optional features (use in-context education)

seen in: heylemon

Minimal credential surface with product identity — never a marketing page

Hierarchy

Identity mark → method choice → single form → escape hatches

Responsive

Single column always; split-brand panel drops first

Use when

sign in/up · magic-link waits · MFA

Avoid when

anything else

seen in: vercel, linear

Query/filter builder over a virtualized result grid with saved views

Hierarchy

Saved views → filter expression → grid → row detail

Responsive

Read-mostly on mobile: saved views + simplified cards

Use when

large datasets · power users · internal analytics

Avoid when

casual browsing · small fixed lists

seen in: quantdesk, fantasy-league

Party/room staging: who's here, ready states, one giant start affordance

Hierarchy

Room identity → players + ready states → settings → START

Responsive

Player grid wraps; start button stays thumb-reachable

Use when

multiplayer session start · party games · matchmaking

Avoid when

solo tools · productivity

seen in: sound-clash, voidshift, pocket-party, chamber-seven