vibepod/DESIGN.md

name, colors, typography, rounded, spacing, shadows, components

name	colors	typography	rounded	spacing	shadows	components
VibePod Dark Developer	background foreground card-bg border accent-teal accent-violet accent-teal-dim accent-violet-dim muted success error status-checking status-loading status-downloading status-online status-error status-offline gradient-primary gradient-primary-dim gradient-progress gradient-download gradient-loading #0d1117 #e2e8f0 #161b22 #21262d #2dd4bf #a78bfa #0d9488 #7c3aed #64748b #22c55e #ef4444 #eab308 #60a5fa #38bdf8 #22c55e #f97316 #ef4444 linear-gradient(135deg, #2dd4bf, #a78bfa) linear-gradient(135deg, #0d9488, #7c3aed) linear-gradient(90deg, #2dd4bf, #a78bfa) linear-gradient(90deg, #60a5fa, #2dd4bf) linear-gradient(90deg, #fbbf24, #2dd4bf)	display headline body label mono fontFamily fontSize fontWeight letterSpacing ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif 20px 700 -0.015em fontFamily fontSize fontWeight letterSpacing textTransform ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif 14px 600 0.05em uppercase fontFamily fontSize fontWeight lineHeight ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif 14px 400 1.625 fontFamily fontSize fontWeight ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif 12px 500 fontFamily fontSize fontWeight ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace 12px 400	sm DEFAULT md lg xl full 0.125rem 0.25rem 0.375rem 0.5rem 0.75rem 9999px	base xs sm md lg xl 2xl container 4px 6px 8px 12px 16px 20px 24px 1152px	glow-teal glow-teal-strong glow-teal-button glow-teal-player 0 0 6px rgba(45, 212, 191, 0.4) 0 0 10px rgba(45, 212, 191, 0.7) 0 4px 15px rgba(45, 212, 191, 0.2) 0 4px 12px rgba(45, 212, 191, 0.3)	card button-primary button-ghost input-textarea badge-status log-panel progress-bar-track slider-thumb backgroundColor borderColor borderWidth rounded padding {colors.card-bg} {colors.border} 1px {rounded.xl} {spacing.xl} background textColor rounded padding boxShadow fontWeight fontSize {colors.gradient-primary-dim} #ffffff {rounded.xl} {spacing.md} {shadows.glow-teal-button} 600 14px backgroundColor borderColor textColor rounded padding fontSize transparent {colors.border} {colors.muted} {rounded.lg} {spacing.xs} {spacing.md} 12px backgroundColor borderColor textColor rounded padding fontSize {colors.background} {colors.border} {colors.foreground} {rounded.lg} {spacing.lg} 14px backgroundColor borderColor textColor rounded padding fontSize {colors.background} {colors.border} {colors.foreground} {rounded.full} {spacing.xs} {spacing.md} 12px backgroundColor borderColor rounded padding typography {colors.background} {colors.border} {rounded.lg} {spacing.lg} {typography.mono} backgroundColor height rounded {colors.border} 6px {rounded.full} backgroundColor width height rounded boxShadow {colors.accent-teal} 16px 16px {rounded.full} {shadows.glow-teal}

Brand & Style

The VibePod design system embraces a Cyber-Dark / Developer-First aesthetic. The visual language is engineered for focused creation, prioritizing high contrast, clear data hierarchy, and technical precision. The UI evokes the feel of a modern IDE or a pro-audio software tool, rather than a consumer social app.

The emotional tone is powerful, precise, and cutting-edge. It utilizes deeply saturated background tones to reduce eye strain during long sessions, punctuated by vibrant, synthetic neon accents that guide the user's attention and signal system status.

Colors

The color palette is strictly dark-mode-first, relying on nuanced grays with subtle cool undertones to create depth, contrasted against highly saturated "cyber" accents.

