Uizard 网站预览
Uizard 网站预览

Uizard

Obsidian上方的紫罗兰极光:一个带电的强调色,在墨色深暗的产品画布上发光。

Uizard如同一间午夜创意工作室:接近黑色的画布吸收注意力,唯一的紫罗兰辉光(#a881fe)像房间里的霓虹招牌,将目光引向生成的时刻。界面绝大部分保持无彩色:白色字体、石墨色边框、墨黑表面,让紫色强调像具有功能的电能,而非装饰。排版自信而现代:Satoshi Variable以舒适字重承担产品语气,Clash Grotesk则在首屏标题的展示尺度中以紧凑字间距突出。组件有明确边界并富有建筑感:卡片使用石墨色极细边框,胶囊和输入框以8-12px圆角柔化,主要操作则具有标志性的紫色外辉光阴影,使其仿佛发出光芒,而不是坐落在某个表面上。

查看原始网站

使用规范

建议采用

  • #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元素引入渐变;渐变只存在于首屏光晕和标志图形中。