DrawHistory 网站预览
DrawHistory 网站预览

DrawHistory

暖白色基底、宽松留白与扁平表面。

页面以暖白色为基底,搭配近黑色文字。字体采用 Eloquia Text、Roboto Mono。视觉特点包括宽松留白、扁平表面、分屏构图、网格布局。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • 将标题设为 Eloquia Text 300 字重全大写,并带有负字间距;细体字重是层级依据,而非仅靠字号大小
  • 所有卡片级表面和图像使用 16px 圆角,按钮使用 8px,胶囊形标签使用 9999px —— 严禁混用这些圆角系列
  • 以羊皮色 (#faf6f3) 画布为基础构建页面,让橄榄炭色 (#3d3b2f) 与黑曜石色 (#1d1d1b) 展示面板通过色调对比营造深度
  • 仅将姜黄点 (#ff6714) 用作 6–8px 的指示符——绝不可作为填充、按钮背景或大面积强调色
  • 正文使用 16px Eloquia Text 400 字重,字间距 -0.29px;采用句子首字母大写,绝不可全大写
  • 使用 Roboto Mono 作为按钮标签和元注释,以形成与 Eloquia 编辑风格不同的技术语调
  • 保持 80px 的区块间距和 32px 的卡片内边距作为结构节奏——这种宽敞感本身就是设计的核心

建议避免

  • 不要在 Eloquia Text 标题中使用 500–700 字重——300 字重的轻声细语是标志;更重的字重会破坏画廊氛围
  • 不要为卡片或面板添加阴影——仅通过羊皮画布的色调对比来实现层次感
  • 不要在行动号召按钮上使用颜色——始终使用透明描边控件,无论在亮色还是暗色背景上
  • 不要将姜黄色用于大面积、填充或文本中——它只是一个 6–8px 的点,而非品牌主色
  • 不要使用 #0000ee 或默认浏览器蓝色作为链接色——链接应继承当前文本颜色,并依赖下划线或上下文来体现
  • 不要在卡片或图像上使用大于 16px 的圆角——其几何形态是建筑式的,而非玩乐的
  • 不要在同一卡片中混合使用橄榄炭色和黑曜石色面板色调——每张卡片仅使用一种面板色调,相邻并列呈现