MAH Internal / Design System

MAH Design System

設計 token、字型、間距、按鈕等。實際定義來源於 eric064/mah.tw repo 的 src/styles/tokens.css 與 tailwind.config.mjs。

📌 此頁是只讀預覽，非 single source of truth。修改請改 mah.tw repo 的 src/styles/tokens.css，然後重新同步本頁。

Brand Colors core palette

主色為品牌紅 #E8364F，golden 與 pink 作為配色支援，分別出現在 trainee、活動 banner、accent 元素上。

src/styles/tokens.css → :root colors
primary
#E8364F
--color-primary
primary-hover
#FF4D63
--color-primary-hover
primary-muted
rgba(232,54,79,.10)
--color-primary-muted
gold
#C9A84C
--color-gold
gold-muted
rgba(201,168,76,.12)
--color-gold-muted
pink
#FF91AF
--color-pink
pink-glow
rgba(255,145,175,.12)
--color-pink-glow
pink-muted
rgba(255,145,175,.06)
--color-pink-muted

Background Colors surface scale

bg-base
#FAFAFA
--color-bg-base
bg-surface
#FFFFFF
--color-bg-surface
bg-elevated
#F5F5F5
--color-bg-elevated
bg-subtle
#EEEEEE
--color-bg-subtle

Text & Border foreground

text-primary
#0A0A0A
--color-text-primary
text-secondary
rgba(10,10,10,.6)
--color-text-secondary
text-muted
rgba(10,10,10,.35)
--color-text-muted
border
rgba(10,10,10,.08)
--color-border
border-hover
rgba(10,10,10,.15)
--color-border-hover

Typography 4 families

Display 用於品牌大標題；Heading 用於 H2/H3；Body 預設中文/日文 sans-serif（Noto Sans TC fallback to Noto Sans JP）。

--font-display | --font-heading | --font-body | --font-cjk
display--font-displayOutfit
MAH Entertainment
heading--font-headingInter
Beyond the Horizon — A new era begins
body--font-bodyNoto Sans TC
為了讓每一位觀眾都能安心享受演出，請留意以下事項。MAH 所屬偶像參與之所有活動。
cjk--font-cjkNoto Sans TC / JP
物販・特典會規範｜SNS 禮儀｜あいうえお

Spacing Scale linear 4–96px

xs4px
sm8px
md16px
lg32px
xl48px
2xl64px
3xl96px

Border Radius 3 steps

sm2px
md4px
lg8px

Layout Tokens

--nav-height
64px
52px on ≤640px
--container-max
1200px
--container-pad
48px
20px on ≤640px

Buttons Button.astro

兩種變體，皆使用 --font-heading、12px uppercase letter-spacing 0.08em。

Primary action Ghost button
<Button variant="primary" /> or <Button variant="secondary" />

Focus Ring

所有 :focus-visible 都會用 --color-primary 2px outline + 2px offset。