DESIGN.md

metadata

name: Dream QA
description: >-
  A guided dream Q&A interface for turning dream fragments into one grounded
  today tip.
colors:
  morning-mist: oklch(0.965 0.014 210)
  warm-paper: oklch(0.985 0.010 82)
  soft-ink: oklch(0.205 0.020 70)
  muted-ink: oklch(0.500 0.030 82)
  surface-card: oklch(0.995 0.006 82)
  surface-sage: oklch(0.930 0.035 145)
  primary-sage: oklch(0.555 0.105 145)
  primary-sage-deep: oklch(0.390 0.095 145)
  accent-amber: oklch(0.820 0.120 78)
  accent-coral: oklch(0.710 0.135 32)
  border-soft: oklch(0.825 0.020 85)
  warning: oklch(0.760 0.150 75)
typography:
  display:
    fontFamily: >-
      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe
      UI, sans-serif
    fontSize: 2rem
    fontWeight: 760
    lineHeight: 1.08
    letterSpacing: '0'
  headline:
    fontFamily: >-
      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe
      UI, sans-serif
    fontSize: 1.375rem
    fontWeight: 720
    lineHeight: 1.2
  title:
    fontFamily: >-
      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe
      UI, sans-serif
    fontSize: 1rem
    fontWeight: 680
    lineHeight: 1.3
  body:
    fontFamily: >-
      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe
      UI, sans-serif
    fontSize: 1rem
    fontWeight: 450
    lineHeight: 1.55
  label:
    fontFamily: >-
      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe
      UI, sans-serif
    fontSize: 0.8125rem
    fontWeight: 650
    lineHeight: 1.25
rounded:
  sm: 6px
  md: 8px
  lg: 12px
  pill: 999px
spacing:
  xs: 6px
  sm: 10px
  md: 16px
  lg: 24px
  xl: 32px
components:
  button-primary:
    backgroundColor: '{colors.primary-sage-deep}'
    textColor: '{colors.warm-paper}'
    rounded: '{rounded.md}'
    padding: 12px 16px
  button-secondary:
    backgroundColor: '{colors.surface-card}'
    textColor: '{colors.primary-sage-deep}'
    rounded: '{rounded.md}'
    padding: 12px 16px
  input-composer:
    backgroundColor: '{colors.surface-card}'
    textColor: '{colors.soft-ink}'
    rounded: '{rounded.lg}'
    padding: 14px 16px

Design System: Dream QA

1. Overview

Creative North Star: "The Morning Question Desk"

Dream QA should feel like a calm morning workspace for unpacking a dream while it is still fresh. The surface is light, readable, and ordinary-user friendly, with enough dream atmosphere to feel memorable. The interface is a product experience first: the user needs to record, answer, skip, add detail, and receive one today tip without decoding a metaphor-heavy ritual.

The old customs/pact visual language is deprecated for new work. A small Dream Customs label may remain for repo/Space continuity, but the primary visible experience should be 梦境问答台 / Dream QA.

Key Characteristics:

• Stepper with four phases: Record, Ask, Interpret, Tip.
• Conversation timeline for dream fragments, follow-up questions, answers, and interpretation draft.
• Unified multimodal composer for text, image, voice, mood, and primary action.
• Right-side desktop panel for interpretation draft and Today Tip preview.
• Mobile final screen that prioritizes the Today Tip before optional explanation.

2. Colors

The palette is soft morning product UI: warm white surfaces, charcoal text, sage actions, amber note highlights, and coral used sparingly for warmth or safety.

Primary

• Sage Guide (oklch(0.555 0.105 145)): stepper progress, selected chips, focus accents.
• Deep Sage Guide (oklch(0.390 0.095 145)): primary buttons and active controls.

Secondary

• Amber Note (oklch(0.820 0.120 78)): follow-up question highlight, Today Tip accent, gentle attention.
• Coral Care (oklch(0.710 0.135 32)): caring note, safety edge, and one small emotional highlight per result.

Neutral

• Morning Mist (oklch(0.965 0.014 210)): app background.
• Warm Paper (oklch(0.985 0.010 82)): main reading surface.
• Soft Ink (oklch(0.205 0.020 70)): primary text.
• Muted Ink (oklch(0.500 0.030 82)): secondary labels with readable contrast.
• Soft Border (oklch(0.825 0.020 85)): panel and input borders.

