Skip to content

RSH / Reference material

Component catalog

Real component imports show the shared presentation system where isolation is honest. The source census below declares its exact scope. Fixtures are reference data, not production claims.

The page ground is opaque black. Field-dependent specimens use a labeled static gradient proxy; the live page field and its animation never appear here.

Coverage / declared scope

Read the specimen in context

This catalog covers shared UI, forms, sections, interactive, field and layout modules. Page and realm compositions, trial products and integrations require their own experience checks.

56 source modules are recorded; 40 export entries and 15 content fixtures are classified. A module count is not a count of independently demonstrated behaviours.

Forms use a local success/error response. Dictation is disabled here because browser speech recognition may use an external service. Labels and error descriptions remain unique when several forms appear together.

Source coverage and imagery manifest

01 / UI / Core

UI / Core

8 exported presentational components in this census cluster.

components/ui/core/heading

Heading

Semantic display primitive used for the site heading hierarchy.

A heading carries the carved voice.

components/ui/core/text

Text

Semantic copy primitive used for body, labels, lists, and annotations.

Body copy keeps the working voice precise.

components/ui/core/motion

MotionText

Framer Motion wrapper over the real Text primitive.

MotionText resolves through the working voice.

components/ui/core/motion

MotionHeading

Framer Motion wrapper over the real Heading primitive.

MotionHeading stays on brand.

components/ui/core/button

Button

Primary pill control; the fixture uses the non-navigation button path.

components/ui/core/text-input

TextInput

Single-line labeled control shown in its dark gradient treatment.

components/ui/core/text-area

TextArea

Multiline labeled control with speech input deliberately disabled.

components/ui/core/field-scrim

FieldScrim

Both veil and reading tiers are shown over a static field proxy.

Veil tier

Interactive surfaces keep the field present.

Reading tier

Sustained copy receives the deeper treatment.

Static gradient proxy for a component whose tiers exist to sit over the field.

02 / UI / Cards

UI / Cards

4 exported presentational components in this census cluster.

components/ui/cards/base-card

BaseCard

Low-level card surface with fixture-authored primitive children.

Base surface

Composition begins with a quiet boundary.

components/ui/cards/card

Card

Expandable information card used by section grids.

Constraint mapping

Name the system before changing it.

components/ui/cards/process-card

ProcessCard

Method step card with its production hover treatment.

R

Reveal

Expose the real boundary and the evidence around it.

components/ui/cards/testimonial-card

TestimonialCard

Attribution card rendered with clearly labeled fixture copy.

"

Fixture quotation for layout review only.

Catalog fixture

Reference specimen

03 / UI / Display

UI / Display

1 exported presentational component in this census cluster.

components/ui/display/callout

Callout

Centered callout composition with a non-navigation CTA.

Make the constraint visible

A focused callout gives one decision enough room to land.

04 / Forms

Forms

2 exported presentational components in this census cluster.

components/forms/form

Form

The real form exercises local async success, error and retry, beside labelled static slot specimens; no request is sent.

We store what you send here to answer it — in HubSpot, and nowhere else.

Your message is received.

Static success-slot fixture. No request was made.

components/forms/cta-with-form

CTAWithForm

Offer-and-form composition uses the same isolated local transport and catalog-only identifier.

Bring the hard problem

We will identify the useful boundary together.

No live submission is made from this reference page.

We store what you send here to answer it — in HubSpot, and nowhere else.

05 / Sections

Sections

9 exported presentational components in this census cluster.

components/sections/card-grid

CardGrid

Two-column card-grid section using realistic service framing.

Working modes

Choose the shape that fits the decision.

Discovery

Find the actual constraint.

Delivery

Build the smallest complete path.

components/sections/client-logos

ClientLogos

Client mark section in its static, non-marquee composition.

Selected collaborators

A compact subset of the production logo plane.

Mozilla
Spotify
Princeton

components/sections/hero

Hero

Production hero with the scroll indicator omitted for the bounded specimen.

Reference opening

A clear threshold 

The system speaks before it decorates. 

A bounded hero fixture exercises the real word-split composition.

components/sections/hero/hero-well

HeroWell

Field-aware hero composition on a static proxy; the global field remains covered.

Field-dependent composition

The well stays legible 

The specimen keeps the real field registration while using a static swatch.

Static gradient proxy; the real HeroWell still registers its field state with the page conductor.

components/sections/method/method-moves

MethodMoves

Three method moves rendered at their static first-paint parity.

One method, three deliberate moves.

  1. Reveal

    See the actual system.

  2. Shape

    Give the constraint form.

  3. Hold

    Make the result durable.

components/sections/mission

Mission

Mission statement and values using static catalog data.

A useful mission

Build with clarity.

Leave evidence behind.

Working values

The behaviors behind the work.

Clarity

Name the real thing.

Make the next decision easier.

components/sections/process

Process

Process section with three production cards and no synthetic page field.

A visible process

Each step earns the next.

R

Reveal

Find the boundary.

S

Shape

Choose the form.

H

Hold

Keep the evidence.

components/sections/story

Story

Production timeline; the catalog fixture documents its reduced-motion static reading path.

A small timeline shows the structure without claiming company history.

  1. 01

    Observe

    Read the existing system.

  2. 02

    Resolve

    Commit the smallest coherent change.

Heavy scroll choreography is omitted when the browser requests reduced motion; the production component supplies its own static vertical reading path.

