Files

pkupuk f6b806617e docs: add research assets, screenshots and guides

Include supplementary documentation, research notes on Lexical/UX, and setup guides.

2026-02-11 11:51:35 +08:00

12 KiB

Raw Blame History

Design Tokens - 恩群數位行銷 (Enchun Digital Marketing)

提取日期: 2026-01-31 來源: Webflow CMS CSS (enchun.webflow.shared.557e15b5a.css) 用途: Payload CMS + Astro 遷移專案

🎨 Color Palette (色彩系統)

Primary Colors (主要色)

Token	Hex	Usage	Tailwind Class
`--color-primary`	#3898EC	Primary blue (主要按鈕、連結)	`bg-[#3898EC]`
`--color-primary-dark`	#0082F3	Primary blue dark (深藍色)	`bg-[#0082F3]`
`--color-primary-light`	#67AEE1	Primary blue light (淡藍色)	`bg-[#67AEE1]`
`--color-primary-hover`	#2895F7	Primary blue hover	`bg-[#2895F7]`

Secondary Colors (次要色)

Token	Hex	Usage	Tailwind Class
`--color-secondary`	#F39C12	Secondary orange (次要橙)	`bg-[#F39C12]`
`--color-accent`	#D84038	Accent orange (強調橙)	`bg-[#D84038]`
`--color-accent-light`	#F6C456	Accent light (粉紅)	`bg-[#F6C456]`
`--color-accent-dark`	#EA384C	Accent dark (深紅)	`bg-[#EA384C]`
`--color-red`	#CF0606	Alert red (警告紅)	`bg-[#CF0606]`
`--color-pink`	#BB8282	Pink (粉紅)	`bg-[#BB8282]`
`--color-rose`	#C48383	Rose (玫瑰)	`bg-[#C48383]`

Neutral Colors (中性色)

Token	Hex	Usage	Tailwind Class
`--color-white`	#FFFFFF	White (白色背景)	`bg-[#FFFFFF]`
`--color-black`	#000000	Black (黑色)	`bg-[#000000]`
`--color-gray-50`	#FAFAFA	Light gray (淺灰背景)	`bg-[#FAFAFA]`
`--color-gray-100`	#F5F5F5	Light gray 1	`bg-[#F5F5F5]`
`--color-gray-200`	#F3F3F3	Light gray 2	`bg-[#F3F3F3]`
`--color-gray-300`	#EEEEEE	Light gray 3	`bg-[#EEEEEE]`
`--color-gray-400`	#DDDDDD	Light gray 4	`bg-[#DDDDDD]`
`--color-gray-500`	#C8C8C8	Mid gray (中灰)	`bg-[#C8C8C8]`
`--color-gray-600`	#999999	Medium gray	`text-[#999999]`
`--color-gray-700`	#828282	Dark gray 1	`text-[#828282]`
`--color-gray-800`	#758696	Dark gray 2	`text-[#758696]`
`--color-gray-900`	#5D6C7B	Dark gray 3	`text-[#5D6C7B]`
`--color-gray-950`	#4F4F4F	Dark gray 4 (深灰)	`text-[#4F4F4F]`

Text Colors (文字顏色)

Token	Hex	Usage	Tailwind Class
`--color-text-primary`	#333333	Primary text (主要文字)	`text-[#333333]`
`--color-text-secondary`	#222222	Secondary text (次要文字)	`text-[#222222]`
`color-text-muted`	#999999	Muted text (弱化文字)	`text-[#999999]`
`--color-text-light`	#758696	Light text (淺色文字)	`text-[#758696]`
`--color-text-inverse`	#FFFFFF	Inverse text (反白文字)	`text-[#FFFFFF]`

Dark Mode Colors (深色模式)

Token	Hex	Usage
`--color-dark-bg`	#2226	Dark background
`--color-dark-surface`	#1A1A1A	Dark surface

Special Colors (特殊色)

Token	Hex	Usage	Tailwind Class
`--color-link`	#3083BF	Link color (連結色)	`text-[#3083BF]`
`--color-link-hover`	#23608C	Link hover	`text-[#23608C]`
`--color-border`	#E2E8F0	Border (邊框)	`border-[#E2E8F0]`
`--color-divider`	**#DDDDDD`	Divider (分隔線)	`border-[#DDDDDD]`

🔤 Typography (字體系統)

Font Families (字體家族)

