Twinkle AI Labs

TWINKLE AI LABS · DESIGN SYSTEM

Aurora
Ledger.

细小而一致的标准，
让工具用起来更舒适。

从颜色、字体到间距与动效。
将所有产品连接成一致的体验。

查看颜色 设计原则
Aurora Ledger0102 / 02
AaPretendard
为光与数字而设计8 pt
均衡的间距
MIST · 清朗早晨的色彩DUSK · 宁静夜晚的色彩

切换网站主题，即可在Mist与Dusk之间切换。

颜色模式
2
令牌分组
7
基础网格
8pt
原则
6

品牌特征

为光与数字而设计

Aurora Ledger 始于2026年8月的首款产品。这个名字承载了我们对界面的两种期待。

  • Aurora

    在暗处指引方向的光

    深紫与亮紫构成品牌特色，自然引导用户关注重要信息和下一步操作。

  • Ledger

    清晰记录复杂数值

    起点是一款投资计算工具。我们始终完整显示数字，让结果优先，并用文字和符号辅助颜色表达变化。

系统的正式名称是Aurora Ledger。产品代码使用Twinkle* 前缀，将品牌与实现保持一致。

基础

按角色选择颜色

colors

使用语义角色代替固定色值。角色随明暗模式调整，保持对比度和品牌特色。鲜明的紫色用于引导下一步操作。

颜色模式 · Mist

背景与表面

  • bg#F8F6FC
  • surface#FFFFFF
  • sunken#F5F4F8
  • lifted#FFFFFF
  • key#FFFFFF
  • divider#EAE4F0

字体

  • text#21182D
  • textSub#71687D
  • textFaint#A79EAF

品牌

  • primary#7040D9
  • accent#7040D9 · 文字
  • primarySoft#EEE7FC
  • gradient→ #8550E4

状态与强调

  • danger#B42318不可撤销的操作
  • warm#D92D20暖色强调
  • cool#2763C4冷色强调

效果

  • glow · primary 20%
  • shadow · 深紫
  • scrim · 52%
  • outlineLifted

颜色模式 · Dusk

背景与表面

  • bg#110D19
  • surface#1B1526
  • sunken#251D32
  • lifted#2C233A
  • key#20182C
  • divider#352A42

字体

  • text#FAF7FF
  • textSub#AEA3BA
  • textFaint#746A80

品牌

  • primary#986CF4
  • accent#B79AFF · 文字
  • primarySoftaccent · 12%
  • gradient→ #8550E4

状态与强调

  • danger#FF9B91不可撤销的操作
  • warm#FF9B91暖色强调
  • cool#8DB9FF冷色强调

效果

  • glow · accent 14%
  • shadow · 黑色
  • scrim · 62%
  • outlineLifted · 无
  • 背景与表面 — Mist 为浅色表面增添紫色暖意。Dusk 采用适合夜间的独立明度与对比度，而非简单反色。
  • 品牌 — primary 用于实心按钮，accent 用于文字、图标和边框。暗色模式下两者需要不同的对比度。
  • 状态与强调 — danger 用于危险操作，warm 和 cool 用于区分信息，含义由文字和图标说明。浅色背景透明度为8%，暗色为12%。

基础

六级强调

alpha

用六档不透明度控制信息层级与深度，让不同产品的强调方式保持一致。

  • strong.88弱化的正文
  • soft.70辅助信息
  • half.50内部分隔线
  • ring.35强调边框
  • tint.20柔和背景与拖动柄
  • wash.08最浅背景 · 暗色 .12

基础

8pt 网格的节奏

spacing

间距以8的倍数为主，2、4、6px仅用于对齐和微调。

  1. tight2
  2. s04
  3. s0h6
  4. s18
  5. s1h12
  6. s216
  7. s2h20
  8. s324
  9. s432
  10. s540
  11. s648

基础

尺寸与形状规范

iconSize · elevation · shapes · controlSize · stroke

图标

  • xs12
  • sm16
  • md20
  • lg26

层级高度

  • raised4标准卡片
  • floating10悬停与浮动元素
  • drawer20抽屉与底部面板