• Background Layers: The base background is a deep, near-black slate (#0d1117), while interactive cards and panels float slightly higher with a marginally lighter, cool-tinted gray (#161b22).
• Accents: The primary brand colors are Teal (#2dd4bf) and Violet (#a78bfa). These are used sparingly as solid colors for small interactive elements (like range thumbs) but frequently combined into dynamic linear gradients for primary actions and active states.
• Typography: Text relies on high-contrast silver/white (#e2e8f0) for primary readability, stepping down to a cool, slate-gray muted tone (#64748b) for secondary metadata and unselected states.
• System Status: A robust set of semantic colors communicates the complex state of the generative AI model, utilizing recognizable traffic-light paradigms (Green for online, Red for offline) alongside descriptive states like Sky Blue for downloading.

Typography

The typographic system is built entirely on native system fonts, ensuring zero latency, maximum crispness on any display, and an immediate sense of familiarity across operating systems.

• Hierarchy: Headers utilize uppercase styling with generous letter spacing to act as clear section dividers without requiring massive font sizes.
• Utility: A monospace stack is rigorously applied to technical data, including timestamps, duration markers, server status logs, and numerical readouts, reinforcing the "pro-tool" aesthetic.
• Reading Comfort: The primary script input utilizes a relaxed line height (1.625) to ensure long-form text remains highly legible during the editing and recording process.

Layout & Spacing

The layout is highly structured, utilizing a modular, dashboard-like grid that keeps all controls immediately accessible without scrolling.

• Grid System: A responsive 3-column grid serves as the foundation. The primary creative space (script input and audio playback) commands 2/3 of the width, while the technical controls and system logs are confined to a 1/3 sidebar column.
• Containment: Elements are strictly containerized within defined cards. This strong bordering approach (1px solid var(--border)) clearly delineates different functional areas of the application.
• Rhythm: Spacing follows a tight 4px baseline grid. Padding within cards is generous (20px), while the gaps between related structural elements are kept relatively tight to maintain a cohesive control-panel feel.

Elevation, Depth & Glow

Traditional drop shadows are abandoned in favor of Neon Glow to create depth and indicate interactivity.

• Flat Surfaces: Cards and panels do not use shadows to lift off the background; they rely solely on subtle background color shifts and crisp 1px borders.
• Interactive Glow: Key interactive elements, such as the primary generation button and the audio playback controls, utilize a colored, diffused box-shadow (e.g., rgba(45, 212, 191, 0.2)) that matches their gradient background, making them appear to emit light.
• Range Sliders: Custom range input thumbs feature a concentrated teal glow that intensifies on hover, providing tactile visual feedback reminiscent of physical mixing consoles.

Shapes

The shape language is a hybrid of structural precision and tactile softness.

• Containers: Large structural elements like cards and the main text area use a moderate 0.75rem (12px) radius, softening the rigid grid.
• Interactive Elements: Primary action buttons are fully rounded (rounded-xl or rounded-full for play buttons), creating a clear visual distinction between "containers of information" and "things you click."
• Progress: All progress bars, slider tracks, and status indicator dots utilize fully rounded pill shapes (9999px) to maintain a fluid, continuous feel during generation and playback.

Components

Card Containers

The fundamental building block of the UI. Every distinct section (Script, Player, Controls, Logs) is housed in a card featuring the card-bg, a 1px border, and rounded-xl corners. The internal layout always features an uppercase teal header for immediate section identification.

Primary Action Buttons

Used for high-leverage actions like "Generate Audio" and "Play/Pause." These buttons utilize the gradient-primary-dim background, bold white text, and emit a soft teal glow to draw the eye and signify their importance.

Range Sliders

Custom-styled input ranges replace default browser styles. The tracks are muted and slim, while the thumbs are bright teal, fully rounded, and emit a glow that intensifies on hover, providing a premium, tactile scrubbing experience.

Status Indicators & Logs

A critical component of the application. Status badges utilize a minimalist pill shape with a pulsing ring animation to indicate active server processing. The log panel explicitly uses monospace typography and color-codes messages (green for success, red for error, white for neutral) to provide a terminal-like readout of the backend systems.

Gradients

Gradients are used purposefully to indicate progress, activity, or brand presence. The primary gradient (135deg from teal to violet) is used for branding (the logo icon and text) and primary buttons. Horizontal gradients (90deg) are used dynamically in progress bars to represent the flow of data over time (e.g., loading, downloading, and audio generation).