All screen guides
Screen guide

Detail & profile page design

The job: Show one thing deeply, with its primary action obvious.

Structure

Identity header (title / image / status) → key facts → body sections → one primary action (often sticky on mobile).

Hierarchy

The subject's name/title and its primary action win. Metadata is tertiary.

Mobile

Sticky action bar, collapse long sections, single column.

Signature patterns

  • Identity / hero block
  • Key-value facts
  • Tabbed or sectioned body
  • Sticky primary action
  • Related-items rail
  • Status indicators

Avoid

  • burying the primary action
  • equal weight on everything
  • no clear ‘what is this’
  • metadata louder than the subject

Build it with StyleSeed

This is the screen-typehalf of design judgment — cross it with your app’s domain and you get the actual decisions. StyleSeed bakes both into 74 rules your AI reads automatically; for a detail / profile, reach for the silk motion seed.

Make your AI design a detail / profile right
Open-source design engine for Claude Code, Codex & Cursor. MIT.
Star on GitHub

Other screen guides

Dashboard design →Form design →Landing page design →List & search UI design →Settings page design →Onboarding & empty state design →