形状

  • small11输入框
  • medium14内部面板与按键
  • large18标准卡片
  • extraLarge24面板与对话框
  • drawer20数字键盘抽屉
  • pill999徽章与胶囊按钮

控件

  • rowHeight48列表默认行高
  • primaryButtonHeight48主要按钮高度
  • keypadKeyHeight52数字键高度
  • keypadGap8按键间距

线条

  • hair1标准分隔线
  • ring1.5焦点与选中状态

交互

快速自然的动效

motion

动效从目的出发。进入和移动时平缓减速，退出时短促加速。

将指针或焦点移到卡片上，对比三种时长。

  • fast150ms
  • base250ms
  • slow350ms

将指针或焦点移到卡片上，对比进入和退出曲线。

  • easecubic-bezier(.25, 1, .5, 1) · 进入或移动的元素
  • exitcubic-bezier(.4, 0, 1, 1) · 快速退出的元素

基础

数字清晰，文字易读

typography · Pretendard

基于 Pretendard 定义数字、标题、正文和标签的15种角色。大字呈现结果，小字补充背景。使用规定的字号与字重，韩语单词不在中间断行。

  • 今天也闪闪发光displayLarge40 · 700 · 1.25 · -0.03em · 主要信息
  • 12条新记录displayMedium36 · 700 · 1.25 · -0.03em · 核心结果
  • 本周变化displaySmall32 · 700 · 1.25 · -0.03em · 摘要标题
  • 开始一个项目吧？headlineLarge28 · 700 · 1.25 · -0.03em · 页面标题
  • 最近活动headlineMedium24 · 700 · 1.25 · -0.02em · 区块标题
  • 2026年8月24日headlineSmall24 · 500 · 1.25 · -0.02em · 辅助标题
  • 新点子titleLarge20 · 700 · 1.25 · -0.02em · 卡片标题
  • 设计评审已完成titleMedium16 · 600 · 1.35 · -0.01em · 条目标题
  • 今天下午3点titleSmall14 · 600 · 1.35 · -0.01em · 小标题
  • 轻松找到所需信息，更专注于重要的事。bodyLarge16 · 400 · 1.65 · 强调正文
  • 更改会自动同步到所有设备。bodyMedium14 · 400 · 1.65 · 默认正文
  • 2分钟前保存bodySmall12 · 400 · 1.35 · 帮助与说明
  • 继续labelLarge14 · 600 · 1.35 · -0.01em · 按钮与标签页
  • 进行中 · 8项labelMedium12 · 500 · 1.35 · 状态与元信息
  • NEWlabelSmall11 · 500 · 1.35 · 徽章与说明文字

原则

清晰界面的六项原则

  • 强烈的视觉效果只突出一个主要操作，每屏只用一个渐变。
  • 状态和变化同时使用文字、图标与颜色表达。
  • 危险色仅用于不可撤销的操作，避免为可恢复的选择制造焦虑。
  • 用间距和对齐表达信息关系，保持结构简洁。
  • 最大的文字用于呈现用户想要的答案，让结果先于输入被看到。
  • 完整显示金额和关键数值。空间不足时，选用规定的较小字号。

历程

记录决定与经验

  1. 2026-08-09第一个界面

    紫色投资计算器原型成为 Aurora Ledger 的起点，准确显示数字是最初的目标。

  2. 早期探索为中性色注入品牌特色

    纯灰色虽简洁却缺少个性，因此在所有中性色中加入少许深紫。

  3. 早期探索恢复有意义的颜色

    全紫色难以区分涨跌，于是依照韩国市场习惯，恢复红涨蓝跌。

  4. 早期探索聚焦操作

    将渐变从大数字移到主要按钮，让用户更容易找到下一步操作。

  5. 2026-08-18扩展为共同设计语言

    确定颜色和对比度规范并用于首款产品，从单一主题发展为所有产品共用的系统。

  6. 2026-08-22完成令牌体系

    在颜色之外加入不透明度、间距、尺寸、层级、形状与动效，让设计决定有共同语言。

  7. 2026-08-23公开设计原则

    记录每项决定的理由和用法，让产品增加后仍能保持一致判断。

  8. 2026-09-25扩展强调色的用途

    红蓝改称 warm 和 cool。保留颜色，用中性的名称让各产品赋予适合的含义。