{{ 'fb_in_app_browser_popup.desc' | translate }} {{ 'fb_in_app_browser_popup.copy_link' | translate }}

{{ 'in_app_browser_popup.desc' | translate }}

Feel, then unfold — 30 天肌膚探索 →

Design System

Rill® Design System

Rill® 品牌所有 Shopline 自訂頁面的 UI 設計規範。依據此規範建立頁面可確保品牌視覺一致性，並加速開發與設計溝通。

版本  v1.0 更新  2026 Q2 CSS  rill-standard.css 適用平台  Shopline 新版版型（Desktop First）

色彩系統

Color
品牌色 Brand Colors
Brand 900 --rill-color-brand-900 #491f0f
Brand 800 --rill-color-brand-800 #5e2d1c
Brand 700 --rill-color-brand-700 #6b3320
Brand 600 --rill-color-brand-600 #7f3e27
Active --rill-color-brand-active #5a2b1b
Brand 500 --rill-color-brand-500 #be7235
Accent --rill-color-brand-accent #db811b
Disabled --rill-color-brand-disabled #723722
中性色 Neutral Colors
BG Page --rill-color-bg-page #dedcd4
BG Accent --rill-color-bg-accent #efefdf
BG Gray --rill-color-bg-gray #c9c9c9
Surface --rill-color-surface #ffffff
Text --rill-color-text #222222
Text 2 --rill-color-text-2 #333333
Text Muted --rill-color-text-muted #484848
Border --rill-color-border #cdcdcd
使用時機
色票Variable使用情境
Brand 900--rill-color-brand-900Hero 背景、標題重點色、最高強調
Brand 600--rill-color-brand-600Primary 按鈕背景、預設 CTA
Brand 500--rill-color-brand-500內文連結（in-link）、互動連結色
BG Page--rill-color-bg-page所有 .rill-container 頁面底色
Surface--rill-color-surface卡片、表單、Modal 底色

字體排版

Typography
字型 Font Families
Token字型堆疊用途
--rill-font-body Open Sans · Noto Sans TC 內文、段落、按鈕
--rill-font-heading Open Sans · Noto Sans TC 所有標題（h1–h6）
--rill-font-accent Optima · Nanum Myeongjo 品牌強調用（少量使用）
字級 Type Scale
--rill-text-2xl 28px
段落標題 Section Title
--rill-text-xl 22px
頁面主標題 Page Title
--rill-text-lg 18px
次標題 Subtitle
--rill-text-md 16px
內文段落。與肌膚相處的過程，都有屬於自己的節奏。
--rill-text-sm 14px
輔助說明文字 · 卡片描述 · 標籤
--rill-text-xs 12px
最小文字 · 備註 · 法律聲明
字重 Font Weights
--rill-weight-bold 800
延續日常的選擇
--rill-weight-semibold 600
會員階段與禮遇
--rill-weight-medium 500
第一次探索 Rill®
--rill-weight-regular 400
與肌膚相處的過程，都有屬於自己的節奏。
行高 Line Heights
Token值用途
--rill-line-tight1.3標題（h1–h4）
--rill-line-base1.5介面文字、按鈕、標籤
--rill-line-loose1.7段落內文、FAQ 解答

間距系統

Spacing
間距 token 以 4px 為基礎單位遞增。請使用既定 token，不要使用任意 px 值。
--rill-space-4
4
--rill-space-8
8
--rill-space-12
12
--rill-space-16
16
--rill-space-20
20
--rill-space-24
24
--rill-space-32
32
--rill-space-40
40
--rill-space-48
48
--rill-space-60
60
--rill-space-80
80
--rill-space-100
100
--rill-space-120
120
--rill-space-200
200

形狀 & 陰影

Shape & Shadow
圓角 Border Radius
--rill-radius-sm 4px
--rill-radius-md 8px
--rill-radius-lg 12px
--rill-radius-pill 999px
陰影 Shadow
--rill-shadow-card 0 10px 20px rgba(0,0,0,0.1)
--rill-shadow-soft 0 4px 12px rgba(0,0,0,0.08)

按鈕

Buttons
Primary Button 主要行動
Preview
開始這段關係 登入查看禮遇
<a class="rill-cta-button" href="...">按鈕文字</a> <a class="primary-button" href="...">按鈕文字</a>
Secondary Button 次要行動
Preview
了解更多
<a class="secondary-button" href="...">按鈕文字</a>
Disabled State
Preview
目前無法使用
<a class="primary-button is-disabled">目前無法使用</a>
按鈕寬度：桌機為 inline-flex，手機版自動展開為 width: 100%。若需要多個按鈕並排，外層使用 .rill-cta-buttons flex 容器。

版面佈局

