Primary Colors

Primary Colors 用於品牌主色、深色背景與主要介面元素。

元件樣式會優先使用 Semantic Tokens，以維持整體色彩一致性。

Secondary colors

對應 NASA「輔助／強調色」：用於按鈕、導覽漸層、標籤等；應節制使用，避免同一視野多個同等強度焦點。

Background colors

大面積區塊與半透明洗色；相鄰區塊須維持可辨的對比（參考 NASA background 段落）。

Tertiary colors

對應 NASA tertiary：列表列、次要資訊區，不應壓過 Primary／Secondary 層級。

Special state colors

對應 NASA Special state colors：焦點環、造訪過連結、互動遮罩。

Semantic Tokens（介面語意）

Mimosa 在 Color Tokens 之上，額外建立一層 Semantic Tokens。

例如：

--psy-color-secondary-lime

代表品牌識別的色彩定義；而：

--psy-action-primary-bg

代表元件的介面語意。

這樣未來調整品牌色彩時，只需要修改 Color Tokens，既有元件的介面語意仍可維持一致。

以下為常用對照：

Primitive 原料（底層 hex）

僅在此層維護色值；調色時改 primitive，上層 --psy-color-* 與語意 token 會一併連動。

語意漸層（Semantic gradients）

導覽、hero、面板洗色、日期塊與頭像等區塊用；數值定義於 tokens.css。 基本卡片（.card）用 --psy-gradient-card-surface + 淡紫 --psy-surface-card；--psy-gradient-card-wash（洋紅／橘色）僅供 mega menu、上傳區等裝飾。 Carousel 投影片請用 --psy-carousel-slide-bg（#f5faf0），勿疊 card-wash。 通知面板列底色用 --psy-notification-*（淺綠／中性／淺橘），勿用 card-wash 或 cyan／洋紅底。

Text accessibility

對齊 NASA 文件 Text accessibility 段落：內文與可點擊元件應維持足夠對比；下列為本主題預設的「前景／背景」組合 token，自訂時請以對比工具複驗。

字體家族 · Typefaces

字階層級 · Hierarchy

Kicker 在淺底請用 .psy-kicker；深紫區塊用 .psy-kicker-on-dark + 底 --psy-surface-on-dark（標準深紫，勿用 page-deep 近黑紫）。勿在淺底卡片上直接用 --psy-kicker-text。

排版節奏 · Typesetting & Vertical rhythm

內文容器建議控制在 66ch（NASA 建議 50–75 字元）。標題/段落採固定節奏間距，減少頁面密度跳動。

Vertical rhythm 準則（設計語言）

參考近期排版實務：網站不必硬套 baseline grid；優先使用可重複的 spacing scale，並依內容型態使用不同節奏。

• 原則 1：以間距尺度為主，不迷信 baseline。 baseline grid 能幫助對齊，但不會自動帶來和諧；真正的節奏來自對比、層級與重複距離。
• 原則 2：雙尺度策略。 本專案使用同一 token 系統下的雙節奏：內容閱讀節奏（長文區塊，偏寬鬆）與 介面模組節奏（卡片/表單，偏緊湊）。
• 原則 3：長文以行高倍數建立 rhythm。 內文行高為 1.5 時，段落與小節間距優先採 1x / 1.5x / 2x line-height 對應值，避免任意像素。
• 原則 4：UI 元件採 8pt/4pt 軟格線。 模組高度與內距優先落在 4/8/12/16/24/32 類型級距；允許例外，但需能對應既有 token。
• 原則 5：跨平台容忍測量差異。 Web 以 line-height 為自然度量；若與原生 baseline 略有誤差，以可維護一致性優先，不做脆弱微調。

建議檢核：同層級區塊是否使用同一組垂直間距？長文段落是否維持 66ch 與穩定行高？文字是否能放大至 200% 仍保持節奏？

連結與清單 · Links & lists

實作 · Product classes

產品頁可使用 prose-content（66ch 內容寬度）與 rhythm-stack（垂直節奏容器）。清單請用 ul.psy-list（萊姆方塊 ::before）／ol.psy-list--ordered（琥珀編號徽章）；每列 li 請包 <span class="psy-list__text">，以 grid 分欄（::before 第 1 欄、內文第 2 欄）；欄間距為 --psy-list-*-marker-gap + --psy-list-marker-trail（陰影／粗框外溢）。勿用 absolute 壓字。勿裸用 ul／ol。連結狀態沿用 --psy-text-link-*；深底內容區可搭配 link-on-dark。長文區優先採閱讀節奏（line-height 倍數）； 卡片/表單區優先採 token 尺度（4/8pt 家族）。

