Official First
+可使用 Pokémon、Poké Ball、Pokédex、官方角色名、类型体系、HP/EXP、Gym Badge 等授权资产语言。
+
+ Authorized Pokémon Product System
+
+
+
+ Pokémon UI Library Design Guidelines v3
++ 针对已获得授权的 Pokémon 网页、活动页、会员中心、图鉴工具和电商体验，建立一套可落地的 UI 库。v3 在基础控件之上补齐 Team Builder、Evolution Chain、Move Data、Weakness Matrix、Battle Menu、Bag、Event 和 Reward 等产品专属组件。 +
+ + +
+
+
+ 01 / Creative Direction
+
+
+ 设计方向
+旧版的问题是过度抽象成泛怪兽风。新版以授权 Pokémon 产品为前提，明确使用官方视觉元素，但把它们工程化为可复用的 UI 语言。
+
+
+ 01
+
+
+ 02
+
+
+ 03
+
+
+ 04
+
+
+ Game UI, Web Quality
+借用游戏中的状态、收集、队伍、战斗和背包结构，但网页控件必须保持可访问、可扫描、可响应。
+Bright, Not Noisy
+黄色、蓝色、红色用于关键动作和品牌识别；大面积阅读区域仍使用白色、浅蓝灰和明确分割线。
+System Completeness
+从按钮、表单、筛选、Tab、弹窗、Toast 到图鉴卡、数据表、页面模板，全部使用同一套 tokens。
+
+
+
+ 02 / Official Elements
+
+
+ 官方元素使用规范
+授权场景下可以使用官方元素，但需要把“品牌资产”和“UI 控件”分层管理。Logo 和角色图优先作为内容资产，Poké Ball、类型色、徽章和图鉴框架可以进入组件体系。
+
+
+
+
+ Pokémon
+
+
+
+
+ T
+
+ TRAINER PASS
+ Ash Ketchum
+ Pallet Town · Badge 08
+
+
+
+
+
+ Poké Ball
+ 用于图标、空状态、加载、徽章背景
+
+
+
+ Gym Badge
+ 用于等级、成就、会员权益
+
+
+ 
Fire
+ Type System
+ 筛选、标签、属性、状态分类
+
+ Fire
+ Type System
+ 筛选、标签、属性、状态分类
+
+ DEX #150
+ Pokédex ID
+ 列表编号、详情标识、收藏序号
+
+
+
+
+
+
+
+
+
+ 可进入 UI 库的元素
-
+
- Poké Ball 作为系统图标、加载器、选择状态、空状态主符号。 +
- 使用
frontend/public/types/中的 Type 图片资产作为筛选、标签、数值、卡片边缘和图表标识；CSS 类型色保留为 token 和兜底。
+ - Pokédex 屏幕、训练家卡、Gym Badge、HP/EXP Bar 作为组件构型。 +
- 官方角色名和编号可用于样例数据，如 Pikachu #025、Charizard #006、Eevee #133。 +
仍需控制的元素
-
+
- Logo 不作为普通按钮图标反复出现，只用于品牌区域、授权说明和首屏识别。 +
- 角色官方插画不应被裁切到无法识别，也不应被当作装饰纹理平铺。 +
- 高饱和类型色必须配合文字对比策略，Electric、Ice、Ground、Steel 等浅色标签用深色字。 +
- 战斗 UI 可以借鉴状态结构，不建议直接把主机游戏画面一比一搬到网页任务流。 +
+
+
+ 03 / Design Tokens
+
+
+ 视觉令牌
+Tokens 要覆盖品牌色、类型色、基础表面、描边、阴影、圆角和组件状态。这里采用 8px 卡片圆角，强调专业网页质感，而不是过度玩具化。
+
+
+
+ Pokémon YellowPrimary CTA / Logo fill
+ #FFCB05Pokémon BlueNavigation / Links
+ #2A75BBDeep BlueHeader / Text contrast
+ #003A70Poké RedUrgent / Ball top
+ #EE1515Ball BlackIcon stroke / Strong line
+ #202124Map MistPage background
+ #F2F5FA
+
+
+
+
+ Type Badge Assets
+ large badges + small icons +
+ 
Normal
+ 
Fighting
+ 
Flying
+ 
Poison
+ 
Ground
+ 
Rock
+ 
Bug
+ 
Ghost
+ 
Steel
+ Fire
+ 
Water
+ 
Grass
+ 
Electric
+ 
Psychic
+ 
Ice
+ 
Dragon
+ 
Dark
+ 
Fairy
+ 
Stellar
+
+ Normal
+ Fighting
+ Flying
+ Poison
+ Ground
+ Rock
+ Bug
+ Ghost
+ Steel
+ Fire
+ Water
+ Grass
+ Electric
+ Psychic
+ Ice
+ Dragon
+ Dark
+ Fairy
+ Stellar
+
+ 横向徽章使用 frontend/public/types/1.png 至 frontend/public/types/19.png；紧凑网格、筛选器、矩阵和卡片内图标使用 frontend/public/types/small/1.png 至 frontend/public/types/small/18.png。文件映射：1 Normal, 2 Fighting, 3 Flying, 4 Poison, 5 Ground, 6 Rock, 7 Bug, 8 Ghost, 9 Steel, 10 Fire, 11 Water, 12 Grass, 13 Electric, 14 Psychic, 15 Ice, 16 Dragon, 17 Dark, 18 Fairy, 19 Stellar.
+
+
+
+
+
+
+
+
+
+
+
+ Typography
标题使用圆润粗体，正文使用系统无衬线。Pokémon wordmark 只用于品牌展示，不替代正文或按钮文字。
+
+
+ Catch, Train, Explore
+正文保持 16px 以上，行高 1.55 至 1.7，保证儿童和成人用户都能快速阅读。
+ CAPTION / DEX ENTRY +Shape
卡片半径 8px，控件半径 8px，Pill 只用于 type chips、HP、status badges。Poké Ball 和头像保持圆形。
+
+
+ Water
+
+
+ Water
+
+ Elevation
主 CTA 和游戏化面板可使用硬阴影，普通信息卡使用柔和阴影。阴影不可替代清晰边框。
+
+
+
+ Soft rowReady
+
+
+
+ 04 / Controls
+
+
+ 控件库
+控件覆盖按钮、图标按钮、输入、选择、开关、范围、步进器、分段控制、Tabs 和筛选标签。所有控件最小点击高度不低于 44px。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Buttons
Default / Hover / Active / Disabled
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inputs
A11y ready
+
+
+
+
+
+
+
+
+
+
+ 可用名称
+
+
+
+
+
+
+
+
+
+ ID
+
+ GEN 1
+
+ 需要 12 位数字代码。
+
+
+
+
+ Selection Controls
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Capture chance
+
+
+
+
+
+
+ Potion count
+
+
+
+
+
+
+ Segmented / Tabs / Chips
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Base tab 显示编号、分类、身高、体重、能力和基础数值。
+
+
+ Moves tab 显示 Thunderbolt、Quick Attack、Iron Tail 等技能列表。
+
+
+ Evolution tab 显示 Pichu → Pikachu → Raichu 的进化路径。
+
+ Electric
+ Fire
+ Water
+ Grass
+
+ Electric
+ Fire
+ Water
+ Grass
+
+
+
+ 05 / Data Display
+
+
+ 数据展示组件
+Pokémon 产品通常需要承载大量收集、列表、数值和状态。展示组件应优先保证对比和扫描效率，再加入品牌趣味。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ #025
+ Pikachu
+
+ HP 35
+
+ Electric
+
+ Electric
+
+
+ EXP68%
+
+
List Rows
+
+
+
+
+ Charizard
+ Rare
+ Fire / Flying · #006
+
+
+ Squirtle
+ Caught
+ Water · #007
+
+
+ Mewtwo
+ Locked
+ Psychic · #150
Stats / Progress
+
+
+
+ HP82 / 100
+
+
+
+ EXP44%
+
+
+
+ Catch rate18%
+
+
+
+ Snorlax Lv. 42HP
+
+
+
+
+ Data Table
Sortable / Filterable
+
+
+
+
+ | Dex | +Name | +Type | +Region | +Status | +Action | +
|---|---|---|---|---|---|
#001 |
+ Bulbasaur | +Grass |
+ Kanto | +Caught | ++ |
#004 |
+ Charmander | +Fire |
+ Kanto | +Seen | ++ |
#007 |
+ Squirtle | +Water |
+ Kanto | +Caught | ++ |
+
+
+ 06 / Pokémon Product Components
+
+
+ Pokémon 专属组件
+v3 新增一组真正贴近 Pokémon 产品场景的组件：搜索联想、进阶 Type 筛选、进化链、技能数据、弱点矩阵、队伍构建、对比面板、战斗菜单、背包、活动和奖励体系。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pokémon Autocomplete
+ Combobox +
+
+
+
+
+
+ -
+
-
+
+ Pikachu#025 · Mouse Pokémon+
Electric
+
+
+ -
+
+ Pichu#172 · Tiny Mouse Pokémon+Electric
+
+
+
用于 Pokédex、Team Builder、Shop search。结果项建议包含编号、名称、分类和 Type badge。
+
+
+ Advanced Type Filter
+ Multi-select +
+
+
+
+
+ Selected: Electric, Flying
+
+
+ 支持多选、清空、组合筛选和弱点模式。
+
+
+
+
+
+
+
+
+
+
+
+
+ Evolution Chain
+ Detail page +
+
+
+ Electric
+
+ 172
+ Pichu
+ Electric
+ High friendship
+
+ Electric
+
+ 025
+ Pikachu
+ Electric
+ Thunder Stone
+
+ Electric
+
+ 026
+ Raichu
+ Electric
+ Final form
+
+
+ Move Cards
+ Power / Accuracy / PP +
+
+
+
+ ThunderboltElectric
+ ElectricMay leave the target with paralysis.
+ +
+
+ Quick Attack
Normal
+ NormalThis move always goes first.
+ +
+
+ Iron Tail
Steel
+ SteelMay lower the target's Defense stat.
+ +
+
+ Electro BallElectric
+ ElectricThe faster the user, the greater the power.
+ +
+
+
+
+
+
+
+
+
+
+ Weakness Matrix
+ Electric / Flying sample +
+ 
Ground2x
+ 
Rock2x
+ 
Ice2x
+ 
Fighting0.5x
+ 
Flying0.5x
+ Steel0.5x
+ 
Bug0.5x
+ 
Grass0.5x
+ Electric0.5x
+ 
Ghost1x
+ 
Dragon1x
+ 
Fairy1x
+
+ Ground2xRock2xIce2xFighting0.5xFlying0.5xSteel0.5xBug0.5xGrass0.5xElectric0.5xGhost1xDragon1xFairy1x
+
+ Team Builder Slots
+ 6 slots +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Compare Panel
3-way compare
+
+ MetricPikachuRaichuJolteon
+ TypeElectricElectricElectric
+ HP356065
+ Attack559065
+ Speed90110130
+ AbilityStaticStaticVolt Absorb
+ Base Stats Radar
SVG tokenized
+
+
+ 雷达图适合详情页摘要；精确对比仍建议使用条形图或 Compare Panel。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Battle Action Menu
Bag Item Card
+
+
+
+
+ Hyper Potion
+ Restores 120 HP to one Pokémon.
Qty 12
+
+
+ Ultra Ball
+ A high-performance Ball with a better catch rate.
Qty 4Event / Reward
+
+
+
+
+ Electric Spotlight Weekend
+
+ 18h
+ Featured Pokémon, bonus candy, limited raid tasks.
+
+ Electric
+ Open
+
+ Electric
+ Open
+
+
+ 1Badge
+ Potion
+ Ball
+ ?Locked
+ Secret
+
+
+
+ 07 / Feedback & Overlays
+
+
+ 反馈与覆盖层
+反馈组件需要清晰表达系统状态。Poké Ball 可以作为提示图标，但错误、成功、等待、解锁仍要配合文字和颜色。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Alerts
+
+
+
+
+ Pokémon caught!
+
+ Pikachu has been added to your Pokédex.
+
+
+ Bag almost full
+
+ You have 2 slots left. Transfer items before the next battle.
+
+
+ Connection lost
+
+ Battle data will retry automatically.
Modal / Toast / Tooltip
+
+
+
+
+
+
+ 捕获率提示需要解释公式来源和影响因素。
+
+
+
+
+
+
+
+
+ No Pokémon found
+调整类型筛选或搜索其它区域。
+Loading States
+
+
+
+
+
+
+
+ Motion Rules
-
+
- 按钮 hover 上浮 2px，active 下压 2px，时长 120ms 至 180ms。 +
- 捕获、升级、徽章解锁可使用 300ms 左右的弹性动效。 +
- 列表筛选和 Tab 切换不使用大幅移动，避免影响扫描。 +
- 必须支持
prefers-reduced-motion，关闭闪烁和持续动画。
+
+
+
+ 09 / Templates
+
+
+ 页面模板
+以下模板把控件组合成可直接落地的页面结构，覆盖图鉴列表、详情页、战斗状态和背包网格。
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Electric
+ Fire
+ Water
+ Grass
+
+ Electric
+ Fire
+ Water
+ Grass
+
+
+ #025 PikachuElectric
+ Electric#006 CharizardFire
+ Fire#007 SquirtleWater
+ Water#133 EeveeNormal
+ Normal#143 SnorlaxNormal
+ Normal#150 MewtwoPsychic
+ Psychic
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pikachu
+Mouse Pokémon · Electric
+
+ Electric
+ HP 35
+
+ Electric
+ HP 35
+
+
+
+ Friendship84%
+
+
+
+
+
+ Raichu Lv. 36HP 62/90
+
+
+
+ Poké Ball
+ ＋Potion
+ ★Rare Candy
+ ◈Badge
+
+
+
+ 10 / Delivery Guidelines
+
+
+ 交付规范
+设计稿和前端实现需要以 token 与官方资产目录为唯一来源，避免组件各自写死颜色和尺寸。Logo、角色图、商品图与 Type 图片必须有授权来源和版本记录。
+
+
+
+
+
+
+
+
+
+
+ 设计验收清单
-
+
- 所有页面使用同一套 Pokémon brand tokens、type assets、type tokens、surface tokens。 +
- Logo、角色图、官方插画、商品图均标注授权来源和使用范围。 +
- 核心控件覆盖 default、hover、active、focus、disabled、loading、error 状态。 +
- 图鉴列表、详情、Team Builder、Move Data、Weakness Matrix、背包、战斗状态、活动卡片均有桌面和移动端布局。 +
- Type 展示优先使用
frontend/public/types/图片资产，隐藏文本和 CSS 类型色作为语义与兜底。
+
前端验收清单
-
+
- CSS 变量集中声明，不在组件内硬编码品牌色和类型色。 +
- 控件高度不低于 44px，键盘焦点清晰，弹窗有 focus 管理和 ESC 关闭。 +
- Tab、Modal、Toast、Switch、Range、Combobox、Type Filter、Team Slot 等控件具备基础 ARIA 语义。 +
- 支持明暗主题与 reduced motion，动画不会阻塞主要任务流程。 +
- 表格、列表、图鉴网格在 320px 宽度下不产生内容重叠。 +
+
+ :root {
+ --pokemon-yellow: #ffcb05;
+ --pokemon-blue: #2a75bb;
+ --pokemon-blue-deep: #003a70;
+ --pokemon-red: #ee1515;
+ --line-strong: #1f2a3b;
+ --radius-card: 8px;
+ --radius-control: 8px;
+ --shadow-control: 0 3px 0 var(--line-strong);
+}
+
+.btn.primary {
+ min-height: 44px;
+ border: 2px solid var(--line-strong);
+ border-radius: var(--radius-control);
+ background: var(--pokemon-yellow);
+ color: #172036;
+ box-shadow: var(--shadow-control);
+}