OpenDesign·你的设计资产库

网页参考

Bareis Nicolaus

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

AgencyCleanCurationProductivityApp UI
Bareis Nicolaus 网站截图

01

设计气质 DNA

视觉传达作品集机构精选

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

02

色彩

#FFFFFFInk
#000000BG
#A9A9A9Muted
rgba(255, 255, 255, 1.0)Line

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

03

字体

geometric-sans · humanist-sans

  • display72px · 400
  • body24px · 400

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

04

间距

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

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

05

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

sm · 4px
md · 8px
lg · 120px
pill · 120px

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

06

布局

1920container
12columns
20pxgutter
768 / 1024breakpoints

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

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing

交互标签在 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

包内真实截图

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

11

System Prompt

一个高对比度、单色调的视觉传达机构设计作品集。关键色彩为纯黑(#000000)背景和纯白(#FFFFFF)文字与边框。主要字体为 humanist-sans(Lausanne),同时用于 72px 的超大标题和 24px 的正文。布局采用分屏,左侧是全面的标签筛选系统,右侧是大幅摄影项目展示。关键点:不要使用黑色以外的任何背景,不要引入彩色强调色,不要为 UI 使用衬线字体。所有交互元素应为药丸形,带有 2px solid white 边框。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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