主要按鈕 · Primary（萊姆綠）

預設、懸停、按下、焦點、停用。焦點列為示意 class，實際請以鍵盤聚焦真實按鈕驗證。

次要按鈕 · Secondary（琥珀黃）

同一頁面上的次要行為（對齊 NASA：primary 帶往下一步、secondary 留在當前脈絡）。

深底上的按鈕 · On dark

對齊 NASA「Buttons on a dark background」：在產品紫底上使用線框反色變體（.ds-btn--inverse），避免與螢光填色按鈕搶眼。 實作時亦可沿用填色 primary／secondary，須注意對比。

大尺寸按鈕 · Big

對齊 NASA big button：全頁唯一或最優先行為時可加 .ds-btn--lg 或 .psy-btn--lg。

實作說明 · Implementation

範例以 <button> 為主；若為連結套用按鈕外觀，可加上與按鈕相同的 class（對齊 NASA：在 <a> 上使用相同 class）。請載入 tailwind.css，元件使用 .psy-btn、.psy-brutal、.psy-btn--primary；文件示例另加 ds-btn／ds-btn--demo-* 補足靜態狀態展示。

<button type="button" class="psy-brutal psy-btn psy-btn--primary">送出／確認</button>
<button type="button" class="psy-brutal psy-btn psy-btn--danger">刪除</button>
<button type="button" class="psy-brutal psy-btn">取消</button>
<a href="/path" class="psy-brutal psy-btn psy-btn--primary">連結長得像按鈕</a>

可訪問性 · Accessibility

節錄並中譯 NASA Buttons 文件要點。

• 使用者以 Tab 聚焦時，按鈕須有可見的焦點狀態（本主題：:focus-visible + lime ring）。
• 勿用 <div> 或純圖片冒充按鈕；螢幕閱讀器未必能辨識為可操作控制項。
• 連結做成按鈕外觀時，記住：空白鍵觸發按鈕、Enter 觸發連結，行為與公告應一致。
• 按鈕群組需補償硬陰影高度（8px）設定垂直間距，避免多排按鈕或上下群組互相遮擋。
• 按鈕群組若後接一般文字或清單（如狀態紀錄），需額外保留 base spacing + 8px 的底部間距，避免陰影壓到下一段內容。

可用性 · Usability

節錄 NASA「When to use / When to consider something else」。

適合使用按鈕

• 全頁或區塊內最重要的動作（下載、註冊、送出等）。
• 主要行為與次要行為並列時，以樣式區分（primary / secondary / inverse）。
• 狀態切換型操作（如 Going / Interested / 取消標記）需用語意化 status chips，並明確區分 selected / default。
• 管理後台同列處置按鈕不得僅有單一 danger；需依風險等級採用 warning/restrict/success/info/neutral/danger 分層，且警示與暫時禁聊不可同色。

可改用連結

• 主要目的是帶使用者到另一頁、而非提交或觸發同一頁行為時。
• 次要、低優先動作可做成文字連結，避免滿版按鈕。

用字

• 標籤盡量短，採句首大寫或句子大小寫一致慣例；以動詞開頭（例如「瀏覽活動」而非冗長名詞片語）。
• 同一視野避免過多顆按鈕，以免層級不清。

基本卡片 · Basic card

單一 .card__body；適合圖表、表格或短表單容器。預設底為 Mimosa 淡紫（ --psy-surface-card），勿疊洋紅／橘色 --psy-gradient-card-wash。

含頁首／頁尾 · Header & footer

.card__header、.card__body、.card__footer 可任意組合；頁尾常用 flex gap-psy-4 排列按鈕。

淡紫次區塊 · Muted body / footer

修飾 class card--body-muted、card--footer-muted 對應 Tailwind UI 的 gray body／gray footer 概念，但 Mimosa 以淡紫階區分（--psy-surface-card-header 略深、 --psy-surface-card-muted 更淺），勿混 cyan／amber 等螢光 secondary 當底。

Well · 內凹區塊

.well 用於卡片內的子區塊或灰底頁面上的次要容器；無硬陰影，邊框較細。可加 well--on-muted 放在灰底舞台。

實作 · Implementation

