438 lines
12 KiB
JSON
438 lines
12 KiB
JSON
{
|
||
"brand": {
|
||
"name": "Sonic Cloud",
|
||
"tagline": "Where Music Takes Flight",
|
||
"valueProposition": "A musician-first platform that empowers artists to share, discover, and connect through sound",
|
||
"mission": "Democratize music distribution and discovery by putting control back in the hands of creators",
|
||
"personality": [
|
||
"Creative",
|
||
"Empowering",
|
||
"Modern",
|
||
"Vibrant",
|
||
"Community-driven"
|
||
]
|
||
},
|
||
"colors": {
|
||
"primary": {
|
||
"name": "Sonic Purple",
|
||
"value": "#7c3aed",
|
||
"usage": "Primary brand color for CTAs, active states, and key UI elements",
|
||
"variants": {
|
||
"50": "#faf5ff",
|
||
"100": "#f3e8ff",
|
||
"200": "#e9d5ff",
|
||
"300": "#d8b4fe",
|
||
"400": "#c084fc",
|
||
"500": "#a855f7",
|
||
"600": "#9333ea",
|
||
"700": "#7c3aed",
|
||
"800": "#6b21a8",
|
||
"900": "#581c87"
|
||
}
|
||
},
|
||
"secondary": {
|
||
"name": "Wave Blue",
|
||
"value": "#3b82f6",
|
||
"usage": "Secondary actions, links, informational elements",
|
||
"variants": {
|
||
"50": "#eff6ff",
|
||
"100": "#dbeafe",
|
||
"200": "#bfdbfe",
|
||
"300": "#93c5fd",
|
||
"400": "#60a5fa",
|
||
"500": "#3b82f6",
|
||
"600": "#2563eb",
|
||
"700": "#1d4ed8",
|
||
"800": "#1e40af",
|
||
"900": "#1e3a8a"
|
||
}
|
||
},
|
||
"accent": {
|
||
"name": "Beat Cyan",
|
||
"value": "#06b6d4",
|
||
"usage": "Highlights, notifications, special badges (like verified artists)",
|
||
"variants": {
|
||
"50": "#ecfeff",
|
||
"100": "#cffafe",
|
||
"200": "#a5f3fc",
|
||
"300": "#67e8f9",
|
||
"400": "#22d3ee",
|
||
"500": "#06b6d4",
|
||
"600": "#0891b2",
|
||
"700": "#0e7490",
|
||
"800": "#155e75",
|
||
"900": "#164e63"
|
||
}
|
||
},
|
||
"success": {
|
||
"name": "Harmony Green",
|
||
"value": "#10b981",
|
||
"usage": "Success states, upload complete, verified badges"
|
||
},
|
||
"warning": {
|
||
"name": "Rhythm Amber",
|
||
"value": "#f59e0b",
|
||
"usage": "Warning states, pending actions"
|
||
},
|
||
"error": {
|
||
"name": "Dissonance Red",
|
||
"value": "#ef4444",
|
||
"usage": "Error states, destructive actions"
|
||
},
|
||
"neutral": {
|
||
"name": "Studio Gray",
|
||
"value": "#64748b",
|
||
"usage": "Text, borders, subtle backgrounds",
|
||
"variants": {
|
||
"50": "#f8fafc",
|
||
"100": "#f1f5f9",
|
||
"200": "#e2e8f0",
|
||
"300": "#cbd5e1",
|
||
"400": "#94a3b8",
|
||
"500": "#64748b",
|
||
"600": "#475569",
|
||
"700": "#334155",
|
||
"800": "#1e293b",
|
||
"900": "#0f172a"
|
||
}
|
||
},
|
||
"gradients": {
|
||
"soundwave": {
|
||
"name": "Soundwave Gradient",
|
||
"value": "linear-gradient(135deg, #7c3aed 0%, #3b82f6 50%, #06b6d4 100%)",
|
||
"usage": "Hero sections, audio player accents, premium features"
|
||
},
|
||
"amplitude": {
|
||
"name": "Amplitude Gradient",
|
||
"value": "linear-gradient(90deg, #a855f7 0%, #ec4899 100%)",
|
||
"usage": "Waveform visualizations, progress bars"
|
||
},
|
||
"frequency": {
|
||
"name": "Frequency Gradient",
|
||
"value": "linear-gradient(180deg, #3b82f6 0%, #7c3aed 100%)",
|
||
"usage": "Card overlays, hover states"
|
||
},
|
||
"spectrum": {
|
||
"name": "Spectrum Gradient",
|
||
"value": "linear-gradient(to right, #7c3aed, #3b82f6, #06b6d4, #10b981, #f59e0b)",
|
||
"usage": "Loading states, genre badges, audio visualizations"
|
||
}
|
||
}
|
||
},
|
||
"typography": {
|
||
"fontFamilies": {
|
||
"heading": {
|
||
"name": "Inter",
|
||
"fallback": "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
||
"usage": "Headlines, navigation, card titles",
|
||
"weights": [600, 700, 800],
|
||
"characterTraits": "Modern, geometric, highly readable"
|
||
},
|
||
"body": {
|
||
"name": "Inter",
|
||
"fallback": "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
||
"usage": "Body text, descriptions, metadata",
|
||
"weights": [400, 500, 600],
|
||
"characterTraits": "Clean, neutral, optimized for screens"
|
||
},
|
||
"mono": {
|
||
"name": "JetBrains Mono",
|
||
"fallback": "'Courier New', monospace",
|
||
"usage": "Timestamps, durations, technical data",
|
||
"weights": [400, 500],
|
||
"characterTraits": "Monospaced, technical, precise"
|
||
}
|
||
},
|
||
"scale": {
|
||
"xs": "0.75rem",
|
||
"sm": "0.875rem",
|
||
"base": "1rem",
|
||
"lg": "1.125rem",
|
||
"xl": "1.25rem",
|
||
"2xl": "1.5rem",
|
||
"3xl": "1.875rem",
|
||
"4xl": "2.25rem",
|
||
"5xl": "3rem",
|
||
"6xl": "3.75rem"
|
||
},
|
||
"lineHeight": {
|
||
"tight": 1.25,
|
||
"normal": 1.5,
|
||
"relaxed": 1.75
|
||
}
|
||
},
|
||
"spacing": {
|
||
"scale": {
|
||
"0": "0",
|
||
"1": "0.25rem",
|
||
"2": "0.5rem",
|
||
"3": "0.75rem",
|
||
"4": "1rem",
|
||
"5": "1.25rem",
|
||
"6": "1.5rem",
|
||
"8": "2rem",
|
||
"10": "2.5rem",
|
||
"12": "3rem",
|
||
"16": "4rem",
|
||
"20": "5rem",
|
||
"24": "6rem"
|
||
},
|
||
"containerMaxWidth": {
|
||
"sm": "640px",
|
||
"md": "768px",
|
||
"lg": "1024px",
|
||
"xl": "1280px",
|
||
"2xl": "1536px"
|
||
}
|
||
},
|
||
"borderRadius": {
|
||
"none": "0",
|
||
"sm": "0.25rem",
|
||
"md": "0.5rem",
|
||
"lg": "0.75rem",
|
||
"xl": "1rem",
|
||
"2xl": "1.5rem",
|
||
"full": "9999px",
|
||
"usage": {
|
||
"cards": "lg",
|
||
"buttons": "md",
|
||
"inputs": "md",
|
||
"avatars": "full",
|
||
"badges": "full",
|
||
"modals": "xl",
|
||
"albumCovers": "lg",
|
||
"waveforms": "sm"
|
||
}
|
||
},
|
||
"shadows": {
|
||
"sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
||
"md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
||
"lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
||
"xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
|
||
"glow": "0 0 20px rgba(124, 58, 237, 0.4)",
|
||
"glowBlue": "0 0 20px rgba(59, 130, 246, 0.4)",
|
||
"glowCyan": "0 0 20px rgba(6, 182, 212, 0.4)",
|
||
"usage": {
|
||
"cards": "md",
|
||
"cardsHover": "lg",
|
||
"modals": "xl",
|
||
"activePlayer": "glow",
|
||
"ctaButtons": "glowBlue",
|
||
"verifiedBadge": "glowCyan"
|
||
}
|
||
},
|
||
"animations": {
|
||
"duration": {
|
||
"fast": "150ms",
|
||
"normal": "250ms",
|
||
"slow": "350ms"
|
||
},
|
||
"easing": {
|
||
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
|
||
"in": "cubic-bezier(0.4, 0, 1, 1)",
|
||
"out": "cubic-bezier(0, 0, 0.2, 1)",
|
||
"inOut": "cubic-bezier(0.4, 0, 0.2, 1)"
|
||
},
|
||
"effects": {
|
||
"fadeIn": "opacity from 0 to 1, duration: normal",
|
||
"slideUp": "translateY from 20px to 0, duration: normal",
|
||
"scaleUp": "scale from 0.95 to 1, duration: fast",
|
||
"pulse": "scale oscillates 1 to 1.05, infinite",
|
||
"waveform": "height animates based on audio frequency data"
|
||
}
|
||
},
|
||
"iconography": {
|
||
"style": "Outlined with rounded corners",
|
||
"strokeWidth": "1.5px",
|
||
"library": "Heroicons v2",
|
||
"primaryIcons": [
|
||
{
|
||
"name": "play-circle",
|
||
"usage": "Primary play button on cards and player"
|
||
},
|
||
{
|
||
"name": "pause-circle",
|
||
"usage": "Pause state in player"
|
||
},
|
||
{
|
||
"name": "musical-note",
|
||
"usage": "Song/music related actions"
|
||
},
|
||
{
|
||
"name": "queue-list",
|
||
"usage": "Playlists, queue management"
|
||
},
|
||
{
|
||
"name": "microphone",
|
||
"usage": "Artist profiles, recording"
|
||
},
|
||
{
|
||
"name": "cloud-arrow-up",
|
||
"usage": "Upload actions (reflects 'cloud' brand name)"
|
||
},
|
||
{
|
||
"name": "share",
|
||
"usage": "Sharing content"
|
||
},
|
||
{
|
||
"name": "heart",
|
||
"usage": "Favorites, likes"
|
||
},
|
||
{
|
||
"name": "magnifying-glass",
|
||
"usage": "Search functionality"
|
||
},
|
||
{
|
||
"name": "user-circle",
|
||
"usage": "User profile, account"
|
||
},
|
||
{
|
||
"name": "bars-3",
|
||
"usage": "Menu, navigation"
|
||
},
|
||
{
|
||
"name": "speaker-wave",
|
||
"usage": "Volume control"
|
||
},
|
||
{
|
||
"name": "forward",
|
||
"usage": "Next track"
|
||
},
|
||
{
|
||
"name": "backward",
|
||
"usage": "Previous track"
|
||
},
|
||
{
|
||
"name": "arrow-path",
|
||
"usage": "Repeat mode"
|
||
},
|
||
{
|
||
"name": "arrows-right-left",
|
||
"usage": "Shuffle mode"
|
||
},
|
||
{
|
||
"name": "check-badge",
|
||
"usage": "Verified artists"
|
||
},
|
||
{
|
||
"name": "building-office",
|
||
"usage": "Record labels"
|
||
}
|
||
]
|
||
},
|
||
"components": {
|
||
"audioPlayer": {
|
||
"style": "Fixed bottom bar with glassmorphism effect",
|
||
"background": "rgba(15, 23, 42, 0.95) with backdrop blur",
|
||
"accentColor": "primary purple gradient",
|
||
"progressBar": "amplitude gradient with glow effect",
|
||
"height": "90px"
|
||
},
|
||
"cards": {
|
||
"background": "neutral-800 on dark mode, white on light mode",
|
||
"borderRadius": "lg",
|
||
"shadow": "md (hover: lg with glow)",
|
||
"hoverEffect": "scale(1.02) with smooth transition",
|
||
"imageAspectRatio": "1:1 for album/song covers"
|
||
},
|
||
"buttons": {
|
||
"primary": {
|
||
"background": "soundwave gradient",
|
||
"color": "white",
|
||
"shadow": "glowBlue on hover",
|
||
"borderRadius": "md"
|
||
},
|
||
"secondary": {
|
||
"background": "transparent",
|
||
"border": "2px solid primary",
|
||
"color": "primary",
|
||
"borderRadius": "md"
|
||
},
|
||
"ghost": {
|
||
"background": "transparent",
|
||
"color": "neutral-400",
|
||
"hoverBackground": "neutral-800"
|
||
}
|
||
},
|
||
"waveform": {
|
||
"barColor": "primary purple",
|
||
"progressColor": "amplitude gradient",
|
||
"backgroundColor": "neutral-900",
|
||
"height": "80px",
|
||
"barWidth": "2px",
|
||
"barGap": "1px"
|
||
},
|
||
"badges": {
|
||
"verified": {
|
||
"background": "accent cyan",
|
||
"icon": "check-badge",
|
||
"glow": "glowCyan"
|
||
},
|
||
"genre": {
|
||
"background": "spectrum gradient with opacity",
|
||
"borderRadius": "full",
|
||
"size": "sm"
|
||
},
|
||
"privacy": {
|
||
"public": "success green",
|
||
"private": "neutral-600"
|
||
}
|
||
}
|
||
},
|
||
"darkMode": {
|
||
"default": true,
|
||
"toggle": "Available in user settings",
|
||
"backgrounds": {
|
||
"primary": "#0f172a",
|
||
"secondary": "#1e293b",
|
||
"tertiary": "#334155"
|
||
},
|
||
"text": {
|
||
"primary": "#f8fafc",
|
||
"secondary": "#cbd5e1",
|
||
"tertiary": "#94a3b8"
|
||
}
|
||
},
|
||
"accessibility": {
|
||
"focusRing": "2px solid accent cyan with offset",
|
||
"minimumTouchTarget": "44px × 44px",
|
||
"contrastRatio": "WCAG AAA (7:1 for normal text, 4.5:1 for large text)",
|
||
"keyboardNavigation": "Full support with visible focus states",
|
||
"screenReaderLabels": "Descriptive ARIA labels on all interactive elements",
|
||
"colorBlindnessSupport": "Does not rely solely on color for information"
|
||
},
|
||
"visualIdentity": {
|
||
"logoStyle": "Wordmark with cloud icon incorporating sound wave",
|
||
"logoColors": "Primary purple to secondary blue gradient",
|
||
"favicon": "Cloud with musical note inside",
|
||
"loadingAnimation": "Pulsing sound wave bars with spectrum gradient",
|
||
"emptyStates": "Illustrated with musical instruments and cloud imagery",
|
||
"errorStates": "Friendly illustrations with constructive messaging"
|
||
},
|
||
"applicationThemes": {
|
||
"musicDiscovery": "Vibrant gradients, large album artwork, immersive experience",
|
||
"artistProfile": "Professional, showcase-focused, verification badges prominent",
|
||
"playlist": "Organized, clean, easy drag-and-drop reordering",
|
||
"audioPlayer": "Always accessible, minimal but powerful, waveform visualization",
|
||
"search": "Fast, responsive, multi-category results with clear visual separation"
|
||
},
|
||
"usageGuidelines": {
|
||
"dos": [
|
||
"Use gradients sparingly for impact (CTAs, player, hero sections)",
|
||
"Maintain consistent spacing using the 4px scale",
|
||
"Use soundwave gradient for primary brand moments",
|
||
"Ensure all interactive elements have clear hover/active states",
|
||
"Keep waveform visualizations smooth and performant",
|
||
"Use verified badges consistently for artist trust signals"
|
||
],
|
||
"donts": [
|
||
"Don't overuse gradients on every element",
|
||
"Don't use pure black (#000000) - use neutral-900 instead",
|
||
"Don't make text smaller than 14px for body content",
|
||
"Don't use more than 3 font weights in a single view",
|
||
"Don't animate the audio player in ways that distract from content",
|
||
"Don't use custom colors outside the defined palette"
|
||
]
|
||
}
|
||
}
|