Mori
DESIGN BOOK · v1.0
「精靈不會離開森林,牠只是搬到你的腦裡。
靜靜記得,牠的森林,有你經過的痕跡。」
本頁是 mori-desktop 視覺系統的單一可信來源。CSS / icon / 文案
都對齊這份。原始設計稿在 docs/design/mori-brand.png。
Mori 是靜靜記得你經過痕跡的精靈,陪伴記憶與意識共生長。 每一段記憶都是她的一部分,持續累積、反思、學習與分享。
圓形葉冠 + Mori 側像 + 太極流動曲線。象徵「環繞守護的記憶 + 持續流動的意識」。
最終版用 徽章式設計:深綠圓盤背景(取自 logo 內部 fill 色 #182622)+
米色 stroke 環跟 Mori 剪影疊上 — 兩種 UI 主題看起來一致。
深綠 disc 跟淺底成強對比 — 識別度高
深綠 disc 跟深底相似但仍有 outline,米色 stroke 清晰
#182622(從 logo 內部抽出),strokes 不動| 檔案 | 用途 |
|---|---|
docs/design/Logo.png | 原始高解設計稿(1254×1254 上下兩半) |
docs/design/mori-logo-light.png | 原 light(深綠 stroke+米色 fill)— 留檔 |
docs/design/mori-logo-dark.png | 原 dark(米色 stroke+深綠 fill)— 徽章上層 source |
docs/design/mori-logo-badge.png | 主版本:深綠 disc + 米色 stroke 疊合 |
docs/design/mori-logo.png | 同 badge(別名) |
docs/sprites/logo.png | 公式書引用版(= badge) |
public/logo.png | frontend 引用版(sidebar 用) |
crates/mori-tauri/icons/{16~256}.png | Tauri bundle 從 badge 下採樣 |
10 個主色,從深森林綠到象牙白。CSS variables 定義在 docs/_book.css
跟未來 src/shell.css :root,改 brand 只動 root。
10 色 palette 中缺「比 forest-deep 更深」的階,brand-3 補上兩階用於 dark theme:
主視窗(main)支援 dark + light 雙 theme。Overlay 視窗
(floating / chat_bubble / picker)永遠走 dark
(transparent + 高對比 glassmorphism)。
Theme 檔在 ~/.mori/themes/*.json,VSCode-like 使用者可自訂:
複製 dark.json 改名 + 改色即可。Active theme 存在 ~/.mori/active_theme
(一行 plain text)。CSS 全用 var(--c-*),切 theme 時 frontend 用
document.documentElement.style.setProperty 覆寫 — 不 reload 視窗,平滑過渡。
| 用途 | CSS var | 色值 |
|---|---|---|
| 主背景 | --c-page-bg | #1f3329 forest-night |
| Sidebar 背景 | --c-sidebar-bg | #172620 forest-shadow |
| Modal / card | --c-surface-bg | #243a31 |
| Input 底 | --c-input-bg | rgba(0,0,0,0.30) |
| 主文字 | --c-text | ivory @ 0.92 |
| 強調 / heading | --c-text-strong | ivory @ 0.98 |
| 副標 / hint | --c-text-muted | ivory @ 0.55 |
| Brand name | --c-brand-text | cream @ 0.95 |
| Active tab bg | --c-active-bg | forest @ 0.22 |
| Active border | --c-active-border | forest-soft @ 0.45 |
| Primary btn bg | --c-primary-bg | forest @ 0.28 |
| Primary btn text | --c-primary-text | cream |
| Focus border | --c-focus-border | forest-soft @ 0.55 |
| Divider / border | --c-divider / --c-border | cream @ 0.08 / 0.10 |
| 用途 | CSS var | 色值 |
|---|---|---|
| 主背景 | --c-page-bg | #F3F0E6 ivory |
| Sidebar 背景 | --c-sidebar-bg | #E6DECA cream |
| Modal / card | --c-surface-bg | #FFFFFF white |
| Input 底 | --c-input-bg | #FFFFFF |
| 主文字 | --c-text | #3B2F2F charcoal |
| 強調 / heading | --c-text-strong | #2C4A3D forest-deep |
| 副標 / hint | --c-text-muted | #7D6B5A brown |
| Brand name | --c-brand-text | #2C4A3D forest-deep |
| Active tab bg | --c-active-bg | forest @ 0.18 |
| Active border | --c-active-border | forest @ 0.55 |
| Primary btn bg | --c-primary-bg | #6A8F72 forest |
| Primary btn text | --c-primary-text | #F3F0E6 ivory |
| Focus border | --c-focus-border | #6A8F72 forest |
| Divider / border | --c-divider / --c-border | beige @ 0.30 / 0.45 |
~/.mori/themes/*.jsonfloating/chat_bubble/picker)永遠 dark,不跟 theme 切theme.ts::applyTheme 把 colors 寫入 :root 的 CSS variables// 複製 ~/.mori/themes/dark.json → my-forest.json
// 改 name + 任何 color value(支援 hex / rgba / hsl / 名色)
{
"name": "My Forest",
"base": "dark",
"colors": {
"page-bg": "#0d1a14",
"primary-bg": "#88AA88",
...其他用 dark.json 的當預設(沒覆蓋的會用 fallback)
}
}
// Config tab → Theme select 就會列出 My Forest所有 CSS variable key 對照 crates/mori-tauri/themes/dark.json(authoritative)。
單色 logo #2C4A3D(系統列淺底)/ #E6DECA(系統列深底)
森之語 Serif
靜謐的森之中,記憶隨年輪累積,我們並肩探索世界的奧秘。
font-family: "Noto Serif TC", "Source Han Serif TC", serif;
森之語 Sans
介面元素、副標、說明文字、按鈕、表單 — 走 sans-serif 求清晰。
font-family: "Noto Sans TC", "PingFang TC", sans-serif;
