雷蒙三十品牌設計系統

Color System

色彩系統

品牌色以知識品牌的「理性 Teal」搭配超級個體的「溫暖 Orange」，傳遞專業但有溫度的品牌調性。點擊色票即可複製色碼。

主品牌色 Brand Primary

— 知識、信任、理性

Primary

#21A4B1

--primary

主要 CTA、連結、品牌識別

Primary Light

#2ec4d4

--primary-light

Hover 狀態、漸層終點

Primary Dark

#007481

--primary-dark

深色強調、按鈕漸層

強調色 Accent

— 溫暖、超級個體、行動力

Accent

#E77E47

--accent

次要 CTA、活動 Badge、超級個體

Accent Light

#F6B85A

--accent-light

溫暖提示、表單按鈕、淺色背景

Accent Dark

#C85A2F

--accent-dark

深色強調、Hover 漸層

背景色 Background

— 空間層次、深淺對比

Cream

#F7F5F0

--bg-cream

網頁主背景（溫暖米色）

Neutral

#F5F5F5

--bg-neutral

中性灰底、區塊分隔

White

#FFFFFF

--bg-white

卡片背景、乾淨區塊

Dark

#111111

--bg-dark

深色區塊、封面背景、Premium 質感

文字色 Text

— 閱讀層次、資訊權重

Text Dark

#1a1a1a

--text-dark

主要標題、重要文字

Text Medium

#555555

--text-medium

段落內文、說明文字

Text Light

#888888

--text-light

輔助文字、標籤、備註

柔和色 Tonal Softs

— Pill 膠囊底、分區強調底

Teal Soft

#D6EEF1

--teal-soft

Pill 膠囊底、quote 區塊

Teal Softer

#EBF7F8

--teal-softer

Section strip、區塊分隔

Orange Soft

#FCE6D5

--orange-soft

CTA tag、橘色膠囊底

Yellow Soft

#FDECCB

--yellow-soft

Highlight tag、黃色膠囊底

Typography

字體系統

中英混排：不掛 Inter，拉丁交給中文字型自己內建的那套；中文照場景挑家族。一個 token 對應一個場景，不要憑感覺選 — 完整對照表與取用方式見本區最下方「怎麼拿到這些字型」。

Font Usage · 怎麼拿到這些字型

三種取用方式，看你在做什麼。網頁跟桌面軟體吃的檔案格式不一樣，別拿錯。

一 · 哪個場景用哪套

每一格都是真的用那套字渲染，不是描述。示範用的是子集化版本（十一個 face 合計 612 KB），完整字庫請走上面的 fonts.css。

--font-sans

阿里巴巴普惠體 TC

聰明工作、好好生活

超級個體的品牌設計 · 數位工作術 · AI 應用

開始免費試用

Landing／官網主視覺 · 300 / 400 / 600 / 700 / 800

--font-ui

未來熒黑 Glow Sans TC

Dashboard · Settings

每週電子報訂閱25,000 人

一年期數50 期

雷蒙三十是專注於「數位工作術」與「AI 應用」的知識品牌。

產品 UI／後台／長文內文 · 100–900（含 350 Book）

--font-fallback

思源黑體 Noto Sans TC

font-family: …, fallback

自架字型載入失敗時，這段文字會用備援字顯示。覆蓋最完整、最穩。

自架失敗時的保底 · Google Fonts 全字重，已做 unicode-range 分片

--font-serif

思源宋體 Noto Serif TC

少即是多。先做能交件的版本。

— 封面金句

工具會變，判斷力才是複利。

— 週報引用框

人文 Quote／週報深度標／封面金句 · 300 / 400 / 600 / 700 · 金句刻意不用手寫體，好讀好截圖

--font-mono

更紗黑體等距 Sarasa Mono TC

$ npm run shoot

正在渲染 12 張封面卡…

✓ wp-cover.jpg 完成

// 中文註解跟英文對齊

code block／終端機畫面／技術 tag · 中英 advance 精確 2:1，中文註解不會歪

--font-signature

辰宇落雁體

— 電子報結尾 —

侯智薰雷蒙

雷蒙三十 · 數位工作術

簽名檔 · 300 單一字重，只放署名，不排整段

--font-rounded

源泉圓體 GenSenRounded2 TW

