雷蒙三十品牌設計系統

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 + Noto Sans TC 為主體，程式碼用 JetBrains Mono，簡報標題用字魂扁桃體。

Hero Title

clamp(48px, 7vw, 72px)
Weight 900
Letter-spacing -0.04em

聰明工作、好好生活

Section Title

clamp(32px, 5vw, 48px)
Weight 800
Letter-spacing -0.03em

超級個體的品牌設計

Body Text

clamp(16px, 2vw, 18px)
Weight 400
Line-height 1.7

雷蒙三十是一個專注於「數位工作術」與「AI 應用」的知識品牌。我們相信，透過聰明的工具與方法，每個人都能成為超級個體。

Display Title

字魂扁桃體
Weight normal
簡報 / 影片標題專用

一人公司 AI 工作術

簡報字級 · Presentation scale

--ms-fs-* tokens（em-based）· 16:9 slide 專用 · 容器 base clamp(10px, 1.667vw, 22px) · 下列為 960px 寬幻燈片的實際渲染尺寸

Cover · 封面

--ms-fs-cover
3.75em ≈ 60px @ 960
字魂扁桃體 · normal

AI 工作術

Heading · 大標

--ms-fs-heading
2.75em ≈ 44px @ 960
字魂扁桃體 · normal

一人公司的節奏

Subtitle · 副標

--ms-fs-subtitle
2.125em ≈ 34px @ 960
Noto Sans TC · 700

聰明工作、好好生活

Body · 內文

--ms-fs-body
1.75em ≈ 28px @ 960
Noto Sans TC · 500

每週寫電子報給 25,000 人，一年 50 期。

Aux · 輔助

--ms-fs-aux
1.5em ≈ 24px @ 960
Noto Sans TC · 500

非工程師、30 天＿ AI 技能模組 15+

Meta · 標籤

--ms-fs-meta
1.25em ≈ 20px @ 960
Inter · 600 uppercase

EP 042 · 2026-04 · LIFEHACKER.TW

Monospace

JetBrains Mono
程式碼、技術標籤

font-family: 'JetBrains Mono', 'Space Mono', monospace;

Font Stack

完整字體堆疊
可直接複製

--font-sans: 'Inter', 'Noto Sans TC', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Space Mono', monospace; --font-display: 'zihunbiantaoti', 'Noto Sans TC', sans-serif;

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

主要行動按鈕，漸層填充 + 圓角膠囊

.btn-primary { padding: 14px 32px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-radius: 50px; font-weight: 600; }

卡片標題

卡片內容說明文字

Card

白底卡片 + shadow-card + hover 上浮

.card { background: var(--bg-white); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-card); transition: var(--transition); } .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-elevated); }

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: 24px; }

--primary --accent --shadow-card --radius-lg

CSS Variables

完整 CSS 變數定義，可直接貼入專案

:root { --primary: #21A4B1; --primary-light: #2ec4d4; --primary-dark: #007481; --accent: #E77E47; --accent-light: #F6B85A; --bg-cream: #F7F5F0; --text-dark: #1a1a1a; --shadow-card: 0 8px 32px rgba(0,0,0,0.12); --radius-lg: 24px; --font-sans: 'Inter','Noto Sans TC',sans-serif; }

Visual Patterns

品牌視覺模式

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

方格底 Grid Pattern

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

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

Brand CIS Menu →

毛玻璃導覽列 Frosted Nav

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

用於：所有頁面的 Fixed Nav

→

多層陰影 + Hover 上浮

卡片預設 shadow-soft，hover 時 translateY(-4~8px) + shadow-elevated，營造漂浮感。

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

膠囊按鈕 Pill Buttons

border-radius: 50px 膠囊造型。Primary 用品牌漸層 + glow shadow，Secondary 用 outline。

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

透明色 Icon 容器

56×56px 圓角方塊 + rgba(品牌色, 0.08~0.12) 背景，圖標用對應品牌色 stroke。

用於：Feature 區塊、Benefit 卡片、課程章節 icon

Premium

深色質感區塊

Premium 深色區塊

深灰漸層 (#1f2937→#111827) + 淺白文字 + 金色分隔線，營造高端質感。

用於：Black Card 區塊、定價比較、封面區段

Brand Assets

品牌素材

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

品牌字體

字魂扁桃體 .woff2 · 4.6 MB

字魂扁桃體 ZiHunBianTaoTi

適用：簡報標題、影片剪輯標題

@font-face { font-family: 'zihunbiantaoti'; src: url('https://image.lifehacker.tw/brand/ZiHunBianTaoTi.woff2') format('woff2'); font-display: swap; }

Logo 素材

彩色 Logo（圓角）

適用：App Icon、社群頭像

彩色 Logo（圓形）

適用：大頭貼、圓形框架

橫式 Logo

適用：網站 Header、Badge

白色 Logo

適用：深色背景、封面

Powered by Lifehacker

適用：工具頁 Footer、合作頁面

彩色 Logo（無字版）

適用：高解析 master、無文字場景

生活黑客社群 Logo

適用：社群 App Icon、活動視覺

截圖底圖（1:1）

適用：CleanShot 配圖、IG 貼文底

Notion 橫幅

適用：Notion Cover、寬版 Header

截圖底圖（16:9）

適用：CleanShot 截圖底、簡報封底

Design System

設計系統細節

補充上方各區塊尚未涵蓋的細部規格 — 中英混排間距、簡報字級、motion token、pill / quote / author row / icon / lockup 等元件規範，每張預覽獨立渲染，供延展設計時參照。

Type

Mixed script

中英混排規則 — CJK + Latin 間距 · 數字 / 英文用 Inter 的 rule book

Spacing

Scale

8-px 節奏 — --space-1 (4px) → --space-10 (120px)

Motion

Ease & duration

Ease 曲線 + 140 / 220 / 420 ms 時長 — --dur-fast / --dur-med / --dur-slow

Components

Pills & tags

Teal · Orange · Yellow · Meta 膠囊 / 標籤

Quote

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

Author row

Logo · 25K / 15K+ / 6Y 數字用 Inter — 作者 / 數字列

Brand

Lockup

Logo + 雷蒙三十 wordmark 組合規範（Noto Sans TC 700）

Icons

Lucide stroke 1.75 · color inherits currentColor — icon system 規範

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: ['Inter', 'Noto Sans TC', 'sans-serif'],
        mono: ['JetBrains Mono', 'Space Mono', 'monospace'],
      },
    },
  },
}