設計系統

MICROIP IT Department 的 Design Language 與色彩規範。

"A calming, editorial experience for deep reading."

靈感源自傳統印刷品與編輯排版美學。以暖米色 Warm Parchment 取代高對比純白，搭配克制的互動效果（僅 border/shadow 微變、無 3D tilt），為長時間閱讀的工程師提供最舒適的視覺體驗。

Light Mode — 核心色票

Copied!

Warm Parchment

#F0EEE6

背景

Copied!

Warm Cream

#E8E5DB

備用背景

Copied!

Warm Surface

#F7F5EF

表面 / 卡片

Copied!

Near-Black

#141413

主要文字

Copied!

Cloud Dark

#666663

輔助文字

Copied!

Warm Border

#D5D2C9

邊框 / 分隔線

Accent & Card 色票

Copied!

Book Cloth

#CC785C

主色調

Copied!

Kraft

#D4A27F

Hover 色

Copied!

Manilla

#EBDBBC

卡片色 1

Copied!

Cloud Light

#BFBFBA

卡片色 2

Copied!

Sage Green

#B2C2B9

卡片色 3

Copied!

Ivory Dark

#E5E4DF

卡片色 4

Dark Mode — 核心色票

Copied!

Slate Dark

#141413

背景

Copied!

Slate Medium

#1F1F1E

表面 / 卡片

Copied!

Ivory Light

#FAFAF7

主要文字

Copied!

Cloud Medium

#91918D

輔助文字

Copied!

Slate Light

#333331

邊框

Dark Mode — Card 色票

Copied!

Dark Manilla

#3D3425

卡片色 1

Copied!

Dark Cloud

#33332F

卡片色 2

Copied!

Dark Sage

#2D3B35

卡片色 3

Copied!

Dark Ivory

#2E2E2B

卡片色 4

Copied!

Dark Book Cloth

#3A2A24

卡片色 5

Immersive Dark — 後台專用擴展

更深、更暖的背景色，搭配毛玻璃效果，專用於後台管理介面與登入頁。前台已移除粒子網格（v1.5.44）。

Copied!

Deep Warm Black

#141311

後台背景

Copied!

Warm Charcoal

#1a1815

Sidebar / Alt 背景

Copied!

Dark Surface

#1e1c19

Modal / Drawer 實色

Copied!

Elevated Surface

#2a2724

Hover / Active 表面

Immersive Dark — Glass 表面

Glass Surface

rgba(255,255,255,0.04)

卡片 / 表格 / 面板

Glass Hover

rgba(255,255,255,0.06)

Hover / Active 狀態

Accent Glass

rgba(204,120,92,0.12)

Active nav / 選中狀態

Badge — 語意色彩（admin / status-only）

這 6 色語意系統僅限 admin 後台狀態 / 分類 badge 使用（section colour / difficulty / delete action）。公開站仍然遵守「One accent — Book Cloth #CC785C」原則，body、標題、連結一律不套。

Light Mode

IT 小教室

#e8f0fb · #1a5ca5

技術文件

#e6f4e0 · #2a6b14

入門

#e0f2ed · #0e6050

進階

#faf0d8 · #7a5510

困難

#fae8e2 · #8a3a1a

刪除 / 危險

#fce8e8 · #a03030

Dark / Immersive Mode

IT 小教室

rgba(90,150,230,0.22) · #7ab4f0

技術文件

rgba(100,180,80,0.22) · #8cc45a

入門

rgba(80,190,160,0.22) · #5ac8a5

進階

rgba(230,170,50,0.22) · #f0b840

困難

rgba(220,120,80,0.22) · #f09878

刪除 / 危險

rgba(220,80,80,0.20) · #f09090

Typography — 字體系統

MICROIP IT MICROIP IT MICROIP IT MICROIP IT

Bolder Scale — 實際使用尺級

Hero Title MICROIP clamp(3.5, 9vw, 6.5)rem

Article Title 內部網路存取 clamp(2, 5vw, 3.4)rem

Section Title IT 小教室 clamp(1.75, 3.2vw, 2.5)rem

Body 深入淺出的技術分享與實戰紀錄。 1.02rem / 1.7

Caption FEB 28, 2026 · 5 MIN READ 0.72rem mono

Newsreader — Serif

MICROIP IT

A calming, editorial experience for deep reading.

Logo / 英文標題 — 700
英文內文 / 描述 — 400 italic
用於所有英文文字

Noto Sans TC — Sans-serif

技術文件與操作指南

給所有同仁的日常 IT 教學，讓操作不再困擾你。

中文標題 / UI — 700
中文內文 / 按鈕 — 400-600
主要 UI 字體

JetBrains Mono — Monospace

const theme = 'light';

FEB 28, 2026 · MARTIN · 5 MIN

程式碼區塊 — 400
標籤 / Meta / 日期 — 500
Uppercase + letter-spacing

字體配對示範

Docker 容器化部署實戰指南

From Dockerfile to docker-compose — 完整掌握容器化應用的建構與管理流程。

標題: Noto Sans TC 700
描述: Newsreader 400 italic
中英文混排的典型用法

Components — 元件預覽

Buttons

Hover: translateY(-1px) + shadow
Active: scale(0.98) 物理回饋

Input & Tags

Next.js Docker TypeScript

Callout & Cards

請先確認已安裝 Node.js 18+ 環境。

Card colors:

Blockquote — v1.5.80 (無 side-stripe，改用開場引號)

Great editorial design disappears — you read without noticing the type.

取代 Medium 式 border-left: 3px → 用 ::before 浮貼開場雙引號（U+201C），辨識度更高且不是 AI admin 指紋。

Design Principles — 設計原則

Editorial first

內容為主，互動克制。克制的 hover、微小的 transition、絕不用 3D tilt 搶走讀者注意力。

Warm > Tech

暖米色 Warm Parchment 替代純白，Book Cloth 橘色替代 AI 的藍紫 neon — 讓技術文件也能有雜誌質感。

Typography carries hierarchy

用 weight + color + space 建立層級，不只靠 size。Bolder scale 最大到 6.5rem，但 90% 內容靠 1.02rem body 閱讀。

Content width ~65ch

Body 文章限寬 680px（~65 中文字），卡片允許到 1180px — 符合長文可讀性與列表可掃描性的平衡。

One accent color

整站只有一個 accent：Book Cloth #CC785C。不加第二個強調色、不加 semantic color system — 單色就夠聚焦。

Anti-patterns — 我們不這樣做

Side-stripe borders

border-left > 1px 當 accent

Admin / dashboard AI 指紋。v1.5.80 已清光。用 bg tint + font-weight 或開場引號 cue 代替。

Gradient text

background-clip: text + gradient

為裝飾而裝飾，降低可讀性。標題用 weight + size 建立強度即可。

Inter / Roboto / Arial

預設字型

太常見 → 毫無品牌識別。我們用 Newsreader serif + Noto Sans TC + JetBrains Mono。

Pure #000 / #fff

全黑全白硬邊

自然界沒有絕對黑白，螢幕也不該有。我們用 #141413 + #F0EEE6 微調暖色。

Glassmorphism 濫用

backdrop-blur 到處用

模糊焦點、損耗效能。v1.5.44 已移除 3D tilt + card glow。

Neon / AI purple

霓虹漸層 + 紫藍 palette

Midjourney / Stable Diffusion default 視覺，太 AI 味。堅持單一暖橘 accent。

Spacing — 間距比例

4px

8px

12px

16px

24px

32px

48px

64px

96px

128px

200px