OpenDesign·你的设计资产库

网页参考

Concreteclub Studio

一个精致、极简的创意联合体网站,以温暖的中性色、优雅的衬线字体和慷慨的留白为定义。

AgencyCleanRestraintTypographyRefined

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

创意联合体工作室协作极简

一个宁静、精致的巴黎设计工作室,技艺胜于装饰。

02

色彩

#2E3B4BInk
#E2D4CABG
rgba(46, 59, 75, 0.15)Line

温暖的极简主义:柔和、低饱和度的米色背景搭配深邃、冷峻的石板蓝色墨水,营造出一种内敛、富有泥土气息的优雅,无需高对比度的强调色。

03

字体

transitional-serif

  • display180px · 400
  • body-sm13px · 400

网站几乎完全依赖单一衬线字体处理标题和正文,强调其精致的编辑特质。 · 导航中的小号文字使用同一衬线字体家族,但尺寸显著缩小,保持严格的排版一致性。 · 不使用无衬线或等宽字体元素。

04

间距

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

宽敞通透,利用大片空白区域来框定元素并引导视线,营造出宁静与奢华感。

05

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

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

极少或没有。布局纯粹依靠间距和排版来构建结构。

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

单一主导视口。左上和右上角放置导航文字。一个巨大、富有表现力的标题锚定在下半部分,伴随一幅抽象线条画。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

考虑到设计宁静、静态的特性,暗示使用微妙的淡入或平滑的页面过渡。 · 导航链接上有轻微的悬停状态。

导航链接上有微妙的颜色变化或下划线。 · 标准的页面过渡。

08

组件

  • button 无可见按钮。
  • card 无可见卡片。
  • chip 无可见标签。
  • input 无可见输入框。
  • hero 一个全屏、极简的首屏,由锚定在左下方的巨大衬线标题 'Concrete Club' 定义,右侧辅以微妙的抽象线条图形,顶部角落则分布着稀疏的小号导航文字。

09

文案语气与禁用清单

  • 语气 宁静、自信且精致。
  • 标题风格 陈述性且优雅,使用大尺寸、富有表现力的衬线字体。
  • 按钮文案 内敛,可能是无缝集成到导航中的简单文本链接。
  • 不要使用纯白背景——截图显示的是温暖、低饱和度的米色(#E2D4CA)。
  • 不要使用明亮、高色度的强调色——截图显示的是严格的暖米色与冷石板色的双色搭配。
  • 不要为标题使用无衬线字体——截图显示的是一款精致的过渡衬线字体被以巨大比例使用。
  • 不要用按钮和图标堆砌UI——截图显示的是一个干净、近乎空白的布局,依赖于留白。
  • 不要使用紧凑的行高或拥挤的文字——截图显示巨大标题周围有充足的垂直间距。
  • 不要使用尖锐、完美的几何形状——截图呈现的是有机的、手绘风格的抽象线条图形。
  • 避免: 刺眼的高对比度配色方案
  • 避免: 喧闹、充满活力的动画
  • 避免: 装饰性、杂乱的UI元素
  • 避免: 僵化的企业网格布局
  • 避免: 激进的营销语言

11

System Prompt

这是 'The Concrete Club' 的设计系统,一个精致的创意联合体工作室。其视觉DNA由温暖的极简主义定义,采用低饱和度的米色背景(#E2D4CA)和深邃、冷峻的石板蓝色墨水(#2E3B4B)。它使用一款过渡衬线字体处理巨大的展示标题和小号导航文字,营造出连贯的编辑感。布局宽敞,高度依赖留白和干净、不对称的排列。关键的禁止事项包括避免使用纯白背景、引入高色度的强调色,或为标题使用无衬线字体。设计必须避免按钮和图标等UI杂乱,倾向于优雅的、基于文本的导航。动画应是微妙的、低速的淡入淡出或过渡,以保持宁静的氛围。始终保持巨大、富有表现力的标题与精致、小比例导航元素之间的平衡。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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