Basel Standard / Blocks
Installable marketing, commerce, app, editorial, and hybrid blocks built on the same type, spacing, and state rules as the core system. Start with a resolved surface, then move into the block docs for implementation detail.
Library scope
Landing pages, product browse flows, dense app routes, editorial reading, and hybrid documentation surfaces.
12 featured starting points for faster evaluation.
Install path
Install tokens are issued from your account. Each block doc includes the registry command, usage, and implementation detail.
Featured
Analytics
Use one report shell for summary signals, trend context, and factual side notes.
App blocks
App reporting shell for quiet summary signals, trend views, and factual side notes.
Archive
A compact route header plus one filter band is usually enough.
| Entry | Owner | Status | Views |
|---|---|---|---|
| Pattern library launch | Platform | Published | 14,204 |
| Queue shell docs | Docs | Review | 2,411 |
| Edition pricing update | Growth | Draft | 801 |
App blocks
Table-first workspace for archive routes, internal indexes, and data-led compare flows.
Comparison
Comparison should be factual and scan-first.
| Scope | Foundation | Edition | Studio |
|---|---|---|---|
| Primitive layer | Included | Included | Included |
| Block library | Core | Expanded | Expanded |
| Support | Docs | Priority docs | Advisory |
Commerce blocks
Row-first comparison block for plans, products, and edition scope.
Block / Editorial hero
This block gives the marketing site and the journal the same disciplined visual introduction.
Editorial blocks
Structured article opener with a disciplined text rail and supporting figure.
Docs / Example
Useful when docs need a specimen and a persistent explanation rail.
Hybrid blocks
Hybrid docs shell for a live specimen beside persistent controls and explanation.
Collection
A browse shell for faceted collections, search results, and category routes.
Object
Object
Commerce blocks
Commerce browse shell for filters, result controls, product grids, and support rails.
Features
Structure
State
Continuity
Marketing blocks
Structured feature explanation block for product pages, launch sections, and commercial proof surfaces.
Pricing
Price by resolved scope, not by feature-theater. Keep the comparison factual and compact.
Core primitives and default examples.
Blocks, richer docs, and the stronger commercial surface set.
For teams that need packaged support and integration help.
Marketing blocks
Structured pricing comparison for edition pages, package framing, and commercial decision surfaces.
Reception / Lounge
Built for featured product rails where materials, price, and availability need clear hierarchy without falling back to a generic catalog card.
Commerce blocks
Featured commerce card for collection labels, pricing, availability, and actions.
Edition / Product standard
Lead with the interface itself. Keep the claim narrow. Let hierarchy, density, and state do the selling.
Marketing blocks
Landing-scale hero block for a real interface specimen, restrained copy, and compact proof markers.
Selected record
App blocks
Page-scale queue shell for list-detail triage, moderation flows, and operational review routes.
Settings
App blocks
App settings shell for form sections, supporting policy notes, and save actions.
Category
Activity
App blocks
Ordered event panel for revisions, fulfillment steps, deployment updates, and other time-based sequences.
Selected issue
Notes
App blocks
Detail-surface block for active record review, proof artifacts, notes, and side facts.
App blocks
Shared support band for search, filters, saved views, counts, and export actions.
Workspace
Keep the form or editor in the dominant pane. Let the right rail stay factual.
App blocks
Edit-first workspace with one main editor pane, a factual inspector rail, and a commit band.
App blocks
Restrained summary row for operational signals, exceptions, and route-level orientation.
App blocks
Quiet operational facts block for timestamps, paths, owners, and record metadata.
App blocks
Compact record rail block for queues, review flows, and master-detail operational pages.
Release queue
Use the utility header for queue counts, route actions, and current cadence without turning the page into a hero.
App blocks
Compact route-level header block for counts, timestamps, and actions on operational pages.
Category
Rollout
Marketing blocks
Rollout and onboarding sequence block for implementation plans, migrations, and service delivery pages.
Next step
Marketing blocks
End-of-page conversion block for one clear next step and supporting implementation context.
Proof
Use one ledger for outcomes, deployment notes, reviews, or customer validation.
The queue and table blocks replaced three bespoke route shells in one pass.
The block library moved from narrow showcase coverage to marketing, commerce, app, and hybrid coverage.
Selected, dense, and transactional states now exist as installable surface patterns, not only route-local compositions.
Marketing blocks
Ordered proof list for deployment notes, outcomes, reviews, and customer validation.
Questions
Keep the answers short, factual, and operational.
Marketing blocks
Structured FAQ section for pricing, launch, and onboarding pages.
Inquiry
Marketing blocks
Structured request form block for demo, enterprise, and support intake pages.
Integration
Use one shared implementation band near the point of decision.
Marketing blocks
Shared install and compatibility block for pricing, landing, and docs bridge surfaces.
Trusted by
Marketing blocks
Restrained trust block for customer, partner, and platform marks with supporting context.
Proof
Use artifacts and state evidence instead of claim-heavy supporting copy.
Density
Selection, metadata, and secondary lines stay ordered under tighter working density.
Install
A quiet proof band can show install reality without turning into a repeated code wall.
State
Loading, empty, and selected states can be shown as evidence, not described as aspiration.
Marketing blocks
Compact proof band for density, install reality, and state evidence.
Use cases
Marketing blocks
Audience and workflow matrix for product fit, operational framing, and commercial segmentation.
Category
Docs / API
Hybrid blocks
Hybrid docs block for a live preview, API contract, and compact implementation notes.
Case study
Hybrid blocks
Hybrid proof block for narrative summary, factual results, and compact case-study metrics.
Guide
This shell bridges docs, content, and product continuity.
Advanced docs often need two things at once: a credible reading column and a persistent rail for examples, facts, or implementation notes.
This shell keeps the text column intact instead of collapsing the page into a dashboard collage.
Hybrid blocks
Hybrid shell for advanced docs and case-study pages with a reading column and inspector rail.
Category
Journal / Release notes
Editorial blocks
Editorial and docs masthead for title, lead, publication facts, and quiet utility actions.
Changelog
Editorial blocks
Release and update ledger for shipped work, docs changes, and system editions.
Block / Editorial card
Use the same editorial voice in grids, related content modules, and archive shelves.
Editorial blocks
Linked editorial teaser card for journal indexes, reading queues, and archive shelves.
Block / Figure strip
A modular figure grid for research notes, visual studies, and product storytelling.
A sedan profile gives wide crops real structure. The form is simple enough to hold a card or hero without drifting into generic stock imagery.
The telephone keeps the composition direct. The handset, dial, and cord give smaller frames enough detail without making them noisy.
The radio reads well when the layout needs a denser still life. Its grille and controls keep the surface active while staying orderly.
Editorial blocks
Editorial figure sequence for research notes, visual references, and structured captions.
Block / Resources
Useful when a journal page or docs article needs source material without falling back to a generic list.
Best single visual explainer for why grids became the operating system of Swiss poster design.
Primary-source poster browsing for rhythm, crop behavior, and hierarchy under real cultural commissions.
Useful for canonical validation and for seeing how Swiss work entered the modern design canon.
Editorial blocks
Structured references block for citations, source notes, and further reading.
Your interface should not look assembled. It should look edited.Use this block when one principle needs structural emphasis inside editorial, case-study, or product-continuity pages.
Editorial blocks
Structural quote block for editorial statements, case-study principles, and release-note emphasis.
Editorial blocks
Section navigation rail for longform docs, guides, and case-study pages.
Category
Cart
Commerce blocks
Transaction summary block for line items, totals, and next-step actions.
Checkout / Step 2
The transaction should read as one flow, not a collage of unrelated cards.
Commerce blocks
Two-pane transactional shell for one checkout or setup step plus a persistent summary rail.
Collection / Seating
Use a collection header when users need orientation, filters, and supporting facts before the product grid begins.
Commerce blocks
Commerce header for collection pages, category surfaces, and campaign assortments.
Order status
Commerce blocks
Post-purchase status ledger for ecommerce orders, provisioning milestones, and service updates.
Lighting / Architectural
Designed for launch moments where one object carries the section. Price, category, and action remain legible under a high-contrast overlay.
Commerce blocks
High-contrast commerce block for launch shelves and featured product moments.
Specification / Seating
Useful when a product needs a visual rail and a denser specification column. The split keeps attributes, price, and actions in a predictable order.
Commerce blocks
Split commerce card for product metadata, pricing, and follow-up actions.
Product detail
Use one authored summary for title, price, attributes, decision actions, and factual support.
Commerce blocks
Buy-side summary block for title, price, attributes, actions, and factual support.
Chair
In stock
Table
6 week lead time
Lamp
Preorder
Commerce blocks
Repeatable browse card for collection grids, search results, and recommendation shelves.
Gallery
Commerce blocks
Product media block for alternate views, thumbnail sequences, and supporting detail rails.
Recommended
Object
Object
Object
Object
Commerce blocks
Recommendation and related-items shelf for detail pages, carts, and editorial commerce surfaces.
Selection
Commerce blocks
Buy-side selection block for options, availability notes, and purchase actions.