載入 tailwind.css（已含 cards.css）。與 .psy-panel 不同：card 提供 header／body／footer 結構；單純色塊面板仍可用 .psy-brutal-block.psy-panel。

<!-- Tailwind 管版面；card 管結構與 Mimosa 皮膚 -->
<div class="grid gap-psy-6 lg:grid-cols-2">
  <article class="card w-full">
    <header class="card__header">
      <h3 class="card__title">標題</h3>
    </header>
    <div class="card__body">…</div>
    <footer class="card__footer flex gap-psy-4">
      <button type="button" class="psy-brutal psy-btn psy-btn--primary">確定</button>
    </footer>
  </article>
</div>

<div class="well max-w-psy-prose">次要區塊</div>

對話框 · Modal

破壞性確認（刪除等）的主動作請用 psy-btn--danger（洋紅／粉紅語意，對齊 --psy-alert-error-accent）；勿用 psy-btn--primary（萊姆綠＝送出／通過）。 取消維持預設 psy-btn（琥珀次要）即可。

通知面板 · Notification center

持久型通知列表（非 Toast）。建議放在 drawer--right 內；class 見 navigation-ui.css 的 .notification-list。底色依已讀與時間分三層（ --psy-notification-*）：最新未讀＝淺綠、當日已讀＝中性 card、昨日以前＝淺橘。勿用 cyan／洋紅／粉紫 wash（易像 info 或錯誤）。

• 建議放在 drawer--right；列表用 .notification-list。
• 語意修飾類（--psy-notification-* token）： notification-list__item--unread 最新未讀 → 淺綠； 當日已讀 → 預設中性 card； notification-list__item--older 昨日以前 → 淺橘。勿用洋紅／粉紫底（易聯想錯誤）。
• 未讀指示點 .notification-list__dot 為萊姆綠；已讀／較舊項目隱藏圓點。
• 每則標題用 <p> 或連結；時間用 <time datetime>。
• 即時彈出仍用 Toast；此為持久型通知中心。

Toast

Spinner

Progress

Skeleton

Empty state

清單空態、搜尋無結果、權限不足等；見 feedback.css 的 .empty-state。 說明原因並提供行動出口（按鈕或連結）。

• 版面用 Tailwind（grid、gap-psy-*）；皮膚在 .empty-state（feedback.css）。
• 表格內簡短空態可用 .data-table__empty（tables.css）；完整空態區塊用本元件。
• 標題說明「為何是空的」；至少一個明確 CTA（主按鈕或次要連結）。

Tabs

未選取分頁的 hover／focus 使用 --psy-tab-hover-*（實心底 + 黑框 + 硬陰影）；選取中則為 --psy-tab-active-*。勿以 transparent 混色當 hover 底。

Breadcrumb

Pagination

可用性 · Usability

適合使用 Tooltip

• 對 icon-only 按鈕或縮寫提供補充文字（最多一兩句；勿放重要操作說明）。
• UI 空間受限時，做為標籤的延伸說明，避免版面過於擁擠。

不適合使用 Tooltip

• 行動裝置為主的介面：touch 無 hover，tooltip 永遠不顯示。
• 說明文字超過兩行：改用 Popover 或展開式說明區塊。
• 需要使用者與說明內容互動（選取文字、點連結）：tooltip 不可聚焦，無法互動。

實作說明 · Implementation

載入 navigation-ui.css（含於 tailwind.css）。生產環境： .tooltip__content 加 hidden 屬性預設隱藏；hover／focus 時以 JS 移除 hidden。aria-describedby 指向 tooltip 的 id。 文件截圖靜態展示用 .tooltip--static（勿帶入產品頁）。

<!-- 上方（預設） -->
<span class="tooltip">
  <button type="button" class="psy-brutal psy-btn"
          aria-describedby="tip-save">儲存</button>
  <span class="tooltip__content" id="tip-save" role="tooltip" hidden>
    Ctrl + S
  </span>
</span>

<!-- 下方 -->
<span class="tooltip tooltip--bottom"> … </span>

<!-- 左／右 -->
<span class="tooltip tooltip--left"> … </span>
<span class="tooltip tooltip--right"> … </span>

相關 tokens（tokens.css）：

• --psy-tooltip-bg — 背景色（對齊 --psy-color-base）
• --psy-tooltip-fg — 文字色（--psy-primitive-text）
• --psy-tooltip-max-width — 最大寬度（預設 16rem）