歡迎加入雷蒙三十會員

這裡放課程更新、作業回饋與社群活動。

溫暖社群／導覽卡 · 200 / 300 / 400 / 500 / 700 / 900

--font-pixel

俐方體 11 號 Cubic 11

LEVEL UP

AI Agent Team

復古標籤／開發者梗 · 400 單一字重，字級用 11px 整數倍

--font-display

字魂扁桃體

RAYMOND 30

雷蒙三十

品牌封面主標 · opt-in，不進網頁 h1～h3、不進簡報內頁標題

--font-display-impact

饅頭黑體 MantouSans

AI 一人公司怎麼開始？

YouTube 縮圖／爆發大標 · 400 單一字重，絕對不要下 bold（瀏覽器會合成假粗體把字形弄糊）

一之二 · 為什麼 mono 換成 Sarasa

同一段字，上面是 Sarasa Mono TC，下面是 JetBrains Mono 配中文 fallback。 二十個半形應該剛好等於十個全形——對齊的那組才是對的。

Sarasa Mono TC ／拉丁 0.5em ・中文 1.0em ＝精確 2:1 ✓

12345678901234567890

中文一二三四五六七八

const 品牌色 = '#21A4B1';

// 註解對齊，方格不會歪

JetBrains Mono ＋中文 fallback ／拉丁 0.6em ・中文 1.0em ＝ 1:1.667 ✗

12345678901234567890

中文一二三四五六七八

// 兩行長度對不起來，中英混排的表格與 ASCII 圖都會歪

這是在你這台瀏覽器上實測的 advance width（measureText，1em = 100px）： Sarasa Mono TC 拉丁 50／中文 100；JetBrains Mono 拉丁 60／中文 100（中文其實是掉到思源黑體）。所以 --font-mono 把 Sarasa 排第一位，JetBrains Mono 只留作 fallback—— 混用不會讓中文變好看，只會讓對齊壞掉。用途包含 code block、HTML 做的終端機畫面、以及影片裡的程式呈現。

二 · 三種取用方式

網頁、HTML 投影片、Remotion 影片 → 掛一行 CSS

都是 Chrome 在渲染，直接用 R2 上的 woff2。CORS 已開放全網域，任何站台都能載。

Final Cut／Premiere／DaVinci／Keynote／Figma 桌面版 → 下載安裝包

桌面軟體吃不了 woff2，要系統安裝的 TTF／OTF。這包收了六款字型的桌面常用字重（70 MB），解開全選雙擊就能裝。字魂扁桃體是商業授權，不隨包散布。

下載桌面安裝包（70 MB）

思源黑體／思源宋體 → 走 Google Fonts，不自架

Google 已經幫這兩套做好 unicode-range 分片，只下載頁面命中的那幾片，比自架整包輕得多。桌面要裝的話，Noto Sans TC 的 variable 版一個檔就涵蓋 100–900，比裝七個 CJK otf 省事 — 而且 CJK 版多出來的兩萬多字是日文假名與韓文諺文，不是繁體字，繁中用 TC 版就夠。

三 · 下載字型時的原則

原則	為什麼
有 TTF 就拿 TTF，沒有才用 OTF	woff2 對 TrueType 輪廓有專門的壓縮轉換，CFF（OTF）沒有。全字庫實測阿里巴巴普惠體 TC Regular：TTF→2.68 MB、OTF→3.34 MB（小 20%）；子集化後差距更誇張 — 上面那十格示範各取一百多字，阿里巴巴（TTF 來源）每字約 74 bytes，未來熒黑（OTF 來源）每字約 750 bytes，差一個數量級。桌面安裝兩種都能用，但 TTF 在舊版 Adobe 與 Windows 上相容性更廣。
入庫前先驗身分	讀字型檔的 `name` table family 名與 cmap 字符數，不要信檔名。2026-07 有一次抓「阿里巴巴普惠體」實際下載到 Noto Sans TC（只有 517 字符），整份選型預覽都是錯的。
繁中要挑 TC 版	阿里巴巴官網的「普惠體 3.0」是簡體 GB18030 字符集、大陸標準字形；繁體是獨立家族 `Alibaba Sans TC`（Big5＋HKSCS、19,181 字符、4 字重）。
單一字重的字型不要下 bold	字魂扁桃體、饅頭黑體、俐方體 11 號、辰宇落雁體都只有一個字重，瀏覽器會合成假粗體把字形弄糊。

