OpenDesign·你的设计资产库

网页参考

Hocradio Eu

一个极简的暗色模式电台存档,专为高密度信息展示和连续音频播放而设计。

Dark ModeEditorialMusicApp UITypography
Hocradio Eu 网站截图

01

设计气质 DNA

电台电子极简实验策展

一个朴素、功能主义的广播控制台,或一个粗野主义的播放列表存档。

02

色彩

#FFFFFFInk
#000000BG
#4C4C4CMuted
rgba(255, 255, 255, 0.15)Line

绝对的单色。内容为王,因此视觉噪音被降至最低,采用纯黑背景搭配白色文字及极少的灰色点缀。

03

字体

geometric-sans

  • display24px · 500
  • body20px · 500
  • caption16px · 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

布局

1440container
12columns
768 / 1024breakpoints

一个严格的4x2(或4xN)等宽单元格网格用于电台存档,桌面端设有一个固定的右侧信息栏。

07

动效与交互

150msmicro
300mssmall
500msmedium
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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

HOC Radio是一个极简的暗色模式音频存档,其特点是严格的网格系统和单色配色方案。设计采用纯黑背景(#000000)搭配高对比度的白色文本(#FFFFFF)及微妙的灰色点缀(#4C4C4C)。字体严格限于几何无衬线类别(Roobert),使用中等(500)和常规(400)字重。关键设计约束包括:无彩色强调色、零border-radius(锐利的90度直角)、无投影、以及无粗体字重。布局是一个信息密集的网格,由1px白色边框定义,优先考虑实用性和编辑焦点,而非视觉花哨。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。