Brand Identity System

東川實業
品牌設計系統

Dong Chuan International Co., Ltd.
品質・工藝・信賴 — 讓質感，成為日常的一部分。

#2C3E50 Primary
#B5915A Accent
#FAFAF7 Background
#E8E3DB Border
01 — Color System

色彩系統

點擊任一色卡即可複製色碼。以「暮色藍灰」為主色、「和風金」為強調色，搭配溫暖米白底色，呈現日式沉穩質感。

品牌主色 — 暮色藍灰系
淺藍灰 · Light
#5D7A96
--primary-light
次要背景・Hover 狀態
暮色藍灰 · Base
#2C3E50
--primary
品牌主色・Hero 背景・主要按鈕
深夜藍灰 · Dark
#1A2530
--primary-dark
Footer・深色區塊背景
強調色 — 和風金系
淺和金 · Light
#D4AF84
--accent-light
淺色標籤背景・裝飾色
和風金 · Base
#B5915A
--accent
強調色・標籤・重點標示
深琥珀金 · Dark
#8B6D3E
--accent-dark
Active 狀態・強調文字
中性色 — 背景・文字・邊框
溫暖米白
#FAFAF7
--bg
全站底色
純白
#FFFFFF
--surface
卡片・輸入框背景
淡米灰
#E8E3DB
--border
分隔線・卡片邊框
中灰
#6B6B6B
--text-secondary
輔助文字・說明文字
深墨
#1C1C1E
--text
主要內文文字
語意色 — 狀態提示
成功 · Success
#4A8C6A — --success
警告 · Warning
#D4935A — --warning
錯誤 · Error
#C05151 — --error
資訊 · Info
#4A7AB5 — --info
02 — Typography

字型系統

三種字型各司其職。點擊字型卡片可複製 CSS font-family 設定。

標題・Display
Noto Serif TC
東川實業
品質工藝信賴
font-family: 'Noto Serif TC', serif;
內文・Body
Noto Sans TC
東川實業
品質工藝信賴
font-family: 'Noto Sans TC', 'Helvetica Neue', sans-serif;
英文・數字
Inter
Dong Chuan
2024 Quality
font-family: 'Inter', sans-serif;
Display
52px / 700
Noto Serif TC
line-height 1.15
東川實業
H1
36px / 700
Noto Serif TC
line-height 1.25
讓質感成為日常的一部分
H2
28px / 700
Noto Sans TC
line-height 1.3
日本優質商品代理
H3
22px / 600
Noto Sans TC
line-height 1.4
品質・工藝・信賴
H4
18px / 600
line-height 1.5
Miyabi Note 台灣代理
Body L
16px / 400
line-height 1.75
東川實業專注引進日本優質商品，提供台灣經銷商最可靠的代理服務。
Body
14px / 400
line-height 1.75
我們相信每一件好物背後都有職人的用心，這份用心值得被更多人看見。
Caption
12px / 400
line-height 1.6
株式会社もりさん 原廠授權・Miyabi Note 台灣獨家代理
Label
11px / 700
letter-spacing .14em
DONG CHUAN INTERNATIONAL
03 — Effects

陰影與圓角

五層陰影系統建立視覺深度層次，六種圓角定義介面元件形態語言。點擊可複製 CSS 值。

陰影系統
Soft
0 1px 4px
rgba(44,62,80,0.06)
Card
0 2px 8px
rgba(44,62,80,0.08)
Medium
0 4px 16px
rgba(44,62,80,0.10)
Strong
0 8px 24px
rgba(44,62,80,0.14)
Elevated
0 16px 48px
rgba(44,62,80,0.18)
圓角系統
XS
4px
SM
8px
MD
12px
LG
16px
XL
24px
Full
9999px
04 — Components

常用元件

點擊下方程式碼區塊可複製 class 名稱。所有元件基於 8pt 格線系統設計。