四 · 重量：中文字型沒有輕的版本

字型	字重數	單一字重 woff2	全字重合計
未來熒黑 Glow Sans TC	9	5.8–6.2 MB	55 MB
源泉圓體 GenSenRounded2 TW	6	6.0–7.6 MB	43 MB
阿里巴巴普惠體 TC	4	2.7 MB	11 MB
辰宇落雁體	1	4.6 MB	4.6 MB
字魂扁桃體	1	4.6 MB	4.6 MB
饅頭黑體 MantouSans	1	1.3 MB	1.3 MB
俐方體 11 號 Cubic 11	1	0.4 MB	0.4 MB

所以規範分層：簡報、影片、設計稿、離線環境用全字庫沒問題；網頁只宣告真正用到的字重，font-display: swap 一定要留著；效能敏感的頁面直接用 --font-fallback。想在 Landing 用自架字又要快，得先做 unicode-range 分片（cn-font-split），目前還沒做。

五 · 簡報字級（`--ms-fs-*`）

em-based，16:9 slide 專用。容器 base clamp(10px, 1.667vw, 22px)，下表 px 值是 960px 寬幻燈片的實際渲染尺寸。

Token	值	@960 約	場景與字型
`--ms-fs-cover`	3.75em	60px	封面主標 · 字魂扁桃體 normal
`--ms-fs-heading`	2.75em	44px	內頁標題 · `--font-heading` 700
`--ms-fs-subtitle`	2.125em	34px	副標 · 700
`--ms-fs-body`	1.75em	28px	內文 · 500
`--ms-fs-aux`	1.5em	24px	輔助訊息 · 500
`--ms-fs-meta`	1.25em	20px	meta／標籤 · 600 uppercase

行高與字距：--lh-tight 1.25（標題）· --lh-cozy 1.5（副標）· --lh-body 1.7（內文，中文要寬，這是品牌標誌）· --track-display 0.02em（Display 中文要鬆一點）。

六 · 完整 token（可直接複製）

--font-sans: 'Alibaba Sans TC', 'Noto Sans TC', -apple-system, sans-serif; /* Landing */ --font-ui: 'Glow Sans TC', 'Noto Sans TC', -apple-system, sans-serif; /* UI・長文 */ --font-fallback: 'Noto Sans TC', -apple-system, sans-serif; --font-heading: var(--font-sans); --font-serif: 'Noto Serif TC', serif; --font-signature: 'ChenYuluoyan 2.0 Thin', cursive; --font-rounded: 'GenSenRounded2 TW', 'Noto Sans TC', sans-serif; --font-pixel: 'Cubic 11', monospace; --font-display: 'zihunbiantaoti', 'Noto Sans TC', sans-serif; /* opt-in */ --font-display-impact: 'Mantou Sans', 'Dela Gothic One', sans-serif; --font-mono: 'Sarasa Mono TC', 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* 2:1 */

沒有 Inter：2026-07-27 拿掉了。這幾套中文字型本身就內建拉丁字母（阿里巴巴普惠體 TC 的拉丁來自 Alibaba Sans、未來熒黑來自 Iosevka 家族），中英混排交給同一套字處理，字面高度與重心天生一致，也少一個外部依賴。

這一頁不掛完整字庫，掛的是 css/fonts-preview.css（十一個 face 合計 612 KB）。阿里巴巴普惠體 TC 是 --font-sans，全站標題與內文都吃它，所以它的子集涵蓋整頁 777 個字（三個字重共 287 KB）；其餘六款只含十格示範用到的一百多字。未來熒黑光一個字重就 91 KB，是同樣字數的阿里巴巴的 6 倍——它是 CFF 輪廓、woff2 沒有對應的壓縮轉換，這也是「有 TTF 就拿 TTF」那條規矩的由來。要拿完整字庫請用上面的 fonts.css，別把它掛在說明頁上：光是為了看示範就讓每位訪客下載 20 MB 不划算。同一套做法（掃出實際用字 → pyftsubset → 子集化 woff2）也適用在你自己的頁面。

