---
version: alpha
name: Udio
description: A near-black AI music studio where a custom display typeface and a single hot-pink accent give the whole surface a nightclub-poster energy — dark, vivid, and content-first, with horizontal galleries of AI-generated album art doing the heavy lifting.

colors:
  # Surface / canvas
  background: "#17171b"             # deep near-black canvas, whole site
  surface: "#27272a"                # raised panels, cards, nav bar
  surface-muted: "#1c1c1f"         # subtle depth between canvas and surface
  surface-overlay: "#2f2f33"       # hover wash, popover backgrounds

  # Ink / text
  ink: "#ffffff"                    # primary headings and active labels
  ink-secondary: "#f9f9f9"          # near-white body text on dark
  ink-tertiary: "#808080"           # captions, metadata, muted UI text
  on-primary: "#ffffff"             # text on hot-pink CTA

  # Brand accent — hot pink
  primary: "#e30b5d"               # "Sign Up" button, links, brand identity
  primary-hover: "#ff0d70"          # accent hover state (lighter, brighter pink)
  primary-dark: "#b5084a"           # accent pressed / deep variant
  primary-glow: "#e30b5d"          # radial glow behind hero content (opaque stand-in; was rgba(227,11,93,0.5))

  # Gradient stops (linear pink→purple used on badge/tag elements)
  gradient-from: "#e30b5d"          # hot pink gradient start
  gradient-to: "#a770ef"            # soft purple gradient end — was rgb(167,112,239)

  # Borders
  border: "#3f3f46"                # card edges, dividers on dark
  border-subtle: "#27272a"          # hairline separators, matching surface
  border-white-soft: "#3d3d42"     # was rgba(255,255,255,0.1) — Google format requires hex

  # Focus ring (CSS var --tw-ring-color)
  focus-ring: "#3b82f6"            # was #3b82f680 (50% alpha blue) — Google format requires hex

  # Shadow tints (opaque approximations for elevation table)
  shadow-ambient: "#000000"        # was rgba(0,0,0,0.35) — Google format requires hex
  shadow-pink-glow: "#e30b5d"      # was rgba(227,11,94,0.9) at 204px spread — Google format requires hex

typography:
  display-hero:
    fontFamily: "InnovatorFont, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.48px
    fontFeature: '"ss01", "ss02"'
  display:
    fontFamily: "InnovatorFont, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.48px
    fontFeature: '"ss01", "ss02"'
  heading:
    fontFamily: "InnovatorFont, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.48px
  heading-sub:
    fontFamily: "InnovatorFont, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0.48px
  body-large:
    fontFamily: "InnovatorFont, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.48px
  body:
    fontFamily: "InnovatorFont, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.48px
  button-ui:
    fontFamily: "InnovatorFont, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.48px
  label:
    fontFamily: "InnovatorFont, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.48px
  caption:
    fontFamily: "InnovatorFont, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.48px
  caption-upper:
    fontFamily: "InnovatorFont, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 80px
  5xl: 96px
  6xl: 192px

rounded:
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
  2xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    border: "1px solid {colors.border-white-soft}"
    padding: 8px 16px
  button-ghost-hover:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    rounded: "{rounded.xl}"
    padding: 12px
  card-hover:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.ink}"

  track-tile:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    rounded: "{rounded.lg}"
    padding: 0px
  track-tile-hover:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.ink}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    border: "1px solid {colors.border-white-soft}"
    padding: 8px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    padding: 8px 16px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  tag-gradient:
    backgroundColor: "{colors.gradient-from}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.primary-hover}"
---

# Udio Design System

## Overview

Udio is an AI music generation platform and it looks the part — a committed dark-mode surface built on a near-black zinc canvas (`{colors.background}`) that keeps the attention trained on the generated music art rather than the surrounding chrome. The dominant impression is gallery-first: the landing page is essentially a horizontal strip of vivid AI-generated album covers, each one a small painting in miniature, scrolling left to right against the black. The UI shell around them is intentionally thin — a low-profile nav bar (`{colors.surface}`), restrained typography, and just two functional CTA buttons at the top right. Everything recedes so the music and its art can step forward.

