Brand · justsurf.ning

輕鬆工作，
自由生活。

justsurf.ning 是 Ning 的個人品牌，
傳遞數位遊牧的輕鬆感與療癒自由。

01 · Colors

色彩系統

海洋藍 #5B9BAF 主色·按鈕·連結·active

沙棕 #C9B99A 輔色·輔助按鈕·裝飾線條

米白 #F8F5F0 底色·背景

深棕 #3D3530 主要文字·標題

鼠尾草 #A8C5B5 點綴·圖標背景

02 · 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 · 內文

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

03 · 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

04 · Components

按鈕與元件

按鈕

主要外框（outline）主要實心（ocean）輔助實心（sand）

卡片

🌊

數位遊牧日記

在清邁的咖啡館工作，窗外是山，咖啡是甜的。

✦

品牌故事

從金融業出走，帶著一台電腦開始衝浪人生。

05 · Visual Patterns

視覺模式

海浪底紋

海浪背景（品牌意象）以 SVG 波浪做底紋，傳遞衝浪自由感，適用於 Hero 或 CTA 區塊

justsurf.ning 色彩字型元件

毛玻璃導覽列 rgba 背景 + backdrop-filter blur，任何背景上皆可讀

Hover 上浮卡片

多層陰影浮動 hover 時 shadow 加深 + translateY(-3px)，傳遞輕盈互動感

膠囊型按鈕 border-radius: 100px，柔和不銳利，符合療癒輕鬆調性

06 · Brand Assets

品牌素材

justsurf.ning

⏳ Logo 設計進行中

設計意象：海浪——傳遞自由、流動、不設限的生活感

品牌名稱：justsurf.ning（英文，小寫）

此章節待 Logo 定稿後更新為正式素材下載。

07 · Quick Start

CSS 變數

將以下 CSS 貼入你的專案 :root，即可使用 justsurf.ning 完整設計系統。

:root {
  /* ── Colors ── */
  --color-ocean: #5B9BAF;
  --color-ocean-light: 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">