Working document · editable · sibling to system-brief.html

Pocket UI — Layout Catalog

A library of section blocks and page recipes, distilled from real marketing layouts and re-expressed entirely in our own design system. This is the approval stage: review and edit before any block is built.
have already built extend exists, needs generalizing to build net-new
House style — single column (updated)
Direction set after this catalog was drafted: every block renders in one narrow centered column (~680px), left-aligned, compact, with sections separated by whitespace only (no dividers, no section cards). Layout reference for the feel is sophon.at; all styling is our tokens. So wherever a block below says “two-column”, “side-by-side”, “grid”, or “split”, it is now rendered stacked within the column (e.g. HeroMedia drops its media beneath the copy; FeatureSplit becomes a heading + body + optional media; FeatureCards is a numbered vertical list). The page recipes still hold as section order. Wave 1 is built in this language: SiteNav, Hero, HeroMedia, PageHeader, StatRow, LogoStrip, FeatureCards, FeatureSplit, CTA, Footer (StatRow pulled forward from Wave 2 as a signature element).

What was borrowed, and what was not

the source site was read as structural text only (no screenshots), and the single thing taken from it is section composition and order: which kinds of blocks a page is made of, and the sequence they run in. Nothing else crossed over. Their colors, type, spacing, radii, shadows, density, copy, imagery, icons, and motion were never looked at as design input. Every block below is defined in our terms, and will be built only from our tokens and components, so each one reads as ours.

Provenance. Pages mined for composition: / (home), /pricing, /enterprise, /cloud, /b2b, /framework, /starters. These span the full marketing site’s page types (landing, pricing, solution, product, developer, enterprise, gallery). Recurring sections were deduped into the archetypes below.

A · Navigation

Top-of-page wayfinding. One block covers it.

SiteNav

have
Sticky top bar: brand at left, primary links centered, trailing actions at right (a quiet sign-in plus a primary CTA). Collapses links on small screens.
slots  brand, links[], secondaryAction, primaryCta. Maps to the existing Nav.

B · Hero

The first screen. Four shapes cover every page type we saw.

HeroCentered

have
Centered, copy-only opener on a tight measure: eyebrow badge, balanced headline, pretty subhead, dual CTA. The default landing hero.
slots  eyebrow, title, subtitle, primaryCta, secondaryCta. Maps to existing Hero.

HeroMedia

to build
Same copy stack paired with a media slot: full-bleed below the copy, or side-by-side at large widths. For solution and product launch pages.
slots  eyebrow, title, subtitle, ctas, media (image / mockup / video). Layout prop: stacked | split.

HeroFeatureRow

to build
Hero copy followed by a short row of three inline icon highlights, so the value props land above the fold. For product / feature pages.
slots  title, subtitle, ctas, highlights[3] (icon + label).

PageHeader

to build
Compact title plus tagline, no CTA pressure. Opens utility pages: pricing, gallery, index, changelog.
slots  title, tagline.

C · Social proof

Trust signals. Logos, numbers, quotes.

LogoStrip

to build
A single quiet row of partner or customer logos under an optional lead-in line. Markers stay neutral so logos read as content, not chrome.
slots  lead (optional), logos[].

StatBand

to build
Three or four metric cards in a row: big number plus short label. For proof of scale.
slots  stats[] (value + label). Grid: 3 or 4 up.

QuoteSpotlight

to build
One large pull-quote with attribution, paired with a strip of customer logos beneath. The single-voice testimonial.
slots  quote, person (name + role), logos[].

TestimonialCards

to build
A grid of quote cards, each with a logo, quote, and a named person. Two, three, or four up.
slots  items[] (logo, quote, name, role, optional metric). Grid prop: 2 | 3 | 4.

D · Feature explainer

The body of most pages. How the product actually works.

FeatureCards

extend
Icon, title, and short text in a card grid. The existing FeatureGrid generalizes here to a variable column count (the source used both three and five up).
slots  title, subtitle, features[] (icon, title, text). Columns: 2 to 5.

FeatureSplit

to build
Two-column row, text on one side and media on the other, with the side alternating down the page. The workhorse: stack several to walk through a product.
slots  title, body, link (optional), media. Prop: mediaSide: left | right.

ChecklistColumns

to build
A heading over multiple columns of bulleted capabilities. For dense capability lists without cards.
slots  title, columns[] (each a list of checked items). 2 or 3 columns.

CalloutTrio

to build
Three side-by-side callouts, each a headline, a line of blurb, and a quiet "learn more" link. A lighter alternative to feature cards.
slots  items[3] (title, blurb, link).

CodeWalkthrough

to build
A stepped narrative (define, assemble, handle failure, run) where each step pairs prose with a code panel. For developer pages. Uses our .code type and surfaces.
slots  title, steps[] (label, prose, code).