Divider

區塊分隔線 token：--psy-divider-color。通用元件 .psy-divider（ components.css）；語意化區塊間距可用 .divider（navigation-ui.css）。

區塊 A 與 B 之間的水平分隔（.psy-divider）。

語意化區塊間距（.divider，navigation-ui.css）。

行內垂直分隔：

項目一項目二項目三

基本 Chip

可選取 · Flow chip

多選篩選使用 .psy-flow-chip；選取態加 .psy-flow-chip--selected。裝飾標籤（非互動）可用 .psy-flow-tag。

NEW

可訪問性 · Accessibility

• 可選取 chip 請用 button + aria-pressed（或 role="checkbox" + aria-checked）。
• 導覽用途用 a 並提供明確連結目標；勿把 .label 當成可點擊 chip。
• 群組加 role="group" 與 aria-label 描述篩選語意。

可用性 · Usability

三種變體的使用時機

• .psy-chip（components.css）— 靜態標籤或導覽連結；配合 psy-brutal 加邊框陰影。
• .psy-flow-chip（flow-page.css）— 多選篩選；選取態加 .psy-flow-chip--selected，須搭配 aria-pressed。
• .psy-flow-tag（flow-page.css）— 純裝飾標籤（NEW、HOT 等），非互動，勿加點擊事件。

與 .label 的區別

• .label 為狀態徽章（進行中、已結束），非互動。
• Chip 用於篩選或導覽，label 用於狀態顯示；兩者語意不同，不可互換。

實作說明 · Implementation

載入 components.css 與 flow-page.css（均含於 tailwind.css）。 版面（間距、換行）使用 Tailwind utility（flex flex-wrap gap-psy-3）。

<!-- 靜態 / 導覽 chip -->
<a class="psy-brutal psy-chip psy-focus-ring" href="/all">全部</a>
<span class="psy-brutal psy-chip">唯讀標籤</span>

<!-- 多選篩選（flow chip） -->
<div class="flex flex-wrap gap-psy-3" role="group" aria-label="風格篩選">
  <button type="button"
          class="psy-brutal psy-flow-chip psy-flow-chip--selected"
          aria-pressed="true">電子</button>
  <button type="button"
          class="psy-brutal psy-flow-chip"
          aria-pressed="false">嘻哈</button>
</div>

<!-- 裝飾標籤（非互動） -->
<span class="psy-flow-tag">NEW</span>

Range · Slider

原生 input[type="range"] + .range；track／thumb 由 --psy-range-* token 控制。單軸可 oninput 更新 .range-field__value；雙端區間需 host JS 同步兩支 input（下限不可大於上限）並寫入顯示區，見下方 data-range-dual 範例。

雙端區間（兩支 .range）+ 刻度 .range-ticks：

File upload

整區可點擊；隱藏 input[type="file"] 覆蓋於 .file-upload。hover／focus-within 走 --psy-elevated-hover-*。

Avatar · Stack

尺寸 --sm|lg|xl；圖片用 .avatar__img；疊加列用 .avatar-stack。

S MJ LG

• AN
• BO
• CY
• +4

線上狀態 .avatar__status--online、可點擊 .avatar-wrap--link：

Timeline

垂直時間軸；節點 .timeline__marker，連線 --psy-timeline-line。

1. 報名開放

   參與者可提交表單並上傳證明文件。

   2026-05-01

2. 審核完成

   主辦方已核准 128 筆申請。

   2026-05-10

3. 活動開始

   現場簽到與即時通知將同步啟用。

   2026-05-15

Stat / metric card

獨立 .stat-card（亦可與 .card 組合）。卡片底為淡橘 --psy-stat-surface*（中性數據；非 warning 黃、非 info 色條橙）；漲跌 pill 用 --psy-semantic-trend-*-fg／*-bg，期間用 .stat-card__delta-context（muted）。

Button · Ghost / Icon / Group / Split

Input group · 前後綴

單一 .input-group 外框（--psy-input-group-*）。金額／票價加 .input-group--amount（--psy-input-group-amount-*）：僅幣別前綴 + 右對齊短欄，勿 max-w-md 三欄拉寬。淺底標籤用 .form-label--on-light。

小數位由驗證或格式化處理；勿再拆獨立 .00 後綴欄。

OTP / PIN · 六位驗證碼

六格為同一 .otp-input（一個外框 + 內部分隔線），不是六個帶獨立硬陰影的 .form-input。標籤同樣用 .form-label--on-light。

