큐레이션 · 오픈 · 무료

Winamp

클린한 디자인과 표현력 있는 사진을 통해 아티스트와 청취자를 역량 강화하는 현대화된 음악 플랫폼입니다.

01

디자인 DNA

클래식 음악 플레이어 브랜드의 현대적 재탄생으로, 뉴스테일리tic한 따뜻함과 현대적인 클린 미학을 결합합니다.

02

컬러

고대비 다크 타이포그래피가 적용된 깨끗한 흰색 캔버스와 브랜드 에너지를 위한 단일의 따뜻한 오렌지 강조색입니다.

03

타이포그래피

geometric-sans · humanist-sans · geometric-mono

• display69px · 700
• h234px · 600
• body-lg24px · 400
• body15px · 400
• caption12px · 400

헤드라인에는 겹침(tracking)을 좁힌 거대한 기하학적 sans를 사용합니다. · 본문에는 긴 독서를 위한 높은 가독성의 humanist sans를 사용합니다. · 네비게이션과 UI 요소에는 작고 보통 굵기의 humanist sans를 사용합니다.

04

여백

일관된 4px 기본 격자를 기반으로 하며, 히어로 섹션에는 40px 및 56px 간격을 사용한 넉넉한 여백을 적용합니다.

05

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

1px solid rgba(0,0,0,0.08)

0 2px 8px rgba(0,0,0,0.04) · 0 8px 24px rgba(0,0,0,0.08)

06

레이아웃

히어로 섹션은 분할 레이아웃을 사용합니다 (텍스트 좌측, 겹쳐진 이미지 우측). 네비게이션은 표준 가로 정렬의 풀-width입니다.

07

모션과 인터랙션

네비게이션 링크와 버튼의 미세한 hover 상태 · 모든 속성을 이용한 인터랙티브 요소의 부드러운 전환

인터랙티브 요소의 색상 변화 또는 미세한 불투명도 변경. · 표준 버튼 상태를 통한 즉각적인 피드백.

08

컴포넌트

• button 흰색 배경에 둥근 모서리와 다크 테두리가 적용된 아웃라인 스타일의 기본 버튼입니다.
• card 예술적 표현을 위해 사용되며, 겹쳐진 테두리와 미세한 둥근 모서리가 적용된 이미지 중심 카드입니다.
• chip 분류용의 가벼운 배경이 적용된 단순한 둥근 태그입니다.
• input 모달 대화 상자에 통합된, 미세한 테두리가 있는 표준 폼 필드입니다.
• hero 거대한 타이포그래피와 기울어진, 겹쳐진 이미지의 역동적인 콜라주를 특징으로 하는 대규모 분할 레이아웃입니다.

09

보이스와 금지 목록

• 톤 현대적이면서도 접근성 있는 전문적이고, 역량을 부여하며, 약간의 뉴스테일리tic함을 지닌 어조입니다.
• 헤드라인 거대하고 볼드하며 미니멀하여, 타이포그래피와 이미지에 무게를 싣습니다.
• CTA 공격적인 시각적 스타일링을 피하고 표준 버튼 기능을 명확하게 전달하는 직접적이고 명료한 스타일입니다.

• 네온색이나 매우 채도 높은 배경색을 사용하지 마세요 — 스크린샷은 깨끗한 흰색 배경(#FFFFFF)을 보여줍니다.
• 본문에 장식용 세리프 타이포그래피를 사용하지 마세요 — 스크린샷은 깨끗한 humanist sans-serif를 보여줍니다.
• 지저분하고 빽빽하게 배치된 레이아웃을 만들지 마세요 — 스크린샷은 넉넉한 여백과 padding(예: 40px, 56px)을 보여줍니다.
• 인터랙티브 컴포넌트에 날카롭고 사각형의 모서리를 사용하지 마세요 — 스크린샷은 둥근 모서리(8px, 12px)를 보여줍니다.
• 다크 모드를 기본 테마로 사용하지 마세요 — 스크린샷은 검은 텍스트가 있는 라이트 모드 테마를 보여줍니다.
• 요소에 무거운 드롭 섀도우나 3D 효과를 사용하지 마세요 — 스크린샷은 미세한 테두리가 있는 플랫하고 깨끗한 표면을 보여줍니다.
• 피하기: 지나치게 복잡한 기술 용어
• 피하기: 공격적이거나 시끄러운 마케팅 언어
• 피하기: 지저분한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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