Brand · justsurf.ning
輕鬆工作，自由生活。
Color
色彩
品牌色以大海的「療癒藍」為主色，搭配沙灘的「暖沙棕」與鼠尾草的「自然綠」，傳遞療癒自在、輕鬆隨浪的品牌調性。點擊任一色票可複製色碼。
主品牌色 Brand Primary
— 療癒、輕鬆、自由感
Primary
#5B9BAF
--primary
主要 CTA、連結、品牌識別
Primary Light
#78B3C7
--primary-light
Hover 狀態、漸層終點
Primary Dark
#3E7E94
--primary-dark
深色強調、按鈕漸層
強調色 Accent
— 沙灘、溫暖、自然
Accent
#C9B99A
--accent
次要 CTA、品牌標籤、暖色點綴
Accent Light
#F5EDE2
--accent-light
溫暖提示、表單按鈕、淺色背景
Accent Dark
#A89478
--accent-dark
深色強調、Hover 漸層
背景色 Background
— 空間層次、深淺對比
Cream
#F8F5F0
--bg-cream
網頁主背景（溫暖米色）
Neutral
#F5F5F5
--bg-neutral
中性灰底、區塊分隔
White
#FFFFFF
--bg-white
卡片背景、乾淨區塊
Dark
#111111
--bg-dark
深色區塊、封面背景、Premium 質感
文字色 Text
— 閱讀層次、資訊權重
Text Dark
#3D3530
--text-dark
主要標題、重要文字
Text Medium
#55504C
--text-medium
段落內文、說明文字
Text Light
#9A8E86
--text-light
輔助文字、標籤、備註
柔和色 Tonal Softs
— 膠囊底色、分區強調底
Sage
#A8C5B5
--color-sage
點綴色、圖標背景
Ocean Soft
#DFF0F5
--primary-soft
Pill 膠囊底、quote 區塊
Sage Soft
#EBF5EF
--color-sage-soft
Section strip、區塊分隔
Accent Soft
#F5EDE2
--accent-light
CTA tag、沙棕膠囊底
Typography
字型
中英混排以 Inter + Noto Sans TC 為主體，品牌名稱 justsurf.ning 使用 DM Serif Display 展現品牌識別。
justsurf.ning
輕鬆工作，自由生活。
療癒自在的品牌設計
justsurf.ning 是 Ning 的個人品牌，傳遞數位遊牧的輕鬆感與療癒自由。不是逃離，而是找到另一種與世界相處的方式——帶著一台電腦和一顆好奇心，讓生活展開不同的可能。
Shadows & Radius
陰影與圓角
5 層陰影 + 4 層圓角建立視覺深度。點擊卡片複製 CSS 變數值。
陰影系統
Soft
subtle hover, 輕量元素
Medium
一般元素懸浮
Card
卡片預設陰影
Strong
強調元素、彈窗
Elevated
最高層級、Modal
圓角系統
Small
8px — 標籤、徽章
Medium
16px — 按鈕、輸入框
Large
24px — 卡片
Extra Large
32px — Hero 區塊
Components
元件
按鈕
主要外框（outline）
主要實心（ocean）
輔助實心（sand）
卡片
數位遊牧日記
在清邁的咖啡館工作，窗外是山，咖啡是甜的。
品牌故事
從金融業出走，帶著一台電腦開始衝浪人生。
Visual Patterns
視覺模式
海浪底紋
海浪背景（品牌意象）
以 SVG 波浪做底紋，傳遞衝浪自由感，適用於 Hero 或 CTA 區塊
justsurf.ning 色彩 字型 元件
毛玻璃導覽列
rgba 背景 + backdrop-filter blur，任何背景上皆可讀
Hover 上浮卡片
多層陰影浮動
hover 時 shadow 加深 + translateY(-3px)，傳遞輕盈互動感
膠囊型按鈕
border-radius: 100px，柔和不銳利，符合療癒輕鬆調性
Brand Assets
品牌素材
justsurf.ning
⏳ Logo 設計進行中
設計意象：海浪——傳遞自由、流動、不設限的生活感
品牌名稱：justsurf.ning（英文，小寫）
此章節待 Logo 定稿後更新為正式素材下載。
Design Details
設計細節
補充品牌規範中的細部規格——中英混排間距、膠囊標籤配色、海浪裝飾元素等，製作內容或與設計師協作時的參照依據。
中英混排
中文遇到英文、數字時，前後各加一個半形空格，保持視覺呼吸感。
✓
justsurf.ning 是 Ning 的個人品牌
✓
數位遊牧 30 天挑戰
✓
用 Notion 管理內容行事曆
✗
justsurf.ning是Ning的個人品牌（沒有空格）
膠囊標籤 Pill
以品牌色系為底，用於內容分類、話題標記、身份標籤。
數位遊牧
生活記錄
工作術
衝浪日記
自由生活
justsurf.ning
海浪裝飾線
以品牌意象「海浪」為基礎的 SVG 裝飾元素，適合用於分隔區塊或 Hero 底部。
主線：海洋藍 #5B9BAF · 副線：沙棕 #C9B99A（60% 透明）
Quick Start
CSS 變數
將以下 CSS 貼入你的專案 :root，即可使用 justsurf.ning 完整設計系統。
:root {
/* ── Colors ── */
--primary: #5B9BAF;
--primary-alpha: rgba(91, 155, 175, 0.12);
--accent: #C9B99A;
--bg-cream: #F8F5F0;
--text-dark: #3D3530;
--color-sage: #A8C5B5;
--text-medium: #8A7E76;
--border: #EDE8E2;
/* ── Typography ── */
--font-brand: 'DM Serif Display', serif;
--font-display: 'Plus Jakarta Sans', sans-serif;
--font-body: 'Noto Sans TC', sans-serif;
/* ── Shadows ── */
--shadow-soft: 0 2px 8px rgba(61, 53, 48, 0.06);
--shadow-medium: 0 4px 16px rgba(61, 53, 48, 0.08);
--shadow-card: 0 4px 24px rgba(61, 53, 48, 0.10);
--shadow-strong: 0 8px 32px rgba(61, 53, 48, 0.12);
--shadow-elevated: 0 16px 48px rgba(61, 53, 48, 0.16);
/* ── Radius ── */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-pill: 100px;
}
字型需在 <head> 引入 Google Fonts：
<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=DM+Serif+Display&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;700&display=swap" rel="stylesheet">