Table · TableCard / Divider / Striped

節奏參考 Untitled UI Tables：.table-card 標題區 + Divider line（--uniform-rows、列線、hover）或 Alternating fills（--striped）。表頭小字 muted + 灰底帶；排序僅圖示色。一表一狀態。

Divider line · 排序 + 列選取

Alternating fills · 斑馬紋（清單列用 td + .data-table__cell--primary，勿 tbody th）

空態 · 無列（獨立表）

Navigation · Mobile

底部導覽 .bottom-nav：同一時間僅一項具 .is-active 或 aria-current="page"（由 host／router 切換）。文件展示用 data-bottom-nav-demo 腳本交換選取態；勿在展示用連結使用裸 href="#"（會跳到頁首）。

Modal sizes / Toast 動畫

尺寸：modal__panel--sm|lg|xl、drawer__panel--sm|lg。開啟時加 modal--animated；Toast 堆疊加 toast-stack--animated，關閉前加 toast.is-leaving。焦點陷阱請 host 實作（focusin 循環於 panel）。

狀態列 · Success / Warning / Error / Info

成功（萊姆）、警告（琥珀）、錯誤（洋紅）、資訊（橘）。錯誤且非互動內容時可設 role="alert"（見可訪問性小節）。

深底上的提示 · On dark

與產品頁相同的紫底；深底版改用「淺底卡 + 左側色條 + 黑底圖示」提高辨識度。

實作 · Implementation

文件頁使用 ds-alert；產品頁建議使用 alert + 狀態修飾 class，與下列標記對等。

<div class="alert alert-success" role="status">
  <span class="alert__icon" aria-hidden="true">✓</span>
  <div class="alert__body">
    <h4 class="alert__heading">Success</h4>
    <p class="alert__text">…</p>
  </div>
</div>

<div class="alert alert-error" role="alert">…</div>

可訪問性 · Accessibility

節錄並中譯 NASA Alerts 文件。

• 時效性高、且非互動的重要訊息可使用 ARIA role="alert"，讓輔助科技及時朗讀；若為需操作的可互動對話，改用 alertdialog。
• 勿將提示在視覺上完全隱藏後才動態顯示給部分使用者——舊版輔助科技仍可能讀到被隱藏的內容。

可用性 · Usability

節錄 NASA Alerts — When to use / Guidance。

適合使用

• 通知使用者系統狀態（錯誤、警告、一般更新），不一定需要回應。
• 表單送出後的驗證摘要，或成功完成的確認訊息。

可改用其他型態

• 長表單應搭配欄位旁內聯錯誤，勿僅依賴頁頂一則 alert。
• 會破壞性刪除等行為，請用確認對話框等更強介入，而非僅文字提示。

撰寫要點

• 說明使用者下一步可做什麼，語氣簡潔、避免責備使用者。
• 通知數量適中；可關閉時提供關閉，避免無關訊息干擾當前任務。

無框樣式 · Borderless

• 配對結果如何計算？
  以音樂品味相似度、地理距離與近期互動權重組合計分，並保留探索新風格的隨機性。
• 為什麼有人看不到我的檔案？
• 如何提高配對品質？

框線樣式 · Bordered

• 帳號安全與隱私
  支援封鎖、檢舉與可見度控管；敏感資料採分級存取，並在操作流程中給予提示。
• 活動報名與取消
• 通知與推播設定

可訪問性 · Accessibility

• 標題列必須是 <button>，確保鍵盤與輔助科技可操作。
• 按鈕需使用 aria-expanded 表示展開狀態，並以 aria-controls 對應內容區 id。
• 內容區的可見狀態應與按鈕狀態一致；避免在 JS 失效時直接把內容永久隱藏。

可用性 · Usability

• 適合使用者只需要少數段落資訊、且版面空間受限時。
• 若使用者通常要讀完整內容，應改為直接展開的段落排版。
• 標題列點擊區要夠大，並與內容內可點擊元素保持距離，避免誤收合。

實作 · Product classes

產品頁可使用 accordion、accordion--bordered、accordion__button、accordion__content， 並沿用同樣的 aria-expanded / aria-controls 結構。

可訪問性（總覽）

節錄 NASA Form controls — Accessibility。

