Sonarist project

Sonarist / Design system

Documentation v1.0.0 · Work in progress · UI prototype with separate server foundations

Design system contents

Components

Kit context and connection mapping

Keep audience information adjacent to a person while distinguishing sample context from connected integration.

On this page

Purpose and composition

Keep audience information adjacent to a person while distinguishing sample context from connected integration.

Use for contextual integration design; keep live sync claims out of the guide.

Anatomy

Anatomy
PartResponsibility
ConnectionMock connected label and last mock sync
MappingProduct checkboxes
Person contextSubscriber state, tags, segments and activity

Configuration and variants

Configuration and variants
Input / variantContract
connection nameLocal text state
mapped productsSource product IDs
onSaveNo-argument callback
contact.kitOptional KitContext fixture

States and feedback

States and feedback
StateVisible / behavioral result
Mock connectedSource explicitly labels mock status
MappedCheckbox state
No person contextOptional data absent

Interaction and responsive behavior

  • Manage and Add another connection open same prototype editor.
  • Credentials are not displayed.
  • No OAuth or reconnection is performed.

Accessibility contract

  • Mapped products use labeled native checkboxes.
  • Connection status uses text.

Known implementation limits

Healthy status is a static mock message; saving does not persist a connection or refresh contact data.

Composition example

<KitConnectionEditor onClose={close} onSave={notifyLocal} />

Source references

Source references
FileResponsibility
components/views/settings-view.tsxIntegration overview
components/views/settings-editors.tsxKitConnectionEditor
components/views/person-profile-view.tsxContact Kit display

Examples from the app

Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.

Settings Integrations · Screen · Light · Desktop · 2880 × 2000 px
Kit Editor · Component detail · Light · Desktop · 1152 × 1372 px
Person Profile · Screen · Light · Desktop · 2880 × 2000 px

Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0