Uizard 网站预览
Uizard 网站预览

Uizard

近黑色基底、紧密字距与细线分隔。

页面以近黑色为基底,搭配近白色文字。字体采用 Satoshi-Variable、ClashGrotesk-Variable。视觉特点包括紧密字距、细线分隔、居中构图、网格布局。适合参考的场景:设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

  • #a881fe仅用于主要生成操作和AI闪光指示符;稀少的出现正是其带电感的来源。
  • 紫罗兰外辉光阴影(rgba(168,129,254,0.64) 0px 2px 12px)只用于主要CTA,绝不用于卡片或输入框。
  • 卡片边框严格设为1px #2e2e2,圆角为16px;它应是极细线,而不是厚重面板。
  • 按钮采用12px圆角,输入框8px,卡片16px,胶囊标签9999px;绝不将这些取值合并为一种。
  • 正文保持16px/400 Satoshi,以Frost(#f5f5f5)显示在Obsidian(#0b0b0b)上;只有弱化的元信息使用Pewter(#aeaeae)。
  • Clash Grotesk仅用于72px首屏标题,40px以下的所有内容均由Satoshi承担。
  • 保持80px的垂直区块间隔、卡片内部12px的元素间隔及24px卡片内边距。

建议避免

  • 除主要操作、闪光图标和首屏辉光的起点外,不要在其他地方使用#a881fe;过量使用会稀释品牌的带电感。
  • 不要为卡片使用浓重投影;系统依靠极细边框和画布本身实现分隔。
  • 不要应用浅色主题的颜色(#ffffff填充、#f5f5f5表面);这是以深色为先的系统,白色仅出现在文字及生成提示栏内部。
  • 不要在同一表面上混用紫罗兰品牌色与Signal Blue(#1e90ff);蓝色仅用于顶部导航的注册辅助操作。
  • 卡片圆角不要小于16px或大于20px;圆润但仍有建筑感的比例是标志性特征。
  • 不要将Clash Grotesk用于副标题、正文或UI标签;它在72px时采用540字重,只出现于一次首屏展示。
  • 不要为文字或小型UI元素引入渐变;渐变只存在于首屏光晕和标志图形中。