DESIGN SYSTEM

旅乘 Foreveryoung 設計規範

整站共用的色彩、字體、元件與版型規範，供設計與前端工程師接手維護。

01

色彩 Colors

COLOR PALETTE
海軍藍#143072主色・標題/CTA
深海軍藍#0d2050hover 深色
米金#dfb992輔色・強調/裝飾
深米金#c9a576eyebrow 文字
米白#f8f1e9區塊背景
象牙白#fbf6ec頁面底色
墨黑#2e2e2e內文主色
朱紅#c0392b警示/折扣/印章
森綠#2f8a5b成功/正向
線條色#e6dccd邊框/分隔線
使用原則：海軍藍與米金為品牌雙主色，比例約 7:3。大面積用米白/象牙白打底，朱紅與森綠僅用於狀態提示，不可大面積使用。
02

字體 Typography

Noto Serif / Sans TC
H1 大標Serif 900 / 44px
絕倫的身心之旅
H2 標題Serif 700 / 30px
恣意探索日本各地之美
H3 小標Serif 700 / 20px
中文司機・在地嚮導
內文 BodySans 400 / 15px
嚴選 5 年內新車與資深中文司機，從機場到飯店、從早到晚，為每一段旅程量身打造。
EyebrowSans / 12px / 字距
｜FEATURED ・ 特色旅遊｜
字體規則：所有標題使用 Noto Serif TC（襯線）營造旅遊質感；內文與介面使用 Noto Sans TC。eyebrow 小標使用深米金 + 0.25em 字距 + ｜｜包夾。
04

按鈕 Buttons

BUTTONS

主要按鈕

強調 / 社群按鈕

規則：所有按鈕統一 50px 全圓角。主要操作用海軍藍實心，次要用白底藍框，金色用於優惠相關，綠色專屬 LINE。
05

元件 Components

UI ELEMENTS

膠囊篩選 Pills

全部 關東 關西 東北

標籤 Tags

親子推薦 32% off 已完成

Eyebrow 小標

｜MUST VISIT ・ 必訪景點｜

評分星等

★★★★★ 4.9 (218 則評論)
06

圓角・陰影 Tokens

RADIUS / SHADOW
小圓角8px
卡片圓角16px
大圓角24-28px
膠囊50px
卡片陰影y8 b24 .06
浮起陰影y18 b40 .12
07

版型 Layout

LAYOUT RULES

頁面結構

  • 內頁標準：320px Banner + 麵包屑
  • 內容區置中，最大寬 1280px
  • 區塊間白色 / 米白交錯
  • 會員頁：左側 260px sticky 側欄

間距與 RWD

  • 區塊上下 padding 64-110px
  • 卡片內距 24-36px
  • 斷點：980px（平板）/ 880px（漢堡）/ 640px（手機）
  • 手機自動收合為漢堡選單抽屜
一致性：全站共用 header（深藍資訊條 + 白色主導覽）與 footer（4 欄連結 + 聯絡資訊）。eyebrow → 標題 → 內文 → 元件 的垂直節奏貫穿每個區塊。