Named Rules

The One Tip Rule. Visual emphasis should guide the eye to one primary Today Tip. Do not create multiple equally loud recommendation blocks.

The No Oracle Rule. Avoid tarot, prophecy, mystic symbols, parchment certificates, and theatrical stamps.

3. Typography

Display Font: Inter with system fallbacks.

Body Font: Inter with system fallbacks.

Label/Mono Font: Use system mono only for debug JSON, model telemetry, or structured IDs.

Hierarchy

• Display (760, 2rem, 1.08): app title and final Today Tip headline.
• Headline (720, 1.375rem, 1.2): step titles and result section names.
• Title (680, 1rem, 1.3): timeline item headers, buttons, and compact panel labels.
• Body (450, 1rem, 1.55): dream text, questions, interpretations, max 70ch for prose.
• Label (650, 0.8125rem, 1.25): chips, status text, and small metadata.

Named Rules

The Morning Readability Rule. The user may be half-awake. Body text, buttons, placeholders, and chips must stay readable on mobile.

4. Elevation

Depth is subtle and functional. Panels should feel placed on a calm desk, not floating in a SaaS layout.

Shadow Vocabulary

• composer-focus (0 0 0 1px rgba(65, 115, 78, 0.35), 0 12px 28px rgba(45, 56, 42, 0.14)): focused composer.
• tip-lift (0 10px 24px rgba(45, 56, 42, 0.16)): final Today Tip card only.
• question-glow (0 0 18px rgba(230, 178, 75, 0.22)): active follow-up question.

Named Rules

The State First Rule. Shadows communicate focus, hover, or completion. They are not default decoration.

5. Components

Buttons

• Shape: 8px radius.
• Primary: Deep Sage Guide fill, Warm Paper text, 12px 16px padding.
• Secondary: Warm Paper fill, Deep Sage text, full border.
• Care / Safety: Coral Care only for safety/support actions or caring note markers.
• Hover / Focus: tonal lift plus visible focus ring.

Chips

• Style: small rounded pills with icon, label, and state dot.
• Use: mood, image clue status, voice transcript status, answer/skip choices, and alternate angle request.
• Text: short labels only. Long explanatory text belongs in timeline or result body.

Cards / Containers

• Corner Style: 8px to 12px. No oversized rounded blobs.
• Background: Warm Paper or Surface Card.
• Shadow Strategy: flat by default, lifted only when active or final.
• Border: full soft border.
• Internal Padding: 16px mobile, 24px desktop.

Inputs / Fields

• Style: unified composer with multiline dream input, attachment controls, mood, and primary action.
• Focus: sage ring, slightly raised surface, no layout shift.
• Error / Disabled: inline message below composer, disabled actions stay readable and explain why.

Navigation

• Style: visible stepper with current phase: Record, Ask, Interpret, Tip.
• Mobile: stepper collapses to compact segmented steps above the conversation.
• Desktop: left rail or top rail is acceptable, but it must map to real states.

Signature Component: Today Tip Panel

The Today Tip Panel is the final surface. It shows:

• Dream summary.
• Main question.
• Grounded interpretation.
• One primary Today Tip.
• Optional tiny action.
• Optional caring note.
• Safety note only when needed.

The tip should be first-class and easy to screenshot, but it must not look like a diagnosis card or mystical certificate.

6. Do's and Don'ts

Do:

• Do make the first action obvious on mobile and desktop.
• Do show the gradual Q&A flow so users understand why the final tip is grounded.
• Do keep every phase actionable with one clear next step.
• Do cite concrete dream anchors in the final result.
• Do preserve a deterministic demo backend while adding a model-backed route.
• Do verify text fits inside controls at 390px mobile width.

Don't:

• Don't ship a plain Gradio two-column form as the primary experience.
• Don't use tarot, parchment, prophecy, medical intake, or generic healing-app aesthetics.
• Don't expose technical model routes as first-level controls unless the user opens model settings.
• Don't render navigation-looking text that cannot be clicked.
• Don't create several competing tips in the final result.
• Don't let the final advice become generic wellness copy unrelated to the dream.