Design System — LinkComment 某留

01

Theme Colors

品牌色沿用某留 logo 的紅，輔以 logo 標記中的淡藍與淡粉。每個色階都是可直接使用的 Tailwind class，例如 bg-brand-500、text-ink-600、border-line。點一下色票即可複製 token；色塊顯示的永遠是當下主題實際生效的值。

Dark mode — 深色模式

右上角可以切換，或直接在下方選。

深色模式只重新定義 token 的值，元件 class 一律不動。色階在深色下語意是反過來的 —— 50 是最深的底色、 900 是最亮的文字 —— 所以 bg-brand-50 text-brand-700 在兩個主題下都是「柔和底 + 可讀文字」， Blade 不需要寫任何 dark: 。

切換記在 localStorage ，首次繪製前由 inline script 套用，不會閃白。選「跟隨系統」則會即時跟著作業系統的偏好變動。

有三個地方不適用反轉，已個別處理：遮罩改用 bg-backdrop （不能用 ink-950，深色下會變白）； Toast 與 Tooltip 維持刻意反色（深色下是淺底深字）；實心的危險按鈕在深色下壓深一階，白字才有足夠對比。

Brand — 品牌紅

主要行動、連結、選取狀態。品牌色 brand-500 直接取自某留 logo 的 #ee3733，兩個主題共用。

主要行動 / Primary

bg-brand-500

柔和背景 / Soft

bg-brand-50

邊框 / Border

border-brand-200

Accent — 輔助藍

來自 logo 標記，用於次要標示、資訊提示與資料視覺化。

Blush — 淡粉

僅作裝飾用途，不承載語意。

Status — 狀態色

語意固定，不要拿來做裝飾。

success 成功

留言送出、連結新增成功

warning 警告

尚未登入、內容待確認

danger 危險

表單錯誤、刪除留言

info 資訊

提示、說明、Chrome 外掛引導

品牌紅 vs. 危險紅： 品牌是紅色，所以 danger-* 刻意選了更深、彩度較低的紅（#d92d20 vs. #ee3733 ）。主要行動一律用明亮的 brand，錯誤與破壞性操作用深色 danger，並且一定搭配圖示或文字說明，避免只靠顏色分辨。

Neutral — 中性色（暖灰）

偏暖的灰階，與品牌紅搭配時比純灰更自然；深色下整條反轉。

Semantic tokens — 語意別名

頁面骨架直接用這幾個別名，不要硬寫 ink-* 數字。

Token	Tailwind class	淺色	深色	用途
surface	`bg-surface`	#ffffff	#1c1a18	卡片、彈窗、輸入框底色
surface-muted	`bg-surface-muted`	#fafaf9	#131110	頁面底色
surface-sunken	`bg-surface-sunken`	#f5f5f4	#232120	區塊內凹、程式碼區
line	`border-line`	#e7e5e4	#322e2b	一般分隔線與卡片邊框
line-strong	`border-line-strong`	#d6d3d1	#45403c	輸入框、次要按鈕邊框
backdrop	`bg-backdrop`	#0c0a09	#000000	浮層背後的遮罩
ink-900	`text-ink-900`	#1c1917	#f8f5f3	主要文字
ink-600	`text-ink-600`	#57534e	#c2b9b2	次要文字
ink-400	`text-ink-400`	#a8a29e	#938a83	輔助文字、placeholder

02

Layout & Content

頁面主容器固定 max-w-[1200px]，水平留白隨斷點放大。文字級距是 token 化的（text-h1、text-body…），卡片與格線則負責承載連結與留言。

Container — 主容器

.lc-container = mx-auto w-full max-w-[1200px] px-4 sm:px-6 lg:px-8

.lc-container

最大 1200px，內距 16 / 24 / 32px

視窗寬度

基礎

px-4 · < 640px

sm

px-6 · ≥ 640px

lg

px-8 · ≥ 1024px

Type scale — 文字級距

中文字在同樣 px 下視覺較大，行高刻意放寬。

text-display

44 / 1.14 · 700

Hero 標題，一頁最多一個

讓全球資訊網成為留言板

text-h1

32 / 1.25 · 700

頁面標題

Cards — 卡片

.card / .card-header / .card-body / .card-footer / .card-hover

基本卡片

.card + .card-body ，白底、細邊框、極淺陰影。

帶頁首頁尾

12

中間是內容區，頁尾放次要操作。

可點擊卡片

加上 .card-hover ，滑過時陰影與邊框加深。

前往

產品情境：連結卡（首頁列表的主要單位）

Attention Is All You Need

arxiv.org/abs/1706.03762

Machine Learning NLP Transformer

這篇把 RNN 整個換掉，現在回頭看真的是分水嶺。

福 fukuball · 3 小時前

128 則留言 42 人參與

Grid — 格線

以 CSS Grid 為主，卡片列表用 1 / 2 / 3 欄遞增。

卡片列表 · grid gap-5 sm:grid-cols-2 lg:grid-cols-3

item 1

item 2

item 3

內容 + 側欄 · grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px]

主內容

側欄 320px

間距刻度 · 區塊之間 gap-5 ，章節之間 py-10 sm:py-14

1

2

3

4

5

6

8

10

14

03