The single chromatic statement Udio makes is its hot-pink accent (`{colors.primary}`, `#e30b5d`). It appears on the primary "Sign Up" button and as a signature pink radial glow that blooms behind certain hero moments. This is a deliberate economy: one color earns all the brightness in an otherwise achromatic palette. The rest of the UI is near-white ink on near-black surface, mid-gray tertiary text, and subtle zinc borders. That restraint makes the pink land with genuine voltage — it reads as the brand color immediately and exclusively.

The typeface is InnovatorFont, a self-hosted variable-weight grotesque with OpenType alternates (`ss01`, `ss02`) active across all contexts. It runs at a consistent 0.48px letter-spacing, giving the type a subtly open, broadcast-display quality — looser than a neutral sans but not airy enough to feel editorial. The weight range spans regular 400 (all display and body) to bold 700 (uppercase labels), with a medium 500 tier for button UI. There is no serif voice, no monospace, and no second family. The result is coherent and a little proprietary: the typeface itself is part of the brand signal.

**Key Characteristics:**
- Committed dark theme on a deep zinc near-black canvas (`{colors.background}`) — no light mode
- Single chromatic accent: hot pink (`{colors.primary}`) on the primary CTA and as a radial hero glow
- Pink-to-purple linear gradient (`{colors.gradient-from}` → `{colors.gradient-to}`) for tag and badge moments
- Self-hosted InnovatorFont with `ss01`/`ss02` alternates — a proprietary typeface signal across all contexts
- Gallery-first layout: horizontal scrolling album-art tiles are the visual hero, not copy or screenshots
- Minimal button inventory: one filled primary (`{components.button-primary}`) and one ghost (`{components.button-ghost}`) in the nav
- Compact 6px button radius (`{rounded.md}`) — slightly rounded rectangles, not pills
- Base spacing unit of 8px with generous section padding (`{spacing.5xl}`, `{spacing.6xl}`)
- Tailwind + Radix UI + shadcn/ui under the hood; 12 breakpoints from 390px to 1800px
- Motion at 150ms with `cubic-bezier(0.4, 0, 0.2, 1)` — functional, not theatrical
- `0 0 204px 0` pink box-shadow glow (`{colors.shadow-pink-glow}`) for atmospheric hero moments
- Uppercase bold labels (`{typography.label}`, `{typography.caption-upper}`) as the only typographic contrast device

## Colors

### Surface & Canvas
- **Near-Black Canvas** (`{colors.background}`): The full-site base — a dark zinc `#17171b` that reads as black but carries a faint cool undertone. Content sits on it like art in a dark gallery.
- **Raised Surface** (`{colors.surface}`): Cards, nav, and elevated tiles step up to `#27272a`. The gap between these two tones is the primary depth signal.
- **Surface Muted** (`{colors.surface-muted}`): A subtle mid-step (`#1c1c1f`) for layered depth without a brightness jump.
- **Surface Overlay** (`{colors.surface-overlay}`): Hover state and popover background — `#2f2f33`, one step brighter than the raised surface.

### Ink / Text
- **White** (`{colors.ink}`): Primary headlines and active nav labels — unfiltered white for maximum contrast.
- **Near-White Body** (`{colors.ink-secondary}`): `#f9f9f9` — the working text tone on dark surfaces. Marginally warmer than pure white.
- **Mid-Gray** (`{colors.ink-tertiary}`): `#808080` — captions, metadata, disabled states.
- **On-Primary** (`{colors.on-primary}`): White text on the hot-pink button.

### Brand Accent
- **Hot Pink** (`{colors.primary}`): The only saturated color in the UI. "Sign Up," links, focus moments, and the hero glow. Hover lifts to `{colors.primary-hover}` (`#ff0d70`); pressed drops to `{colors.primary-dark}` (`#b5084a`).
- **Gradient Endpoints** (`{colors.gradient-from}`, `{colors.gradient-to}`): Pink → purple linear gradient used on tags and badge elements — the decorative complement to the solid pink accent.

