Creatune AI

Overview

Creatune AI is a creative music generation platform that empowers users to compose studio-quality songs from text prompts, lyrics, and musical ideas. The design system embraces a "Neon-Minimalist" aesthetic—a bold fusion of high-contrast dark surfaces with vibrant lime-green and hot-pink accents that evoke energy, innovation, and creative possibility. The interface is intentionally stark and focused, using deep blacks (#000000, #111111) as the dominant canvas to make the brand's signature neon-lime primary color (#ccff00) pop with electric intensity. The emotional response is one of empowerment and immediacy: users feel they can create anything, instantly, without friction.

The brand voice is direct, energetic, and action-oriented—never flowery or apologetic. Creatune speaks to creators as peers, using imperative language and concrete outcomes. Vocabulary favors verbs over adjectives: "Generate," "Create," "Transform," "Extend." Example sentence in brand voice: "Generate a full track in seconds—no production experience required."

Colors

The color system is built on a high-contrast dark foundation with two complementary accent families: a vibrant lime-green primary (#ccff00) and a hot-pink secondary (#ff4d8d). Primary (#ccff00) is used exclusively for call-to-action buttons, active states, focus rings, and key interactive elements—it is the brand's signature accent and must never be diluted or desaturated. Secondary (#ff4d8d) and its container variant (#e11d64) support status indicators, highlights, and secondary actions. The surface stack is pure black-based: surface (#000000), surface-container (#111111), surface-container-high (#1f1f1f), with on-surface text always white (#ffffff) or high-contrast gray (#b0b0b0) for secondary content. Tertiary (#a78bfa, a soft purple) is reserved for decorative accents and tertiary UI e

Typography

The type system pairs Space Grotesk (a geometric sans-serif with tight letter-spacing) for headlines and display text, and Plus Jakarta Sans (a warm, approachable humanist sans-serif) for body and UI text. This pairing creates visual hierarchy through font family contrast rather than weight alone. Display and headline-lg use Space Grotesk at 52–60px with -0.04em letter-spacing to create a compressed, energetic feel; body text uses Plus Jakarta Sans at 16–18px with 0em letter-spacing for clarity. All interactive labels (buttons, tabs, badges) use label-md (14px, 600 weight) in Plus Jakarta Sans to ensure legibility at small sizes. On dark backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to body text over complex backgrounds to maintain readability. Headlines should never use tex

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. The sidebar navigation (220px fixed on desktop) establishes a left-aligned rhythm, while the main content area flows fluidly to the right. White-space is generous but purposeful: lg spacing (40px) separates major sections, md spacing (24px) divides subsections, and sm spacing (12px) groups related elements. The hero section uses the full viewport height with a dark background and centered content, allowing the lime-green primary CTA to dominate. Container padding follows the gutter token (24px) on all sides, reducing to sm (12px) on mobile. The grid is responsive: 12 columns on desktop, 6 on tablet, 4 on mobile. All interactive elements (buttons, inputs, cards) maintain a minimum touch target of 44px hei

Elevation & Depth

Depth is achieved through layered surfaces and subtle shadows rather than dramatic drop-shadows. Level 1 (Base): solid black background (#000000) with no shadow. Level 2 (Standard Card): surface-container (#111111) with a 1px border in outline-variant (#444444) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modals): surface-container-high (#1f1f1f) with a 1px border in outline (#666666) and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25). Focus states on interactive elements use a 2px outline in primary (#ccff00) with a 3px blur glow (box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.2)

Shapes

The shape system follows a "Soft-Technical" philosophy: rounded corners are used strategically to soften the stark geometry without sacrificing precision. Buttons use full (9999px) border-radius to create pill-shaped affordances that feel modern and clickable. Cards and containers use lg (1rem / 16px) border-radius for a balanced, approachable appearance. Input fields use md (0.75rem / 12px) border-radius to signal their functional nature. Badges and small UI elements use full (9999px) to emphasize their compact, self-contained role. Tabs and list items use DEFAULT (0.5rem / 8px) for subtle de

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses a lime-green background (#ccff00) with dark text (#0a0a0a), 600 weight, 44px height, and full border-radius (9999px). On hover, the background shifts to primary-container (#b3e600) and a 3px glow (box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.2)) appears. On focus, the outline is a 2px solid primary with a 200ms transition. **button-secondary** has a transparent background with a 1px border in outline (#666666) and primary text color; on hover, the background becomes rgba(204, 255, 0, 0.08) and the border shifts to primary. **button-ghost** is text-only with on-surface-variant color; on hover, the background becomes rgba(255, 255, 255, 0.08) and text becomes on-surface. All buttons use label-md typography

Do's and Don'ts

**Do**

• Do use primary (#ccff00) exclusively for CTAs, active states, and focus indicators—never use it for passive content or backgrounds.
• Do maintain high contrast: all text must achieve at least 7:1 contrast ratio against its background for WCAG AA compliance.
• Do use Space Grotesk for headlines and Plus Jakarta Sans for body text to establish clear visual hierarchy.
• Do apply md spacing (24px) between major sections and sm spacing (12px) between related elements to create rhythm.
• Do use full border-radius (9999px) on buttons and DEFAULT (8px) on cards to signal their interaction patterns.
• Do transition all interactive properties (color, shadow, background) over 200ms to provide smooth, predictable feedback.

**Don't**

• Don't dilute or desaturate the primary color (#ccff00)—it must remain at full saturation to maintain brand recognition and accessibility.
• Don't use text-shadow on headlines; their weight and size provide sufficient contrast on dark backgrounds.
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain consistency.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.25)) to avoid visual clutter on the dark canvas.
• Don't use gradients or semi-transparent overlays on surfaces; the stark, flat aesthetic depends on solid colors.
• Don't reduce button height below 44px or input field padding below md (24px) to ensure touch-friendly, accessible targets.