• 表單控制項在 HTML 中的順序須與畫面閱讀順序一致，勿僅以 CSS 重排而讓螢幕報讀順序錯亂。
• 驗證訊息須與對應欄位在視覺上對齊，方便放大鏡使用者掃讀。
• 主題相關的控制項請以 <fieldset> 分組，並以單一 <legend> 說明（例如一題搭配多個選項按鈕）。
• 表單區塊盡量維持垂直排列，對視野受限使用者較友善。
• 部分螢幕報讀器對 fieldset／legend 或 aria-describedby 支援不一；必要時可改以 aria-labelledby 串連標籤、說明與提示（詳見原文 Known issues）。

文字欄與多行 · Text input & textarea

單行文字、焦點環示意、錯誤（role="alert" 訊息 + aria-describedby／aria-invalid）、成功外觀、多行文字區。

撰寫要點（節錄）

• 避免以 placeholder 取代標籤（對比與認知負擔）。
• placeholder 文字使用 --psy-form-placeholder-text 並維持較輕字重，需「可讀但低於已填值」的視覺層級。
• 任何帶硬陰影輸入控制項（input / select / textarea）後若緊接下一個標籤，需加上 base spacing + 4px（陰影高度）補償，避免遮擋下一段標籤文字。
• 標籤群組（如音樂標籤 chips）作為一段內容時，容器底部需保留至少 --psy-space-4，再進入下一個欄位標題。
• 摘要型清單（如照片／音樂品味／活動歷史）若後接動作按鈕，清單底部需保留至少 --psy-space-5，避免資訊段落與操作區黏連。
• 電話、卡號等勿任意拆成多個欄位；必要時仍應有清楚群組與標籤。
• 僅在使用者互動過該欄後再顯示驗證錯誤樣式或訊息。

下拉選單 · Dropdown

選項約 7～15 個、版面有限時較適合；選項極少可改選項按鈕，極多可改可搜尋輸入。勿在選取後自動送出表單（干擾螢幕報讀）。

核取方塊 · Checkboxes

同一主題的多選以 fieldset 包覆；單一開關可用單一核取方塊。

選項按鈕 · Radio

互斥單選；不確定預設值是否合宜時，可維持「未選」為預設。

日期欄位 · Date（分段輸入）

多數「記得的日期」以月／日／年三欄輸入較直覺。勿用 JS 自動跳欄（鍵盤使用者不易修正）。年份上下限請依表單情境調整。

驗證與規則清單 · Validation

事先列出規則並即時回饋，減少猜測。使用套件 form-checklist-box／form-checklist（破折號／✓ 狀態指示，勿用空心圓以免像 checkbox）。下列清單會隨輸入更新（僅示意）；正式環境須在伺服端重複驗證。

深底表單示例 · On dark

與產品深紫底接近的欄位配色（--psy-form-*）。

實作 · Product classes

Host 專案請載入 tailwind.css（含 tokens.css）。對應關係：ds-label → form-label、ds-input → form-input、ds-textarea → form-textarea、ds-select → form-select、ds-hint → form-hint、錯誤群組 form-error-group／form-error-msg／form-input--error、ds-fieldset → form-fieldset、ds-legend → form-legend、選項清單 form-choice-list + form-choice、日期列 form-date-row／form-date-field、規則清單 form-checklist-box／form-checklist 與條目 class is-met。

<div class="form-stack">
  <div class="form-error-group">
    <label class="form-label form-label--error" for="email">電子郵件</label>
    <span class="form-error-msg" id="email-err" role="alert">格式不正確。</span>
    <input class="form-input form-input--error" id="email" aria-describedby="email-err" aria-invalid="true" />
  </div>
</div>

可訪問性（總覽）

• 控制項的 HTML 順序要與視覺順序一致，避免僅用 CSS 重排。
• 相關欄位以 fieldset + 單一 legend 分組，並維持垂直掃讀節奏。
• 驗證訊息與欄位視覺對齊，必要時補 aria-describedby 或 aria-labelledby。
• 顯示密碼、忘記帳號/密碼等輔助動作，需保留鍵盤可操作性與明確焦點樣式。

姓名表單 · Name form

當資料庫需要分欄儲存姓名時使用；若不需拆分，可退回單一文字欄位。

地址表單 · Address form

示範可拆分地址欄位；若不需解析地址，可改單一多行欄位。

登入表單 · Sign-in form

精簡欄位，保留顯示密碼與忘記帳密捷徑，降低登入摩擦。

重設密碼 · Password reset form

