Sonarist / Design system

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

Design system contents

Components

Email-domain readiness and setup wizard

Explain sending and receiving as distinct setup responsibilities with clear staged guidance.

On this page

Purpose and composition

Explain sending and receiving as distinct setup responsibilities with clear staged guidance.

Use as a setup UI example; real provider verification must be backed by authenticated status DTOs.

Anatomy

Anatomy
Part	Responsibility
Overview	Domain rows with separate sending/receiving status
Steps	Address, Sending, Receiving, Test
DNS records	Type, name, value and copy action
Footer	Back/Continue/I added the records/Finish setup

Configuration and variants

Configuration and variants
Input / variant	Contract
sampleDomains	Static ready/action/pending records
openSetup	Starts at sending or receiving when source state requires
onToast	Local status feedback
step	1–4 internal state

States and feedback

States and feedback
State	Visible / behavioral result
Ready	Both sending and receiving ready
Action needed	One dimension requires attention
Pending	Not started text
Step change	Local progress only

Interaction and responsive behavior

Clipboard copy writes the sample value.
Continue does not validate domain or address before advancing.
Test actions show prototype toasts.
Wizard body scrolls on phone while footer remains.

Accessibility contract

Step count is named in the progress container.
Field labels and copy-action names are present.
Status includes text and icon.

Known implementation limits

DNS values and readiness are fictional. The wizard cannot certify sending/receiving, save a live domain or test an actual mailbox.

Composition example

<EmailDomainsSettings onToast={notifyPrototype} />

Source references

Source references
File	Responsibility
components/views/email-domains-settings.tsx	EmailDomainsSettings and internal wizard

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.