cooper corbett

Layouts

Canonical page shells for composing primitives and composites into route-level product surfaces.

hierarchy

primitive to layout

Layouts consume leaves high in the tree, then pass already-composed children into composites and primitives.

primitive

Base controls, typography, surfaces, and semantic tokens.

composite

Medium-sized combinations such as rows, cards, and galleries.

layout

Route-visible shells that place leaf slots high in the tree.

catalog

page layout catalogue

Every documented page archetype is represented as structure-only skeletons with primitive, composite, and leaf ownership notes.

/layout

homepage layout skeleton

Single-column index with wordmark, one-line bio, recent writing, elsewhere links, and a bottom-anchored scanline footer signal.

primitives

  • PageShell
  • Wordmark
  • DateMono
  • Surface
  • CodeText

composites

  • writing feed
  • link list
  • footer signal band

leaves

  • writing feedowns posts and outbound links
  • elsewhere linksowns external destinations
  • footer signal bandowns route-owned closing art
/postslayout

writing index layout skeleton

Chronological mixed feed where essay rows and link rows are distinguished by structure.

primitives

  • DateMono
  • Separator
  • Link

composites

  • feed row
  • source byline
  • permalink anchor

leaves

  • feed rowsowns post type and destination
  • date labelsowns published date
  • source bylinesowns external host
/posts/[slug]layout

post page layout skeleton

Hybrid-density reading page with a breathing title area and dense MDX body.

primitives

  • DateMono
  • MDX primitives
  • Separator

composites

  • post hero
  • prose body
  • next/previous nav

leaves

  • post heroowns title, deck, date, reading time
  • MDX bodyowns content rendering
  • post navowns adjacent posts
/work/[slug]layout

project page layout skeleton

Case-study monograph with mono project metadata, editorial body, and dense screenshots.

primitives

  • DateMono
  • Surface
  • Link

composites

  • project hero
  • figure stack
  • reflection block

leaves

  • project metadataowns year, role, links
  • figuresowns screenshots and diagrams
  • reflectionowns outcome notes
/aboutlayout

about layout skeleton

Long-form first-person page with prose-first rhythm and inline contact details.

primitives

  • Separator
  • Link
  • MDX primitives

composites

  • prose body
  • contact row
  • inline interest list

leaves

  • prose bodyowns authored paragraphs
  • interest phraseowns small personal notes
  • contact rowowns canonical contact methods
/nowlayout

now layout skeleton

Sivers-style current-work note with dated, compact prose and no dashboard chrome.

primitives

  • DateMono
  • Surface
  • Link

composites

  • dated note
  • current-work prose
  • updated marker

leaves

  • updated markerowns last changed date
  • current workowns authored monthly note
  • supporting linksowns optional references
/designlayout

design-system layout skeleton

Canonical design-system route family for foundations, components, and layout inspection.

primitives

  • Surface
  • Card
  • Badge
  • Field

composites

  • section map
  • token catalogue
  • component gallery

leaves

  • theme catalogueowns token groups and surface recipes
  • component catalogueowns primitive and composite examples
  • layout catalogueowns page skeletons

primitives

canonical layout primitive examples

Each reusable layout primitive points to the route or state that owns its concrete production example.

PageShell

The outer route landmark on /, /posts, and the design route family.

PageHeader

The title and metadata header on /posts and /now.

PageSection

Section rhythm and labelled regions on / and /design/layouts.

IndexFeed

Chronological writing rows on /posts and the compact homepage writing feed.

MetadataRow

Compact term/value facts in the homepage elsewhere section.

owner
route leaf
surface
/ elsewhere
ProsePage

Reading surfaces on /now and /posts/hello-world.

RouteErrorBlock

Loader and boundary recovery blocks in the homepage, posts index, post detail, and app catch-boundary paths.