Innjoy 设计规范 Vivid

色彩

单主色锁定：交互 / 品牌主色只有 grape 葡萄紫。sky / bubble / sun / leaf / tanger 是点缀，不当全局主色。同语义同色：正向 /「已验证」一律 leaf，焦点金额 $100 一律 sun-300 pill。

主色 · grape（葡萄紫。品牌主色 = 500 按钮 / 600 hover、深块）

点缀 · 五彩家族（克制、成体系。仅展关键档）

中性 · stone（暖灰）

正文 text-stone-900，次要 text-stone-500，三级 text-stone-400，描边 stone-900/10。@nuxt/ui：primary: grape · neutral: stone。

四模态区分点（仅小圆点级，不做主视觉）

图像 = bubble · 视频 = sky · 音乐 = sun · 对话 = grape。

浅区为主 + 深块锚点（grape-600 / sky-950）

字体

主字体 Plus Jakarta Sans（友好圆润几何无衬线）：标题 / 正文 / UI 同族，靠字号、字重、紧字距拉层级。Geist Mono 仅用于真实代码（Sdk）。字重档位：标题 extrabold · 按钮 bold · pill / 标签 / eyebrow semibold · 导航 / 正文 medium。

eyebrow 小标签：text-[12px] font-semibold uppercase tracking-[0.16em]；浅区 text-grape-600，深块 text-sun-300。

形状 · 圆角（友好圆润）

圆角锁定三档 + 专用：按钮 / pill / 头像 = rounded-full，卡片 / section = rounded-3xl，小卡 / 输入 / 图标块 = rounded-2xl；主角卡（Hero 主图 / Why 凭证卡）= rounded-[1.75rem]。

阴影

浅面元素一律走暖中性双层柔和阴影 .shadow-soft / .shadow-soft-sm（外层 ≤0.12 透明、强柔化），叠在暖白底 / 鲜艳卡上都不发脏发闷。禁用 Tailwind 默认 shadow-lg/xl/md（纯黑、发冷脏）与任何旧色 tinted 阴影。悬起时 .lift 把阴影柔和加深一档（悬此卡试试）。

动效

缓动统一 cubic-bezier(0.16,1,0.3,1)：微交互快（200-300ms），卡片 .lift 0.4s，图片缩放慢（500ms）。hover 一律走 .lift / .press，勿再手写零散 hover:-translate-y-*。全部尊重 prefers-reduced-motion。

• .lift
  卡片 hover 柔顺上抬 -6px + 阴影柔和加深一档
• .press
  可点击元素按下回弹（scale .97，触感）
• .float-soft / -2 / -3
  浮动小元素错峰轻柔漂浮
• .spotlight
  鼠标跟随柔光（深块卡，配 useMicroInteractions().spotlight）
• .cta-pulse
  领额度按钮葡萄紫呼吸 + 斜光扫过
• [data-reveal]
  滚动揭示 / 错峰揭示（[data-reveal-stagger]）

可交互演示（悬停 / 点击 / 移动光标）

区块色块节奏

页面 = 通栏满铺、亮区为主 + 鲜艳纯色块点缀的连续色块流。深块（grape-600 / sky-950）作鲜艳 / 沉稳锚点；紫色深块全站 ≤ 2 处，避免「紫重」。section py-24 md:py-32，容器 max-w-[1280px] px-6。

签名组件

鲜艳能力卡（整片纯色 + 模态名 pill + 角标去试试）

对话

和顶尖模型聊任何事

去试试

图像

一句话生成大片

视频

音乐

哼一段就出成曲

撞色数据卡（grape 白字 / sky-100 / sun-300 互撞）

轨道凭证卡（同心实环 + grape 柔光 + 中心「一个 key」白卡）

模型墙卡（grape-600 深块 + .spotlight 鼠标跟随柔光 + 多彩模态点）

数据 pill / 浮动胶囊（rounded-full + 撞色图标圆 + 大数字）

按钮（grape 主 · 反白深块按钮 · 角标次 CTA）

媒体评价条（重叠缩略图 + ★ Verified leaf 胶囊）

Verified12,000+ 创作者

代码块（Geist Mono 仅此场景 · sky-950 深块）

from openai import OpenAI
client = OpenAI(base_url="https://api.innjoy.ai/v1")

CTA 终块（纯 grape-600 + 同心细环 + 一暖一冷大柔光）