Brand · justsurf.ning

輕鬆工作，自由生活。

Color

色彩

品牌色以大海的「療癒藍」為主色，搭配沙灘的「暖沙棕」與鼠尾草的「自然綠」，傳遞療癒自在、輕鬆隨浪的品牌調性。點擊任一色票可複製色碼。

主品牌色 Brand Primary — 療癒、輕鬆、自由感

Primary #5B9BAF --primary 主要 CTA、連結、品牌識別

Primary Light #78B3C7 --primary-light 按鈕 Hover 狀態、漸層終點

Primary Dark #3E7E94 --primary-dark 深色強調、按鈕漸層

輔助色 Accent — 沙灘、溫暖、自然

Sand #C9B99A --color-sand 輔助按鈕、裝飾線條

Sage #A8C5B5 --color-sage 點綴色、圖標背景

Sand Dark #A89478 --color-sand-dark 深色輔助、hover 漸層

背景色 Background — 空間層次、呼吸感

Cream #F8F5F0 --color-cream 網頁主背景

Cream Alt #FAF8F5 --color-bg-alt 卡片、區塊分隔

White #FFFFFF --color-white 純白卡片背景

Border #EDE8E2 --color-border 分隔線、邊框

文字色 Text — 閱讀層次、資訊權重

Dark #3D3530 --color-dark 主要標題、重要文字

Muted #55504C --color-muted 段落內文、說明文字

Light #9A8E86 --color-text-light 輔助說明、標籤、備註

柔和色 Tonal Softs — 膠囊底色、分區強調底

Ocean Soft #DFF0F5 --primary-soft 海藍膠囊底、highlight

Sage Soft #EBF5EF --color-sage-soft 鼠尾草底、自然感分區

Sand Soft #F5EDE2 --color-sand-soft 沙棕膠囊底、暖色區塊

Typography

字型

DM Serif Display · 品牌名稱

justsurf.ning

Plus Jakarta Sans 600 · 英文標題 / 標籤

Brand Identity System

Noto Sans TC 700 · 中文大標題

輕鬆工作，自由生活。

Noto Sans TC 400 · 中文小標題

數位遊牧的生活哲學

Noto Sans TC 300 · 內文

不是逃離，是找到另一種與世界相處的方式。帶著一台電腦和一顆好奇心，讓生活展開不同的可能。

Shadows & Radius

陰影與圓角

Soft --shadow-soft

Medium --shadow-medium

Card --shadow-card

Strong --shadow-strong

Elevated --shadow-elevated

圓角（Border Radius）

SM · 8px --radius-sm

MD · 16px --radius-md

LG · 24px --radius-lg

XL · 32px --radius-xl

Pill · 100px --radius-pill

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);
  --color-sand: #C9B99A;
  --color-cream: #F8F5F0;
  --color-dark: #3D3530;
  --color-sage: #A8C5B5;
  --color-muted: #8A7E76;
  --color-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">