Editorial Music Player (Now Playing)
superdesignCC0-1.0Prompt onlyBlog · blogMobile app · mobile-appTexture · textureGradient · gradientWarm · warmExperimental · experimentalLight · lightLow (display) · lowOrange · orangeVivid · vividSerif · serifGeneral · general
A high-contrast editorial "Now Playing" mobile music player: a light cream top with a warm sunset gradient album art, bold track title + scrubber, dark high-contrast transport controls on cream circles, over a deep forest-green "Up Next" playlist with a coral now-playing highlight. Category: Mobile Apps. Prompt author listed upstream: Jason Zhou.
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"Editorial Music Player (Now Playing)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-music-player-now-playing @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/editorial-music-player-now-playing · 6c6090694520 · © Superdesign
Prompt
{
"summary": "A high-contrast editorial 'Now Playing' mobile music player: a light cream top half with a warm sunset-gradient album art, a bold track title, a scrubber, and dark high-contrast transport controls on cream circles, sitting over a deep forest-green 'Up Next' playlist with a coral now-playing highlight. Warm, legible, and deliberately not the cliche dark-neumorphic-purple player.",
"style": {
"description": "Warm editorial duotone: light cream 'now playing' over a deep forest-green playlist, one warm-coral accent, flat with restrained depth (no neumorphism).",
"prompt": "Two stacked zones: a light cream top (#fbf6ec / sand #efe6d3) for 'now playing', and a deep forest-green panel (#16261f / moss #1f3a2e) for the playlist. ONE warm accent: coral #ff6a4d (-> #ff8a6e), with a gold #f2b441 highlight; NO indigo/violet/blue. Controls are solid and HIGH-CONTRAST (dark glyphs on cream circles, white on the dark play button) — never dark-on-dark. Flat with restrained shadow depth, not neumorphism. Fonts: Sora (display, track title) + Inter (UI/body). Every control clearly readable and optically centered."
},
"layout_and_structure": {
"description": "Single mobile screen, two zones: status bar + top nav, album art, track meta, scrubber, transport controls, volume, then a dark 'Up Next' playlist.",
"prompts": [
{"part": "Top bar", "prompt": "Status bar; a row with a circular chevron-down (collapse), a centered 'PLAYING FROM' eyebrow + playlist name, and a circular '...' menu."},
{"part": "Album art", "prompt": "A large rounded square with a warm sunset gradient (coral -> deep) and faint concentric rings radiating from a center dot — distinctive, ties to the coral accent."},
{"part": "Track meta", "prompt": "Bold Sora track title (~24px, dark) + a muted artist/album subtitle; a circular coral like button on the right."},
{"part": "Scrubber", "prompt": "A thin track with a filled coral portion and a draggable knob at the playhead; elapsed (left) and total (right) times below."},
{"part": "Transport controls", "prompt": "A centered row on cream circles: shuffle, previous, a large dark circular play/pause (white triangle, intentional optical offset), next, repeat. All high-contrast and readable."},
{"part": "Volume", "prompt": "A volume row with a low/high speaker icon at each end and a coral-thumb slider."},
{"part": "Up Next playlist", "prompt": "A deep forest-green panel with an 'Up Next' header + a coral 'Queue' action; rows of upcoming tracks (thumbnail + title + artist + duration), the now-playing row highlighted with a coral title + subtle tint."}
]
},
"special_ui_components": [
{"component": "Sunset gradient album art", "description": "The warm hero artwork.", "prompt": "A rounded-square album cover built from a warm coral-to-deep radial/linear gradient with faint concentric rings and a center dot; no photo needed."},
{"component": "High-contrast transport row", "description": "Readable playback controls.", "prompt": "Transport icons as dark glyphs on cream circles, with a single large dark play button (white triangle); every control must read at a glance — no low-contrast or dark-on-dark."}
],
"special_notes": "High contrast everywhere (no dark-on-dark controls). Keep the accent warm coral, never indigo/violet/blue. Optically center every icon. Real mobile-screen proportions (~390px-wide phone)."
}
---
"Editorial Music Player (Now Playing)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-music-player-now-playing @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Editorial Music Player (Now Playing). \"Editorial Music Player (Now Playing)\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-music-player-now-playing @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-editorial-music-player-now-playing",
"license": "CC0-1.0",
"attribution": "\"Editorial Music Player (Now Playing)\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-music-player-now-playing @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#fbf6ec"
},
"foreground": {
"$type": "color",
"$value": "#16261f"
},
"card": {
"$type": "color",
"$value": "#fbf6ec"
},
"card-foreground": {
"$type": "color",
"$value": "#16261f"
},
"primary": {
"$type": "color",
"$value": "#fbf6ec"
},
"primary-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"secondary": {
"$type": "color",
"$value": "#efe6d3"
},
"secondary-foreground": {
"$type": "color",
"$value": "#16261f"
},
"accent": {
"$type": "color",
"$value": "#efe6d3"
},
"accent-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"muted": {
"$type": "color",
"$value": "#ece7de"
},
"muted-foreground": {
"$type": "color",
"$value": "#68726d"
},
"border": {
"$type": "color",
"$value": "#d8d4cb"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#fbf6ec"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"sans-serif"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "1rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "Editorial Music Player (Now Playing)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-music-player-now-playing @ 6c6090694520. */
:root {
--background: #fbf6ec;
--foreground: #16261f;
--card: #fbf6ec;
--card-foreground: #16261f;
--primary: #fbf6ec;
--primary-foreground: #1c1917;
--secondary: #efe6d3;
--secondary-foreground: #16261f;
--accent: #efe6d3;
--accent-foreground: #1c1917;
--muted: #ece7de;
--muted-foreground: #68726d;
--border: #d8d4cb;
--destructive: #dc2626;
--ring: #fbf6ec;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "Editorial Music Player (Now Playing)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-music-player-now-playing @ 6c6090694520. */
/** Tailwind theme extend for Editorial Music Player (Now Playing) (superdesign-editorial-music-player-now-playing) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#fbf6ec",
"foreground": "#16261f",
"card": "#fbf6ec",
"primary": "#fbf6ec",
"primary-foreground": "#1c1917",
"secondary": "#efe6d3",
"accent": "#efe6d3",
"muted": "#ece7de",
"border": "#d8d4cb",
"destructive": "#dc2626",
"ring": "#fbf6ec"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"sans-serif"
],
"serif": [
"ui-serif",
"Georgia",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "Editorial Music Player (Now Playing)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-music-player-now-playing @ 6c6090694520. */
@layer base {
:root {
--background: #fbf6ec;
--foreground: #16261f;
--card: #fbf6ec;
--card-foreground: #16261f;
--primary: #fbf6ec;
--primary-foreground: #1c1917;
--secondary: #efe6d3;
--secondary-foreground: #16261f;
--accent: #efe6d3;
--accent-foreground: #1c1917;
--muted: #ece7de;
--muted-foreground: #68726d;
--border: #d8d4cb;
--destructive: #dc2626;
--ring: #fbf6ec;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}