AI Product Generation 网站预览
AI Product Generation 网站预览

AI Product Generation

白色纸张上的编辑摄影工作室——标题文字以封面形式呈现,橙色作为编辑的高亮笔触

Fourmula 是一个以代码实现的编辑风格的产品摄影工作室:巨大的白色页面,近黑色的显示文字在极端尺寸下呈现,搭配一个单一、克制的橙色点缀,如同编辑笔尖的高亮标记,而非品牌的界面外围装饰。整个系统几乎单色——仅用三种近灰色调承载整个界面,色彩仅作为语义性强调出现在标题和渐变中。表面设计为扁平且无边框,依靠细线灰分隔线和充足的留白来区分区域,而非阴影或立体感。字体是核心设计手段:使用SF Pro Display字重400–500,大尺寸时字间距极紧,营造出类似杂志封面标题的视觉效果,而非SaaS首屏的常规文案。组件风格沉静而简洁——细线描边按钮、小型标签徽章、带有充足内边距的扁平卡片,以及一个圆角的图片角落。最终效果是,该网站将产品图像作为视觉焦点,而品牌元素则退居幕后。

查看原始网站

使用规范

建议采用

  • 所有正文与标题文本统一使用#020108,禁止用更柔和的灰色替代标题文本
  • 在标题和副标题中,采用橙色内嵌高亮模式(一个词使用#fd7b03,其余部分为#020108)以实现编辑式强调
  • 在400字重下使用73–100px的显示尺寸——让尺寸本身传递权威,而非字重
  • 所有27px及以上文本使用-0.02em至-0.031em的字间距;15px及以下文本保持正常字间距
  • 所有按钮、链接和胶囊形元素的圆角半径设为9999px——卡片为7px,图片为20–27px
  • 页面背景保持#f7f7f7,卡片表面使用#ffffff或#f7f7f7——依赖双色表面过渡,绝不使用阴影
  • 卡片内使用27px内边距,元素间使用20px间距;主要区块间间距为80px

建议避免

  • 禁止引入第二个色彩强调——该系统为单色,仅保留一个橙色高亮,增加色彩会削弱编辑风格的严谨性
  • 标题文本禁止使用粗体或600字重及以上——大尺寸下400–500字重是标志性风格;过度加粗会破坏封面式氛围
  • 禁止为卡片、按钮或图片添加阴影——整个系统为扁平设计;立体感必须通过色调表面过渡来传达
  • 禁止在文本段落、下划线或胶囊控件中使用背景色进行强调——仅允许在连续文本中单个词的色彩替换作为强调方式
  • 禁止在大尺寸首屏背景或区块填充中使用渐变——渐变仅用于强调笔触和小型装饰元素
  • 每个组件类型禁止使用超过两个圆角半径值——9999px专用于按钮,7px专用于卡片,20–27px专用于图片
  • 禁止在任何位置使用完全饱和的主色(纯红、纯绿、纯蓝)——整个配色系统中的色彩均带有暖调或褪色处理