金魚村 Logo

金魚村品牌指南

Branding Guide — 所有金魚村旗下工具的設計單一真相來源

下載 Brand Kit
Colors

色彩系統

Primary · Secondary · Neutral · Semantic

🎨 主色系 Primary — 金魚橙

gold
#D4A373
按鈕 · 強調文字
dark
#C68B59
hover · active
light
#F0E6D8
淡背景 · 邊框

🌊 輔色系 Secondary — 海洋藍

ocean
#4A90E2
連結 · 次要按鈕
dark
#3578C2
hover · active
pale
#E8F1F5
淡藍背景

📄 中性色系 Neutral

cream
#FBF9F6
頁面背景
dark
#F5F0EA
交替背景
ink
#2D3748
主文字 · Footer
light
#4A5568
次要文字
Typography

字體系統

Noto Sans TC — Google Fonts

Display · H1 · font-black (900) · text-4xl-6xl
金魚村小工具村莊
Section Title · H2 · font-black (900) · text-3xl-5xl
村莊裡的小工具們
Card Title · H3 · font-bold (700) · text-xl-2xl
金魚服藥提醒
Subtitle · H4 · font-bold (700) · text-lg
探索更多工具
Body · p · font-normal (400) · text-base-lg · leading-relaxed

金魚村是一座溫柔的生活小工具村莊。每間小屋都是一個輕巧的 PWA 工具，打開即用，用完即走。

Caption · span · font-normal (400) · text-xs
輔助說明文字 · 狀態標籤 · 版權資訊
Components

UI 元件

按鈕 · 卡片 · 狀態標籤 · 區塊標題

🔘 按鈕 Button

主要按鈕 → 次要按鈕 Ghost 連結

🃏 卡片 Card

rounded-3xl · shadow-lg · border-gold/10

標準卡片

用於 Story Card、Support Card 等大區塊。

rounded-2xl · shadow-sm · border-ink/5

工具卡片

用於 ToolCard，hover 時上浮 + 陰影擴散。

🏷️ 狀態標籤 Status Badge

✅ 已上線 🚧 進行中 💡 規劃中

📐 區塊標題 Section Header

Section Label

這是區塊主標題

這是副標題描述文字，簡潔說明這個區塊的內容。

Download

Brand Kit 下載包

提供給外部協作者或第三方工具開發者使用

📦 包含內容

  • logo/ — logo.svg · logo.png (512) · logo-192.png · logo-512.png
  • colors/ — 色彩色票與 CSS 變數
  • fonts/ — Google Fonts 載入說明
  • templates/ — 新工具 HTML 模板 · sw.js 模板 · manifest.json 模板
  • BRANDING_GUIDE.md — 品牌指南摘要文件
下載 Brand Kit (準備中)

Brand Kit 將於 Phase 4 正式開放下載。目前可從 specs/branding_guide.md 取得完整規範。