Blocks, pages and whole sites you can copy

A slim full-width bar on the style's emphasis band: an optional tag, a one-line message, a link, and an optional dismiss button.

An editorial masthead: a display-type wordmark on the center axis, links split either side and the actions pinned to the far right.

In Halftone Atelier

A rounded bar inset from the page edges on the style's surface, with the logo, compact centered links and a single action.

In Rivetlane docs

A product menu that opens a wide panel of grouped links with icons and one-line descriptions beside a featured story, next to plain links and two actions.

In Tessaly

Logo and a short row of links on the left, sign-in and a primary action on the right; folds into a sheet menu on small screens.

In Marrow & Pine, Wisplight, Tallybird

Large centered headline over a wide, slightly tilted product screen that runs into the next section, with a logo row beneath.

In Tessaly

A display headline that spans the whole container, with the description and actions set off-center beneath a hairline rule and an optional client row.

In Halftone Atelier

Headline, copy and actions on the left; a large photograph filling the right half of the section to its edges, with an optional avatar proof line.

In Marrow & Pine

Headline, supporting copy and two actions beside a live product screen, with a customer proof row.

Headline and copy set side by side above a wide video poster with a play control and caption, followed by a customer logo row.

Centered headline with an inline email field and submit button, a privacy note, and an avatar stack with a waitlist count.

In Wisplight

A short heading and note above five to eight customer marks, each centered in its own tile of a hairline grid.

A centered label over a slowly drifting row of customer marks with faded edges; it pauses on hover and stays still for reduced motion.

A short label beside a single row of five to eight monochrome customer marks, framed by hairlines as a thin band between sections.

In Tessaly

Five capability tiles, each proven by a live visual — a cohort heatmap, a funnel, a Slack digest, integrations and a headline metric — instead of icons.

In Tessaly

Five tiles in an asymmetric mosaic: cells with a photo fill their tile and carry a caption card with their proof, the others show a metric, funnel or logos on a solid tile.

In Halftone Atelier

A section heading over two to four feature rows, each with its own heading, text, bullet points and a product screen or photo, alternating sides.

In Wisplight

A headline and a ruled list of two to four icon-led capabilities next to a tall captioned photograph; the photo can sit on either side.

In Halftone Atelier

A headline and two to four icon-led capabilities next to a live product screen; the screen can sit on either side.

In Tessaly

Two aligned columns: the old way in a recessed dashed panel with neutral marks, and the same jobs done with the product on a highlighted surface.

In Tallybird

A headline over three to six capabilities in a three-column grid, each under a hairline with an icon, a line of copy and an optional figure.

A centered headline over three to five steps with large display numerals joined by a rule, across the row on desktop and down the side on phones.

In Halftone Atelier, Wisplight

An accordion of capabilities on one side; the open item's photo or product visual fills the other. On small screens the visual opens inside the item.

In Wisplight

A tab strip switches between three or four capabilities; each shows its own copy beside a product screen, chart, funnel or cohort panel.

A short headline over three or four large figures, each on a hairline with its label and a line saying where the number comes from.

In Tessaly

A headline and three or four sourced figures in a ledger beside an area chart of the trend behind them.

In Tallybird

One integration told as a story: paired brand marks, headline and actions beside a live sync panel, numbered setup steps and related connectors from the same category.

Every integration as a mark tile with a one-line summary, grouped by category, with a search field and category filter in a sticky sidebar and the featured integration on top.

Two or three customer stories as ruled rows: company logo, a short narrative with a pull quote, two or three before/after metrics and a link to the full story.

A large featured quote with the customer's logo, photo and an outcome metric, followed by two or three shorter quotes in cards.

In Tessaly

One customer quote set very large beside a tall portrait, with the customer's name, role, company logo and an outcome metric.

In Tallybird

A heading with an aggregate rating over six to ten customer quotes of mixed length in masonry columns; quotes can lead with an outcome metric.

In Halftone Atelier, Wisplight

The body of a case study: numbered challenge, approach and result sections in editorial rows, broken up by a wide photo, a captioned image grid and a large client pull quote.

In Halftone Atelier

The top of a case study: client mark, a long headline beside the summary, engagement facts, a wide cover photo and three or four outcome metrics lifted onto its edge.

In Halftone Atelier

Each project as a large photograph beside its client, numbered title, summary, year, disciplines and headline outcome, alternating sides down the page.

In Halftone Atelier

A studio's projects in a staggered wide/narrow image grid with outcome tags, client marks and meta, filtered by discipline, with a closing call to action.

In Halftone Atelier

Every plan in one table: a header row with prices and actions, grouped feature rows with checks, dashes and values, and actions again at the foot. Scrolls sideways with a pinned feature column on small screens.

In Tallybird

Two to four plans with a monthly/annual switch; the recommended plan inverts the palette and rises above its neighbours.

In Tessaly

A personal and a team plan share one panel with a monthly/yearly toggle; a strip underneath lists what both plans include.