Token	Value	Usage	Notes
`--font-family-sans`	'Noto Sans TC', 'Quicksand', Arial, sans-serif	Primary sans (主要無襯線)	繁體中文主要
`--font-family-heading`	'Noto Sans TC', 'Quicksand', Arial, sans-serif	Headings (標題)	Noto Sans TC 優先
`--font-family-accent`	'Quicksand', 'Noto Sans TC', sans-serif	Accent (強調)	英文使用 Quicksand

Font Sizes (字體大小)

Token	Value	Usage	Tailwind Class
`--font-size-xs`	0.75rem	Extra small	`text-xs`
`--font-size-sm`	0.875rem	Small	`text-sm`
`--font-size-base`	1rem	Base (16px @ desktop)	`text-base`
`--font-size-lg`	1.125rem	Large	`text-lg`
`--font-size-xl`	1.25rem	Extra large	`text-xl`
`font-size-2xl`	1.5rem	2X large	`text-2xl`
`font-size-3xl`	1.875rem	3X large	`text-3xl`
`font-size-4xl`	2.25rem	4X large	`text-4xl`
`font-size-5xl`	3rem	5X large	`text-5xl`

Font Weights (字體粗細)

Token	Value	Usage	Tailwind Class
`--font-weight-light`	300	Light	`font-light`
`--font-weight-normal`	400	Normal	`font-normal`
`--font-weight-medium`	500	Medium	`font-medium`
`--font-weight-semibold`	600	Semibold	`font-semibold`
`--font-weight-bold`	700	Bold	`font-bold`

Line Heights (行高)

Token	Value	Usage	Tailwind Class
`--line-height-tight`	1.25	Tight	`leading-tight`
`--line-height-snug`	1.375	Snug	`leading-snug`
`--line-height-normal`	1.5	Normal	`leading-normal`
`line-height-relaxed`	1.625	Relaxed	`leading-relaxed`
`--line-height-loose`	2	Loose	`leading-loose`

📏 Spacing (間距系統)

Scale (Tailwind 間頭)

Token	Rem	Px (@16px)	Usage	Tailwind Class
`--spacing-0`	0	0px	None	`p-0`, `m-0`
`--spacing-px`	1px	1px	Pixel	`p-px`
`--spacing-0.5`	0.125rem	2px	`p-0.5`
`--spacing-1`	0.25rem	4px	`p-1`
`--spacing-2`	0.5rem	8px	`p-2`
`--spacing-3`	0.75rem	12px	`p-3`
`--spacing-4`	1rem	16px	`p-4`
`--spacing-5`	1.25rem	20px	`p-5`
`--spacing-6`	1.5rem	24px	`p-6`
`--spacing-8`	2rem	32px	`p-8`
`spacing-10`	2.5rem	40px	`p-10`
`--spacing-12`	3rem	48px	`p-12`
`--spacing-16`	4rem	64px	`p-16`
`spacing-20`	5rem	80px	`p-20`
`spacing-24`	6rem	96px	`p-24`

Container Widths (容器寬度)

Token	Value	Usage
`--container-sm`	640px	Small container
`--container-md`	768px	Medium container
`--container-lg`	1024px	Large container
`--container-xl`	1280px	XL container
`--container-2xl`	1536px	2XL container

📱 Breakpoints (斷點系統)

Responsive Breakpoints (Webflow 原始值)

Breakpoint	Max Width	Device	Font Size	Tailwind Config
`--breakpoint-desktop`	None	Desktop (default)	19px base	`lg` (1024px+)
`--breakpoint-tablet`	991px	Tablet	19px base	`md` (768px+)
`--breakpoint-mobile`	767px	Mobile	16px base	`sm` (640px+)
`--breakpoint-mobile-small`	479px	Small mobile	13px base	`xs` (480px+)

Tailwind CSS v4 配置:

// tailwind.config.mjs
export default {
  theme: {
    extend: {
      screens: {
        'xs': '480px',   // Small mobile (< 479px)
        'sm': '640px',   // Mobile landscape (480px - 767px)
        'md': '768px',   // Tablet (768px - 991px)
        'lg': '1024px',  // Desktop (992px+)
        'xl': '1280px',  // Large desktop
        '2xl': '1536px',  // Extra large
      }
    }
  }
}

Webflow HTML 響體大小調整:

