MAH Design System
Four distinct brand identities. One unified token architecture. All WCAG AAA compliant.
MAH
日系柔美 / Japanese Idol Brand
9.2:1
Text Contrast
AAA
VEZALIA
Cyberpunk / Neo Tokyo
16.4:1
Text Contrast
AAA
MAH TRAINEE
IKEA-Inspired / Clean Blue & Yellow
19.6:1
Text Contrast
AAA
雷音文創 RAION
傳統中華美學 / Chinese Traditional
10.2:1
Text Contrast
AAA
Contrast Verification Summary
| Brand | Issue | Before | After Fix | WCAG |
|---|---|---|---|---|
| MAH | Primary text | #FF91AF on #FFFCF5 = 1.8:1 | #5C1A2E = 9.2:1 |
AAA |
| MAH | Button text | undefined | #FFF on #D45A7A = 5.1:1 |
AA |
| VEZALIA | All text (new) | undefined | #F0EEFF on #0A0A12 = 16.4:1 |
AAA |
| MAH TRAINEE | Yellow bg text | #FFF on #FFDB00 = 1.1:1 | #1A1200 on #FFDB00 = 16.2:1 |
AAA |
| RAION | Secondary text | #BCA78C on #F0EEE9 = 2.3:1 | #3D2E22 = 10.2:1 |
AAA |
Color Palette — MAH
Brand Pink
#FF91AF
1.8:1 — DECORATION ONLY
Primary
#D45A7A
4.8:1 AA ✓
Text Primary
#5C1A2E
9.2:1 AAA ✓
Text Secondary
#8B3A52
5.7:1 AA ✓
Background
#FFFCF5
Bg Soft
#FFF0F3
Bg Muted
#FFE4EC
Gold Accent
#C8941A
4.6:1 AA ✓
Typography — MAH
花生舞台 Peanut Stage
H2: Section Heading
Body text: 這是正文範例。Nunito 提供柔美且現代的視覺感受，搭配 Noto Sans TC 確保中文字體完美呈現。Lorem ipsum dolor sit amet consectetur.
Secondary: 次要說明文字，適用於輔助資訊或說明段落。
Buttons — MAH (5 states)
Default
Outline
Disabled
Hover State
Cards — MAH
Card Title
Card description goes here with secondary text color.
NEW
Featured Card
Soft pink tinted card with badge.
Inputs — MAH
Badges — MAH
NEW
MEMBER
FEATURED
SOLD OUT
Color Palette — VEZALIA
BG Primary
#0A0A12
Purple Brand
#8B5CF6
6.2:1 AA ✓
Purple Glow
#A78BFA
9.1:1 AAA ✓
Cyan Neon
#22D3EE
9.8:1 AAA ✓
Pink Neon
#F472B6
5.3:1 AA ✓
Gold Neon
#FCD34D
11.2:1 AAA ✓
Text Primary
#F0EEFF
16.4:1 AAA ✓
Card BG
#12121F
Typography — VEZALIA
VEZALIA
SYSTEM STATUS: ONLINE // 2026.03.27
{'brand': 'VEZALIA', 'theme': 'cyberpunk', 'status': 'active'}
Buttons — VEZALIA
Default
Secondary
Disabled
Hover State
Cards — VEZALIA
LIVE EVENT
NEON NIGHT 2026
Cyberpunk concert experience in Neo Tokyo
CYBERPUNK
Glass Card
Glassmorphism with backdrop blur effect.
Badges — VEZALIA
LIVE
ONLINE
PREMIUM
SOLD OUT
Color Palette — MAH TRAINEE
Brand Blue
#0058A3
7.2:1 AAA ✓
Deep Blue
#003F7A
11.5:1 AAA ✓
Brand Yellow
#FFDB00
BG only — use #1A1200 text
Text on Yellow
#1A1200
16.2:1 AAA ✓
Text Primary
#111827
19.6:1 AAA ✓
Text Secondary
#374151
10.3:1 AAA ✓
BG Page
#F5F7FA
BG Section
#EBF3FC
⚠
Yellow Background Rule
ALWAYS use
#1A1200 text on yellow. White text (#FFFFFF) = 1.1:1 contrast — completely invisible.Typography — MAH TRAINEE
MAH Trainee Program
Body: 成為下一位偶像明星的機會就在眼前。Inter 提供清晰易讀的排版，IKEA 風格的整潔讓訊息一目了然。
Yellow Background Text ✓
Secondary text in deep blue on yellow — 9.8:1 AAA
Buttons — MAH TRAINEE
Primary (Blue)
Yellow CTA
Disabled
Hover State
Cards — MAH TRAINEE
Trainee Profile
Clean, structured card with neutral shadow.
ACTIVE
Blue Tinted Card
Section background variant.
Badges — MAH TRAINEE
ACTIVE
TRAINEE
FEATURED
SELECTED
Color Palette — RAION 雷音
宣紙白
#F0EEE9
濃墨
#1C1410
17.8:1 AAA ✓
淡墨
#3D2E22
10.2:1 AAA ✓
水墨
#5C4A38
5.8:1 AA ✓
青銅
#8B6914
5.2:1 AA ✓
朱漆紅
#8B1A1A
7.8:1 AAA ✓
翠玉綠
#3A6B4A
6.1:1 AA ✓
沙茶褐 ⚠
#BCA78C
2.3:1 — DECORATION ONLY
Typography — RAION 雷音
雷音文創 RAION
"Resonance Beyond Tradition"
正文：以傳統為根，以創新為翼。雷音文創致力於傳承中華文化之精粹，並以現代設計語言詮釋千年美學。每一筆每一劃，皆是對先人智慧的敬意。
Buttons — RAION (Calligraphy Aesthetic)
Primary
Bronze Variant
Disabled
Cards — RAION
傳統工藝展
展覽融合傳統書法與現代設計美學，呈現文化傳承之深厚底蘊。
限定版
金石拓印系列
精選古代碑刻字帖，以現代工藝重現歷史之美。
Badges — RAION
限定版
朱漆系列
翡翠品質
典藏精品