OpenDesign·你的设计资产库

网页参考

Highsnobiety

一个面向街头服饰文化与时尚资讯的高端编辑平台。

EditorialStreetwear

封面待补录，可通过原站查看设计。

01

设计气质 DNA

编辑街头服饰高端文化

一本融合时尚、文化与商业的高端街头服饰杂志。

02

色彩

#263D43Accent
#000000Ink
#020202Ink soft
#FFFFFFBG
#F0F0F0BG soft
#E0E0E0BG quiet
#737373Muted
rgba(0,0,0,0.1)Line

高对比度单色基底，搭配低饱和度的橄榄/卡其色作为编辑内容的点缀。

03

字体

grotesque-sans

  • display36px · 900
  • headline20px · 700
  • body17px · 400
  • caption14px · 400

标题与导航使用全大写，字距紧凑。 · 正文采用舒适的行高以优化阅读体验。 · 主字体为定制怪诞无衬线体（HS Sans）。

04

间距

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

基于4px的倍数，确保垂直节奏与内边距的一致性。

05

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

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

纤细的1px边框（底部加粗），使用#000000或#737373。

0px 1px 0px 0px rgba(0,0,0,1) · 0px 0px 0px 0px rgba(0,0,0,0.12) · 0px 0px 0px 0px rgba(0,0,0,0.08)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

经典编辑网格，包含突出的主视觉区域，后接内容块。

07

动效与交互

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

覆盖层的平滑透明度过渡（2秒）。 · 元素的微小变换动画（1秒）。 · 界面交互的快速过渡（0.2秒 边框/透明度）。

文本链接出现下划线；交互元素呈现细微的颜色变化。 · 通过状态变化或轻微缩放提供即时视觉反馈。

08

组件

  • button 通常极简，常为仅带底部边框的文字或全宽“OK”风格的块状按钮。
  • card 以图像为主的文章卡片，常配有大尺寸主图及下方文字。
  • chip 全大写、带边框的标签，如“SPRING '26 ISSUE”。
  • input 用于搜索或隐私设置切换的标准表单输入控件。
  • hero 全屏摄影背景，叠加大字号排版。

09

文案语气与禁用清单

  • 语气 权威、冷静且引领潮流。
  • 标题风格 粗体、全大写且直接，常使用大字号排版。
  • 按钮文案 直接且功能化，常表现为简洁文字或全宽按钮。
  • 勿使用明亮的霓虹色——截图显示调色板为黑、白及低饱和度的大地色。
  • 勿使用装饰性或手写体字体——截图显示干净、粗体的怪诞无衬线体。
  • 勿使用厚重的投影——截图显示平面设计，阴影微弱或无阴影。
  • 勿使用小而密集的文本块——截图显示充足的行高与清晰的层级。
  • 勿使用处处圆角——截图显示锐利或极其微小的圆角边缘。
  • 勿使用鲜艳的渐变——截图显示纯色块与摄影背景。
  • 避免: 俏皮或异想天开的语言
  • 避免: 过度使用标点符号
  • 避免: 柔软、圆润的形状

10

包内真实截图

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

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

11

System Prompt

Highsnobiety 是一个高端街头服饰与文化编辑平台。其设计DNA根植于高对比度单色基底，以#000000和#FFFFFF为主导色，偶尔使用#263D43和#737373等低饱和度点缀色。字体采用定制怪诞无衬线体（HS Sans），标题与导航使用粗体全大写样式，正文行高舒适（1.6）。关键设计准则：避免任何俏皮或圆润的元素，绝不使用明亮或霓虹色彩，并保持严格、干净的编辑网格。始终优先考虑大尺寸、有冲击力的图像与清晰的排版层级，而非装饰性修饰。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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