Mythos Story Studio

# Mythos Story Studio

{
  "summary": "A clean, minimalist workspace for AI-assisted writing that balances utility with an editorial aesthetic. It uses a high-contrast neutral theme with deep blacks and soft grays to focus the user's attention on the storytelling experience.",
  "style": {
    "description": "The style is built on the interplay between 'Satoshi' (UI Sans) and 'Zodiak' (Content Serif). It utilizes a monochromatic base with zinc and neutral grays, employing soft shadows and high-radius corners for a modern, approachable feel. Animations are subtle transitions and hover transforms, particularly on interactive icons and buttons.",
    "prompt": "### Visual Foundation\n- **Base Palette**: Primary Background: #FAFAFA; Sidebar/Header: #FFFFFF; Accents: #18181B (Zinc-900); Borders: #E5E5E5 (Neutral-200).\n- **Typography**: \n  - **UI (Sans)**: 'Satoshi', sans-serif. Weights: 400 (regular), 700 (bold), 900 (black).\n  - **Content (Serif)**: 'Zodiak', serif. Weights: 400 (regular), 900 (black).\n- **Shadows**: Prompt Input: `0 25px 50px -12px rgba(24, 24, 27, 0.5)`; General Cards: subtle border #F5F5F5.\n- **Border Radius**: Small elements (tags): 4px; Standard (buttons/cards): 12px; Prompt Bar: 28px; Audio Player: 9999px.\n\n### Interactive Elements\n- **Buttons**: Hover state for ghost buttons: background #F9FAFB; scale: 1.05 for primary actions.\n- **Scrollbars**: Custom 4px width, thumb color #E5E7EB, hover #D1D5DB, transparent track.\n- **Transitions**: 150ms ease-in-out for all hover and active states."
  },
  "layout_and_structure": {
    "description": "A three-tier layout consisting of a fixed navigation sidebar, a sticky header with utility controls, and a centered, fluid content area with a floating footer-anchored prompt bar.",
    "prompts": [
      {
        "part": "Sidebar Navigation",
        "prompt": "### Sidebar (Width: 288px / 18rem)\n- **Structure**: Vertical layout with three sections: Branding, Navigation Scroll Area, and User Profile.\n- **Branding**: Top-left logo with #18181B rounded-lg container (32px size) and 'MYTHOS' text in Satoshi 900 (20px).\n- **Navigation**: Section headers in 11px uppercase bold #A3A3A3 with 20px letter spacing. Links feature Lucide icons, 10px padding, and 12px border-radius.\n- **Profile Footer**: Border-top #F5F5F5, avatar with #6366F1 to #A855F7 gradient, and dual-line text for user name/status."
      },
      {
        "part": "Workspace Header",
        "prompt": "### Workspace Header (Height: 80px)\n- **Layout**: Horizontal flexbox, space-between, px-10.\n- **Title Section**: 18px Bold title with a #F4F4F5 status pill (10px uppercase bold text).\n- **Audio Player Component**: Centered pill shape (#FAFAFA bg, #E5E5E5 border). Includes prev/play/next buttons, a 192px width progress bar (h-1), and a voice selector dropdown.\n- **Actions**: Utility buttons for share/download using 40px icon-only squares with 12px rounding."
      },
      {
        "part": "Story Article Viewport",
        "prompt": "### Story Content Area\n- **Width**: Max-width 720px, centered.\n- **Heading**: H1 using 'Zodiak' Black (text-5xl/48px), tracking-tight, leading-tight.\n- **Meta Info**: Flex row below title using #A3A3A3 (text-sm) for word count, versioning, and timestamps.\n- **Body Text**: 'Zodiak' Regular, size 20px, line-height 1.8. Paragraph spacing: 32px.\n- **Blockquote**: Border-left 4px #E5E7EB, 32px padding-left, italicized text in #737373."
      },
      {
        "part": "Floating Prompt Interface",
        "prompt": "### AI Prompt Input\n- **Position**: Absolute bottom-8, centered, max-width 800px.\n- **Container**: White background, 28px radius, border #E5E5E5, deep zinc shadow.\n- **Header**: Tab row for modes (Narrative, Dialogue, World Building) using 11px bold text; active mode has zinc-100 background.\n- **Input**: Resizable textarea with 14px text, neutral-700 color, no focus ring. Includes a row of action icons (Plus, Mic) and a primary 'Enter' button in Zinc-900 (40px square, 16px radius)."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Pill Audio Player",
      "description": "A sleek, integrated media controller for listening to generated narratives.",
      "prompt": "Create a pill-shaped container (9999px radius) with #FAFAFA background and 1px #E5E5E5 border. Layout: Left section contains playback controls (18px icons); Center section contains a 192px width playback bar with a #18181B progress indicator; Right section contains a microphone icon and voice label (Caleb - Warm) in 12px bold #737373."
    },
    {
      "component": "Bento-style Prompt Input",
      "description": "A multi-modal AI input bar that handles text, voice, and context settings.",
      "prompt": "Build a rounded rectangle container (28px radius) with internal padding of 8px. Top row: Small pill buttons for mode selection. Middle row: Borderless textarea that expands with content. Right-aligned footer within input: flex row of 40px square icon buttons with 12px radius; the submit button must be #18181B with a white icon and a shadow-zinc-900/10 glow."
    }
  ],
  "special_notes": "MUST: Use 'Zodiak' for all long-form text and 'Satoshi' for UI/metadata. MUST: Maintain a line-height of at least 1.8 for the story body to ensure readability. MUST NOT: Use saturated colors for backgrounds; keep the palette strictly neutral to evoke a 'paper' feel. MUST: Ensure the prompt bar floats and doesn't push content up."
}