EMOJI · FRONTEND STYLEBOOK ／ 01 ／ 2026.09.07
從 CIS 到前端的共同規則。墨與紙的層次、清楚的操作、容得下真實內容的版型。這裡的元件引用官網 token，可直接使用，不另造一套品牌。
本頁是介面示例；既有業務頁尚未全部接軌。完整開發規範位於專案 docs/design/stylebook.md。
--ink · #1B1A17標題、主要操作、焦點。溫暖的近黑。
--paper · #FBFAF6以紙階和細線建立層次，不靠陰影。
--accent · #FFDE34只當底色，墨字壓上；每畫面至多一擊。
Noto Serif TC · 標題 500
A place to belong.
Cormorant Garamond · 拉丁展示
Noto Sans TC · 內文與介面至少 16px；長文自然換行，不為排版犧牲內容。
正文使用 on-ink，次要資訊使用 on-ink-soft。
這是深色面的次要說明文字。
閱讀實作規則主要操作用墨；次要操作留白。按鈕最小 44px，高度隨文字增長。
點擊按鈕可查看回饋；按 Tab 可檢查焦點。
<button type="button" class="ui-button">主要操作</button>
內容示例圖片預留比例，按鈕落在卡片底部。
An exceptionally long title for an international community gathering with participants from many different backgrounds.
さまざまな背景を持つ人が集まり、交流する場所。長い文章も省略せずに表示します。
長識別字串：ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
| 項目 | 狀態 | 說明 | 示例筆數 |
|---|---|---|---|
| 示例 A | 已完成 | 文字完整保留，不擠壓欄位。 | 1,234 |
| 示例 B | 待確認 | 小螢幕在表格內捲動，整個頁面不位移。 | 56 |
尚未建立內容。先新增第一筆。
請保留目前輸入，稍後重試。
使用 details／summary。Enter 或空白鍵即可開合，長內容自然展開。
不隱藏重要文字。卡片折欄、按鈕換行；寬表格只在自己的區域捲動。
容器上限 1180px；側邊 24px，小螢幕 18px。格線最小欄寬 280px，自動折欄；卡片 12px 圓角，控制元件 4px。
間距：4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px。
Grid／Flex 子項 min-width:0。長字串 overflow-wrap:anywhere；不設固定文字高度，不用全頁 overflow-x:hidden 掩蓋溢位。
320、390、768、1180、1440px；兩倍文字、離線字體、長中英日文、Tab、Escape 與表單狀態。
舊後台、會員與活動主題仍需逐頁驗收。
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/stylebook/components.css">
<main class="ui-scope">
<div class="ui-shell ui-grid">
<article class="ui-card">…</article>
</div>
</main>
CSS 直接引用現有品牌 token。完整元件合約、來源及接軌清單：docs/design/stylebook.md。