精选 · 开放 · 免费

Bareis Nicolaus

一个高对比度、基于标签的视觉传达机构设计作品集。

01

设计气质 DNA

一套用于视觉作品的、流畅的单色调归档系统。

02

色彩

严格单色调，所有色彩均由项目图像提供。

03

字体

geometric-sans · humanist-sans

• display72px · 400
• body24px · 400

字体族：Lausanne，sans-serif · 字重：在856个元素中一致使用400。 · 字号：24px 是主要的文字尺寸。

04

间距

一致的垂直与水平节奏，由交互标签元素的 padding 定义。

05

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

标签和按钮采用 2px solid white 边框。

06

布局

分屏布局，左侧为导航/筛选标签，右侧为项目图像。

07

动效与交互

交互标签在 hover 时的平滑过渡。 · 用于展开和折叠区域的 Flex 和 opacity 过渡。

标签的背景填充或 opacity 变化。 · 标签筛选项目网格。

08

组件

• button 标签，具有 2px solid white 边框，药丸形（border-radius 120px），黑色背景，白色文字。
• card 全出血摄影图像，上方叠加药丸形文字标签。
• chip 广泛用于筛选分类，样式与标签完全一致。
• input 基于标签的交互暗示了最小化的搜索或筛选输入框。
• hero 大型分屏，结合用于导航的大号字体和高品质项目摄影。

09

文案语气与禁用清单

• 语气 专业、直接、专注。
• 标题风格 用于主导航的大号、粗体、sans-serif 字体（72px）。
• 按钮文案 交互式药丸形标签，邀请探索与筛选。

• 不要使用白色背景——截图显示为纯黑背景。
• 不要为主要 UI 使用装饰性或衬线字体——截图显示为简洁的 sans-serif。
• 不要使用彩色按钮或强调色——截图显示为严格单色调的 UI 元素。
• 不要使用厚重的投影——截图显示为平面的、基于边框的元素。
• 不要使用复杂的多栏文本布局——截图显示为简洁的、基于标签的网格。
• 不要使用小于药丸形的圆角——截图显示为高度圆润的边框（120px）。
• 避免: 手写字体
• 避免: 柔和阴影
• 避免: 装饰性渐变

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko