큐레이션 · 오픈 · 무료

Hocradio Eu

고밀도 정보 표시와 지속적인 오디오 재생을 위해 설계된 미니멀 다크모드 라디오 아카이브.

01

디자인 DNA

기능적인 방송 콘솔 또는 브루탈리즘 플레이리스트 아카이브.

02

컬러

절대적인 단색. 콘텐츠가 왕이므로 시각적 노이즈를 엄격한 검정 배경에 흰색 텍스트와 최소한의 회색 강조로 줄입니다.

03

타이포그래피

geometric-sans

• display24px · 500
• body20px · 500
• caption16px · 500

타이포그래피는 엄격히 웨이트 500과 400으로 설정됩니다. · 제목과 타이틀은 묵은 웨이트를 사용하지 않고 균일한 질감을 유지합니다.

04

여백

1.5에서 2.0 사이의 행간 비율로 밀집된 텍스트 환경에서 충분한 공간감을 제공합니다.

05

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

1px 실선 흰색 테두리가 주요 그리드와 인터랙티브 테두리를 정의합니다.

없음

06

레이아웃

데스크톱에서는 정보를 위한 고정된 열이 있는, 동일한 너비의 셀로 구성된 엄격한 4x2(또는 4xN) 그리드 라디오 아카이브입니다.

07

모션과 인터랙션

UI 상태 변화를 위한 원활한 불투명도 전환. · 인터랙티브 요소를 위한 미세한 색상 변화. · 플레이어 바에서 유연한 오디오 파형 시각화.

인터랙티브성을 나타내기 위해 텍스트와 테두리에서 미세한 불투명도 감소 또는 색상 변화. · 원활한 전환으로 지원되는 즉각적인 상태 변화 또는 탐색.

08

컴포넌트

• button 텍스트 기반으로, 1px 실선 흰색 테두리, 대문자 변환, 그리고 배경 채움이 없습니다.
• card 1px 흰색 테두리 교차로 순수하게 정의된 그리드 셀로, 상단 정렬 헤더와 하단 정렬 메타데이터를 특징으로 합니다.
• chip 쉼표로 구분된 인라인 텍스트 태그로, 경계 상자 없이 표본 바디 폰트를 사용합니다.
• input 검색과 탐색을 위한 미니멀리스트, 테두리 없는 필드 또는 간단한 텍스트 링크입니다.
• hero 최신 오디오 아카이브를 즉시 제시하는 밀집되고 정보 우선의 그리드입니다.

09

보이스와 금지 목록

• 톤 직설적이고 정보적이며 약간의 아방가르드.
• 헤드라인 섹션 라벨(예: 'INFO', 'CONTACT')은 모든 대문자, 콘텐츠 타이틀은 대소문자 혼합.
• CTA 눈에 띄는 버튼 모양 없이 절제된, 텍스트 위주의 링크(예: 'Soundcloud ->').

• 색상 강조를 사용하지 마십시오 — 스크린샷은 단색의 검정, 흰색, 회색만 보여줍니다.
• 둥근 모서리를 사용하지 마십시오 — 스크린샷은 0px border-radius의 엄격한 그리드를 보여줍니다.
• 드롭 그림자를 사용하지 마십시오 — 스크린샷은 1px 흰색 테두리가 유일한 깊이 단서인 플랫한 디자인을 보여줍니다.
• 묵은 폰트 웨이트를 사용하지 마십시오 — 스크린샷은 모든 텍스트에 미디엄 및 레귤러 웨이트를 보여줍니다.
• 바쁜 배경을 사용하지 마십시오 — 스크린샷은 순수한 검정 배경을 보여줍니다.
• 장식적인 아이콘을 사용하지 마십시오 — 스크린샷은 '+'나 화살표와 같은 필수 기능적 기호만 보여줍니다.
• 피하기: 장식적인 꾸밈이나 불필요한 일러스트레이션을 피할 것.
• 피하기: 묵은 폰트 웨이트나 극적인 크기 대비를 피할 것.
• 피하기: 복잡한 색상 그라데이션이나 다색상 팔레트를 피할 것.
• 피하기: 둥근 모서리나 부드러운 형태를 피할 것.
• 피하기: 깊은 그림자가 있는 지저분한 레이아웃을 피할 것.
• 피하기: 캐주얼하거나 지나치게 열정적인 어조를 피할 것.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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