# Udio · Design system migration spec

> Source: https://www.udio.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of modern AI product landing pages, using a dark, premium aesthetic with a bold, singular accent color to drive user focus.

## 1. Identity DNA

Udio's visual system is built as an AI-powered music studio dashboard set within a dark, moody club. Every element, from the glowing waveform to the sharp typographic hierarchy, is engineered to feel like the control surface of a powerful, generative instrument.

**One-liner:** Create any song. Just imagine it.
**Keywords:** music · creation · AI · generative · studio
**Analogy:** An AI-powered music studio dashboard in a dark, moody club.

## 2. Color

The palette is built on a foundation of deep black, a stark canvas that makes the single, aggressive hot-pink accent burn with creative energy. This high-contrast scheme ensures primary actions are unmistakable focal points.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#17171B` | card background |
| `--bg-quiet` | `#27272A` | quiet area |
| `--ink` | `#F9F9F9` | body text |
| `--ink-soft` | `#808080` | secondary text |
| `--muted` | `#27272A` | placeholder |
| `--muted-soft` | `rgba(209, 213, 219, 0.05)` | weak hint |
| `--accent` | `#E30B5D` | single accent |
| `--line` | `rgba(255, 255, 255, 0.1)` | divider |

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

The principle is singular and absolute: a dark void pierced by one vibrant color to guide every critical user decision.

## 3. Typography

The typographic voice is set by a geometric sans-serif, chosen for its clean, modern tech feel and its capacity for bold, direct headlines. A consistent, tight letter-spacing of 0.48px unifies the scale from the main hero text down to small labels.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 500 | 0.48px | Main hero headline |
| h2 | 30px | 1.33 | 400 | 0.48px | Subheadline |
| body | 16px | 1.5 | 400 | 0.48px | Body text |
| caption | 12.8px | 1.25 | 400 | 0.48px | Small labels |

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

## 4. Spacing

The layout breathes on a flexible 4px grid, with generous section padding that creates a clear, rhythmic flow between content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 px
- **Rhythm:** Flexible 4px base grid with generous section padding.

## 5. Surfaces

Surfaces are defined by depth and subtle definition, using layered shadows—including a dramatic pink glow—and thin, semi-transparent borders. This creates a sense of layered space against the absolute black background.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(227, 11, 94, 0.9) 0px 0px 204px 0px
  - rgba(0, 0, 0, 0.2) 1px 2px 8px 0px
- **Borders:** Thin, semi-transparent white or dark borders for subtle definition.

## 6. Layout

The layout skeleton is anchored by a centered hero section that commands immediate attention. This gives way to a structured feature grid, with dynamic audio wave elements reinforcing the site's core generative function.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is purposeful and subtle, designed to confirm interactivity without distraction. Hover states trigger soft background shifts or an intensified glow on primary buttons, all governed by a consistent cubic-bezier easing curve for a fluid, modern feel.

- **Durations:** micro 150ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle hover transitions for color and background, glowing pulse effects on primary buttons.

- **Hover:** Subtle background color changes or glow intensification on interactive elements.
- **Click:** Smooth transition states for buttons and cards.
- **Transition:** Consistent use of cubic-bezier(0.4, 0, 0.2, 1) for all transitions.
- **Keyboard:** Standard focusable elements with high-contrast outlines.

## 8. Voice & Don'ts

The editorial voice is inviting, creative, and effortlessly powerful, speaking directly to the user's potential rather than the system's complexity. Headlines are large, bold, and direct, while calls to action are encouraging and action-oriented.

- **Tone:** Inviting, creative, and effortlessly powerful.
- **Headline style:** Large, bold, and direct, focusing on the user's creative potential.
- **CTA style:** Encouraging and action-oriented, often using 'Start' or 'Imagine'.
- **Avoid:** Technical jargon / Passive voice / Overly corporate language

### Don'ts
- ❌ 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.

The system deliberately avoids light themes, serif typography for headlines, corporate jargon, and any visual clutter that would break the focused, studio-like atmosphere.

## System Prompt (paste into AI tool)

```
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.
```