Brand Colors core palette
主色為品牌紅 #E8364F,golden 與 pink 作為配色支援,分別出現在 trainee、活動 banner、accent 元素上。
src/styles/tokens.css → :root colors
Background Colors surface scale
Text & Border foreground
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-displayOutfitMAH Entertainment
heading
--font-headingInterBeyond 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。
<Button variant="primary" /> or <Button variant="secondary" />
Focus Ring
所有 :focus-visible 都會用 --color-primary 2px outline + 2px offset。