精選 · 開放 · 免費

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

文案語氣與禁用清單

• 語氣 直接、資訊豐富，略帶前衛感。
• 標題風格 區塊標籤使用全形大寫（如「資訊」、「聯絡」），內容標題使用混合大小寫。
• 按鈕文案 內斂的文字連結（如「Soundcloud ->」），無顯眼按鈕形狀。

• 不要使用色彩點綴——截圖顯示嚴格的單色黑白灰。
• 不要使用圓角——截圖顯示嚴格的 0px border-radius 網格。
• 不要使用陰影——截圖顯示平面 1px 白色邊框作為唯一深度提示。
• 不要使用粗體字重——截圖顯示所有文字使用中等及標準字重。
• 不要使用複雜背景——截圖顯示純黑背景。
• 不要使用裝飾性圖示——截圖僅顯示必要的功能性符號，如「+」與箭頭。
• 避免: 避免裝飾性花紋或不必要的插圖。
• 避免: 避免粗重字體或誇張的尺寸對比。
• 避免: 避免複雜的顏色漸層或多色調色板。
• 避免: 避免圓角或柔軟形狀。
• 避免: 避免雜亂佈局與深層陰影。
• 避免: 避免隨意或過度熱情的語言。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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