← OpenDesign
精选 · 开放 · 免费
Hocradio Eu
一个极简的暗色模式电台存档,专为高密度信息展示和连续音频播放而设计。
Dark Mode Editorial Music App UI Typography
01
设计气质 DNA
电台 电子 极简 实验 策展
一个朴素、功能主义的广播控制台,或一个粗野主义的播放列表存档。
02
色彩
#FFFFFFInk
#000000BG
#4C4C4CMuted
rgba(255, 255, 255, 0.15)Line
绝对的单色。内容为王,因此视觉噪音被降至最低,采用纯黑背景搭配白色文字及极少的灰色点缀。
03
字体
geometric-sans
display 24px · 500body 20px · 500caption 16px · 500字体粗细严格限定为500和400。 · 标题和题头不使用粗体,以保持整体质感的统一。
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
1.5至2.0的行高比,在密集文本环境中提供了充足的呼吸空间。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
1px的实线白色边框定义了主要网格和交互边界。
无
06
布局
1440 container
12 columns
768 / 1024 breakpoints
一个严格的4x2(或4xN)等宽单元格网格用于电台存档,桌面端设有一个固定的右侧信息栏。
07
动效与交互
150ms micro
300ms small
500ms medium
cubic-bezier(0.4, 0.0, 0.2, 1) easing
UI状态变化时的平滑opacity过渡。 · 交互元素的微妙颜色变化。 · 播放栏中流畅的音频波形可视化。
文本和边框上的微妙opacity降低或颜色变化,以指示可交互性。 · 立即的导航或状态变化,辅以平滑过渡效果。
08
组件
button 基于文本,带1px实线白色边框,大写变换,无背景填充。 card 一个纯粹由1px白色边框交叉定义的网格单元,顶部对齐标题,底部对齐元数据。 chip 以逗号分隔的内联文本标签,使用标准正文字体,无边界框。 input 极简的无边框字段或简单的文本链接,用于搜索和导航。 hero 一个信息优先的密集网格,立即呈现最新的音频存档。
09
文案语气与禁用清单
语气 直接、信息性强,略带先锋感。 标题风格 章节标签使用全大写(例如‘信息’、‘联系’),内容标题使用混合大小写。 按钮文案 低调、文本密集的链接(例如‘Soundcloud ->’),无突出的按钮形状。 不要使用彩色强调色——截图显示的是严格的单色黑、白、灰。 不要使用圆角——截图显示的是0px border-radius的严格网格。 不要使用投影——截图显示的是平面的1px白色边框作为唯一的层次提示。 不要使用粗体字重——截图显示所有文本均使用中等和常规字重。 不要使用繁忙的背景——截图显示的是纯黑背景。 不要使用装饰性图标——截图只显示必需的功能性符号,如‘+’和箭头。 避免: 避免装饰性花纹或不必要的插图。 避免: 避免使用粗重的字体或夸张的字号对比。 避免: 避免复杂的颜色渐变或多色系调色板。 避免: 避免圆角或柔和的形状。 避免: 避免带有深阴影的杂乱布局。 避免: 避免随意或过于热情的语气。
10
包内真实截图
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 抓自真实页面 · 真 computed styles
11
System Prompt
HOC Radio是一个极简的暗色模式音频存档,其特点是严格的网格系统和单色配色方案。设计采用纯黑背景(#000000)搭配高对比度的白色文本(#FFFFFF)及微妙的灰色点缀(#4C4C4C)。字体严格限于几何无衬线类别(Roobert),使用中等(500)和常规(400)字重。关键设计约束包括:无彩色强调色、零border-radius(锐利的90度直角)、无投影、以及无粗体字重。布局是一个信息密集的网格,由1px白色边框定义,优先考虑实用性和编辑焦点,而非视觉花哨。
更多精选
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
为什么收录: 本站是粗野主义、实用主义至上设计的完美范例,它剥离了所有非必要的视觉元素,将全部焦点集中于其核心内容:音乐。