google-labs-jules[bot]
9.6 KiB
name, colors, typography, rounded, spacing, shadows, components
| name | colors | typography | rounded | spacing | shadows | components | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| VibePod Dark Developer |
|
|
|
|
|
|
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-xlorrounded-fullfor 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).