01
设计气质 DNA
创意联合体工作室协作极简
一个宁静、精致的巴黎设计工作室,技艺胜于装饰。
02
色彩
#2E3B4BInk#E2D4CABGrgba(46, 59, 75, 0.15)Line温暖的极简主义:柔和、低饱和度的米色背景搭配深邃、冷峻的石板蓝色墨水,营造出一种内敛、富有泥土气息的优雅,无需高对比度的强调色。
03
字体
- display
180px · 400 - body-sm
13px · 400
网站几乎完全依赖单一衬线字体处理标题和正文,强调其精致的编辑特质。 · 导航中的小号文字使用同一衬线字体家族,但尺寸显著缩小,保持严格的排版一致性。 · 不使用无衬线或等宽字体元素。
04
间距
4px8px16px24px32px48px64px96px宽敞通透,利用大片空白区域来框定元素并引导视线,营造出宁静与奢华感。
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杂乱,倾向于优雅的、基于文本的导航。动画应是微妙的、低速的淡入淡出或过渡,以保持宁静的氛围。始终保持巨大、富有表现力的标题与精致、小比例导航元素之间的平衡。