components/sections/testimonials

Testimonials

Plain, static testimonial layout with generated code background disabled.

Fixture voices

Reference quotation for spacing and hierarchy.

Catalog fixtureNon-production content

Layout copy, explicitly not social proof.

06 / Interactive

Interactive

7 exported presentational components in this census cluster.

components/interactive/animations/apollo-emblem

ApolloEmblem

Production emblem with its shipped image pair and a compact word ring.

MAGICIAN

CREATOR

SAGE

components/interactive/animations/geometric-shape

GeometricShape

Pointer-responsive geometric image mask using existing production assets.

components/interactive/branded-elements/branded-cta

BrandedCTA

Real CTA and emblem composition with catalog-only copy.

CLARITY

CRAFT

PROOF

Build the next clear thing

A branded threshold

Bring the hard constraint into view.

components/interactive/branded-elements/branded-symbol

BrandedSymbol

The five existing elemental symbols rendered from production assets.

Octahedron – Air (Vision and Possibility)Icosahedron – Water (Empathy and Co-Creation)Tetrahedron – Fire (Clarity and Transformation)Cube – Earth (Precision and Foundation)Dodecahedron – Aether (Resilience and Brilliance)

components/interactive/invocation-receipt

InvocationReceipt

Receipt shown in its instant reduced-motion state so every line is present.

The answer settles without spectacle.

Constraint named

Evidence carried

components/interactive/marquees/hover-reveal-marquee

HoverRevealMarquee

Production hover marquee with a single bounded catalog row.

Ways of working

components/interactive/text-reveals/diagonal-text-reveal

DiagonalTextReveal

Production diagonal reveal with its link omitted to keep the specimen inert.

Observe / Shape / Ship

07 / Field

Field

5 exported presentational components in this census cluster.

components/field/field-canvas

FieldPoints

Internal Three.js points renderer exported for the full viewport field.

Excluded / full-page-experience

It requires the full FieldCanvas WebGL scene and is not a standalone DOM specimen.

components/field/field-canvas

FieldCanvas

The global full-viewport WebGL field.

Excluded / full-page-experience

The catalog explicitly uses a flat black ground and must not mount the live field.

components/field/field-layer

FieldLayer

Idle-mounted fixed host for FieldCanvas.

Excluded / full-page-experience

Mounting it would violate the catalog rule forbidding the live page field.

components/field/margin-voice

MarginVoice

Assistive-only field utterance; silence is the expected majority fixture result.

The real component is mounted above. It is assistive-only and usually silent by design.

components/field/tone-rune

ToneRune

Production field sound preference control, shown without mounting the field.

08 / Layout

Layout

4 exported presentational components in this census cluster.

components/layout/container

Container

Width-constraining layout primitive with a visible catalog boundary.

The container owns width, not voice.

components/layout/section

Section

Vertical-spacing layout primitive in its small size.

The section owns rhythm between regions.

components/layout/header

Header

Global navigation chrome bound to route reveal and site settings.

Excluded / requires-route-context

The root App Router layout already owns the one live Header and its navigation state.

09 / Content renderers

Content renderers

Exhaustive discriminated-union fixtures for Archives blocks and inline runs, Labor prose, and the Signal excerpt parser.

archive-block / p

Archive paragraph

Runs render through the shared archive block renderer.

A recovered paragraph keeps weight and inflection inside one editorial run.

archive-block / list

Archive list

List items retain the archive run model.

  • Read the boundary before crossing it.
  • Carry the archive/reference forward.

archive-block / marginalia

Archive marginalia

The renderer supplies the register annotation and inset treatment.

archive-block / pullquote

Archive pullquote

The archive renderer owns its centered editorial emphasis.

The constraint is part of the instrument.

archive-block / code

Archive code

The production Terminal renderer uses the site mono stack.

type Boundary = "known" | "unknown";
const answer: Boundary = "known";

archive-block / schematic-cipher

Archive schematic cipher

The live cipher component is mounted by the real block renderer.

ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩΑΒΓΔΕΖΗ

The Key

Turn the beast against the strength it already carries.

archive-inline / text

Inline text

The unmarked string branch renders inside an archive paragraph.

Plain archive text remains the unmarked baseline.

archive-inline / bold

Inline bold

The weighted run is resolved by the archive inline renderer.

A weighted archive run.

archive-inline / italic

Inline italic

The inflected run is resolved by the archive inline renderer.

An inflected archive run.

archive-inline / ref

Inline reference

The quiet cross-reference keeps its production treatment.

register/reference

archive-inline / seed

Inline seed

The command seed keeps its production underline and hover behavior.

recover(signal)

labor-prose / p

Labor paragraph

The shared labor prose view supplies its reading scrim and rhythm.

A labor paragraph carries the lesson in the shared reading voice.

labor-prose / quote

Labor quote

The shared labor prose view supplies its inset quotation treatment.

The useful answer begins where the easy answer stops.

labor-prose / list

Labor list

The shared labor prose view supplies its boundary-list treatment.

  • Name the constraint.
  • Test the boundary.
  • Keep the evidence.

signal / excerpt

Signal excerpt

The markdown-lite production parser renders emphasis, code, and annotation.

The recovered signal preserves emphasis and a command(seed).

A reference is presented: follow the rendered annotation.

The final line remains ordinary transmission copy.