Skip to content

design.md

Latest commit

 

History

History
38 lines (26 loc) · 2.24 KB

design.md

File metadata and controls

38 lines (26 loc) · 2.24 KB
Raw

DreamLoop Frontend Design System

Product intent

DreamLoop is a private, local-first dream journal. The interface should feel quiet enough for bedside use, clear enough for daily capture, and structured enough to make recurring patterns useful. The primary action is always Log a dream; interpretation, patterns, gallery, and settings support that loop.

Direction

  • Hallmark route: catalog, atmospheric genre, Workbench macrostructure, Lumen theme adapted to DreamLoop's existing local CJK fonts and photographic page art.
  • Visual memory point: one restrained, page-specific dream image behind each workspace. Content stays on matte surfaces; there is no glass blur or decorative canvas animation.
  • Display: local Noto Serif SC. Body: local Noto Sans SC. Data and controls: local Cascadia Mono.
  • Palette: violet-black canvas, warm paper surfaces, amber as the single action accent, sage and rust only for semantic status.

Layout and hierarchy

  • Persistent product navigation, then a page heading, then the page's primary work area.
  • Dashboard: capture-led hero, one insight, a single ruled status rail, then calendar and recent dreams.
  • Log: capture and analysis remain the two dominant columns.
  • Detail: dream narrative first, analysis second, context last.
  • Patterns, Gallery, and Settings preserve their existing information architecture and data contracts.

Motion

Only three effects are used from web-fx-lab:

  1. One-shot opacity reveal for the page heading and primary regions.
  2. One-shot count-up for numeric dashboard totals.
  3. Native same-origin View Transitions between dream cards and dream detail.

All effects use the shared timing tokens, degrade without JavaScript or browser support, and resolve immediately under prefers-reduced-motion: reduce.

Responsive and accessibility floor

  • Required widths: 320, 375, 414, 768, 1024, and 1440 CSS pixels.
  • html and body use overflow-x: clip; no page-level horizontal scroll.
  • Navigation and button labels remain single-line; the compact navigation rail scrolls locally when necessary.
  • All controls keep a visible :focus-visible ring and a 44px minimum target.
  • Long dream text, titles, paths, and translated labels may wrap inside their own tracks without forcing the layout wider.