### Borders & Shadows
- **Border** (`{colors.border}`): `#3f3f46` — standard card and divider edge on dark.
- **Soft Border** (`{colors.border-white-soft}`): Opaque stand-in for the `rgba(255,255,255,0.1)` ghost border used on buttons and inputs.
- **Focus Ring** (`{colors.focus-ring}`): `#3b82f6` — the `--tw-ring-color` CSS variable; original was 50% alpha blue, flattened to opaque hex.
- **Pink Glow** (`{colors.shadow-pink-glow}`): `{colors.primary}` used as a 204px spread box-shadow for the atmospheric radial glow effect.

## Typography

### Font Family
- **Primary**: `InnovatorFont` — a self-hosted custom grotesque variable font with OpenType alternates `ss01` and `ss02` active. Fallbacks: `Inter, ui-sans-serif, system-ui, -apple-system, sans-serif`.
- **No secondary family**: InnovatorFont covers every context from 60px display to 12px caption.
- **Letter-spacing**: A consistent `0.48px` across all tokens (except `caption-upper` at `1px`) gives the system a slightly open, broadcast quality.
- **OpenType features**: `ss01` and `ss02` are active site-wide — these stylistic alternates are core to the brand's typographic character.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 60px / 400 / 0.48px — principal headline |
| `display` | 48px / 400 — large section titles |
| `heading` | 30px / 400 — feature headings |
| `heading-sub` | 24px / 500 — sub-headings, card titles |
| `body-large` | 20px / 400 / 1.4 — lead paragraphs |
| `body` | 16px / 400 — standard body copy |
| `button-ui` | 14px / 500 — button labels, nav items |
| `label` | 14px / 700 — bold UI labels |
| `caption` | 12px / 400 — metadata, stat readouts |
| `caption-upper` | 12px / 700 / uppercase / 1px — badge and tag labels |

### Principles
- **One face for everything**: InnovatorFont handles display through caption. The proprietary feel is the brand differentiator.
- **Weight as the only contrast tool**: size and weight do the hierarchy work; tracking stays near-constant at 0.48px.
- **Uppercase sparingly**: only `label` (700) and `caption-upper` (700) use `text-transform: uppercase` — reserved for high-signal UI moments.
- **Regular weight at display scale**: 60px display runs at weight 400, not bold. Confidence through size, not heaviness.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step. The scale extends to `{spacing.6xl}` (192px) for major section gaps; a 5px and 6px micro-step exist in the source for pixel-precise adjustments.

### Grid & Container
- Max content width: ~1400px centered
- Hero is a centered single-column above a full-width scrolling gallery
- Track tile gallery: horizontal scroll strip, each tile a fixed-aspect square or portrait
- Below the gallery: feature sections with 2–3 column grids
- Breakpoints: 390 → 440 → 600 → 640 → 700 → 768 → 1024 → 1280 → 1400 → 1536 → 1600 → 1800px

### Whitespace Philosophy
- **Gallery breathing room**: tiles sit in a continuous horizontal strip with `{spacing.sm}` gaps — density is intentional, like a record-store wall
- **Section isolation**: major sections are separated by `{spacing.5xl}`–`{spacing.6xl}` vertical padding, letting dark space act as silence between tracks
- **Nav is lean**: the header bar compresses to `{spacing.lg}` (16px) vertical padding — UI out of the way

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; canvas `{colors.background}` | Page background, section fills |
| Raised (Level 1) | Surface step-up to `{colors.surface}` | Nav bar, raised cards, track tiles |
| Card (Level 2) | `{colors.surface-overlay}` on hover | Hover state, popover surfaces |
| Subtle Ring (Level 3) | `rgba(29,170,177,0.15) 0px 0px 0px 1px` | Focus rings on form elements |
| Atmospheric Glow | `{colors.shadow-pink-glow} 0px 0px 204px 0px` | Hero accent glow, brand signature |
| Focus Ring | `{colors.focus-ring}` 2px ring | Interactive state, keyboard nav |

**Shadow Philosophy**: Udio uses almost no conventional drop shadows. The primary depth cue is surface brightness — the canvas-to-raised-surface step (`{colors.background}` → `{colors.surface}`) reads as elevation without any blur or cast. The one dramatic shadow is not structural but atmospheric: the hot-pink 204px box-shadow glow that appears behind key hero moments. It is a lighting effect, not a depth cue — more club stage rig than desktop elevation model.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Minimal structural rounding, inline marks |
| `md` | 6px | Buttons, inputs, `{components.button-primary}`, `{components.button-ghost}` |
| `lg` | 8px | Track tiles, standard image crops |
| `xl` | 12px | Featured content cards, video containers |
| `2xl` | 20px | Larger promotional cards |
| `pill` | 9999px | Badge tags, round avatar chips |

