Components

The library, live from this repo's own system/ code — what any session builds from and any engineer lifts. Each group carries its contract: version, binding rules, code path. Everything themes via --ftf-* tokens (tokens.css, brand spec v1) and survives reduced motion.

Identity

The locked lockup, the mark, and the tick — the three marks the product signs with.

BrandLockup / BrandMark / RecordTickcontract v1contract code

system/brandMark.tsx · system/RecordTick.tsx · system/tokens.css

· Copy VALUES from tokens.css in one commit, name the spec version — never invent values.

· vibe = the act material (the river), chk = surface ink; mark and vibe are ONE material.

· The tick means CAPTURED, never decoration. Gradient never on small UI.

vibechkvibechk captured

The composer

The one control a respondent lives in — voice-first, permanent material presence.

VoiceInputcontract v1contract code

system/VoiceInput.tsx

· Never a second text field beside it — it IS the escape hatch.

· The placeholder is authored with the question, never derived from widget kind.

· Never dead: disabled states still explain themselves.

Voice / text bar

tap to talk or type; the send circle reads --ftf-act-bg, so it runs the locked river.

The widget family

Every input commits ONE display string; multi-value joins with ' · '. In flow the widget owns its send; in a shelf it reports and the composer commits.

AnswerInput / ComposerShelfcontract v1contract code

system/inputs.tsx · system/types.ts

· No hardcoded colours or radii — everything reads --ftf-* tokens.

· No unicode glyphs as icons; every mark is a drawn SVG.

· A page integrating these must register new kinds in its shelf set or the widget silently falls back to a text box.

Single choice

tapping marks then commits — the tap is the send

Multi choice

square marks, Done commits; arms at the minimum, speaks only past the max

Boolean

one segmented control on one shell; the tap is the send

PDF + note

a document with an optional note riding along — one send commits both

Images + note

one or many, thumbnails in the bar

Social handle

the prefix is locked; pasting a full URL auto-strips silently

linkedin.com/in/

Any link

https:// is the given segment; the favicon IS the confirmation

https://

Sources — the intake

the one widget that does WORK: collects, reads what it collected in place, then commits — the tick lands per source as each read completes. Fill LinkedIn and press send.

linkedin.com/in/required

github.com/optional

The Studio kit

The workbench's own family — the Atlas and every tool page here are built FROM these, the same discipline as product pages and the widget family.

Studiocontract v1contract code

system/studio.tsx

· State is hairlines and tints, never fills or lifts; hover changes material only.

· One river per view — studio chrome stays flat anchors + tints.

· The Panel's soft shadow is the ONE permitted shadow: panels float above a canvas, a real depth.

residentembassystaleshipped

a section

a-decision · the brand-tinted sheet carries decisions

the warn sheet carries staleness

the quiet sheet carries data

Docking new components

A component joins this page by the dock ritual: code in system/, a contract with version: 1, a card here, one commit. docs/PUBLISHING.md has the whole of it.