東川實業 Logo

東川實業
品牌設計系統

讓質感，成為日常的一部分。

瀏覽設計規範 ↓
Color System

色彩系統

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

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

文字色

閱讀層次與資訊焦點的文字色規範。點擊卡片可複製對應色碼。

文字色 Text ・ 閱讀層次、資訊焦點
Text Dark
#1A1A1A
--text-dark
主要標題、重要文字
Text Medium
#555555
--text-medium
段落內文、說明文字
Text Light
#888888
--text-light
輔助文字、標籤、備註
Typography

字體系統

中英混排以 Inter + Noto Sans TC 為主體，程式碼用 JetBrains Mono，簡報標題用字魂扁桃體。點擊字型卡片可複製 CSS font-family 設定。

中英混排・Body / Heading
Inter + Noto Sans TC
Dong Chuan
東川實業 2026
font-family: 'Inter', 'Noto Sans TC', sans-serif;
程式碼・Monospace
JetBrains Mono
--primary:
#2C3E50;
font-family: 'JetBrains Mono', monospace;
簡報標題・Display
字魂扁桃體
東川實業
品質工藝
font-family: '字魂扁桃體', 'Noto Serif TC', serif;
/* 需另行安裝字魂扁桃體字型 */
Hero Title
clamp(48px,7vw,72px) / 900
Inter + Noto Sans TC
letter-spacing -0.04em
東川實業
H1 · Section Title 1
clamp(32px,5vw,48px) / 800
Inter + Noto Sans TC
letter-spacing -0.03em
讓質感成為日常的一部分
H2 · Section Title 2
clamp(24px,3.5vw,32px) / 800
Inter + Noto Sans TC
letter-spacing -0.02em
日本優質商品代理
H3 · Section Title 3
clamp(18px,2.5vw,24px) / 700
Inter + Noto Sans TC
letter-spacing -0.01em
品質・工藝・信賴
Body Text
clamp(16px,2vw,18px) / 400
Inter + Noto Sans TC
line-height 1.7
東川實業專注引進日本優質商品，提供台灣經銷商最可靠的代理服務。
Display Title
字魂扁桃體
Weight normal
簡報／封片標題專用
東川實業 品質工藝
Monospace
JetBrains Mono
12px / 400
程式碼、技術標籤
--primary: #2C3E50;
--accent: #B5915A;
Caption
12px / 400
line-height 1.6
株式会社もりさん 原廠授權・Miyabi Note 台灣獨家代理
Label
11px / 700
letter-spacing .14em
DONG CHUAN INTERNATIONAL
Effects

陰影與圓角

5 層陰影 + 4 層圓角建立視覺深度。點擊卡片複製 CSS 變數值。

陰影系統
Soft
subtle hover，輕量元素
Medium
一般元素懸浮
Card
卡片預設陰影
Strong
強調元素、彈窗
Elevated
最高層級、Modal
圓角系統
Small
8px — 標籤、徽章
Medium
16px — 按鈕、輸入框
Large
24px — 卡片
Extra Large
32px — Hero 區塊
Components

常用元件

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

Primary Button
主要行動按鈕・圓角膠囊型
.btn-primary {
  padding: 14px 32px;
  background: var(--primary);
  color: #fff;
  border-radius: 50px;
  font-weight: 600;
}
卡片標題
卡片內容說明文字
Card
白底卡片・shadow-card + hover 上浮
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: transform;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-medium);
}
Glassmorphism
backdrop-blur + rgba
Glass Card
毛玻璃效果，適用漸層／深層背景
.glass-card {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(16px);
  border: 1px solid
    rgba(255,255,255,0.25);
  border-radius: var(--radius-lg);
}
品牌主色 台灣代理 授權認證 已售完 外框標籤
標籤 · Badges
.badge.primary  ·  .accent  ·  .success  ·  .error  ·  .outline
.badge {
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
}
填寫完整名稱以便建立代理合約
表單輸入 · Form Input
.dc-label  ·  .dc-input (focus ring: --primary)  ·  .dc-helper
.dc-input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.dc-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(44,62,80,0.10);
}
VISUAL PATTERNS

品牌視覺模式

從報導頁、產品頁、簡報等上線作品中歸納出的常用視覺手法，確保品牌一致性。

