CURATED · OPEN · FREE

Udio

Create any song. Just imagine it.

aimusic

↓ Download design system (10 MB)Open in OpenDesign

Visit: https://www.udio.com

📦 Browse pack contents →

Identity DNA

musiccreationAIgenerativestudio

An AI-powered music studio dashboard in a dark, moody club.

Color

#E30B5DAccent

#F9F9F9Ink

#808080Ink soft

#000000BG

#17171BBG soft

#27272ABG quiet

rgba(255, 255, 255, 0.1)Line

High-contrast dark mode with a single, aggressive hot-pink accent for creative energy.

Typography

geometric-sans · humanist-sans

display64px · 500
h230px · 400
body16px · 400
caption12px · 400

Use geometric sans for headlines to convey modern tech. · Maintain a consistent letter-spacing of 0.48px across all text.

Spacing

4px

8px

16px

24px

32px

48px

64px

80px

96px

Flexible 4px base grid with generous section padding.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

Thin, semi-transparent white or dark borders for subtle definition.

rgba(227, 11, 94, 0.9) 0px 0px 204px 0px · rgba(0, 0, 0, 0.2) 1px 2px 8px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

A centered hero section followed by a feature grid and dynamic audio wave elements.

Motion & Interaction

150msmicro

200mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle hover transitions for color and background, glowing pulse effects on primary buttons.

Subtle background color changes or glow intensification on interactive elements. · Smooth transition states for buttons and cards.

Components

button Pill-shaped with a hot-pink gradient and glowing shadow, or a transparent 'ghost' button with a thin border.
card Dark background with subtle borders, often featuring rounded corners and internal shadows.
chip Small, pill-shaped badges for status or tags.
input Dark background fields with subtle borders.
hero Large, centered headline over a dark background with a dynamic, glowing audio waveform graphic.

Voice & Don'ts

Tone Inviting, creative, and effortlessly powerful.
Headlines Large, bold, and direct, focusing on the user's creative potential.
CTAs Encouraging and action-oriented, often using 'Start' or 'Imagine'.

Don't use a light background — screenshot shows a deep black (#000000) theme.
Don't use blue or green as the primary accent — screenshot shows a dominant hot-pink (#E30B5D).
Don't use serif fonts for headlines — screenshot shows clean, geometric sans-serif typography.
Don't use flat, sharp corners for primary buttons — screenshot shows rounded, pill-shaped buttons (border-radius: 9999px).
Don't use high-contrast white for secondary text — screenshot shows muted gray (#808080).
Don't use dense, cluttered layouts — screenshot shows generous whitespace and a focused central composition.
Avoid: Technical jargon
Avoid: Passive voice
Avoid: Overly corporate language

Inside the pack — real screenshots

Udio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

A high-contrast dark-mode design for an AI music generation platform. It uses a deep black background (#000000) with a vibrant hot-pink accent (#E30B5D) for primary actions. Typography is a mix of geometric and humanist sans-serifs (Inter, InnovatorFont) with a consistent 0.48px letter-spacing. Key features include pill-shaped buttons with glowing pink shadows, subtle dark-surface borders, and a dramatic hero section centered on a dynamic audio waveform. Critical donts: avoid light themes, avoid blue/green accents, avoid serif headlines, avoid sharp-cornered buttons, avoid high-contrast secondary text, and avoid dense layouts.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko