Skip to content
Persyk

Persyk UI

The session window is Persyk’s visual reference: quiet, content-first, and native to macOS. New interfaces should share that design language, not copy its floating-window layout or translucency indiscriminately.

Principles

  • Content first. Let the user’s words dominate. Keep status, metadata, and secondary actions quieter; avoid unnecessary cards and decorative chrome.
  • Clear hierarchy. Distinguish active content from completed content through emphasis. Use consistent alignment, breathing room, and subtle separators rather than heavy borders.
  • Meaningful color. Keep surfaces neutral. Use stronger color to communicate activity, role, or risk—not as decoration—and pair state colors with labels or shapes.
  • Calm updates. Keep frequently changing labels and numbers from shifting their neighbors. Motion should explain activity or a state change, never compete with the content.
  • Accessible by default. Preserve keyboard access and visible focus, readable light and dark appearances, and alternatives for reduced motion, reduced transparency, and increased contrast. Keep pending and failed actions understandable.
  • Adapt to the task. A floating overlay can be translucent; a reading or settings pane can be more opaque. Consistency comes from shared styling and hierarchy, not identical layouts.

Use the shared implementation

  • foundations.css owns the shared typography, semantic palettes, spacing, rounding, motion, and surface treatments. The root layout loads it for all windows. Use its CSS variables and persyk-surface where appropriate; keep purpose-specific layout in the view.
  • Button.svelte provides standard, quiet, destructive, and primary actions with native button attributes and onclick. Use iconOnly with an accessible name for icon actions. pending disables activation and exposes busy state; the caller supplies meaningful content such as “Saving…”.
  • TranscriptSegments.svelte provides the existing transcript hierarchy, timestamps, and contextual actions.

Keep concrete styling values in code rather than duplicating them here. Reuse these foundations before adding a parallel style or abstraction. For context-specific adaptations, see the session route and session panel.