品牌 CIS 頁面
方格底 Grid Pattern
背景質感底紋，搭配品牌雙色透明光暈，增加層次但不搶主角。
用於：CTA 區塊、頁面 Hero 背景
洽談合作
毛玻璃導覽列 Frosted Nav
rgba 背景方格 + backdrop-filter: blur(20px)，任何背景上都能維持清晰。
用於：所有頁面固定 Nav
→
→
多層陰影 + Hover 上浮
卡片預設 shadow-soft，hover 時 translateY(-4~-8px) + shadow-medium，營造漂浮感。
用於：所有互動卡片、pricing、testimonial
立即洽詢
了解更多
Outline
膠囊按鈕 Pill Buttons
border-radius: 50px 膠囊型，Primary 品牌主色 + Secondary 用 outline。
用於：CTA 按鈕、確認類互動
📦
✨
✓
透明品色 Icon 容器
56×56px 圓角方格 + rgba(品牌色, 0.08~0.20) 背景，適合 Feature 圖示。
用於：Feature 區塊、優勢列表 Icon
PREMIUM
深色質感區塊
Premium 深色質感區塊
深黑底 (#1A2530～#111827) + 淺文字 + 金色分隔線，營造高端精品感。
用於：旗艦商品區塊、定價頁深色區
Brand Copy

代理品牌產品文案

用於展示代理品牌的核心文案，包含品牌名稱、主標語與次標語。深色背景搭配品牌金色與米白文字，呈現日式高端質感，適用於官網首頁、品牌介紹頁及行銷素材。

代理品牌名稱
代理品牌產品的主標語
次標語文字佔位、次標語文字佔位、次標語文字佔位、次標語文字佔位、次標語文字佔位、次標語文字佔位、次標語文字佔位、次標語文字佔位、次標語文字佔位、次標語文字佔位。
品牌產品文案票卡
深色背景票卡，由上至下依序排列：品牌名稱（Accent 金色）、主標語（Noto Serif TC）、次標語（半透明米白）。高度隨次標語內容自動撐開。
.copy-card {
  background: var(--primary);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
}
.copy-card-brand {
  font-size: 16px;
  font-weight: 400;
  color: var(--accent);
  line-height: 1.75;
  margin-bottom: 16px;
}
.copy-card-title {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 700;
  color: #FAFAF7;
  line-height: 1.5;
  margin-bottom: 16px;
}
.copy-card-desc {
  font-size: 14px;
  color: rgba(250,250,247,0.5);
  line-height: 1.9;
}
Brand Products

代理品牌的產品

品牌產品票卡用於展示代理品牌的核心商品，以橫向長票卡呈現，交替左圖右文與右圖左文，適合產品頁、品牌介紹頁使用。點擊 Copy 可複製對應 CSS 結構。

Product Image
Brand Name

商品名稱 Placeholder

商品描述文字區塊，說明產品特色與使用情境。此處為佔位符，待實際品牌資訊確認後更新內容。

日本製 生活風格 
.product-card {
  display: flex;
  min-height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  background: var(--surface);
}
.product-image { flex: 0 0 48%; }
.product-content { flex: 1; padding: 40px 48px; }
Product Image
Brand Name

商品名稱 Placeholder

商品描述文字區塊，說明產品特色與使用情境。此處為佔位符，待實際品牌資訊確認後更新內容。

日本製 生活風格 
.product-card--reverse {
  flex-direction: row-reverse;  /* 交替：右圖左文 */
}
代理產品直向票卡 · Vertical Card
Product Image
商品名稱 Placeholder
此商品為代理品牌旗下精選商品，採用日本傳統工藝手工製作，原料嚴選自產地，結合現代設計美學，適合日常生活各種使用情境。每件商品皆經過原廠品質認證，確保消費者獲得最真實的日本職人品質體驗。
代理產品直向票卡 · Vertical Card
上圖下文版型 · 適合品牌介紹、多商品橫列排版
.pcard-v {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.pcard-v-image {
  width: 100%;
  height: 240px;
}
.pcard-v-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}
.pcard-v-desc {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-secondary);
}
Brand Logo

品牌 Logo 素材

東川實業品牌標誌，提供彩色圓角版與去背透明版兩種形式，適用於不同場景。

彩色 Logo（圓角）
適用：App Icon、社群頭像
彩色 Logo（圓形）
適用：大頭貼、圓形框架
橫式 Logo（淺色）
適用：網站 Header、名片、文件頁首
橫式 Logo（深色）
適用：深色頁尾、深色封面、簡報
白色 Logo
適用：深色背景、封面、頁尾
去背透明版
適用：網站 Header、簡報、印刷
深色去背透明版
適用：淺色背景、白底文件、簡報
Powered by 東川實業
適用：工具頁、Footer、合作頁面
東川實業官網 QR Code
官網 QR Code
適用：名片、DM、印刷品、簡報
Partner Brand

代理品牌 Logo

東川實業目前代理品牌的官方識別標誌，供行銷素材、DM、官網合作頁面等場景使用。

もりさん MORISAN KYOTO
株式会社もりさん
京都 西陣織 MORISAN KYOTO
台灣總代理：東川實業有限公司
適用：DM、合作頁面、經銷商素材
もりさん MORISAN KYOTO White
株式会社もりさん（白色版）
京都 西陣織 MORISAN KYOTO
適用：深色背景、深色 DM、夜間模式素材
CSS Tokens

設計 Token 匯出

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

--primary
--accent
--shadow-card
--radius-lg
/* 東川實業 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', 'Noto Sans TC', sans-serif;
  --font-display:    '字魂扁桃體', 'Noto Serif TC', serif;

  /* Shadow — dual-layer */
  --shadow-soft:     0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-card:     0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  --shadow-medium:   0 12px 40px rgba(0,0,0,0.13), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-strong:   0 16px 48px rgba(0,0,0,0.14), 0 6px 16px rgba(0,0,0,0.09);
  --shadow-elevated: 0 20px 60px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.10);

  /* Border Radius */
  --radius-xs:       6px;
  --radius-sm:       10px;
  --radius-md:       16px;
  --radius-lg:       24px;
  --radius-xl:       32px;
  --radius-full:     9999px;
}