OpenDesign·你的设计资产库

网页参考

Socio Type

一个极简主义字体铸造厂，通过高对比度摄影首图与充足的字体样张展示，呈现当代字体家族。

TypographyPortfolioPhotographicCleanEditorial
Socio Type 网站截图

01

设计气质 DNA

字体铸造厂字体样张当代编辑风格高端

一个在混凝土墙面上展示字体的画廊

02

色彩

#000000Ink
#ffffffBG
#f7f7f6BG quiet
#818181Muted
rgba(0,0,0,0.16)Line

采用黑、白及中性暖灰的严格单色调色板

03

字体

humanist-sans

  • display250px · 400
  • headline26px · 400
  • body14px · 400
  • caption12px · 400

所有文字使用 400 字重，并赋予充足的字间距 · 导航标签使用大写字母 · 展示尺寸极为巨大，常超过 200px

04

间距

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

基于 4px 网格，采用宽敞的大块间距

05

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

sm · 0px
md · 0px
lg · 0px
pill · 0px

使用 1px 虚线作为分隔线，无圆角

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全幅出血摄影首图，后接非对称多栏字体样张网格

07

动效与交互

220msmicro
500mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

所有过渡效果应用于 transform 和 opacity · 颜色状态变化采用自定义属性过渡

文本元素的颜色过渡 · 交互元素使用标准指针光标

08

组件

  • button 基于文本的极简按钮，带虚线下划线
  • card 无卡片组件；内容以开放式网格布局呈现
  • chip 未使用标签组件
  • input 无可见的输入组件
  • hero 全幅出血摄影背景，上覆巨幅白色排版文字

09

文案语气与禁用清单

  • 语气 客观、描述性且具权威感
  • 标题风格 大胆、大尺度的字体样张展示，让字体自身发声
  • 按钮文案 低调，使用“更多信息”并配以虚线下划线
  • 勿用圆角——截图显示严格为 0px 尖角
  • 勿用投影——截图显示完全扁平的表面
  • 勿用鲜艳的强调色——截图显示严格的黑/白/灰色调
  • 勿用粗体或较重字重——截图显示通篇使用 400 字重
  • 勿用居中对齐文本——截图显示以左对齐排版为主
  • 勿用繁杂的背景图案——截图显示干净的纯色或全幅出血摄影
  • 避免: 营销术语
  • 避免: 过多颜色
  • 避免: 装饰性 UI 元素

10

包内真实截图

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

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

11

System Prompt

Socio Type 是一个当代字体铸造厂网站，具有极简、编辑风格的美学。设计基因建立在严格的单色调色板上，以纯黑 (#000000) 和纯白 (#ffffff) 为主色，辅以中性暖灰 (#818181, #f7f7f6)。排版仅使用 humanist-sans 字体家族，字重为 400，并赋予充足的字间距。布局采用全幅出血摄影首图，上覆巨幅白色字体样张文字，后接简洁的字体样张网格。关键约束：绝不使用圆角，避免所有投影，并绝不引入鲜艳的强调色。设计依靠极致的排版尺度与充足的空白，营造出高端的编辑品质感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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