TabbedShowcase

to build
A tabbed panel that swaps between views (code samples, or media). One heading, several labelled tabs.
slots  title, tabs[] (label, panel). Reuses our tab interaction pattern.

DiagramFeature

to build
A centered heading and subhead over a single architecture or illustration slot. For "how it fits together" moments.
slots  title, subtitle, figure.

E · Collections and content

Many items at once: cases, recipes, resources.

FilterableCardGallery

to build
A card grid with a category tab or filter bar on top. For case studies, integrations, or any taggable collection.
slots  filters[], cards[] (media, title, tag, link). Filtering uses our segmented control.

RecipeGrid

to build
A dense three-column grid of small icon-and-label link cards: "build a marketplace", "build B2B", and so on. Compact wayfinding into deeper content.
slots  title, items[] (icon, label, href).

SpotlightCards

to build
A small number of large featured cards, each with a media area, heading, a few bullets, and dual actions (preview, get started). For starters or flagship items.
slots  items[] (media, title, bullets, primaryCta, secondaryCta).

ResourceCards

to build
Two or three preview cards pointing at posts, announcements, or a contact path. A lightweight cross-link row.
slots  cards[] (eyebrow, title, link). 2 or 3 up.

F · Pricing

The decision surface.

PricingTiers

to build
Three or four plan cards side by side: name, price, a feature list, and a CTA. One card may be emphasized as recommended (using an inverted surface, not an accent fill).
slots  tiers[] (name, price, features[], cta, emphasized?). Columns: 3 or 4.

ComparisonTable

to build
A grouped, multi-row feature matrix across the tiers, with a sticky header row. Rows organized into labelled sections.
slots  tiers[], groups[] (label, rows[] of per-tier cells: check, text, or dash).

G · Questions

Objection handling.

FAQAccordion

to build
A heading over an accordion of question and answer rows. One open at a time, animated with our motion roles.
slots  title, items[] (question, answer).

H · Conversion

The asks. Repeated down the page.

CTABand

have
Centered headline, optional subhead, and a single button on an inverted surface. The recurring close. Maps to existing CTA.
slots  title, subtitle, cta.

CTASplit

to build
One band with the headline and blurb at left and the action at right. A calmer in-page CTA than the inverted band.
slots  title, blurb, cta.

NewsletterCapture

to build
An inline email input plus submit, with a short label. Stands alone or nests inside the footer.
slots  label, placeholder, submitLabel.

I · Footer

The closing index.

SiteFooter

have
Multiple link columns, a brand row, and an optional newsletter and social row. Maps to existing Footer (newsletter slot to be added).
slots  brand, columns[], newsletter?, social[]?.

Page recipes

The other borrowed layer: the order blocks run in. These are starting compositions, freely editable. Each is just a sequence of the blocks above.

Product landing

home
SiteNav→HeroCentered→FeatureCards→LogoStrip→FilterableCardGallery→FeatureCards→CalloutTrio→QuoteSpotlight→CTABand→SiteFooter

Pricing

pricing
SiteNav→PageHeader→PricingTiers→CalloutTrio→ComparisonTable→FAQAccordion→CTABand→SiteFooter

Solution / use-case

b2b, b2c, marketplace, industries
SiteNav→HeroMedia→LogoStrip→ChecklistColumns→FeatureSplit→FeatureSplit→FeatureCards→CodeWalkthrough→TestimonialCards→CTABand→SiteFooter

Product / feature deep-dive

cloud, admin, modules
SiteNav→HeroFeatureRow→FeatureSplit ×N→CalloutTrio→TestimonialCards→DiagramFeature→CTABand→SiteFooter

Developer / framework

framework
SiteNav→PageHeader→FeatureCards→CodeWalkthrough→TabbedShowcase→DiagramFeature→RecipeGrid→CTABand→SiteFooter

Enterprise

enterprise
SiteNav→HeroMedia→LogoStrip→TestimonialCards→StatBand→ChecklistColumns→ResourceCards→FeatureSplit→CTABand→SiteFooter

Gallery / index

starters, integrations
SiteNav→PageHeader→FeatureCards→SpotlightCards→RecipeGrid→CTABand→SiteFooter

Counts and build order

27 blocks across nine groups: 4 have (SiteNav, HeroCentered, CTABand, SiteFooter), 1 extend (FeatureCards), 22 to build. Every block stays token-only, and inherits the playground controls already wired: density, radius mode, squircle, seed, and font.

A reasonable order, highest reuse first:

Each block lands in components/ds/sections.tsx (or a split file if it grows), shows up in /playground as a new row in the divided list, and is driven by the same configurator. Open question for you: should the playground list every block, or group blocks by the nine functions above with subheadings?