精选 · 开放 · 免费
Hypebeast
一个权威、大胆的数字杂志，专注于高端街头服饰与生活方式文化。
editorialstreetwear
01
设计气质 DNA
街头服饰文化时尚高端编辑内容
一本高端时尚杂志的数字入口。
02
色彩
#00469BAccent
#111111Ink
#888888Ink soft
#FFFFFFBG
#F5F5F7BG soft
rgba(238,238,238,1)Line
高对比度单色系，搭配单一权威蓝色点缀。
03
字体
grotesque-sans · humanist-sans
- display
48px · 700 - h3
24px · 700 - body
18px · 400 - small
12px · 500
标题使用紧凑的字距和粗体字重以增强视觉冲击力。 · 正文保持干净、易读的无衬线字体风格。 · 导航和分类标签统一使用大写。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
采用标准 4px 网格，内容区域间留有充裕的 padding。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 0px
pill · 999px
细而浅的灰色线条，用于分隔内容区域，使用克制。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
不对称多栏网格，用于构建编辑层级。
07
动效与交互
150msmicro
300mssmall
0msmedium
ease-in-outeasing
用于交互状态的快速、微妙的颜色过渡。
文字和图标的微妙颜色变化。 · 即时响应，无沉重反馈。
08
组件
- button 极简风格，常为文字按钮或幽灵按钮。
- card 以图片为主、装饰极少的卡片，依赖强大的排版设计。
- chip 用于分类（如“游戏”或“鞋履”）的简单大写文字标签。
- input 简洁的搜索栏，底部带边框。
- hero 大型主导区域，呈现一篇重要的编辑内容。
09
文案语气与禁用清单
- 语气 权威、冷静且具有文化洞察力。
- 标题风格 直接、大胆、陈述性。
- 按钮文案 低调，常以文字链接或简单按钮的形式融入。
- 卡片不要使用圆角——截图显示为直角或 2px 圆角。
- UI 元素不要使用投影——截图显示为扁平化设计。
- 不要使用多彩渐变背景——截图显示为纯白色背景。
- 不要使用装饰性衬线字体——截图使用的是简洁的无衬线字体类别。
- 不要将所有文字居中对齐——截图中的标题使用了强烈的左对齐。
- 不要为按钮使用鲜艳的原色——截图使用单一的深蓝色作为点缀。
- 避免: 俏皮活泼的语言
- 避免: 鲜艳、霓虹感的色彩
- 避免: 过度的装饰性元素
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Hypebeast 是一个专注于街头服饰、时尚和文化的高端数字编辑平台。其设计 DNA 的特点是大胆的单色系配色（#FFFFFF 背景，#111111 墨色）搭配一抹权威蓝色（#00469B）。排版以粗体无衬线字体用于标题，简洁的人文主义无衬线字体用于正文，且始终保持左对齐。关键设计规则包括：避免过度装饰或鲜艳色彩，保持高对比度以确保可读性，以及利用充裕的留白让摄影内容占据主导。布局采用简洁的多栏网格，通过排版和图片布局来建立视觉层级。核心交互较为微妙，悬停状态依赖快速的颜色过渡。
en · zh-CN · zh-TW · ja · ko