OpenDesign·你的设计资产库

网页参考

ABC Dinamo

一个现代、精致的铸字工坊网站，强调大胆排版、编辑类图像和极简留白驱动的布局。

TypographyFoundry
ABC Dinamo 网站截图

01

设计气质 DNA

排版铸字工坊字体设计定制

高端数字字体精品店，将字体视为顶级收藏工具。

02

色彩

#FEE905Accent
#000000Ink
#FFFFFFBG
#F0F4F6BG quiet
#EBEBEBMuted
rgba(0,0,0,0.1)Line

极简高对比度调色板，以纯白为画布，黑色文字，辅以一抹鲜艳的黄色。

03

字体

geometric-sans · humanist-sans · monospace

  • display43px · 400
  • heading27px · 400
  • body21px · 400
  • caption12px · 400

所有文本使用 400 字重。 · 大型标题采用紧凑的字间距。 · 标签文本谨慎使用全大写转换。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

章节间留白充足，导航与 UI 组件内部采用紧凑、结构化的间距。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 12px
lg · 30px
pill · 999px

边框极少，偶尔使用 1px 实线黑边作为 UI 分隔。

rgb(255, 249, 0) 0px 0px 0px 1px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

非对称分屏布局，包含固定的左侧导航栏和用于主图及功能展示的中心/右侧内容区。

07

动效与交互

250msmicro
400mssmall
800msmedium
cubic-bezier(0.1, 0.6, 0.4, 1)easing

页面过渡使用平滑的透明度与背景淡入淡出。 · 微交互使用 cubic-bezier 变换。 · 顺序元素加载使用线性延迟。

导航与 UI 元素上细微的颜色或背景变化。 · 通过激活状态提供即时反馈。

08

组件

  • button 极简设计，以文本为主，配有胶囊形背景。
  • card 大型全宽编辑类图像卡片，采用大圆角设计。
  • chip 小型圆角 'NEW' 标签，背景为黄色或浅灰色。
  • input 搜索触发器使用简洁图标，无传统输入框边框。
  • hero 居中的显眼全大写标题，下方配以边缘圆润的大型编辑类照片。

09

文案语气与禁用清单

  • 语气 专业、富有创意且具权威性。
  • 标题风格 简短、有力、全大写的陈述。
  • 按钮文案 简洁、直接、无修饰。
  • 勿使用粗体字重——截图显示所有文本均为 400 字重。
  • 勿使用深色模式——截图显示主要为明亮的白色背景。
  • 勿添加复杂渐变——截图显示为纯色平面背景。
  • 勿使用装饰性衬线字体——截图显示为干净的几何与人文无衬线字体类别。
  • 勿过度使用亮色——截图显示为以黑白为主的调色板，仅点缀少量黄色。
  • 勿使用尖锐的直角——截图显示为大圆角的胶囊与卡片形状。
  • 避免: 厚重的装饰元素。
  • 避免: 喧闹、冲突的调色板。
  • 避免: 复杂、多层的渐变。

10

包内真实截图

ABC Dinamo — 桌面首屏（hero）
桌面首屏（hero）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 移动首屏
移动首屏

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

11

System Prompt

这是一个现代、精致的铸字工坊网站，强调大胆排版、编辑类图像和极简留白驱动的布局。设计采用纯白背景与纯黑文字以实现最大对比度，偶尔辅以鲜艳的黄色点缀。字体以干净的几何与人文无衬线字体类别为主，以大尺寸呈现，标题字间距紧凑。固定的左侧导航栏锚定界面。关键十六进制颜色包括 #FFFFFF、#000000 和 #FEE905。关键禁忌：切勿使用粗体字重，完全避免深色模式，不引入复杂渐变，坚持无衬线字体类别，严格控制颜色使用，并始终为卡片和标签使用大圆角。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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