按鈕 · Buttons
.btn-primary  ·  .btn-accent  ·  .btn-outline  ·  .btn-ghost
按鈕尺寸 · Button Sizes
.btn.sm (7/14px)  ·  .btn (10/20px)  ·  .btn.lg (14/28px)
品牌主色 台灣代理 授權認證 已售完 外框標籤
標籤 · Badges
.badge.primary  ·  .accent  ·  .success  ·  .error  ·  .outline
日本代理
Miyabi Note
精選日本文具，株式会社もりさん原廠授權。
台灣獨家
品牌核心
東川三支柱
品質・工藝・信賴，是東川選品的唯一標準。
卡片 · Cards
.dc-card (淺色)  ·  .dc-card-dark (深色 / 主色背景)
填寫完整名稱以便建立代理合約
表單輸入 · Form Input
.dc-label  ·  .dc-input (focus ring: --primary)  ·  .dc-helper
導覽列 · Navigation
background: rgba(250,250,247,0.90);  backdrop-filter: blur(10px);
品質
Quality
工藝
Craft
信賴
Trust
品牌三支柱 · Brand Pillars
固定使用 --primary-dark 背景 · --accent 中文色 · Noto Serif TC · 排列順序不可更改：品質 → 工藝 → 信賴
05 — Brand Voice

品牌語氣指南

東川實業的語氣應體現「有質感的專業感」——不過於硬邦邦，但也不輕浮。如同日本職人對待客戶的態度：誠懇、精準、有溫度。

品牌個性關鍵字
極簡 專業 沉穩 有溫度 工藝感 值得信賴 日式質感 精選
✓
Do — 這樣說
  • 「精選自日本職人之手，每件商品皆有其故事。」
  • 「我們相信好物值得被更多人看見。」
  • 「台灣獨家授權代理，品質有保障。」
  • 使用完整句子，句末加句號。
  • 數字用阿拉伯數字，單位加空格：「5 年」「3 個月」
  • 品牌名稱全稱：「Miyabi Note」不縮寫
✗
Don't — 避免這樣
  • 「超便宜！限時搶購！」（過度促銷語氣）
  • 「我們是最好的代理商」（未有據可查的自誇）
  • 使用過多驚嘆號！！
  • 中英夾雜不一致：「super 推薦大家購買」
  • 艱澀的商業術語堆砌
  • 把日本品牌翻成口語簡稱（如「宮比」）
品牌文案範例
「讓質感，成為日常的一部分。」
東川實業深入日本尋訪優質商品，與原廠建立長期信任關係，將每一件值得被看見的好物帶入台灣。我們不追求數量，只選值得的。
06 — CSS Tokens

設計 Token 匯出

複製以下 CSS 變數貼入專案的 :root，即可在任何地方使用東川實業品牌色彩與規格。

/* 東川實業 CIS — CSS Design Tokens */
/* Dong Chuan International Co., Ltd. */

:root {
  /* Primary — 暮色藍灰 */
  --primary-light:   #5D7A96;
  --primary:         #2C3E50;
  --primary-dark:    #1A2530;

  /* Accent — 和風金 */
  --accent-light:    #D4AF84;
  --accent:          #B5915A;
  --accent-dark:     #8B6D3E;

  /* Neutrals */
  --bg:              #FAFAF7;
  --surface:         #FFFFFF;
  --border:          #E8E3DB;
  --text:            #1C1C1E;
  --text-secondary:  #6B6B6B;
  --text-muted:      #9B9B9B;

  /* Semantic */
  --success:         #4A8C6A;
  --warning:         #D4935A;
  --error:           #C05151;
  --info:            #4A7AB5;

  /* Typography */
  --font-serif:      'Noto Serif TC', serif;
  --font-sans:       'Noto Sans TC', 'Helvetica Neue', sans-serif;
  --font-en:         'Inter', sans-serif;

  /* Shadow */
  --shadow-soft:     0 1px 4px rgba(44,62,80,0.06);
  --shadow-card:     0 2px 8px rgba(44,62,80,0.08);
  --shadow-medium:   0 4px 16px rgba(44,62,80,0.10);
  --shadow-strong:   0 8px 24px rgba(44,62,80,0.14);
  --shadow-elevated: 0 16px 48px rgba(44,62,80,0.18);

  /* Border Radius */
  --radius-xs:       4px;
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-full:     9999px;
}