| --- |
| 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. |
|
|