Base Components

按鈕、標籤、狀態與提示。每個元件都有對應的 class，Blade 直接掛上就好，不需要重寫一次 utility。

Buttons — 按鈕

.btn 為基底，再疊上尺寸（.btn-sm/.btn-md/.btn-lg）與樣式。

樣式

.btn-primary .btn-secondary .btn-soft .btn-ghost .btn-danger .btn-danger-outline .btn-link

尺寸

帶圖示、純圖示與狀態

第三方登入

改版後唯一的登入方式，不再寄驗證信。

Badges — 徽章

表示數量或分類，本身不可點擊。

一般品牌輔助成功警告危險外框

128 已驗證 PDF HTML

Tags — 標籤

可點擊、可篩選，對應 tags / url_tags 資料表。

選中狀態加上 .tag-active 。

Status — 狀態指示

顏色 + 文字，不只靠顏色。

已同步 · 42 則新留言尚未登入，留言將以訪客身分送出抓取失敗，稍後重試未啟用即時連線中

Avatar & Skeleton

留言者頭像與載入佔位。

福 Aa

福林陳 +39

Alerts — 提示

整段訊息，會停留在頁面上；短暫的成功訊息請用 Toast。

安裝 Chrome 外掛

裝了外掛之後，瀏覽任何網頁都能直接留言，不必先回到某留網站。

留言已送出，感謝你的分享。

這個網址禁止內嵌預覽，請直接前往原網頁瀏覽。

無法讀取這個連結

伺服器回應 403，可能需要登入才能存取。

Empty state — 空狀態

還沒有人留言

成為第一個在這個連結上留下想法的人。

Tooltip & Divider

← 滑過按鈕

或

04

Navigations

頁內切換與導覽元件。分頁與下拉選單都可以直接操作：點分頁會換內容，下拉選單按 Esc 或點外面關閉。

Tabs — 分頁切換

底線式用於頁面主要切換，藥丸式用於卡片內的次要切換。

底線式 · .tabs-underline / .tab-underline

依照最後留言時間排序的連結。

藥丸式 · .tabs-pill / .tab-pill

由新到舊。

Top navigation — 主導覽列

就是頁面最上方那一條，sticky + 背景模糊；右側頭像可展開下拉選單。

新增連結登入

未登入狀態：右側顯示 Google 登入按鈕

Theme toggle — 主題切換

兩種樣式共用同一組 data-theme-option，狀態自動同步。

選單式（導覽列用）· <x-theme-menu />

目前：跟隨系統

分段式（設定頁、行動選單用）· <x-theme-segmented />

按鈕帶 data-theme-option="light|dark|system" 就會被接管；要做單鍵對調則用 data-theme-toggle 。

Dropdown menu — 下拉選單

.menu / .menu-item / .menu-separator，可實際展開。

Breadcrumb & Anchor nav

側欄錨點 · .nav-link / .nav-link-active

Pagination — 分頁

對應 Laravel paginator，樣式覆寫在 .page-link 系列。

簡易分頁（留言串用）

第 1 頁，共 27 頁

05

Basic Forms

表單欄位與控制項。所有欄位都是 .input 家族，錯誤狀態只要加 .input-error，說明與錯誤訊息用 .help / .error-text。

Text fields — 文字欄位

顯示名稱

其他人會看到這個名字，隨時可以更改。

搜尋（帶圖示）

圖示用 .input-group-icon ，欄位加 .input-has-icon 。

網址必填

貼上任何網址，某留會自動抓標題、描述與縮圖。

錯誤狀態

請輸入有效的網址，需包含 http:// 或 https://

停用狀態

由 Google 帳號帶入，無法修改。

小尺寸 .input-sm

Textarea — 留言輸入

產品裡最重要的一個欄位。

你的留言

支援換行，送出後仍可刪除。

0 / 2000

Select & Tag input

排序方式

標籤

Machine Learning NLP

按 Enter 或逗號新增，Backspace 刪除最後一個。可以直接試試看。給了 name 之後每個 chip 會帶一個 hidden input，表單才送得出去。

Checkbox

公開我的留言關閉後只有你自己看得到。有人回覆時通知我寄送每週摘要（暫未開放）

Radio

所有人可見知道連結的人可見只有我自己

Switch

可實際切換。

在網頁上顯示留言泡泡

自動抓取網頁縮圖

Form layout — 新增連結

產品情境：直接在網站上新增連結並留言。

Sign in — 登入卡

登入某留

登入後就能留言、新增連結與管理標籤。

或

登入即表示你同意使用條款與隱私權政策。

06

Overlays

浮層元件，全部都可以實際操作：按 Esc 或點背景即可關閉，關閉後焦點會回到原本的觸發按鈕。

Modal — 對話框

以 data-modal 指向 data-modal-panel，不需要額外 JS。

觸發：data-modal="welcome" ；面板：data-modal-panel="welcome" ；任何 data-dismiss 元素都能關閉它。

Drawer — 側滑面板

行動版選單與留言串都用它。

data-drawer → data-drawer-panel

Toast — 浮動通知

短暫出現在右下角，3.2 秒後自動消失。

data-toast="訊息" ，或在 JS 中呼叫 pushToast() 。

LinkComment 設計系統