Components

常用組件

品牌常用的 UI 元件，含 live preview 和可複製的程式碼片段。

即將推出

方格底 CTA 區塊

32px 方格底 + 品牌雙色透明光暈，適合用於訂閱表單、新書預告、活動報名等需要吸引注意力的 CTA 區塊。

* 此為 preview，表單不會送出

Grid CTA Block 方格底行動召喚

32px 方格 + 雙色透明光暈（橘色 + 青色）— 工程紙質感的 CTA 區塊，已用於超級個體課程頁

.grid-cta { background: /* 橘色光暈 */ radial-gradient(ellipse at 30% 20%, rgba(231,126,71,0.08) 0%, transparent 50%), /* 青色光暈 */ radial-gradient(ellipse at 70% 80%, rgba(33,164,177,0.06) 0%, transparent 50%), /* 水平格線 */ linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px), /* 垂直格線 */ linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px), #f9fafb; background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px, 100% 100%; border-radius: 20px; padding: 3rem; }

Primary Button

主要 CTA：flat 橘色膠囊，hover 深一階＋微上移。不用漸層填充

.btn-primary { padding: 12px 28px; border-radius: 999px; /* --r-pill */ background: var(--action); color: var(--white); font-size: 0.92rem; font-weight: 600; } .btn-primary:hover { background: var(--action-dark); transform: translateY(-1px); }

卡片標題

卡片內容說明文字

Card

白底卡片＋hairline 邊框＋極淡陰影，hover 微上移＋brand 邊框。不放大、不用大投影

.card { background: var(--surface-card); border: 1px solid var(--rule-soft); border-radius: 18px; padding: 24px; box-shadow: var(--shadow-xs); transition: var(--transition); } .card:hover { transform: translateY(-2px); border-color: var(--brand); }

--primary --accent --shadow-xs --radius-lg

CSS Variables

核心變數摘要（與 css/variables.css 同步），可直接貼入專案

