アイデンティティ
光と数字のためのデザイン
Aurora Ledgerは2026年8月、最初の製品から生まれました。名前には、画面に求める二つの性質を込めています。
Aurora
暗闇で道を示す光
深い紫と明るい紫がブランドを表し、大切な情報と次の操作へ自然に導きます。
Ledger
複雑な値を正確に読む記録
出発点は投資計算ツール。数字を省略せず、結果を先に見せ、変化を色だけでなく言葉や記号でも伝えます。
正式名称はAurora Ledgerです。製品コードではTwinkle*という接頭辞でブランドと実装を結びます。
基礎
色は役割で選ぶ
colors色の値ではなく役割を指定します。ライトとダークで適切な色に変わり、コントラストと個性を保ちます。鮮やかな紫は次の操作を示します。
カラーモード · Mist
背景と面
bg#F8F6FCsurface#FFFFFFsunken#F5F4F8lifted#FFFFFFkey#FFFFFFdivider#EAE4F0
文字
- text#21182D
- textSub#71687D
- textFaint#A79EAF
ブランド
primary#7040D9accent#7040D9 · 文字primarySoft#EEE7FCgradient→ #8550E4
状態と強調
- danger#B42318取り消せない操作
- warm#D92D20暖色の強調
- cool#2763C4寒色の強調
効果
- glow · primary 20%
- shadow · 深い紫
- scrim · 52%
- outlineLifted
カラーモード · Dusk
背景と面
bg#110D19surface#1B1526sunken#251D32lifted#2C233Akey#20182Cdivider#352A42
文字
- text#FAF7FF
- textSub#AEA3BA
- textFaint#746A80
ブランド
primary#986CF4accent#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%です。
基礎
強弱をつくる6段階
alpha6段階の不透明度で情報の優先度と奥行きを調整し、製品を越えて強調の意味をそろえます。
strong.88控えめな本文soft.70補足情報half.50内部の区切りring.35強調する枠tint.20淡い背景とハンドルwash.08最も淡い背景 · ダーク .12
基礎
リズムをつくる8ptグリッド
spacing間隔は8の倍数を基本に。2・4・6pxは位置合わせや微調整に使います。
tight2s04s0h6s18s1h12s216s2h20s324s432s540s648
基礎
大きさと形の基準
iconSize · elevation · shapes · controlSize · strokeアイコン
xs12sm16md20lg26
高さ
raised4標準カードfloating10ホバーと浮遊要素drawer20ドロワーとボトムシート
形
small11入力欄medium14内部パネルとキーlarge18標準カードextraLarge24シートとダイアログdrawer20テンキードロワーpill999バッジとピル型ボタン
コントロール
rowHeight48一覧の標準行高primaryButtonHeight48主要ボタンの高さkeypadKeyHeight52数字キーの高さkeypadGap8キーの間隔
線
hair1標準の区切り線ring1.5フォーカスと選択
操作
素早く自然な動き
motion動きは目的から考えます。表示と移動は穏やかに減速し、退出は短く加速させます。
カードにポインターやフォーカスを合わせ、3つの時間を比べてください。
fast150msbase250msslow350ms
カードにポインターやフォーカスを合わせ、出入りの曲線を比べてください。
easecubic-bezier(.25, 1, .5, 1) · 表示・移動する要素exitcubic-bezier(.4, 0, 1, 1) · 素早く消える要素
基礎
数字も文章も読みやすく
typography · PretendardPretendardで数字・見出し・本文・ラベルの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 · 状態とメタ情報 - NEW
labelSmall11 · 500 · 1.35 · バッジとキャプション
原則
見やすい画面の6原則
- 強い視覚効果は最も重要な操作に集中。グラデーションは1画面にひとつ。
- 状態や変化は色だけでなく、文章とアイコンでも伝えます。
- 危険色は取り消せない操作に限定。やり直せる操作で不安を与えません。
- 情報の関係は余白と整列で表し、構造をシンプルに保ちます。
- 最も大きな文字で、知りたい答えを表示。入力より先に結果が目に入るようにします。
- 金額と重要な数値は省略せず、必要なら定義済みの小さい文字サイズを使います。
歩み
判断と学びを残す
- 2026-08-09最初の画面
投資計算機の紫色の試作画面からAurora Ledgerが誕生。数字を正確に見せることが出発点でした。
- 初期の試み無彩色に個性を
灰色だけでは個性が薄れるため、すべての中間色に深い紫を少し加えました。
- 初期の試み意味のある色を戻す
紫だけでは騰落を区別しにくいため、韓国市場の慣例に合わせて上昇を赤、下落を青に戻しました。
- 初期の試み装飾より操作へ
グラデーションを大きな数字から主要ボタンに移し、次の操作を見つけやすくしました。
- 2026-08-18共通のデザイン言語へ
色とコントラストの基準を確定し、最初の製品に適用。ひとつのテーマが全製品のシステムへ広がりました。
- 2026-08-22トークン体系の完成
色に加え、不透明度・間隔・サイズ・高さ・形・動きを共通の言葉で定義しました。
- 2026-08-23原則を公開
値だけでなく判断の理由と使い方を記録し、製品が増えても同じ基準を保てるようにしました。
- 2026-09-25強調色の用途を広げる
赤と青をwarmとcoolと呼び、色は保ちながら各製品で異なる意味に使えるようにしました。