AI Product Generation

近白色基底、产品图像展示与渐变展示。

页面以近白色为基底，搭配近黑色文字。字体采用 Arial、SF Pro Display。视觉特点包括产品图像展示、渐变展示、大字排版、细线分隔。适合参考的场景：AI 服务首页、产品演示介绍页。

查看原始网站

使用规范

建议采用

所有正文与标题文本统一使用#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专用于图片
禁止在任何位置使用完全饱和的主色（纯红、纯绿、纯蓝）——整个配色系统中的色彩均带有暖调或褪色处理

正在读取模板权限…

使用指南

# AI Product Generation — Style Reference
> editorial photography studio on white paper — headline display type as cover, orange as the editor's highlight pen
 
**Theme:** light
 
Source measurements are normalized; roles and recommendations are interpreted. Font summary lists are independent, not paired by position. HTML examples are reconstructions, not source components.
 
Fourmula is an editorial product-photography studio rendered in code: vast white pages, near-black display type at extreme sizes, and a single disciplined orange accent that reads like editorial highlight pen rather than brand chrome. The system is almost monochromatic — three near-grays carry the entire interface, and color appears only as semantic punctuation inside headlines and gradients. Surfaces are flat and borderless, relying on hairline gray dividers and generous whitespace to separate regions instead of shadow or elevation. Typography is the dominant design move: SF Pro Display at weights 400–500, tracked tight at large sizes, producing headlines that feel like magazine cover titles rather than SaaS hero copy. Components are quiet and minimal — a thin outlined button, a small tag badge, flat cards with generous padding, and a single rounded image corner. The result is a site that treats its product imagery as the spectacle while the chrome recedes.

AI Product Generation

使用规范

建议采用

建议避免

相似设计语言

Readymag

Generative AI

Home

Altitude Beverages

xAI

Superhuman