Layout
容器結構
Token / Class值說明
--rill-container-max1600px頁面最大寬度
--rill-content-max600px內文段落最大寬度（rill-section-desc）
.rill-containerwidth: 100%所有區塊的根容器，內含品牌底色
.rill-main-wrapperpadding: 80px 200px 120px桌機版主內容區塊（含左右大間距）
Shopline 平台使用 Desktop First（max-width: 767px 為手機斷點）。每個獨立內容區塊各自包裹於 .rill-container 中，不共用容器。
Responsive Breakpoints
斷點媒體查詢說明
桌機（預設）無 / min-width: 768px主要設計尺寸
平板max-width: 1024px間距縮減
手機max-width: 767px單欄佈局、按鈕全寬、圖片切換

段落結構

Section Structure
Preview

會員階段與禮遇

5 個階段

從初次探索，到日常回訪，Rill® 以不同禮遇承接每一次相處。無論在哪個階段，都能依照自己的節奏，感受日常保養的延續。

<div class="rill-content-section"> <div class="rill-section-head"> <h2 class="rill-section-title">段落標題</h2> <span class="rill-section-meta">輔助說明</span> ← 選填 </div> <p class="rill-section-desc">段落描述文字</p> </div>
Class說明
.rill-content-section段落外層容器，margin-bottom: 80px
.rill-section-headflex 橫排，標題左 + 補充說明右，下有細線
.rill-section-title28px / 500 / 品牌深棕，段落大標
.rill-section-meta14px / muted，右側輔助文字（選填）
.rill-section-desc16px / muted，段落說明，max-width 600px

卡片系統

Cards
精選卡片 rill-card-featured 全圖背景
Preview

生日慶賀

生日當月可獲得最高 NT$300 生日禮金

<a class="rill-card rill-card-featured" href="..."> <div class="rill-card-bg"><img src="..." alt="..."></div> <div class="rill-card-inner"> <h3 class="rill-card-title">生日慶賀</h3> <p class="rill-card-text">描述文字</p> </div> </a>
一般卡片 rill-card-regular 上圖下文
Preview

植感成分介紹

摘自台灣本土天然植物，經過...

<a class="rill-card rill-card-regular" href="..."> <div class="rill-card-img-box"><img src="..." alt="..."></div> <div class="rill-card-body"> <h3 class="rill-card-title">標題</h3> <p class="rill-card-text">說明文字</p> </div> </a>
Token桌機手機
卡片寬度320px280px
卡片高度420px380px
圖片區高度256px200px

標籤導覽

Tags Navigation
Preview
全部 清潔 保濕 精華 防曬
<nav class="rill-tags-nav"> <a class="rill-tag-link is-active" href="#">全部</a> <a class="rill-tag-link" href="#">清潔</a> <a class="rill-tag-link" href="#">保濕</a> </nav>

CTA 行動區

Call to Action
Preview

讓日常選擇，持續被好好承接

每一次選擇、回訪與重新靠近，都會在時間裡慢慢積累。

<div class="rill-cta-section"> <div class="rill-cta-content"> <h2 class="rill-cta-title">標題</h2> <p class="rill-cta-text">說明文字</p> <div class="rill-cta-buttons"> <a class="rill-cta-button" href="...">主要按鈕</a> <a class="secondary-button" href="...">次要按鈕</a> ← 選填 </div> </div> </div>

FAQ 手風琴

FAQ Accordion
FAQ 需搭配 JavaScript 控制展開 / 收合。點擊 .rill-faq-question 切換 aria-expanded 屬性，並動態設定 .rill-faq-answer 的 max-height。
Preview
生日禮金將於生日當日發送至會員帳號，可於結帳時自動折抵使用。有效期限依會員階段而異。
<div class="rill-faq-item"> <button class="rill-faq-question" aria-expanded="false"> 問題標題 <span class="rill-faq-toggle">+</span> </button> <div class="rill-faq-answer"> <div class="rill-faq-answer-inner">解答內容</div> </div> </div>

Modal 彈窗

Modal Overlay
Modal 使用 position: fixed，z-index 99999，預設 display: none。觸發時切換為 display: flex。點擊遮罩或關閉按鈕可收合。
Class說明
.rill-modal-overlay全螢幕遮罩，flex 置中，背景 rgba(0,0,0,0.52)
.rill-modal-box內容框，max-width 800px，max-height 85vh，可垂直捲動
.rill-modal-headerflex 橫排，標題左 + 關閉鈕右
.rill-modal-title18px / 600，需覆蓋 SL 全域 h2 干擾（!important）
.rill-modal-close✕ 按鈕，無背景、無邊框
.rill-modal-table-wrapoverflow-x: auto，水平捲動表格容器（附 scrollbar）
<a class="in-link" href="#" onclick="document.getElementById('myModal').style.display='flex';return false;"> 開啟彈窗 </a> <div class="rill-modal-overlay" id="myModal" onclick="if(event.target===this)this.style.display='none'"> <div class="rill-modal-box"> <div class="rill-modal-header"> <h2 class="rill-modal-title">彈窗標題</h2> <button class="rill-modal-close" type="button" onclick="document.getElementById('myModal').style.display='none'">✕</button> </div> </div> </div>