In Wisplight

A slider sets monthly usage; graduated rates from content recompute the price live, show the band breakdown and name the plan it lands on.

In Tallybird

Every answer visible at once: numbered category headings, each with its questions in a two- or three-column grid, and a contact panel below.

In Halftone Atelier

A centered heading over a single column of questions on separate surfaces, with a one-line contact prompt underneath.

In Tessaly, Wisplight

Heading, summary and a contact prompt stay pinned on the left while numbered questions open one at a time on the right.

In Tessaly, Tallybird

The company's story, key facts and a studio photo held in view beside a vertical timeline of four to six dated milestones.

In Halftone Atelier

A headline and intro over four to six numbered principles, closed by a team photo beside a panel of company facts.

In Tessaly

An intro and hiring note held beside two or three founders, each with a large portrait, role, bio and profile links.

In Tessaly

A headline over a grid of up to nine people with portrait photos, name, role and a short line, closed by an optional hiring tile.

In Halftone Atelier

An intro and benefits line over open roles grouped by team, each with location and type, filterable by team, with an open-application note.

A long-form article: category, title, lead, author byline and cover, then a readable prose column built from typed blocks (paragraphs, headings, quotes, images, code, callouts, lists) and a related-posts strip.

In Tessaly

One large featured post with cover, title, excerpt and byline, set beside a numbered list of the four most recent posts with date and read time.

In Halftone Atelier

A blog heading with a category filter over a three-column grid of post cards: cover photo, category, title, excerpt and author byline with date and read time.

In Tessaly

Releases on a vertical timeline with a sticky date and version rail on desktop: a new / improved / fixed tag, title, summary, short notes and an optional product screen or photo.

In Tessaly, Rivetlane docs

A colour band split edge to edge: a full-bleed captioned photograph on one side, a large pull quote with its author and a short note on the other. Without a photo it centres the quote.

In Marrow & Pine

A policy or terms page: title and last-updated date, a sticky numbered table of contents linking to each section, sections of typed paragraphs and lists, and a contact note.

In Tessaly

Email channels, response time and the main office with its local time beside a labelled contact form with a topic select, message and helper text.

In Tessaly, Halftone Atelier

Two to four offices, each with a photo, live local time, address, phone and email, above a row of contact channels.

In Halftone Atelier

A centered headline, a single action and one muted line on the page background with generous whitespace; for calm closes and documentation pages.

In Halftone Atelier

A full-width band on the primary color with a large headline, two actions and a row of trust facts, made to close a landing page.

In Tessaly

A headline and one line of copy beside an inline email signup, set between hairlines instead of a full band; falls back to the actions without a form.

In Tessaly

A panel with headline, actions and short reassurances on one side and a full-height photo on the other; stacks with the photo below on small screens.

In Halftone Atelier

Brand, pitch and link columns above the brand name set in the display face across the full container width, with copyright and legal links below.

In Halftone Atelier

Brand, one-line pitch and an email signup beside up to five link columns, over a bottom row with copyright, live status and social links.

In Tessaly, Marrow & Pine

Logo, a handful of links, copyright and social icons on a single row that stacks on small screens; for simple sites and single-product pages.

In Rivetlane docs, Wisplight, Tallybird

Brand and app download links over five or six headed link columns, a newsletter strip, a locale and status row, and copyright with legal links.

A centered 404 page: the status code as oversized display type, a message, a search field, and three or four cards linking to useful destinations.

An emphasis-band panel with an oversized offer figure, headline, a copyable discount code, actions and the deadline, beside a full-height photograph.

In Marrow & Pine

Breadcrumbs, a large category title with three shelf facts, a wide banner photo carrying the piece count, and scrollable sub-shelf chips with thumbnails and counts.

In Marrow & Pine

A curated edit: one lead product at double size, smaller companions around it and a maker's story tile on the emphasis band, set under a magazine-style header.

In Marrow & Pine

Shelf chips with counts, a sale-only toggle and a sort menu above a responsive four-column product grid; filtering and sorting run live, with an empty state.

In Marrow & Pine

A photo gallery with thumbnails beside a sticky buy box: rating, live price, colour swatches, set size, quantity, add to basket, delivery promises and expandable details.

In Marrow & Pine

A sticky photo beside the buy box, followed by numbered making steps in alternating photo rows, a maker's quote on the emphasis band and a materials spec list.

In Marrow & Pine

A sticky summary with the average rating, a clickable star histogram that filters the list, quality highlights and a write-a-review action, beside reviews with verified badges and helpful votes.

In Marrow & Pine

A saved-for-later grid: each piece shows stock state, move to basket or back-in-stock alert, and remove, with share and add-all actions and an empty state.

In Marrow & Pine

Editable line items with quantity steppers and remove, beside a sticky summary with a free-delivery progress bar, live totals, gift option, promo code and checkout.

In Marrow & Pine

