Twinkle AI Labs

TWINKLE AI LABS · DESIGN SYSTEM

Aurora
Ledger.

細微而一致的準則，
讓工具用起來更自在。

從色彩、字體到間距與動態。
將所有產品串成一致的體驗。

探索色彩 設計原則
Aurora Ledger0102 / 02
AaPretendard
為光與數字而設計8 pt
均衡的間距
MIST · 清朗早晨的色彩DUSK · 寧靜夜晚的色彩

切換網站主題，即可在Mist與Dusk之間切換。

色彩模式
2
Token 群組
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完成 Token 體系

    在色彩之外加入不透明度、間距、尺寸、層級、形狀與動態，讓設計決定有共同語言。

  7. 2026-08-23公開設計原則

    記錄每項決定的理由與用法，讓產品增加後仍能維持一致判斷。

  8. 2026-09-25拓展強調色的用途

    紅藍改稱 warm 和 cool。保留色彩，以中性名稱讓各產品賦予適合的意義。