雷蒙三十品牌設計系統

Color System

色彩系統

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

Primary

#21A4B1

主要 CTA、連結、品牌識別

Primary Light

#2ec4d4

Hover 狀態、漸層終點

Primary Dark

#007481

深色強調、按鈕漸層

Superindividual

#E77E47

次要 CTA、活動、超級個體

Superindividual Light

#F6B85A

溫暖提示、淺色背景

Superindividual Dark

#C85A2F

深色強調

Cream

#F7F5F0

網頁主背景（米色）

Dark

#111111

深色區塊、封面背景

Text Dark

#1a1a1a

主要文字

Text Medium

#555555

次要文字

Text Light

#888888

輔助文字、標籤

White

#FFFFFF

卡片背景

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 應用」的知識品牌。我們相信，透過聰明的工具與方法，每個人都能成為超級個體。

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;

Shadows & Radius

陰影與圓角

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

陰影系統

Soft

subtle hover, 輕量元素

Medium

一般元素懸浮

Card

卡片預設陰影

Strong

強調元素、彈窗

Elevated

最高層級、Modal

圓角系統

Small

8px — 標籤、徽章

Medium

16px — 按鈕、輸入框

Large

24px — 卡片

Extra Large

32px — Hero 區塊

Components

常用組件

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

Primary Button

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

卡片標題

卡片內容說明文字

Card

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

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 --superindividual --shadow-card --radius-lg

CSS Variables

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

:root { --primary: #21A4B1; --primary-light: #2ec4d4; --primary-dark: #007481; --superindividual: #E77E47; --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; }

Brand Assets

品牌素材

點擊「複製連結」按鈕即可複製 R2 CDN 圖片網址，可直接用於網頁、文章、簡報。

彩色 Logo（圓角）

適用：App Icon、社群頭像

彩色 Logo（圓形）

適用：大頭貼、圓形框架

橫式 Logo

適用：網站 Header、Badge

白色 Logo

適用：深色背景、封面

Powered by Lifehacker

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

Quick Start

TailwindCSS Config

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

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#21A4B1',
          light: '#2ec4d4',
          dark: '#007481',
        },
        superindividual: {
          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'],
      },
    },
  },
}