Contact, delivery and payment as stacked steps that collapse to a summary with a change link once done; delivery and payment options as radio rows, beside a live order summary and place-order button.

In Marrow & Pine

A thank-you header with the order number, a four-stage progress track, delivery and payment details, a personal packing note and next actions, beside an itemised receipt.

In Marrow & Pine

A searchable, filterable list of shops, workshops and stockists with open status, hours and directions, linked both ways to numbered pins on a stylised street map.

In Marrow & Pine

Narrow reset form under a brand bar with a back link; submitting swaps in a check-your-inbox state with tips, and recovery options sit below.

In Rivetlane app

Centered card with SSO provider buttons, email and password, a remember-me checkbox, a forgot-password link and a sign-up line.

Sign-in form on the left; on the right a tinted brand panel with a headline, a live product screen and a customer quote.

In Rivetlane app

Headline and the plan a new account starts on beside a sign-up card with SSO, name, email and a password with requirement hints, plus a terms line.

In Rivetlane app

Card with the signed-in account, a 6-digit one-time code input and a trust-this-device option, over a tray of recovery options.

In Rivetlane app

Collapsible sidebar with workspace switcher, search, sectioned nav and user menu; a top bar with breadcrumbs; and a page header over a deployments view.

In Rivetlane app

Top bar with logo, workspace switcher, breadcrumbs, search and user menu over a row of nav tabs; the page header and a deployments view sit below.

Pipeline illustration over a centered title, primary and secondary actions and a note, followed by three numbered next-step cards.

In Rivetlane app

An analytics view: a period switcher in the page header drives a main area chart, a breakdown of bars and a top-services table with inline trends.

In Rivetlane app

A dashboard home: page header with actions, KPI cards with deltas and sparklines, a recent-deployments feed and an incidents panel.

In Rivetlane app

A records page with row selection: per-row and select-page checkboxes, a bulk action bar that replaces the toolbar while rows are selected, row menus and pagination.

A records page: search, faceted multi-select filters with counts, sortable headers, status badges, row action menus and pagination. Scrolls sideways inside its card on small screens.

In Rivetlane app

Notification preferences as a matrix: grouped events down the side, one switch per delivery channel across, plus a digest frequency and quiet hours.

In Rivetlane app

Account settings with a section nav: photo with upload and remove, personal fields, preferences with selects, and a save bar.

In Rivetlane app

Account security with a section nav: password, two-factor status and methods, signed-in sessions, masked API tokens in a table, and a danger zone.

In Rivetlane app

A billing page: current plan with actions beside the estimated next invoice, usage meters that warn near the limit, the payment method as masked text, and an invoices table.

In Rivetlane app

Workspace members page: seat usage meter, invite form with role select and role legend, members list with role, last active and 2FA status, and pending invites with resend and revoke.

In Rivetlane app

First-run setup page: progress meter, expandable numbered steps with commands and sub-tasks, mark-as-done that advances to the next step and a completed state, plus a help card with a named engineer and docs links.

In Rivetlane app

Inbox page with All / Mentions / Deploys tabs and unread counts, items grouped by day with unread markers, quoted mentions and log excerpts, inline actions and mark-all-read.

In Rivetlane app

A working command palette shown open in-flow over a dimmed app screen: search input, recent items, Navigate / Deploy / Settings groups with keyboard shortcuts, and a key-hint footer.

In Rivetlane app

Assistant console: recent threads in a sidebar (a sheet on mobile), a question and a cited answer whose numbered markers link to source cards, feedback actions, follow-up suggestions and a composer with attach and model select.

In Wisplight

New-chat state of the assistant console: greeting, composer with attach and model select, prompt starter cards grouped by use case that fill the composer, and connected sources with sync status.

In Wisplight

Three-column docs page: sectioned nav tree, an article built from typed blocks (headings, paragraphs, code with copy, callouts, lists), a scroll-tracking "On this page" list, feedback, edit link and previous/next pager. The nav moves into a sheet and the TOC into an accordion on small screens.

In Rivetlane docs

A docs search page: large search field with keyboard hints, section facets with live counts, results grouped into Guides, API and Changelog with matches highlighted, arrow-key navigation and an empty state with popular searches.

In Rivetlane docs

A getting-started guide: time estimate and prerequisites beside a numbered rail of steps, each with a copyable command and the output to expect, ending in a "you're live" step with next links.

In Rivetlane docs

An explanation with numbered steps beside one code sample in several languages (CLI, Node, Python, curl): tabs, file label, copy button, light highlighting and the output or HTTP response each version produces.

In Rivetlane docs

One REST endpoint: method and path, description, auth note and parameter tables (name, type, required, description) beside a sticky request example in several languages and response examples tabbed by status code.

In Rivetlane docs

A versioned migration page: version badge row, deprecation notice with old-to-new replacements, numbered steps using note, tip, warning and danger callouts with copyable commands, and a keyboard shortcut table marking what changed.

In Rivetlane docs