The system's dominant shape language is mildly rounded rectangles — 6–8px on buttons and tiles gives a slightly approachable edge without the exuberance of pill buttons. Pills are reserved for badge and tag elements, creating a clear visual hierarchy between action UI and label UI.

## Components

The complete component spec lives in the `components:` token block.

### Button Variants
- **`button-primary`** — Hot-pink (`{colors.primary}`) fill, white text, 6px radius. The "Sign Up" button; the one place full brand color appears in the chrome. Hover lifts to `{colors.primary-hover}`.
- **`button-ghost`** — Raised surface (`{colors.surface}`) with a soft white border (`{colors.border-white-soft}`), white text. The "Sign In" pattern — restrained and secondary in all senses.

### Cards & Track Tiles
- **`card`** — Raised surface background at 12px radius with near-white text; hover shifts to `{colors.surface-overlay}`.
- **`track-tile`** — The signature unit: square or portrait album art with zero internal padding, 8px radius. Generated music art fills the tile edge to edge; hover lifts the surface tone.

### Inputs
- **`input`** — Raised surface fill, soft white border, body typography, 6px radius. On focus the border upgrades to the blue focus ring (`{colors.focus-ring}`).

### Navigation
- **`nav-bar`** — Sits on `{colors.surface}` (not the bare canvas), with secondary ink labels and `{typography.button-ui}`. The hot-pink "Sign Up" pill anchors the right side.

### Badges & Tags
- **`badge`** — Hot-pink fill, white uppercase caption text, pill radius — the accent at its most concentrated.
- **`tag-gradient`** — Pink-to-purple gradient fill, white caption text, pill radius — for decorative categorical labels.

## Do's and Don'ts

### Do
- Keep the canvas deep near-black (`{colors.background}`) — the gallery art needs the dark backdrop to pop
- Use hot pink (`{colors.primary}`) exactly once in the primary nav CTA — its power comes from scarcity
- Separate surfaces by stepping up brightness (`{colors.surface}` → `{colors.surface-overlay}`) rather than casting shadows
- Use the pink-to-purple gradient (`{colors.gradient-from}` → `{colors.gradient-to}`) only for badge/tag decorative moments, not structural UI
- Set all type in InnovatorFont with `ss01` and `ss02` OpenType features active
- Keep display type at weight 400 (`{typography.display-hero}`) — authority comes from size, not weight
- Use `{rounded.md}` (6px) on buttons and inputs; reserve `{rounded.pill}` for badge labels
- Treat the 204px pink glow (`{colors.shadow-pink-glow}`) as a hero atmospheric effect — one instance per layout section

### Don't
- Don't add a light mode — Udio is a fully dark system
- Don't use the pink accent on secondary actions, borders, or decorative text — the one-pink rule is the brand
- Don't substitute Inter or system-ui for InnovatorFont in visual contexts; the proprietary feel is deliberate
- Don't pill-round the primary CTA — buttons are 6px rounded rectangles, not pills
- Don't introduce mid-gray fills or gradients as surface backgrounds — maintain the two-tone canvas/surface split
- Don't use the pink glow on every section — it loses its impact if it appears more than once
- Don't override the consistent 0.48px letter-spacing in the type system without a clear reason
- Don't place saturated color in track tiles — the gallery art provides all the chromatic energy; the chrome stays achromatic

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <440px | Single column; hero collapses to 2 tile columns; nav to icon-only or hamburger |
| Mobile | 440–767px | 2–3 tile columns; hero headline scales to ~32px; CTA buttons stack or shrink |
| Tablet | 768–1023px | 4–5 tile columns in gallery strip; nav expands to partial links |
| Desktop | 1024–1399px | Full layout; horizontal gallery with 6–8 tiles visible; nav fully expanded |
| Large Desktop | ≥1400px | Max ~1400px container; 8–10 tiles visible in gallery; generous side gutters |

