Sonarist / Design system

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

Design system contents

Implementation

Screenshot capture and quality control

Render actual components at 2× resolution and preserve their native geometry, context and meaningful states.

On this page

Reproduce

node scripts/design-system/audit-sonarist.mjs
node scripts/design-system/measure-sonarist-contrast.mjs
node scripts/design-system/capture-sonarist.mjs
python3 scripts/design-system/build-sonarist-content.py
node scripts/design-system/verify-design-systems.mjs

Capture sequence

Capture sequence
Stage	Requirement
Snapshot	Disposable copy; source files remain unchanged; no secrets/provider routes.
Fonts/theme	Native cached Geist and rounded icons; seed preference before load; wait for document.fonts.ready.
Applied views	1440 × 1000 desktop and 390 × 844 phone, light/dark, DPR 2.
Component crops	Capture actual element bounds; for popup use union of trigger + popup with small padding.
States	Open/selected/empty/error/draft/attachment and domain wizard stages only where supported.
Internal scrolling	Retain viewport capture; supplemental full-content export uses measured scroller height. Tall dialog crops reset scroll and increase viewport height until native header/footer fit; label full-content and record actual viewport.
Encoding	WebP lossless for details, high quality for screens; no upscaling.
QC	Review every delivered image; verify font/icon load, clipping, attached menus, source proportions, addresses and theme.
Provenance	Manifest records dimensions, DPR, revision and source hashes.
Cleanup	Stop temporary server; remove disposable source copy; retain reproducible harness and ignored originals.

Evidence boundary

A screenshot shows one native rendered state. It does not establish live delivery, billing, auth, data persistence or broad accessibility compliance. Synthetic failure states are labeled and use source components; unsupported states should be documented as gaps rather than painted into a mockup.

Source references

Source references
File	Responsibility
app/globals.css	Scroll and font host requirements
components/ui/dialog.tsx	Native modal containment
components/inbox/queue-menu.tsx	Absolute popup placement

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.