HIKARI Design System · V2

香港動漫 Cosplay
創作者社群平台

Astro + React Islands + Tailwind v4（CSS-first@theme）+ Hono API 中台 · v2.0.0—— 三主題語義變數即場切換，全站嚴禁寫死品牌色碼。

Double-bezel 相框 · 照片為主角

.hikari-media-frame ＋ .hikari-media-inner雙層光暈相框，hover 彈簧輕抬。

✦

相簿 · 攝影師視角

✦

活動 · 場內返圖

✦

市集 · C 服轉讓

✦

委託 · 妝造服務

核心元件速覽

@acg-meta/ui 黃金元件：StatusBadge、TagChip、RegionFlagIcon（SVG 旗，禁 Emoji 旗）、SortTrack、ActionDialog（引用計數 scroll lock）、FormRailLayout / MediaDetailSplitLayout（桌面 ≥1024px 禁 >900px 單欄）。

StatusBadge

已核對已提交待批核已拒絕審核中草稿

TagChip

葬送的芙莉蓮香港同人祭私影

RegionFlagIcon

香港日本台灣

語義色 Token（Tailwind v4 `@theme inline`）

--brand

--brand-strong

--brand-hover

--brand-muted

--brand-border

--brand-border-strong

--brand-soft

--brand-soft-hover

--brand-surface

13 個語義變數 × pink / cyan / purple 三主題；SSOT 在@acg-meta/ui/styles/tokens.css 與tokens.ts。

香港動漫 Cosplay創作者社群平台