### Touch Targets
- Button height at `8px 16px` padding on 14px type is approximately 36px — meets mobile minimum
- Track tiles have generous tap areas via their full-tile hitbox
- The horizontal scroll gallery is swipe-friendly on touch; each tile maintains aspect ratio

### Collapsing Strategy
- **Navigation**: full horizontal links → hamburger or condensed icon bar at narrow widths; hot-pink "Sign Up" persists at all breakpoints
- **Gallery**: horizontal scroll strip persists across all widths; tile count in view drops with viewport
- **Hero**: headline scales from 60px toward ~32px; centered alignment maintained; glow effect may reduce spread
- **Spacing**: section padding compresses from `{spacing.6xl}` toward `{spacing.3xl}` at mobile

### Image Behavior
- Album-art track tiles maintain their aspect ratio (square or near-square portrait) and reflow as flex/grid children
- Tile images use `object-fit: cover` to fill their rounded containers without distortion

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-Black Canvas (`{colors.background}`)
- Primary text: White (`{colors.ink}`)
- Body text: Near-White (`{colors.ink-secondary}`)
- Brand accent: Hot Pink (`{colors.primary}`)
- Secondary text: Mid-Gray (`{colors.ink-tertiary}`)
- Border: `{colors.border}`
- CTA: `{colors.primary}` fill, `{colors.on-primary}` text

### Example Component Prompts

- "Create a nav bar on `{colors.surface}` with `{typography.button-ui}` links in `{colors.ink-secondary}`, a ghost 'Sign In' button (6px radius, `{colors.border-white-soft}` border), and a hot-pink 'Sign Up' button (`{colors.primary}` fill, `{colors.on-primary}` text, 6px radius, `8px 16px` padding) aligned right"
- "Build the primary button: hot-pink fill (`{colors.primary}`), white text (`{colors.on-primary}`), `{rounded.md}` (6px) radius, `8px 16px` padding, `{typography.button-ui}` — 'Sign Up'; hover shifts to `{colors.primary-hover}` (#ff0d70)"
- "Render a track tile: square album-art image cropped edge to edge in a `{rounded.lg}` (8px) container on `{colors.surface}`, no internal padding; on hover lift background to `{colors.surface-overlay}` and show a play button overlay in `{colors.primary}`"
- "Design a badge: hot-pink fill (`{colors.primary}`), white uppercase text (`{typography.caption-upper}`), `{rounded.pill}` radius, `4px 10px` padding; for genre tags use the pink-to-purple gradient (`{colors.gradient-from}` → `{colors.gradient-to}`) instead"
- "Create a hero section on `{colors.background}` with a 60px centered InnovatorFont headline (`{typography.display-hero}`, weight 400, 0.48px spacing), a `{colors.ink-secondary}` subheading below it, and an atmospheric pink glow behind using `box-shadow: 0 0 204px 0 {colors.shadow-pink-glow}` on the headline container"
- "Build an input field: `{colors.surface}` background, `{colors.border-white-soft}` 1px solid border, `{colors.ink}` text, `{typography.body}`, `{rounded.md}` radius, `8px 16px` padding; on focus replace border with `{colors.focus-ring}` 1px"

### Iteration Guide

1. Start on near-black (`{colors.background}`). The canvas is not charcoal, not gray — `#17171b`. If it looks light, it's wrong.
2. Use hot pink (`{colors.primary}`) exactly once in the primary nav CTA. Every additional pink instance dilutes it.
3. The gallery of track tiles is the visual center of gravity. Give it maximum horizontal real estate; keep chrome thin.
4. All type is InnovatorFont with `ss01`/`ss02` features. At display scale (60px), weight 400 is correct — do not increase to 700.
5. Buttons are 6px rounded rectangles (`{rounded.md}`), not pills. Badges and tags get pills (`{rounded.pill}`).
6. Depth is surface brightness, not shadows. Use `{colors.surface}` for raised chrome and `{colors.surface-overlay}` for hover — no drop shadows on cards.
7. When you need decorative color beyond the pink CTA, reach for the pink-to-purple gradient (`{colors.gradient-from}` → `{colors.gradient-to}`) on tags only.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Udio. Brand names and trademarks belong to their respective owners.