先揭露密碼規則，再讓使用者輸入與確認，避免「填完才被擋」。

實作 · Product classes

元件沿用 `form-*`（Form controls 章），範本新增版型輔助：`form-grid`、`form-col-sm`、`form-col-md`、`form-note`，可組 Name / Address / Sign-in / Reset password 四種常見流程。

尺寸變體 · Big / Medium / Small

可訪問性 · Accessibility

• 搜尋按鈕必須包含「Search」文字（可視覺隱藏），以供螢幕報讀器辨識。
• 即使視覺上簡化，欄位仍需保有 label 或等效可讀名稱。
• 按鈕應維持 type="submit"，減少鍵盤操作成本。

可用性 · Usability

• 搜尋欄位盡量保留足夠寬度（建議至少可視 27 字元），方便檢查關鍵字。
• 放大鏡圖示通常可獨立辨識；若小尺寸只顯示圖示，務必保留 sr-only 文字。
• 首頁建議直接顯示搜尋框，不用隱藏在連結後方。
• 避免預設進階搜尋，先提供簡單輸入再逐步揭露進階條件。

實作 · Product classes

產品頁可沿用 `form-input` 與 `button button-primary`，搭配 `search-bar`／`search-bar--big`／`search-bar--small`、`search-bar__input`、`search-bar__submit`、 `search-bar__icon`、`sr-only` 形成一致版型。

單層 · Single level

雙層 · Two levels

三層 · Three levels

可訪問性 · Accessibility

• 所有導覽項目需可透過鍵盤 Tab 逐項聚焦與操作。
• 目前頁面狀態需可辨識（視覺 active + 語意標示）。
• 避免過深層級造成導覽迷航，必要時改為拆分資訊架構。

可用性 · Usability

• 導覽文案要短、可掃描，建議為頁名的精簡版。
• 適合 1～3 層；若層級過深，使用者容易漏看底部項目。
• 若整站頁面很少（少於 5），通常不需要側邊導覽。

實作 · Product classes

產品頁可使用 side-nav、side-nav__sub 與 is-current；可維持同一 HTML 結構在不同頁面重複使用。

基本頁首 · Basic header

延伸頁首 · Extended header

深底頁首 · Dark option

可訪問性 · Accessibility

• 提供 Skip link，讓鍵盤與輔助科技可直接略過長導覽。
• 使用語意化 header 與 nav，並以 list 組織導覽項目。
• 導覽項目需可 Tab 聚焦，展開子選單時以 click / Enter / Space 觸發，不依賴 hover。
• 目前所在頁應有可視覺辨識的 current 狀態，而非僅靠顏色差異。

可用性 · Usability

• 主導覽請依任務優先順序排列：高需求功能靠左（或最前）。
• 連結文案需用使用者語言，不以內部組織架構命名。
• 頁首不宜過高，避免擠壓主要內容；資訊量增加時優先使用 extended 版型。
• 同一頁首層級預設使用單一底色 token（--psy-header-bg）；僅在有明確層級差異時才增加次底色。
• 若需展示主導覽與模組捷徑，應拆成兩層導覽列：第一層主導覽（主要任務），第二層次導覽（模組入口），避免同列競爭注意力。
• 次導覽 chips 應使用專屬 token（--psy-header-subnav-chip-bg，目前為 #80dcb3），避免與主導覽 chips 混用同色。
• 大型資訊架構可考慮 mega menu 或側邊導覽，但先驗證是否真的需要。

實作 · Product classes

產品頁可使用 `site-header`、`site-header__brand`、`site-header__logo`、`site-header__tagline`、`site-header__nav`、`site-header__meta`、`site-header__utility`， 並搭配 `site-header--extended` / `site-header--dark` 與 `skipnav` 完成可及導覽。

Big footer

Medium footer

Slim footer

可訪問性 · Accessibility

• 頁尾導覽以 `nav` + list/link 組織，Tab 應可逐項聚焦。
• 小螢幕若改成可收合群組，需符合 Accordion 的鍵盤與 ARIA 規則。
• 電話、Email 等聯絡方式建議做成可點擊連結，便於行動裝置使用。

可用性 · Usability

• Big footer 適合補充導覽 + 訂閱行動；Medium 適合少量常用連結；Slim 適合最小資訊量。
• Footer 不必完全複製 Header 資訊架構，優先放常被查詢的收尾資訊。
• 避免「免責聲明膨脹」：保留必要法律連結即可，其餘交給專頁。

