Design System Documentation
Legend Fantasy — 设计系统
支撑 Legend 梦幻体育 App 与官方网站的核心视觉与组件规范。以深藏青为主色、活力橙为辅色，建立跨平台（iOS / Android / Web）统一的视觉语言。
角色
设计系统建立与治理负责人
应用范围
Legend App（iOS / Android）· Legend 官方网站
关键成果
建立跨平台统一组件库，覆盖表单、弹窗、反馈提示等高频场景
核心技能
色彩体系 · 组件状态管理 · 跨平台一致性治理
Legend Fantasy 面向国际化市场，App 与官网分属不同开发团队推进，视觉语言容易走样。为此建立了这套涵盖色彩、字体、组件状态与反馈提示的设计系统，以深藏青（Primary）搭配活力橙（Secondary）建立品牌辨识度，并透过系统色（System Colors）覆盖多语义场景，确保设计交付到前端还原时保持像素级一致。
色彩系统
以 Primary 深藏青、Secondary 活力橙为品牌双主色，System Colors 覆盖语义化场景，并针对亮 / 暗模式分别定义标签与背景色阶。
Primary 主色阶
Primary
#040663
Secondary
#F77F00
100%
80%
60%
40%
20%
100%
80%
60%
40%
20%
语义色浅色变体（用于背景 / 标签底色）
Green 300
E4F9E5
Red 300
FCC2C0
Yellow 300
FCEEB2
Blue 300
AFD5FE
Label & Background（亮 / 暗模式）
依 Primary / Secondary / Tertiary / Quaternary 四级层次定义文字与背景权重
Label · Primary
#0F0F0F
Label · Secondary
#777777
Label · Tertiary
#B1B1B1
Label · Quaternary
#D5D5D5
文字排版
App 端采用 SF Pro Display（iOS）／ Roboto（Android），Web 端另设 Barlow 作为展示字体，字重统一，字间距为 0。
SF Pro Display
App · iOS · Bold / Regular
Roboto
App · Android · Bold / Regular
Barlow
Web · Regular
32px / 39L
Bold
页面主标题
26px / 32L
Bold
区块大标
20px / 25L
卡片标题
Title 3
18px / 23L
Bold
次级标题
15px / 20L
强调文字
15px / 20L
正文强调
14px / 19L
正文
13px / 18L
子标题
12px / 16L
辅助说明
11px / 13L
标签文字
10px / 13L
最小标注
按钮组件
Solid（实心）与 Outline（描边）两种类型，各含 Large / Medium / Small 三种尺寸，及 Default / Hover / Pressed / Disabled 四种状态。
Solid · Primary
Default
Default
Hover
Pressed
Disabled
Large
Text
Text
Text
Text
Medium
Text
Text
Text
Text
Solid · Secondary
Default
Default
Hover
Pressed
Disabled
Large
Text
Text
Text
Text
Outline
Default
Default
Hover
Pressed
Disabled
Large
Text
Text
Text
Text
弹窗与阴影
弹窗采用圆角卡片 + 深色遮罩，标准结构为「图标 + 标题 + 说明 + 双按钮」；阴影系统依组件层级分为三级。
Popup 弹窗
Title
确定要结束当前对话吗？此操作无法撤销。
Cancel
Clear Chat
Shadows 阴影层级
Tool bar
低层级
Nav bar
低层级
Card · 常规
中层级
Card · 已参赛
高层级
表单与输入
单行输入统一以底部描边呈现状态，Boxes 样式用于强调型表单，Text-area 支援字数限制。状态涵盖 Normal / Focus / Error / Disabled。
单行输入 · 状态
Normal
Normal
Focus
Error
Default(Web)
Label
Title
Label
Placeholder
Label
Placeholder
Please enter a valid email
Hover(App default)
Label
Title
Active
Title
Enter…
Inactive
Label
Input
下拉选择 Select
Normal
Focus
Selected
Title
Select
Title
Select
Item
Item
Item
Title
Item1
Item1
Item
Item
其他变体
Solo · Search
Clear Button
Search
Invite code
2135555dd1f1v
反馈组件
四种语义类型：成功 / 错误 / 警告 / 信息，统一采用胶囊圆角，右侧配置可关闭按钮。
Toast 提示条
Invite Code Copied!
It's error toast!
It's warned toast!
It's information toast!
图标系统
下方图标为示意呈现风格，实际交付以原始图标库文件为准
Tool bar（Off / On 双状态）
Nav bar · Team · Contest Card
