큐레이션 · 오픈 · 무료

Udio

어떤 노래든 만들어보세요. 상상만 하면 됩니다.

01

디자인 DNA

어둡고 무드 있는 클럽 안의 AI 기반 음악 스튜디오 대시보드.

02

컬러

창의적인 에너지를 위한 단일이고 공격적인 핫 핑크 악센트를 사용한 고대비 다크 모드.

03

타이포그래피

geometric-sans · humanist-sans

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

현대적인 기술 감각을 전달하기 위해 헤드라인에 기하학적 산세리프를 사용합니다. · 모든 텍스트에 걸쳐 일관된 0.48px의 자간을 유지합니다.

04

여백

유연한 4px 기본 그리드와 여유로운 섹션 패딩.

05

표면 (라운드 / 그림자 / 경계선)

미묘한 경계를 위해 사용되는 얇고 반투명한 흰색 또는 어두운 테두리.

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

06

레이아웃

중앙 정렬된 히어로 섹션 뒤에 피처 그리드와 다이나믹한 오디오 웨이브 요소가 이어지는 구조.

07

모션과 인터랙션

색상 및 배경에 대한 미묘한 호버 전환, 주요 버튼의 빛나는 펄스 효과.

상호작용 요소의 미묘한 배경색 변화 또는 글로우 강도 변화. · 버튼과 카드를 위한 매끄러운 전환 상태.

08

컴포넌트

• button 핫 핑크 그라데이션과 빛나는 그림자가 적용된 알약 형태, 또는 얇은 테두리가 있는 투명한 '고스트' 버튼.
• card 미묘한 테두리가 있는 어두운 배경을 가지며, 일반적으로 둥근 모서리와 내부 그림자가 특징입니다.
• chip 상태 또는 태그를 표시하는 작은 알약 형태의 뱃지.
• input 미묘한 테두리가 있는 어두운 배경 필드.
• hero 어두운 배경 위에 놓인 큰 중앙 정렬 헤드라인과 다이나믹하고 빛나는 오디오 웨이브폼 그래픽.

09

보이스와 금지 목록

• 톤 매력적이고 창의적이며, 힘을 들이지 않는 강력함.
• 헤드라인 사용자의 창의적 잠재력에 초점을 맞춘 크고 굵으며 직접적인 문구.
• CTA '시작'이나 '상상'을 자주 사용하는, 격려하고 행동 지향적인 문구.

• 밝은 배경을 사용하지 마세요 — 스크린샷은 깊은 블랙(#000000) 테마를 보여줍니다.
• 파란색이나 초록색을 주요 악센트로 사용하지 마세요 — 스크린샷은 지배적인 핫 핑크(#E30B5D)를 보여줍니다.
• 헤드라인에 세리프 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 기하학적 산세리프 타이포그래피를 보여줍니다.
• 주요 버튼에 날카롭고 각진 모서리를 사용하지 마세요 — 스크린샷은 둥근 알약 형태의 버튼(border-radius: 9999px)을 보여줍니다.
• 보조 텍스트에 고대비 흰색을 사용하지 마세요 — 스크린샷은 흐릿한 회색(#808080)을 보여줍니다.
• 빽빽하고 지저분한 레이아웃을 사용하지 마세요 — 스크린샷은 여유로운 여백과 집중된 중앙 구성을 보여줍니다.
• 피하기: 기술 전문 용어
• 피하기: 수동태
• 피하기: 지나치게 기업적인 언어

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

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