@media (max-width: 991px) { html { font-size: 19px; } }
@media (max-width: 767px) { html { font-size: 16px; } }
@media (max-width: 479px) { html { font-size: 13px; } }

🔲 Border Radius (圓角)

Token	Value	Usage	Tailwind Class
`--radius-none`	0	No radius	`rounded-none`
`--radius-sm`	0.125rem	2px	`rounded-sm`
`--radius`	0.25rem	4px	`rounded`
`--radius-md`	0.375rem	6px	`rounded-md`
`--radius-lg`	0.5rem	8px	`rounded-lg`
`--radius-xl`	0.75rem	12px	`rounded-xl`
`radius-2xl`	1rem	16px	`rounded-2xl`
`radius-3xl`	1.5rem	24px	`rounded-3xl`
`radius-full`	9999px	Full circle	`rounded-full`

💫 Shadows (陰影)

Token	Value	Usage	Tailwind Class
`--shadow-sm`	0 1px 2px rgb(0 0 0 / 0.05)	Small shadow	`shadow-sm`
`--shadow`	0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06)	Default	`shadow`
`--shadow-md`	0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)	Medium	`shadow-md`
`shadow-lg`	0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)	Large	`shadow-lg`
`shadow-xl`	0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)	XL	`shadow-xl`
`shadow-2xl`	0 25px 50px -12px rgb(0 0 0 / 0.25)	2XL	`shadow-2xl`

⏱ Transitions (過渡效果)

Token	Value	Usage
`--transition-fast`	150ms ease-in-out	Fast transitions
`--transition-base`	200ms ease-in-out	Base transitions
`transition-normal`	250ms ease-in-out	Normal transitions
`transition-slow`	350ms ease-in-out	Slow transitions

🎯 Z-Index Scale (層級)

Token	Value	Usage
`--z-dropdown`	1000	Dropdown menus
`--z-sticky`	1020	Sticky header
`z-modal`	1040	Modals
`z-popover`	1060	Popovers
`z-tooltip`	1080	Tooltips

📐 Layout (佈局)

Container (容器)

Token	Value	Usage
`--container-max-width`	1200px	Max content width
`--container-padding`	1.5rem	Side padding (mobile)
`--container-padding-lg`	2rem	Side padding (desktop)

Grid (網格)

Token	Value	Usage
`--grid-columns`	12	Grid column count (Webflow)
`--grid-gutter`	20px	Grid gap (Webflow default)

🔗 Button Styles (按鈕樣式)

Button Type	Background	Text	Border Radius	Padding
Primary	`#3898EC`	White	8px	12px 24px
Secondary	`#F39C12`	White	8px	12px 24px
Accent	`#D84038`	White	8px	12px 24px
Outline	Transparent	`#3898EC`	2px	12px 24px

Hover States:

Primary hover: #2895F7
Secondary hover: #E08E0B
Accent hover: #EA384C

🎨 Category Colors (分類顏色 - 來自 Webflow)

Category	Token	Hex	Badge Color
Google小學堂	`--color-category-google`	#67AEE1 (Light blue)	bg-[#67AEE1]
Meta小學堂	`--color-category-meta`	#8974DE (Purple)	bg-[#8974DE]
行銷時事最前線	`--color-category-news`	#3083BF (Blue)	bg-[#3083BF]
恩群數位最新公告	`--color-category-enchun`	#3898EC (Primary blue)	bg-[#3898EC]

Badge Labels:

Hot (行銷方案): #EA384C (red)
New (行銷放大鏡): #67AEE1 (light blue)

📝 Usage Notes (使用說明)

CSS Variables (CSS 變數)

All tokens are available as CSS custom properties. Use like:

color: var(--color-primary);
background-color: var(--color-gray-50);
font-family: var(--font-family-sans);
padding: var(--spacing-4);

Tailwind CSS Configuration

These tokens map to Tailwind CSS utility classes. Configure in tailwind.config.mjs:

theme: {
  extend: {
    colors: {
      primary: '#3898EC',
      secondary: '#F39C12',
      // ... map all tokens
    },
    fontFamily: {
      sans: ['Noto Sans TC', 'Quicksand', 'Arial', 'sans-serif'],
    },
    spacing: {
      // inherits from Tailwind default
    }
  }
}

Google Fonts Import

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">

Change Log:

Date	Version	Description	Author
2026-01-31	1.0	Initial extraction from Webflow CSS	PM Agent via Design Token Extraction

12 KiB Raw Blame History