:root { --primary: #21A4B1; --primary-light: #2ec4d4; --primary-dark: #007481; --accent: #E77E47; --accent-light: #F6B85A; --bg-cream: #F7F5F0; --text-dark: #3A3A3A; --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --radius-lg: 24px; --font-sans: 'Alibaba Sans TC','Noto Sans TC',sans-serif; --font-heading: var(--font-sans); }

Visual Patterns

品牌視覺模式

從課程頁、Premium 頁面、簡報等上線作品中歸納出的常用視覺手法，確保跨專案一致性。

方格底 Grid Pattern

工程紙質感背景，搭配品牌雙色透明光暈，傳遞「有計畫地建構」的品牌訊息。

用於：CTA 區塊、課程章節頁、簡報章節頁

Brand CIS Menu →

毛玻璃導覽列 Frosted Nav

rgba 背景 + backdrop-filter: blur(20px)，任何背景上都能維持可讀性。

用於：所有頁面的 Fixed Nav

→

層次：hairline ＋極淡陰影

卡片預設 hairline 邊框，最多加 --shadow-xs 極淡陰影；hover 只 translateY(-2px)＋brand 邊框。不放大、不用大投影。

用於：所有可互動卡片（feature、pricing、testimonial）

膠囊按鈕 Pill Buttons

border-radius: 999px 膠囊造型。flat 品牌色＋hover 深一階（--action → --action-dark）；不用漸層填充與彩色 glow。

用於：所有 CTA、導覽連結、標籤按鈕

特色

品牌 vs AI 預設

同一個設計需求，左邊是一般 AI 的預設做法（我們禁用），右邊是雷蒙三十的作法。完整分級規則書見去 AI 設計味規則書。

行動召喚 CTA

anti-slop #01 · 預設靛藍→紫羅蘭漸層直接封殺；CTA 用 flat 品牌橘＋膠囊形，hover 深一階。

一般 AI 預設 ✗

雷蒙三十 ✓

</> 查看程式碼

/* CTA Pill button — §4：flat 品牌橘＋膠囊形，不用漸層與彩色 glow */ .btn-cta { padding: 12px 28px; border: none; border-radius: 999px; /* 膠囊形 */ background: var(--action); /* flat 品牌橘 */ color: #fff; font-weight: 600; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease; } .btn-cta:hover { background: var(--action-dark); transform: translateY(-1px); }

引用／備註 Callout

anti-slop #17（一律禁止） · 圓角＋4px 彩色左邊框 callout 零容忍；真正的引用用素面淡底卡，border 與圓角同一層。

一般 AI 預設 ✗

Note　這是一個備註

Tip　這是一個小技巧

OK　這樣做就對了

雷蒙三十 ✓

「工具是拿來省時間的，不是拿來收藏的。」

Callout 是稀缺品，一頁最多 1-2 個

</> 查看程式碼

/* 引用 Callout — 素面淡底卡；border 與圓角寫在同一層 */ .callout { background: var(--brand-softer); border: 1px solid var(--rule-soft); border-radius: var(--r-md); padding: 1em; line-height: 1.7; } /* 一頁最多 1-2 個；不用 4px 彩色左邊框 */

重點字強調

anti-slop #07 ＋品牌特例 #09 · sans 句子裡挑一個字換 serif 斜體是假優雅；品牌用螢光筆 highlight 墊在重點詞下，一段最多一處。

一般 AI 預設 ✗

把時間留給真正重要的事

雷蒙三十 ✓

把時間留給真正重要的事

一段最多一處

</> 查看程式碼

/* 螢光筆 highlight — 墊在重點詞下，一段最多一處 */ .hl { background: linear-gradient(to top, var(--yellow-soft) 45%, transparent 45%); padding: 0 4px; } /* 動畫版：進場時從左往右畫上去 */ .hl-animated { background: linear-gradient(to top, var(--yellow-soft) 45%, transparent 45%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 0.6s ease; } .hl-animated.is-active { background-size: 100% 100%; }

狀態提示

anti-slop #04/#05 · 藍黃綠紅框架色直出、紅字紅框紅底的同色系狀態框都不用；狀態先靠文字與字重，需要上色時一個品牌色淡底。

一般 AI 預設 ✗

資訊警告成功錯誤

雷蒙三十 ✓

錯誤：找不到這個檔案，先確認路徑再試一次。

已同步 12 個檔案

</> 查看程式碼

錯誤：找不到這個檔案，先確認路徑再試一次。 /* 需要上色時：一個品牌色淡底就夠 */ .note { background: var(--brand-softer); color: var(--brand-dark); border-radius: 6px; padding: 4px 10px; }

標題節奏

anti-slop #10 · 不是每個標題都要戴 uppercase 眉標；section 開場交給字級與留白，pill 帶真資訊才用。

一般 AI 預設 ✗

Features

功能特色

How it works

使用方式

雷蒙三十 ✓

功能特色

v2.1 更新

字級＋留白開場；pill 只在帶真資訊時用

</> 查看程式碼

/* section 開場交給字級與留白，不戴 uppercase 眉標 */ section { margin-top: var(--space-9); } /* 80px 組間大留白 */ h2 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }  v2.1 更新 .tag { background: var(--brand-soft); color: var(--brand-dark); border-radius: 999px; padding: 3px 10px; font-size: 0.66rem; font-weight: 600; font-family: var(--font-mono); }

字級層級

anti-slop #12 · 全頁 14-18px 靠灰階分層是扁平層級；字級刻度要有真對比（≥1.25×）。

一般 AI 預設 ✗

標題只有 16px

內文 14px，只靠灰階分層，掃一眼分不出重點。

雷蒙三十 ✓

標題 28px

內文 15px，字級對比接近 1.9×，重點一眼看到。

</> 查看程式碼

/* 字級刻度要有真對比：相鄰層 ≥1.25× */ h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; } body { font-size: 15px; color: var(--text-medium); } .meta { font-size: 13px; color: var(--text-muted); } /* 28 / 15 ≈ 1.9×，重點一眼看到；不靠灰階硬分層 */

巢狀圓角

anti-slop #21/#22 · 內外同值圓角不同心、框線斷在圓角都是沒做決定；公式：內圓角＝外圓角−內邊距，border 與 radius 寫在同一層。

一般 AI 預設 ✗

內外都 16px
角不同心、框線斷在角落

雷蒙三十 ✓

外 16px − padding 8px
＝內 8px，同心

</> 查看程式碼

/* 巢狀圓角公式：內圓角＝外圓角 − 內邊距，圓角才同心 */ .outer { --r-outer: 16px; border: 1px solid var(--rule); /* border 與 radius 同一層 */ border-radius: var(--r-outer); padding: 8px; } .inner { border-radius: calc(var(--r-outer) - 8px); /* 16 − 8 ＝ 8px */ }

徽章與標籤

anti-slop #23 · 彩色 pill 排排站是假熱鬧；badge 只給真實狀態（版本、庫存），帶資訊才用。

一般 AI 預設 ✗

✨ New 🔥 Hot β Beta ⚡ Fast

雷蒙三十 ✓

AI 工作術熱門課程精選主題免費

EP 042 v2.1 2026-07

</> 查看程式碼

/* 品牌 pill 家族 — §4 Pill/Tag；每顆都帶真資訊（主題、狀態、版本、集數） */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; } .pill.teal { background: var(--brand-soft); color: var(--brand-dark); } /* 主分類（可加 dot） */ .pill.orange { background: var(--action-soft); color: var(--action-dark); } /* 行動、熱門 */ .pill.yellow { background: var(--yellow-soft); color: #8A5A12; } /* 精選、亮點 */ .pill.solid { background: var(--brand); color: #fff; } /* 當前選中 */ .pill.outline { background: transparent; border: 1.5px solid var(--brand); color: var(--brand); } .pill.meta { /* 集數、版本、日期一類 meta */ background: transparent; border: 1px solid var(--rule-soft); color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; }

卡片分組

anti-slop #30 · 卡片套卡片，每層都有底、框、圓角；一個區域一個表面，內部用間距與 hairline 分組。

一般 AI 預設 ✗

三層卡片，每層都有底＋框＋圓角

雷蒙三十 ✓

第一組

組內用間距與對齊

第二組

hairline 分隔，同一個表面

</> 查看程式碼

/* 一個區域一個表面；內部用間距與 hairline 分組 */ .panel { background: var(--bg-white); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; } .panel .group + .group { border-top: 1px solid var(--rule-soft); margin-top: 10px; padding-top: 10px; } /* 不做卡片套卡片：每層都有底＋框＋圓角是 AI 反射 */

間距節奏

anti-slop #31 · 所有元素一律 gap 16px 看不出歸屬；組內緊、組間鬆，間距表達分組。

一般 AI 預設 ✗

全部 16px

雷蒙三十 ✓

組內 8px · 組間 40px

</> 查看程式碼

/* 間距表達分組：組內緊、組間鬆，不要一律 gap 16px */ .group { display: flex; flex-direction: column; gap: var(--space-2); /* 組內 8px */ } .group + .group { margin-top: var(--space-7); /* 組間 48px */ }

深色區塊

anti-slop #06（品牌判準） · 深色區塊用暖炭棕金屬漸層＋金屬光澤 hover；左邊那種 slate 藍黑漸層＋頂部光暈才是要避免的 AI 預設。

一般 AI 預設 ✗

Premium

深色質感區塊

雷蒙三十 ✓

Starter Kit

深色質感區塊

hover 金屬光澤掃過

參考 cc.lifehacker.tw Starter Kit 卡

</> 查看程式碼

/* Starter Kit 金屬感深色卡 — 照抄 cc.lifehacker.tw 的 kit-card */ .metal-card { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(160deg, #3D332A 0%, #2A2420 55%, #1E1A17 100%); } .metal-card h3 { color: #fff; font-weight: 700; } .metal-card .sub { color: rgba(255,210,168,0.75); } /* 暖膚金輔助字 */ /* 光澤跟著滑鼠移動：卡內放一層 absolute glow，JS 寫入光心座標 */ .metal-card .glow { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } // JS：mousemove 時把 radial glow 光心跟到滑鼠位置 card.addEventListener('mousemove', e => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; glow.style.background = `radial-gradient(600px circle at ${x}px ${y}px, rgba(255,255,255,0.15), transparent 60%)`; }); card.addEventListener('mouseenter', () => glow.style.opacity = '1'); card.addEventListener('mouseleave', () => glow.style.opacity = '0');

陰影與懸停

anti-slop #20/#26 · 小卡配巨大彌散陰影、hover 放大都太戲劇；hairline＋--shadow-xs，hover 只微上移。

一般 AI 預設 ✗

小卡大陰影

hover 放大 1.05

雷蒙三十 ✓

hairline＋shadow-xs

hover translateY(-2px)＋brand 邊框

</> 查看程式碼

/* hairline ＋極淡陰影；hover 只微上移 */ .card { border: 1px solid var(--rule-soft); box-shadow: var(--shadow-xs); /* 0 1px 2px rgba(0,0,0,0.04) */ /* transition 只寫需要的屬性，140-220ms */ transition: transform 0.18s ease, border-color 0.18s ease; } .card:hover { transform: translateY(-2px); border-color: var(--brand); } /* 不放大 scale、不用巨大彌散陰影 */

漸層使用

品牌特例 #01/#06 · 禁的是無腦預設漸層；品牌色系內、有方向有理由的克制光暈可以用。

一般 AI 預設 ✗

整卡紫漸層當氛圍

雷蒙三十 ✓

品牌雙色光暈＋方格底

一頁一處重點

</> 查看程式碼

/* Grid CTA 雙色光暈＋方格底 — 品牌色系內、有方向有理由；一頁一處 */ .grid-cta { background: radial-gradient(ellipse at 30% 20%, rgba(231,126,71,0.1) 0%, transparent 50%), /* 橘光暈 */ radial-gradient(ellipse at 70% 80%, rgba(33,164,177,0.08) 0%, transparent 50%), /* 青光暈 */ linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px), var(--bg-cream); background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px, 100% 100%; }

Brand Assets

品牌素材

點擊「複製連結」按鈕即可複製 R2 CDN 網址，可直接用於網頁、文章、簡報。含品牌字體與 Logo 素材。

品牌字體

Logo 素材

Design System

設計系統細節

補充上方各區塊尚未涵蓋的細部規格 — 中英混排、quote / footer 等元件規範，每張預覽獨立渲染，供延展設計時參照。完整 token 預覽卡見預覽卡分頁。

Type

Mixed script

中英混排規則 — CJK + Latin 間距 · 數字與英文走中文字型內建拉丁的 rule book

Components

Quote

兩種版型：soft grey callout + 置中 featured testimonial — 都以 Noto Serif TC " 作為視覺重點

Site footer

現行網站 footer 規範 — 深色底 + 暖米色文字（beige #F4EBE1 系），品牌欄（Logo + tagline + 社群）＋導覽欄＋底部版權條。對齊 cc.lifehacker.tw / works.lifehacker.tw

Quick Start

TailwindCSS Config

直接複製到 tailwind.config.js，一鍵套用品牌設計系統。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#21A4B1',
          light: '#2ec4d4',
          dark: '#007481',
        },
        accent: {
          DEFAULT: '#E77E47',
          light: '#F6B85A',
          dark: '#C85A2F',
        },
        cream: '#F7F5F0',
        dark: '#111111',
      },
      boxShadow: {
        soft: '0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04)',
        card: '0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08)',
        elevated: '0 20px 60px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.1)',
      },
      borderRadius: { sm: '8px', md: '16px', lg: '24px', xl: '32px' },
      fontFamily: {
        sans: ['Alibaba Sans TC', 'Noto Sans TC', 'sans-serif'],
        mono: ['JetBrains Mono', 'Space Mono', 'monospace'],
      },
    },
  },
}

雷蒙三十品牌設計系統

色彩系統

字體系統

一 · 哪個場景用哪套

一之二 · 為什麼 mono 換成 Sarasa

二 · 三種取用方式

網頁、HTML 投影片、Remotion 影片 → 掛一行 CSS

Final Cut／Premiere／DaVinci／Keynote／Figma 桌面版 → 下載安裝包

思源黑體／思源宋體 → 走 Google Fonts，不自架

三 · 下載字型時的原則

四 · 重量：中文字型沒有輕的版本

五 · 簡報字級（--ms-fs-*）

六 · 完整 token（可直接複製）

常用組件

卡片標題

品牌視覺模式

品牌 vs AI 預設

品牌素材

品牌字體

Logo 素材

設計系統細節

Type

Components

TailwindCSS Config

雷蒙三十
品牌設計系統

五 · 簡報字級（`--ms-fs-*`）