實作 · Product classes

產品頁可使用 `site-footer` + `site-footer--big/--medium/--slim`，並搭配 `site-footer__top`、`site-footer__primary`、`site-footer__grid`、 `site-footer__signup`、`site-footer__links`、`site-footer__secondary`、`site-footer__brand`、`site-footer__row`。

樣式變體 · New / Info / Warning / Hot

預設為非互動元素（`span`），僅用於標示，不作為按鈕。

可訪問性 · Accessibility

• 若 label 對應的是動態新增內容，請用 ARIA live region 通知螢幕報讀器。
• 非互動 label 應避免 hover/focus/active 行為，以免誤認為可點擊。
• 狀態不可只靠顏色區分；可搭配文字（如 New、Warning、Unread 12）。

可用性 · Usability

• 用於提醒容易被忽略的重要資訊，避免整頁過度標示。
• 不要混用「可點擊」與「不可點擊」兩種 label 行為，需保持一致。
• 當內容本身已頻繁更新時，可先用排序與版位處理，不一定要加 label。

實作 · Product classes

產品頁使用 label、label--info 等；內距由 --psy-label-padding-* 控制。表單請用 form-label。可互動 tag 請用 .psy-chip 另建，勿堆在 .label 上。

<span class="label label--warning">Warning</span>

<label class="form-label" for="email">電子郵件</label>
<input id="email" class="form-input" type="email" />

框線表格 · Bordered table

無框表格 · Borderless table

需要與段落內容融合時，可減少格線干擾。

可訪問性 · Accessibility

• 簡單表格使用 scope="col" / scope="row" 明確標頭關係。
• 複雜表格（多層標頭）需改用 id + headers 對應。
• 表格標題放在 <caption>，不要只在外部段落描述。

可用性 · Usability

• 僅在真正欄列資料使用表格；敘事內容可改清單或段落。
• 框線表格適合高密度比較；無框表格適合貼近文章內文。
• 最小必要樣式即可，避免裝飾壓過資料本身。

實作 · Product classes

清單：table-card + data-table data-table--uniform-rows；斑馬紋加 data-table--striped；緊湊列高 data-table--sm。矩陣表（列標在 tbody th）勿加 --uniform-rows。保留 caption 與 scope。

12 欄比例

版型示例 · Layout examples

可訪問性 · Accessibility

• 放大到 200% 時仍需可讀、不破版；避免固定高度與硬塞內容。
• 欄位順序要符合語意閱讀順序，不以 CSS 變更語意順序。

可用性 · Usability

• 全站採單一 12 欄系統，避免混用多種 grid 規則。
• 文字區塊建議控制在約 75 字元內，提高長文可讀性。
• 小螢幕預設堆疊成單欄，優先保障掃讀與點擊精準度。

實作 · Product classes

產品頁使用 `grid-12` + `col-12/8/6/4/3` 組版；RWD 會在中小螢幕自動滿欄。若需無左右留白容器可另加 `grid-12--full`。

間距尺度表

Token、數值與長條預覽並列，便於掃描與對照實作。

分隔線 · Divider

色票 --psy-divider-color。通用元件 .psy-divider、.psy-divider--vertical（ components.css）；語意化區塊間距可用 .divider（navigation-ui.css）。完整範例見 導覽 UI · Divider。

水平 .psy-divider

陰影範例

產品卡片與主導區塊使用同一硬陰影，並以 container / high / highest 分層（對齊 surface hierarchy）。

可視化範例 · How aliases look

下列示例對應上表 token，方便快速理解「改 token 會影響哪裡」。

--psy-kicker-text-on-light：THIS IS A KICKER SAMPLE

/* token 別名實際使用範例 */
.top-nav a { color: var(--psy-nav-text); }
.hero-kicker { color: var(--psy-kicker-text-on-dark); }
.kicker { color: var(--psy-kicker-text-on-light); }

.psy-btn--primary:hover { background: var(--psy-button-primary-bg-hover); }
.psy-btn--primary:active { background: var(--psy-button-primary-bg-active); }
.psy-btn:hover { background: var(--psy-button-secondary-bg-hover); }
.psy-btn:active { background: var(--psy-button-secondary-bg-active); }

.psy-btn:focus-visible {
  outline: var(--psy-focus-ring-width) solid var(--psy-focus-ring-color);
  outline-offset: var(--psy-focus-ring-offset);
}