Foundations
Reusable interface primitives, shown below in real rendered states.
21 live specimens ↓
Component catalogue
Browse rendered foundations, then see content, navigation, and page patterns working on real routes.
Four families
Foundations are reusable building blocks. Larger compositions stay visible through their owning pages until their reuse contract is proven.
Reusable interface primitives, shown below in real rendered states.
21 live specimens ↓
Diagrams, structured data, and teaching displays shown where they are used.
Wayfinding, next-step, and journey controls shown in their working context.
Composed landing, orientation, venture, and decision-page patterns.
Reusable foundations
These components have an explicit reuse contract. Search by name or purpose, or use a family filter to move between the catalogue and live examples.
Showing 21 of 21 reusable foundations
Compact semantic status labels.
Primary and supporting actions with complete interaction states.
A named lesson, warning, or proof point.
Neutral
Success
Warning
A bordered surface for grouped content.
Related content stays together.
Tonal contrast creates hierarchy.
A short passive label or a generous interactive link.
A named horizontal reading constraint.
A copy-ready prompt that turns reading into action.
Put this to work
Copy this prompt. Paste into Claude, ChatGPT, or any AI assistant. The page context is already loaded — send it and get analysis tailored to your role.
Name the decision this page should help a reader make. Identify the smallest useful next action. State what evidence would change the recommendation.
Responsive structured data: cards on small screens and a table on large screens.
| State | Meaning | Action |
|---|---|---|
| Ready | Evidence passes | Proceed |
| Hold | Evidence is incomplete | Review |
One filter→result affordance across three dummy domains: industries, capabilities, and business artifacts.
Domain adapter 1 · Realist surface
4 industries
Frontier
Outcome: Shape demand through attention
Production verticals
Outcome: Biometrics and outcomes data
Cross-cutting rails
Outcome: Move value between actors
Production verticals
Outcome: Physical automation of works
| Industry | Layer | Conviction | Phase |
|---|---|---|---|
| Advertising | Stories | Ruled out | 6.0+ |
| Healthcare | Works | Moat-creating | 4.0 |
| Payments | Pipes | Already arrived | 5.0 |
| Robotics | Works | Stack-native | 4.0→5.0 |
Domain adapter 2 · Engineer surface
3 capabilities
Outcome: A preferred future with a named beneficiary and constraints
Outcome: A qualified lead or a recorded reason to stop
Software
Outcome: A buildable spec tied to an observable user outcome
| Capability | Context | Authority | Beneficiary |
|---|---|---|---|
| Develop Vision | shared · sme · venture | human-led | People affected by the proposed change |
| Qualify a Lead | venture | human-approved | Possible buyer and accountable seller |
| Spec a Product Feature | sme · venture | human-approved | Intended user of the feature |
Domain adapter 3 · future strategic rollout
3 artifacts
Strategy
Outcome: Outcome-capability-ownership cells for one system
Commercial
Outcome: Position, package, and price one offer
Outcome: A reusable, evidence-bounded response scaffold
| Artifact | Lifecycle | Audience | Decision relevance |
|---|---|---|---|
| Operating Model | archived | internal | Low |
| Pricing Model | live | internal | High |
| RFI Response Template | draft | external | Medium |
A line that can name the transition between ideas.
A structural label that prepares the next heading.
Structural label
Quiet label
A quiet structural route to supporting depth.
Consistent destination cards for curated indexes.
An explicit call to action inside prose.
Continue into the UI/UX design playbook.
Compact trigger and taxonomy labels.
Readable measure and rhythm for sustained text.
Good interface prose makes the next decision easier. It uses the smallest amount of text that preserves the meaning.
Structure serves action.
One of three deliberate vertical gaps between related items.
A semantic page band with controlled vertical spacing.
Alternating section surface
A consistent eyebrow, heading, and lede hierarchy.
Clear hierarchy
The opener establishes topic, claim, and supporting context.
One metric with a label and optional evidence note.
20
primitives
one owner
0
facades
target
A visible five-item ceiling with deliberate disclosure.
Page-pattern specimen
A live chooser and comparable cards for business ideas. These fixtures preserve the real component behavior while keeping showcase filters out of the page URL.
Choose a stage or business model.
4 ventures
Productized positioning service that attracts qualified prospects to service businesses
Human authority: The venture owner decides whether demand evidence warrants continued effort.
Inspect Berley TrailsShared coordination infrastructure so AI-native ventures skip the 12-month stack tax
Human authority: External teams decide whether the shared infrastructure solves a real need.
Inspect StackmatesFan-owned loyalty infrastructure that helps creators build direct relationships that outlive any platform
Human authority: Creators and fans retain consent over any loyalty or ownership model.
Inspect PrettyMintEmbodied social rituals that measurably increase trust and belonging in an AI-first world
Human authority: Participants retain consent and may stop any embodied practice.
Inspect Touch For FunA consistent return from a venture overview to the complete marketplace.