Pietrastudio 网站预览
Pietrastudio 网站预览

Pietrastudio

奶油纸上沐浴日光的 AI 工作坊。

Pietra 是暖光生产力画布,让 AI 像日光照耀的书桌:奶油白表面、柔桃色环境色层、唯一鲜明珊瑚操作色穿透暖意。字体系统成对且自信:高挑紧密的展示字体 Attila 高声表达标题,中性无衬线 Labil Grotesk 以接近紧密的字间距处理其余文字。组件以柔和叠层阴影落在页面上,内嵌高光与暖色投影让卡片像纸上叠纸,而不是数字浮起。颜色作为功能:珊瑚色用于唯一真正主要操作,紫、蓝、绿、洋红、日落等饱和渐变色样作为功能卡片分类标签,其余是近单色灰系统。密度舒适,区块间垂直呼吸空间充足,布局限制最大宽度,12-20px 圆角内使用 12-16px 卡片内边距。

查看原始网站

使用规范

建议采用

  • 每屏恰好只有一个主要操作使用珊瑚色 #ff5c3c,绝不让两个珊瑚行动按钮竞争。
  • 展示标题使用 Attila-Bold,40-48px,字间距 -0.02em;紧密字间距是编辑标志。
  • 暖渐变色样系统 Royal、Sky、Verdant、Magenta、Sunrise 只用于分类标签与装饰卡片,不用于正文或背景。
  • 阴影由内嵌高光加暖色投影叠成;奶油色上的奶油阴影将卡片与画布分离。
  • 默认卡片圆角 12px,按钮和输入框 8px,标签 9999px;这个三级圆角系统是结构节奏。
  • 正文保持 Labil Grotesk,16px,行高 1.5;0.143em 的大写字间距只留给小型全大写标签。
  • 维持暖白色板:页面画布 #ffffff,浮起表面 #f8f6f2,强调卡片 #fffbe7;绝不引入冷灰。

建议避免

  • 珊瑚色不要用于次要操作、链接或装饰;散布使用会削弱操作权重。
  • Attila 不要用于正文或界面文字;它只用于展示,小字号会过于强烈。
  • 分类渐变色样不要作为整张卡片背景或页面区块;它们是标签尺度的强调。
  • 不要引入冷灰色调投影;所有阴影应带暖粉或奶油色调,匹配表面色板。
  • 卡片或图片不要使用 0px 尖角;圆润几何是柔和纸感的关键。
  • 单个组件中不要叠加多种饱和色;每个元素只用一种彩色强调,其余用灰度。
  • 正文字间距不要宽于 -0.01em;系统始终紧密,放松会破坏字体声音。