设计规范.

阿栗AI

浅色背景 / 墨黑字形＋蓝色机器人 i

阿栗AI

深色背景 / 纯品牌蓝字标＋浅色站名

UI 设计资源 · 阿栗形象

同一个阿栗，不同的日常。按用途选择形象，预览并下载透明 PNG。

下载完整素材包 ↓

全部12品牌标识3平面阿栗8立体阿栗1

预览背景浅底深底

阿栗 · 欢迎

PNG

首页欢迎、产品介绍

1254 × 1254
透明背景下载 PNG ↓

阿栗 · 会员

PNG

会员选购、商品介绍

1254 × 1254
透明背景下载 PNG ↓

阿栗 · 开发

PNG

AI 中转站、开发者服务

1254 × 1254
透明背景下载 PNG ↓

阿栗 · 阅读

PNG

接入文档、学习引导

1254 × 1254
透明背景下载 PNG ↓

阿栗 · 帮助

PNG

联系我们、服务帮助

1254 × 1254
透明背景下载 PNG ↓

阿栗 · 完成

PNG

完成提示、成功状态

1254 × 1254
透明背景下载 PNG ↓

阿栗AI · 黑蓝标识

PNG

浅色背景、标准品牌组合

1774 × 887
透明背景下载 PNG ↓

阿栗AI · 品牌蓝标识

PNG

深色背景、黑色页尾

1774 × 887
透明背景下载 PNG ↓

机器人 i · 图标

PNG

页签、小尺寸入口

1265 × 1243
透明背景下载 PNG ↓

阿栗 · 头像

PNG

头像、轻量品牌识别

1592 × 988
透明背景下载 PNG ↓

阿栗 · 经典工作

PNG

内容插图、辅助说明

1593 × 987
透明背景下载 PNG ↓

阿栗 · 立体形象

PNG

品牌展示、宣传内容

1254 × 1254
透明背景下载 PNG ↓

显示 12 / 12 份素材 · 透明背景 PNG

保留阿栗的黑白轮廓与蓝色领带，按原比例使用。首屏直接展示形象，保持自然留白。

品牌字形、i 顶部机器人与字母间距为固定造型。首屏小牛插图受容器约束，不挤占文字与内容。

• 橙色通常配墨黑文字；品牌蓝上的主操作配白字。
• 黑色页尾和联系悬浮按钮固定使用 #000000，不随主题反转为白色。
• 大片品牌色应有明确功能。形象区只保留容器内的有限色块，不向视口边缘溢出。
• 灰色用于层次，不增加绿色、紫色等新的业务主色。状态必须同时提供文字。

主操作蓝 #2A74DB 配白字的对比度约 4.55:1；品牌橙 #F37021 配墨黑 #19191B 约 5.98:1。数值来自固定色值计算，不等于所有页面已完成视觉验收。

历史变量 --yellow 对应实际品牌橙 #F37021。新增主题色优先使用语义变量，不在业务组件里堆叠临时 HEX。

:root {
  --paper: #ffffff;
  --card: #ffffff;
  --surface: #f8f8fa;
  --subtle: #fafafc;
  --ink: #19191b;
  --body-text: #50505b;
  --muted: #6f6f7b;
  --line: #e1e1e7;
  --accent: #2a74db;
  --accent-pale: #f4f7fc;
  --accent-line: #aac6ee;
  --action-bg: #2a74db;
  --on-accent: #fff;
  --night: #19191b;
  --yellow: #f37021;
}

• 首次按系统主题展示；用户主动选择后跨页面保存。
• 深色模式的链接蓝为 #78ADFA；主按钮底色仍为 #2A74DB，避免白字落在过浅的蓝色上。
• 首页浅蓝信息区为 #EDF3FC，深色为 #18283E；局部链接可用更清楚的对比色。
• 公告在浅色模式为 #19191B，在深色模式为 #272C35，并保留细边线，避免与页面混成一片。

字体栈：Inter、Helvetica Neue、Arial、PingFang SC、Microsoft YaHei、sans-serif。当前页面不额外加载商业字体；字体可用性决定实际回退。

• 普通输入控件约 3px，模型卡片约 4px，工作台卡片约 6px，会员卡片约 8px。
• 边线主要使用 --line；选中、悬停或聚焦时再使用蓝色。
• 阴影集中用于悬浮联系、模态浮层和轻微悬停，不把所有模块做成厚重浮卡。
• 动效通常为 150–200ms；折叠约 280ms；尊重减少动态效果偏好。

• 每个输入有持续可见的 label；placeholder 只给例子，不替代标签。
• 说明输入用途、格式和单位；必填以文字标明，不只依靠星号或颜色。
• 错误同时使用说明文字、字段状态与 aria-invalid，并关联 aria-describedby。
• 涉及 Session、密码和 API 密钥时，不把敏感信息放进无关咨询或前端展示中。
• 查询、筛选与验证反馈不伪装成实际提交；Demo 清楚说明是否保存、发送或扣款。

设计示例，非销售报价。以下商品、价格与状态仅用于展示组件；本页不会创建订单、登录账户或发起支付。

01 / CHATGPT热销

ChatGPT Plus

需提供账号 Session

¥148

付款后自动开通

• 订单页与邮件各存一份
• 不用注册，凭邮箱就能查订单
• 订单内可申请发票

查看商品

原会员卡片

以下为参考会员卡片的设计样例，标题、示例价格、交付说明和权益用于说明排版，不代表当前销售方案；本页按钮仅打开组件演示。

• 会员价格为主要视觉，字段与权益保持固定顺序。
• 模型以供应商分组，分类为文本 / 图片 / 视频，名称完整且容易扫读。
• 模型卡片保持紧凑，补充简短介绍；价格仍展示，复杂参数放入详情。
• 文本按 ¥ / 1M Tokens 展示输入、输出、缓存读取与缓存创建；图片按档位与次计费。
• 未知价格显示「—」，并说明为待配置；不当作 0 或免费。

上述数字是用户提供的计费排版示例，不对应额外新增的正式报价。不能混用 Token 单价、图片次数与视频时长。

表格状态仅为组件样例。金额和时长右对齐，ID 可复制；成功率附样本与时间范围，文本首 Token 延迟和图片 / 视频完成耗时分开说明。

其他复用组件

此页是当前 Demo 的设计基线 v1.2，更新于 2026-10-15。后续修改色值、组件或规则时，同步维护规范与导出文件。