toshiocn/HexTrails
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add production campaigns, gameplay labs, and review documentation

Browse Source
This commit is contained in:
cabinw
2026-09-13 12:27:10 +08:00
parent d1dffa9338
commit 4644e975b0
214 changed files with 98994 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/art-directions.css
+14
View File
@@ -0,0 +1,14 @@
.direction-review{padding:52px 0 24px}.review-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}.review-heading h1{font-size:clamp(30px,4vw,48px);letter-spacing:-1.5px;margin:14px 0}.review-heading p{max-width:730px;color:#56687A}.review-heading>a{font-size:12px;white-space:nowrap;padding-bottom:22px}
.direction-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:28px 0 18px}.direction-card{border:1px solid #273b5020;border-radius:18px;overflow:hidden;background:white}.direction-switch{display:block;background:none;padding:0;width:100%;text-align:left;color:#273B50}.direction-switch canvas{display:block;width:100%;height:auto}.direction-switch[aria-pressed=true]{box-shadow:inset 0 -3px #6652B8}.direction-card:has([aria-pressed=true]){outline:2px solid #6652B8;outline-offset:3px}.direction-card-title{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:14px 12px;font-weight:650;font-size:13px}.direction-card-title small{font-weight:400;font-size:10px;color:#56687A}.keep-design{display:flex;align-items:center;gap:8px;border-top:1px solid #273b5010;padding:12px;font-size:12px;cursor:pointer}.keep-design input{width:17px;height:17px;accent-color:#6652B8}.review-summary-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}.review-summary-bar p{font-size:12px}.review-summary-bar button,.sheet-link{background:#273B50;color:white;border-radius:10px;padding:12px 16px;font-size:12px;display:inline-block}.direction-detail{margin-top:24px;border-top:1px solid #273b5020;border-bottom:1px solid #273b5020;padding:30px 0;display:grid;grid-template-columns:1.25fr 1fr;gap:60px}.direction-detail h2{font-size:28px;margin:10px 0}.direction-detail p,.direction-detail li{font-size:13px;line-height:1.9}.direction-detail ul{padding-left:18px;color:#56687A;margin-bottom:22px}.review-note{font-size:13px;display:flex;flex-direction:column;gap:12px;padding-top:4px}.review-note textarea{resize:vertical;width:100%;min-height:110px;border:1px solid #273b5030;border-radius:12px;padding:14px;background:white;font:inherit;color:#273B50}.review-note small{font-size:11px;color:#56687A}.intro{padding-top:30px}.intro h1{font-size:34px}.direction-review~.intro .intro-note{max-width:520px}
body[data-design=vivid] .phone{border:3px solid #30264C;box-shadow:8px 8px #30264C;border-radius:18px}body[data-design=vivid] .icon-button{background:#4A24E8;border:2px solid #30264C;border-radius:8px;box-shadow:3px 3px #30264C}body[data-design=vivid] .phone-top strong{font-weight:900;letter-spacing:-.6px}body[data-design=vivid] .game-notice{border:2px solid #30264C;border-radius:8px;box-shadow:3px 3px #30264C}
body[data-design=toy] .phone{border:8px solid #F9EDCF;border-radius:42px;box-shadow:0 12px 0 #B5A68D,0 20px 30px #273b501f,inset 0 3px 3px #FFFFFF90}body[data-design=toy] .icon-button{background:#4279B7;border-radius:15px;box-shadow:0 4px #244F80,inset 0 2px #82ACD2}body[data-design=toy] .game-notice{background:#FFF9EB;border:2px solid #D8CBB0;box-shadow:0 3px #C4B598}
body[data-design=animals] .phone{border:3px solid #718763;border-radius:40px 40px 28px 28px;box-shadow:0 6px 0 #71876330}body[data-design=animals] .icon-button{background:#54795C;border-radius:16px 16px 12px 12px;box-shadow:0 3px #36523C}body[data-design=animals] .game-notice{background:#FFFCED;border:1px solid #71876380;border-radius:18px}.phone canvas{min-width:0}
/* Dedicated design sheets use the same tokens and real board renderer. */
.sheet-page{background:var(--paper);color:#273B50}.sheet-main{max-width:1320px;padding:40px;margin:auto}.sheet-nav{display:flex;justify-content:space-between;font-size:12px;border-bottom:1px solid #273b5020;padding-bottom:20px}.sheet-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:44px 0 36px}.sheet-hero h1{font-size:52px;line-height:1.1}.sheet-hero p{font-size:15px}.sheet-token-row{width:100%;height:auto;background:var(--paper);align-self:center}.sheet-themes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.sheet-theme{border-radius:18px;background:var(--bg);color:var(--ink);padding:18px 8px;text-align:center}.sheet-theme h3{font-size:15px;margin:9px 0}.sheet-theme small{font-size:11px}.sheet-theme canvas{width:100%;height:auto;display:block}.sheet-swatches{display:flex;justify-content:center;gap:6px;margin:12px 0}.sheet-swatches i{width:18px;height:18px;border-radius:50%}.sheet-components{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}.sheet-panel{border-top:1px solid #273b5020;padding-top:24px}.sheet-panel h2{font-size:22px}.sheet-panel ul{font-size:14px;line-height:2;padding-left:18px}.component-preview{background:var(--bg);padding:28px;border-radius:24px}.sample-controls{display:flex;justify-content:center;gap:12px}.sample-controls button{padding:12px 18px;color:white;background:var(--accent);border-radius:12px;font-size:13px}.sample-modal{background:#FFFCF5;border-radius:24px;padding:24px;margin-top:24px;text-align:center;color:#273B50}.sample-modal .stars{font-size:38px;color:#F7BB32;text-shadow:0 2px #C68525,0 0 16px #F8D776}.sheet-page[data-design=vivid] .sample-modal,.sheet-page[data-design=vivid] .sample-controls button{border:2px solid #30264C;border-radius:10px;box-shadow:4px 4px #30264C}.sheet-page[data-design=toy] .sample-modal,.sheet-page[data-design=toy] .sample-controls button{box-shadow:0 5px #B8A88D,inset 0 3px #FFFFFF55;border-radius:24px}.sheet-page[data-design=animals] .sample-modal{border:2px solid #718763;border-radius:30px}.sheet-page[data-design=animals] .sample-controls button{border-radius:18px;box-shadow:0 3px #36523C}.sheet-caption{font-size:12px;line-height:1.8;color:#56687A;margin:20px 0}
@media(max-width:900px){.direction-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.direction-detail{gap:24px}.sheet-themes{grid-template-columns:repeat(2,minmax(0,1fr))}.sheet-hero{gap:20px}.sheet-hero h1{font-size:38px}}
@media(max-width:650px){.review-heading{display:block}.review-heading>a{display:inline-block;padding:0}.direction-review{padding-top:30px}.direction-card-title{display:block;font-size:12px}.direction-card-title small{display:block;margin-top:5px}.direction-detail,.sheet-hero,.sheet-components{grid-template-columns:1fr;gap:22px}.review-summary-bar{align-items:start}.review-summary-bar button{flex-shrink:0;padding:10px;font-size:11px}.sheet-main{padding:22px}.sheet-themes{gap:12px}.sheet-theme{padding:12px 5px}}
body[data-design=vivid]:not(.editing) .game-shell .game-icon{filter:drop-shadow(3px 3px 0 #30264C)}
body[data-design=toy]:not(.editing) .game-shell .game-icon{filter:drop-shadow(0 4px 0 #B5A68D)}
body[data-design=animals]:not(.editing) .game-shell .game-icon{filter:sepia(.25) hue-rotate(320deg)}
.quick-review{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:22px;padding:10px 22px;background:#F7F6F2F5;border-bottom:1px solid #273b501c;backdrop-filter:blur(12px);font-size:12px}.quick-review label{display:flex;align-items:center;gap:9px}.quick-review select{font:inherit;color:#273B50;background:white;border:1px solid #273b5033;border-radius:8px;min-height:36px;padding:5px 10px}.quick-review a{font-size:11px}.direction-picker,.phone{scroll-margin-top:80px}
@media(max-width:500px){.quick-review{gap:10px;padding:8px 10px}.quick-review label{gap:5px}.quick-review select{max-width:130px;font-size:11px}.quick-review a{font-size:10px}.review-heading h1{font-size:28px}}
design/components.css
+3
View File
@@ -115,3 +115,6 @@ body:not(.editing) .rotate-button b{font-size:13px}
body:not(.editing) .rotate-button>.ui-icon{width:46px;height:46px}
}
body:not(.editing) .game-card{align-self:stretch}
/* Warm gold reward stars with a restrained halo. */
.result-emblem .ui-icon[data-icon="star"]{filter:brightness(0) saturate(100%) invert(79%) sepia(85%) saturate(1450%) hue-rotate(350deg) brightness(105%) contrast(102%) drop-shadow(0 2px 1px #c88b2380) drop-shadow(0 0 7px #ffd45c99) drop-shadow(0 0 16px #ffe8a366)}
design/directions/animals.html
+1
View File
File diff suppressed because one or more lines are too long
design/directions/animals.md
+27
View File
@@ -0,0 +1,27 @@
# 动物弯弯镇
猫咪、小熊、兔子与青蛙沿轨道出游。用表情与耳朵增加性格，方向箭头独立保留。
## 设计规则
- 圆脸、短耳与小表情，外形保持在六角范围内
- 箭头留在脸部下方，不靠动物朝向猜方向
- 草地、木棕与奶油毛色，搭配森林小径
## 五种主题
| 难度 | 名称 | 环境色 |
| --- | --- | --- |
| 轻松 | 青草野餐 | #A9CD69 |
| 进阶 | 橡果秋游 | #E7B947 |
| 烧脑 | 溪边捉迷藏 | #72BEB2 |
| 挑战 | 红土探险 | #C67B47 |
| 每周挑战 | 萤火森林 | #183F36 |
## 游戏道具与布局
- 撤销、重来、提示使用独立彩色底座，64–68px，图标 32px，标签 13px。顶部导航保持紧凑。道具使用纯色平面，不使用阴影、立体底边或渐变高光。
- 右上角预留次数或“▶ AD”角标。设计稿展示“撤销 3 次”和“广告获取提示”，仅为样式，不启用真实库存或广告逻辑。
- 棋盘在通知区与独立旋转区之间垂直居中。旋转区和道具区占据真实布局行，不覆盖棋盘。
此方案使用独立的棋子造型、轨道材质和控件样式，共用现有弯曲轨道玩法。审核页支持同时保留多套方案。
design/directions/calm.html
+1
View File
File diff suppressed because one or more lines are too long
design/directions/calm.md
+27
View File
@@ -0,0 +1,27 @@
# 柔和原色
低饱和环境与平面六角棋子，让注意力留在轨道和方向。
## 设计规则
- 哑光色块，克制装饰
- 蓝灰细轨道，保持视觉留白
- 金色奖励，柔和浮现
## 五种主题
| 难度 | 名称 | 环境色 |
| --- | --- | --- |
| 轻松 | 薄荷浅湾 | #C5E4DF |
| 进阶 | 杏色午后 | #F1D7B8 |
| 烧脑 | 鸢尾花园 | #D8D0EB |
| 挑战 | 玫瑰暮色 | #E7C3CE |
| 每周挑战 | 午夜极光 | #293956 |
## 游戏道具与布局
- 撤销、重来、提示使用独立彩色底座，64–68px，图标 32px，标签 13px。顶部导航保持紧凑。道具使用纯色平面，不使用阴影、立体底边或渐变高光。
- 右上角预留次数或“▶ AD”角标。设计稿展示“撤销 3 次”和“广告获取提示”，仅为样式，不启用真实库存或广告逻辑。
- 棋盘在通知区与独立旋转区之间垂直居中。旋转区和道具区占据真实布局行，不覆盖棋盘。
此方案使用独立的棋子造型、轨道材质和控件样式，共用现有弯曲轨道玩法。审核页支持同时保留多套方案。
design/directions/toy.html
+1
View File
File diff suppressed because one or more lines are too long
design/directions/toy.md
+27
View File
@@ -0,0 +1,27 @@
# 积木轨道屋
圆润积木、原色塑胶与压下去有回弹的按钮。棋子像可以拿在手里的小零件。
## 设计规则
- 同色深浅叠层，形成柔软厚度
- 红黄蓝绿积木配木色底板
- 圆角控件、凸起边缘与轻微高光
## 五种主题
| 难度 | 名称 | 环境色 |
| --- | --- | --- |
| 轻松 | 积木黄盒 | #F4C548 |
| 进阶 | 蓝色装配台 | #56AFE0 |
| 烧脑 | 橘红工坊 | #EA743E |
| 挑战 | 绿毯小城 | #439A73 |
| 每周挑战 | 太空玩具柜 | #244584 |
## 游戏道具与布局
- 撤销、重来、提示使用独立彩色底座，64–68px，图标 32px，标签 13px。顶部导航保持紧凑。道具使用纯色平面，不使用阴影、立体底边或渐变高光。
- 右上角预留次数或“▶ AD”角标。设计稿展示“撤销 3 次”和“广告获取提示”，仅为样式，不启用真实库存或广告逻辑。
- 棋盘在通知区与独立旋转区之间垂直居中。旋转区和道具区占据真实布局行，不覆盖棋盘。
此方案使用独立的棋子造型、轨道材质和控件样式，共用现有弯曲轨道玩法。审核页支持同时保留多套方案。
design/directions/vivid.html
+1
View File
File diff suppressed because one or more lines are too long
design/directions/vivid.md
+27
View File
@@ -0,0 +1,27 @@
# 高彩游乐场
鲜明撞色、粗线条与贴纸式棋子。像一张能玩的彩色海报，明快、有力量。
## 设计规则
- 高纯度主色，深色轮廓统一画面
- 轨道像印刷线，棋子像立起的贴纸
- 方圆按钮与错位硬阴影
## 五种主题
| 难度 | 名称 | 环境色 |
| --- | --- | --- |
| 轻松 | 青柠派对 | #B8F34A |
| 进阶 | 爆橙热浪 | #FF771B |
| 烧脑 | 钴蓝电场 | #3E42EE |
| 挑战 | 荧粉冲刺 | #FF3588 |
| 每周挑战 | 黑光嘉年华 | #1B104D |
## 游戏道具与布局
- 撤销、重来、提示使用独立彩色底座，64–68px，图标 32px，标签 13px。顶部导航保持紧凑。道具使用纯色平面，不使用阴影、立体底边或渐变高光。
- 右上角预留次数或“▶ AD”角标。设计稿展示“撤销 3 次”和“广告获取提示”，仅为样式，不启用真实库存或广告逻辑。
- 棋盘在通知区与独立旋转区之间垂直居中。旋转区和道具区占据真实布局行，不覆盖棋盘。
此方案使用独立的棋子造型、轨道材质和控件样式，共用现有弯曲轨道玩法。审核页支持同时保留多套方案。
design/game-tools.css
+60
View File
@@ -0,0 +1,60 @@
/* Flat gameplay items: solid fills, no shadows, bevels or highlights. */
.game-tool{--item-color:#7198D0;--item-edge:#FFFFFFB8;--item-radius:50%;--item-border:2px solid var(--item-edge);--item-size:64px}
.game-tool[data-tool=restart]{--item-color:#A28ACC;}
.game-tool[data-tool=hint]{--item-color:#EABB55;}
:is(.phone .phone-tools,body:not(.editing) .board-tools,.item-samples,.guide-tools) .game-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:80px;min-height:96px;margin:0;padding:4px 0;background:none;color:inherit;border:0;box-shadow:none;border-radius:18px;line-height:1.2}
:is(.phone .phone-tools,body:not(.editing) .board-tools,.item-samples,.guide-tools) .game-tool>.item-face{position:relative;isolation:isolate;display:grid;place-items:center;width:var(--item-size);height:var(--item-size);padding:16px;flex:none;border:0;border-radius:var(--item-radius);background:none;filter:none;overflow:visible}
.game-tool .item-face::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;border:var(--item-border);background:var(--item-color);box-shadow:none}
.game-tool .item-face>.ui-plate{display:none!important}
body:not(.editing) .game-tool .item-face>.ui-icon,.game-tool .item-face>.icon{width:32px;height:32px;margin:0;filter:var(--item-icon-filter,none)}
.game-tool[data-tool=hint]{--item-icon-filter:brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(1391%) hue-rotate(357deg) brightness(93%) contrast(90%)}
:is(.phone .phone-tools,body:not(.editing) .board-tools,.item-samples,.guide-tools) .game-tool>b{font-size:13px;font-weight:650;letter-spacing:.04em;line-height:1.3}
:is(.phone .phone-tools,body:not(.editing) .board-tools) .game-tool:disabled{opacity:.5;cursor:default}
.game-tool .item-face>.item-glyph{width:32px;height:32px}.game-tool .item-face>.art-icon{filter:var(--item-icon-filter,none)}
body[data-design=vivid] .game-tool{--item-color:#00BEEA;--item-border:3px solid #30264C;--item-radius:50%}
body[data-design=vivid] .game-tool[data-tool=restart]{--item-color:#F62A83;}
body[data-design=vivid] .game-tool[data-tool=hint]{--item-color:#FFCE19;}
body[data-design=toy] .game-tool{--item-color:#187DCE;--item-border:3px solid #FFF5D9;--item-radius:24px}
body[data-design=toy] .game-tool[data-tool=restart]{--item-color:#E8523D;}
body[data-design=toy] .game-tool[data-tool=hint]{--item-color:#F5C637;}
body[data-design=animals] .game-tool{--item-color:#79945B;--item-border:3px solid #FFF9DE;--item-radius:44% 44% 36% 36%}
body[data-design=animals] .game-tool[data-tool=restart]{--item-color:#C1804C;}
body[data-design=animals] .game-tool[data-tool=hint]{--item-color:#D4B647;}
body[data-design=animals] .game-tool .item-face::after{content:'';position:absolute;top:7px;left:17px;right:17px;height:4px;border-radius:50%;border-top:2px dotted #FFFFFF95;pointer-events:none}
/* Reserve real rows for rotations and items so the canvas is truly centered
between the notification area and controls, including on short screens. */
body:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 76px 108px}
body:not(.editing) .rotation-controls{position:static;grid-row:2;grid-column:1/-1;display:flex;align-items:center;justify-content:space-around;padding:0 20px;gap:32px;pointer-events:auto}
body:not(.editing) .rotation-controls .rotate-button{min-height:68px;padding:0;gap:4px}
body:not(.editing) .rotate-button>.ui-icon{width:48px;height:48px}
body:not(.editing) .board-tools>.game-tool{grid-row:3;justify-self:center;width:100%}
.phone{grid-template-rows:44px 40px 64px minmax(0,1fr) 76px 108px}
.phone .rotations{position:static;grid-row:5;grid-column:1/-1;display:flex;align-items:center;justify-content:space-around;margin:0;padding:0 12px;gap:32px;pointer-events:auto}
.phone .rotations button{min-height:68px;padding:0;gap:4px}
.phone .rotations button>span{width:48px;height:48px}
.phone .phone-tools>.game-tool{grid-row:6;justify-self:center;width:100%}
@media(min-width:600px){.game-tool{--item-size:68px}body:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 80px 116px}.phone{grid-template-rows:44px 40px 64px minmax(0,1fr) 80px 116px}}
@media(max-height:600px){
.phone .game-tool,body:not(.editing) .game-tool{--item-size:56px}
body:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 62px 88px}
.phone{grid-template-rows:44px 40px 64px minmax(0,1fr) 62px 88px}
body:not(.editing) .rotation-controls .rotate-button,.phone .rotations button{min-height:58px}
body:not(.editing) .rotate-button>.ui-icon,.phone .rotations button>span{width:40px;height:40px}
:is(.phone .phone-tools,body:not(.editing) .board-tools) .game-tool{min-height:84px;gap:10px}
:is(.phone .phone-tools,body:not(.editing) .board-tools) .game-tool>.item-face{padding:12px}
}
/* Future inventory examples are documentation only; gameplay has no badges. */
.item-samples,.guide-tools{display:flex;justify-content:space-evenly;align-items:center;gap:16px;padding:16px 0 10px;text-align:center;color:var(--scene-ink,var(--ink,#273B50))}
.item-badge{position:absolute;right:-7px;top:-5px;z-index:2;display:grid;place-items:center;min-width:27px;height:27px;padding:0 7px;border:2px solid #FFFCF5;border-radius:14px;background:#334B60;color:white;font:750 12px/1 system-ui,sans-serif;box-shadow:none}
.item-badge.ad{right:-12px;min-width:42px;background:#5C478C;gap:3px;display:flex;align-items:center;justify-content:center;font-size:10px}
.item-badge.ad::before{content:'▶';font-size:8px}
.item-future{margin-top:28px;border-top:1px solid #273B5020;padding-top:24px}
.item-future h3{font-size:18px;margin:8px 0}.item-future p{font-size:12px;color:#56687A}
.item-future .item-samples{border-radius:20px;background:#E9EDE5;padding:22px 8px 16px;color:#273B50}
.item-spec{font-size:12px;line-height:1.9;color:#56687A}
.item-study{padding:44px 0;border-bottom:1px solid #273B5020;scroll-margin-top:80px}
.item-study-content{max-width:640px;margin:auto}.item-study-content>.item-samples{background:var(--scene-bg,#E9EDE5);border-radius:24px;padding:24px 12px 18px}
@media(max-width:380px){.item-samples,.guide-tools{gap:4px}.component-preview{padding:16px}.game-tool{min-width:72px}}
design/guide-template.html
+5 -3
View File
@@ -16,16 +16,18 @@ button{transition-duration:var(--pressMs)}button:active:enabled{transform:scale(
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.pressed,button:active:enabled{transform:none!important}.rotate-example:active .icon{transform:none}dialog::backdrop{animation:none!important}}
@media print{.topbar,.hero-actions,.search-box,.status,.print-hidden,dialog{display:none!important}.page{max-width:none;padding:0}.hero{grid-template-columns:1fr 300px;padding:20px 0;gap:25px}.hero h1{font-size:36px}.section{padding:25px 0}.swatch-grid{grid-template-columns:repeat(4,1fr)}.card,.swatch,.icon-item,.pair-card,.type-sample{break-inside:avoid}.section-head{break-after:avoid}.table-scroll{overflow:visible}tr{break-inside:avoid}.spec h3{break-after:avoid}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}.footer{padding-bottom:0}}
@media print{.swatch[hidden]{display:block!important}.empty{display:none!important}}
.mini-stars .icon.icon-star{filter:brightness(0) saturate(100%) invert(79%) sepia(85%) saturate(1450%) hue-rotate(350deg) brightness(105%) contrast(102%) drop-shadow(0 2px 1px #c88b2380) drop-shadow(0 0 7px #ffd45c99) drop-shadow(0 0 16px #ffe8a366)}
{{GAME_TOOLS_CSS}}
</style>
</head>
<body>
{{TILE_IMAGE}}
<header class="topbar"><div class="page"><a class="brand" href="#overview"><span></span>HEX TRAILS</a><nav class="nav" aria-label="设计手册目录"><a href="#colors">颜色</a><a href="#components">组件</a><a href="#icons">图标</a><a href="#type">排版</a><a href="#motion">动效</a><a href="#specification">完整规范</a></nav></div></header>
<main class="page">
<section class="hero" id="overview"><div><p class="eyebrow">视觉设计手册 · 1.0 / 2026.09.08</p><h1>让每一种颜色<br><span>各司其职。</span></h1><p>HEX TRAILS 的视觉语言：冷蓝灰承托环境，暖白勾勒棋盘，紫色强调操作。把最明快的颜色，留给棋子。</p><div class="scheme-strip" aria-label="核心配色"><span style="background:var(--background)"></span><span style="background:var(--board)"></span><span style="background:var(--utility)"></span><span style="background:var(--primary)"></span><span style="background:var(--tileYellow)"></span></div><div class="hero-actions"><a class="button primary" href="#colors">查看颜色体系</a><button class="button" id="print-guide">打印 / 存为 PDF</button></div><p class="hero-note">适用：游戏界面、手机触摸操作、Cocos 移植。<br>本文件可离线打开，包含完整规范与原始图片。</p></div><div><div class="phone-stage" aria-label="当前主界面静态组合示例"><div class="phone-top"><span class="icon-ground"><span class="icon icon-grid" aria-hidden="true"></span></span><span class="phone-level">LEVEL 02</span><span class="icon-ground"><span class="icon icon-gear" aria-hidden="true"></span></span></div><div class="phone-moves">剩余步数<b>{{MOVES}}</b></div>{{BOARD}}<div class="phone-rotate"><div><span class="icon icon-left" aria-hidden="true"></span><small>左转</small></div><div><span class="icon icon-right" aria-hidden="true"></span><small>右转</small></div></div><div class="phone-tools"><div class="demo-disabled"><span class="icon-ground"><span class="icon icon-undo" aria-hidden="true"></span></span><small>撤销</small></div><div><span class="icon-ground"><span class="icon icon-restart" aria-hidden="true"></span></span><small>重来</small></div><div><span class="icon-ground"><span class="icon icon-bulb" aria-hidden="true"></span></span><small>提示</small></div></div></div><p class="preview-caption">静态组合示意 · 使用实际关卡绘制与当前生成素材</p></div></section>
<section class="hero" id="overview"><div><p class="eyebrow">视觉设计手册 · 1.0 / 2026.09.08</p><h1>让每一种颜色<br><span>各司其职。</span></h1><p>HEX TRAILS 的视觉语言：冷蓝灰承托环境，暖白勾勒棋盘，紫色强调操作。把最明快的颜色，留给棋子。</p><div class="scheme-strip" aria-label="核心配色"><span style="background:var(--background)"></span><span style="background:var(--board)"></span><span style="background:var(--utility)"></span><span style="background:var(--primary)"></span><span style="background:var(--tileYellow)"></span></div><div class="hero-actions"><a class="button primary" href="#colors">查看颜色体系</a><button class="button" id="print-guide">打印 / 存为 PDF</button></div><p class="hero-note">适用：游戏界面、手机触摸操作、Cocos 移植。<br>本文件可离线打开，包含完整规范与原始图片。</p></div><div><div class="phone-stage" aria-label="当前主界面静态组合示例"><div class="phone-top"><span class="icon-ground"><span class="icon icon-grid" aria-hidden="true"></span></span><span class="phone-level">LEVEL 02</span><span class="icon-ground"><span class="icon icon-gear" aria-hidden="true"></span></span></div><div class="phone-moves">剩余步数<b>{{MOVES}}</b></div>{{BOARD}}<div class="phone-rotate"><div><span class="icon icon-left" aria-hidden="true"></span><small>左转</small></div><div><span class="icon icon-right" aria-hidden="true"></span><small>右转</small></div></div><div class="guide-tools">{{GAME_ITEMS_ROW}}</div></div><p class="preview-caption">静态组合示意 · 使用实际关卡绘制与当前生成素材</p></div></section>
<div class="principles"><article class="principle"><h3>01 · 先分角色，再选颜色</h3><p>环境、内容、操作与状态各有用途。同一层级的工具使用同一组颜色。</p></article><article class="principle"><h3>02 · 一个界面，一个重点</h3><p>紫色留给主要确认与选中状态；蓝灰工具安静地服务棋盘。</p></article><article class="principle"><h3>03 · 让信息看得清楚</h3><p>配对检查文字和图形的对比度；用文字、图标与反馈共同表达状态。</p></article></div>
<section class="section" id="colors" style="margin-top:60px"><div class="section-head"><div><span class="section-num">01 / COLOR</span><h2>有职责的色板</h2><p>点击色块复制 HEX。先看用途，再选颜色；不要把棋子色直接套到普通按钮上。</p></div><span class="pill">固定浅色主题</span></div><div class="search-box"><input id="color-search" type="search" placeholder="搜索颜色用途、Token 或 HEX" aria-label="搜索颜色"><span id="color-count"></span></div><div class="swatch-grid" id="swatches">{{SWATCHES}}</div><p class="empty" id="empty-colors" hidden>没有找到匹配颜色，请换一个关键词。</p><p class="note">棋子 HEX 是已接受图片的代表采样值，不保证每个像素完全一致。遮罩色含透明度，展示时会与手册底色混合。</p><div class="pair-grid"><div class="pair-card primary-pair"><b>下一关</b><p>主操作：紫底 + 白字<br>一张弹窗只放一个高强调主操作。</p><code>primary / onPrimary</code></div><div class="pair-card utility-pair"><b>提示</b><p>工具：蓝灰底 + 白色图标<br>选关、设置、撤销、重来、提示统一。</p><code>utility / onUtility</code></div><div class="pair-card warning-pair"><b>路线被挡住了</b><p>反馈：浅暖底 + 深警告色<br>搭配明确原因，不依赖颜色表达阻挡。</p><code>warningSurface / warning</code></div></div><h3>配对对比度</h3><p class="note" style="margin:0 0 20px">下表检查不透明 Token 配对：文字 4.5:1，必要图形 3:1。蓝棋子上的白箭头通过图形标准，不适合据此放白色小字。透明图标、阴影和真实字体仍需画面验收。</p><div class="table-scroll"><table class="pair-table"><thead><tr><th>实际配对</th><th>前景 / 背景</th><th>对比度</th><th>最低要求</th><th>Token 检查</th></tr></thead><tbody>{{PAIR_ROWS}}</tbody></table></div></section>
<section class="section" id="components"><div class="section-head"><div><span class="section-num">02 / COMPONENTS</span><h2>把规范放到控件上</h2><p>真实图标、明确层级和可识别状态。以下按钮可点击查看反馈，禁用示例确实不可点击。</p></div></div><div class="component-grid"><article class="card"><h3>操作层级</h3><div class="demo-row"><button class="button primary" data-feedback="主操作：primary / onPrimary">下一关 <span class="icon icon-play" aria-hidden="true"></span></button><button class="button" data-feedback="次操作：secondary / textPrimary">再走一遍</button></div><div class="demo-row"><button class="button utility" data-feedback="工具：utility / onUtility"><span class="icon icon-bulb" aria-hidden="true"></span>提示</button><button class="button utility demo-disabled" disabled><span class="icon icon-undo" aria-hidden="true"></span>撤销</button></div><p>网页禁用态是在正常控件上应用 55% 透明度。<code>disabled / onDisabled</code> 是原生参考色，二者不要混用。</p></article><article class="card"><h3>按压与键盘焦点</h3><div class="demo-row"><div class="demo-column"><button class="button utility" data-feedback="默认状态">提示</button><small>默认</small></div><div class="demo-column"><button class="button utility pressed" data-feedback="按压示意：缩放至 94%">提示</button><small>按压示意</small></div><div class="demo-column"><button class="button utility focus-demo" data-feedback="使用 Tab 键查看真实焦点">提示</button><small>焦点示意</small></div></div><p>按压反馈为 150ms。使用 Tab 键可查看真实焦点；轮廓与形状共同标识交互状态。</p></article><article class="card"><h3>旋转：留出呼吸空间</h3><div class="demo-row rotation-demo"><button class="rotate-example" data-feedback="左转控件：无矩形底板"><span class="icon icon-left" aria-hidden="true"></span>左转</button><button class="rotate-example" data-feedback="右转控件：无矩形底板"><span class="icon icon-right" aria-hidden="true"></span>右转</button></div><p>保留生成图标造型，放大显示并附文字。轮廓使用轻微蓝灰阴影；它不属于上面的纯色对比度检查。</p></article><article class="card"><h3>选中：颜色加状态文字</h3><div class="level-samples" aria-label="关卡选中状态演示"><button class="level-sample" aria-pressed="false">01<small>选择关卡</small></button><button class="level-sample" aria-pressed="true">02<small>当前关卡</small></button><button class="level-sample" aria-pressed="false">03<small>选择关卡</small></button></div><p>点击切换选中示例。普通关卡用中性底色和深色数字，当前关卡用紫底白字，并有明确状态。</p></article></div><article class="card tile-panel"><div>{{TILES}}</div><div><h3>四种棋子，一套规则</h3><p>使用当前棋子图片与共享圆角六边形遮罩，方向箭头沿用游戏绘制。颜色不代表功能、品质或阵营。</p><p><b>黄色必须使用深色箭头。</b><br>白箭头保留在蓝、粉、紫棋子上。各色棋子均通过位置、方向和运动判断。</p></div></article></section>
<section class="section" id="colors" style="margin-top:60px"><div class="section-head"><div><span class="section-num">01 / COLOR</span><h2>有职责的色板</h2><p>点击色块复制 HEX。先看用途，再选颜色；不要把棋子色直接套到普通按钮上。</p></div><span class="pill">固定浅色主题</span></div><div class="search-box"><input id="color-search" type="search" placeholder="搜索颜色用途、Token 或 HEX" aria-label="搜索颜色"><span id="color-count"></span></div><div class="swatch-grid" id="swatches">{{SWATCHES}}</div><p class="empty" id="empty-colors" hidden>没有找到匹配颜色，请换一个关键词。</p><p class="note">棋子 HEX 是已接受图片的代表采样值，不保证每个像素完全一致。遮罩色含透明度，展示时会与手册底色混合。</p><div class="pair-grid"><div class="pair-card primary-pair"><b>下一关</b><p>主操作：紫底 + 白字<br>一张弹窗只放一个高强调主操作。</p><code>primary / onPrimary</code></div><div class="pair-card utility-pair"><b>设置</b><p>导航：蓝灰底 + 白色图标<br>底部游戏道具使用更大的独立彩色底座。</p><code>utility / onUtility</code></div><div class="pair-card warning-pair"><b>路线被挡住了</b><p>反馈：浅暖底 + 深警告色<br>搭配明确原因，不依赖颜色表达阻挡。</p><code>warningSurface / warning</code></div></div><h3>配对对比度</h3><p class="note" style="margin:0 0 20px">下表检查不透明 Token 配对：文字 4.5:1，必要图形 3:1。蓝棋子上的白箭头通过图形标准，不适合据此放白色小字。透明图标、阴影和真实字体仍需画面验收。</p><div class="table-scroll"><table class="pair-table"><thead><tr><th>实际配对</th><th>前景 / 背景</th><th>对比度</th><th>最低要求</th><th>Token 检查</th></tr></thead><tbody>{{PAIR_ROWS}}</tbody></table></div></section>
<section class="section" id="components"><div class="section-head"><div><span class="section-num">02 / COMPONENTS</span><h2>把规范放到控件上</h2><p>真实图标、明确层级和可识别状态。以下按钮可点击查看反馈，禁用示例确实不可点击。</p></div></div><div class="component-grid"><article class="card"><h3>操作层级</h3><div class="demo-row"><button class="button primary" data-feedback="主操作：primary / onPrimary">下一关 <span class="icon icon-play" aria-hidden="true"></span></button><button class="button" data-feedback="次操作：secondary / textPrimary">再走一遍</button></div><div class="demo-row"><button class="button utility" data-feedback="工具：utility / onUtility"><span class="icon icon-gear" aria-hidden="true"></span>设置</button><button class="button utility demo-disabled" disabled><span class="icon icon-grid" aria-hidden="true"></span>选关</button></div><p>网页禁用态是在正常控件上应用 55% 透明度。<code>disabled / onDisabled</code> 是原生参考色，二者不要混用。</p></article><article class="card"><h3>按压与键盘焦点</h3><div class="demo-row"><div class="demo-column"><button class="button utility" data-feedback="默认状态">设置</button><small>默认</small></div><div class="demo-column"><button class="button utility pressed" data-feedback="按压示意：缩放至 94%">设置</button><small>按压示意</small></div><div class="demo-column"><button class="button utility focus-demo" data-feedback="使用 Tab 键查看真实焦点">设置</button><small>焦点示意</small></div></div><p>按压反馈为 150ms。使用 Tab 键可查看真实焦点；轮廓与形状共同标识交互状态。</p></article><article class="card"><h3>旋转：留出呼吸空间</h3><div class="demo-row rotation-demo"><button class="rotate-example" data-feedback="左转控件：无矩形底板"><span class="icon icon-left" aria-hidden="true"></span>左转</button><button class="rotate-example" data-feedback="右转控件：无矩形底板"><span class="icon icon-right" aria-hidden="true"></span>右转</button></div><p>保留生成图标造型，放大显示并附文字。轮廓使用轻微蓝灰阴影；它不属于上面的纯色对比度检查。</p></article><article class="card"><h3>选中：颜色加状态文字</h3><div class="level-samples" aria-label="关卡选中状态演示"><button class="level-sample" aria-pressed="false">01<small>选择关卡</small></button><button class="level-sample" aria-pressed="true">02<small>当前关卡</small></button><button class="level-sample" aria-pressed="false">03<small>选择关卡</small></button></div><p>点击切换选中示例。普通关卡用中性底色和深色数字，当前关卡用紫底白字，并有明确状态。</p></article></div><article class="card" style="margin-top:24px"><h3>游戏道具：独立于顶部导航</h3>{{GAME_ITEMS}}<p>棋盘以通知区和旋转区之间的可用区域为中心，上下留白相等。旋转、道具分行排列，不覆盖棋盘。</p></article><article class="card tile-panel"><div>{{TILES}}</div><div><h3>四种棋子，一套规则</h3><p>使用当前棋子图片与共享圆角六边形遮罩，方向箭头沿用游戏绘制。颜色不代表功能、品质或阵营。</p><p><b>黄色必须使用深色箭头。</b><br>白箭头保留在蓝、粉、紫棋子上。各色棋子均通过位置、方向和运动判断。</p></div></article></section>
<section class="section" id="icons"><div class="section-head"><div><span class="section-num">03 / ASSETS</span><h2>同一套图标，同一套语气</h2><p>当前使用的 16 个生成图标，按实际图形边界裁成正方形并等比居中。这里保留原始 PNG 的像素与造型。</p></div><span class="pill">原图 1254 × 1254</span></div><div class="icon-grid">{{ICONS}}</div><p class="note">原图：<code>ui-icons-generated.png</code>；裁切：<code>src/ui-skin.js → ICONS</code>。不要用代码重绘版、字符或另一套图标替换。透明边缘仍需实机验收。</p></section>
<section class="section" id="type"><div class="section-head"><div><span class="section-num">04 / TYPOGRAPHY & SPACING</span><h2>简单、有秩序的细节</h2><p>文字靠尺寸和字重建立层级，辅助文字仍保持可读对比。以下字号是游戏控件规范，手册正文为阅读做了适当放大。</p></div></div><div class="type-layout"><div><div class="type-sample"><b style="font-size:28px">LEVEL 02</b><code>28px / 粗体</code></div><div class="type-sample"><b style="font-size:32px">9</b><code>步数 32px / 粗体</code></div><div class="type-sample"><b style="font-size:24px">漂亮，全部过关！</b><code>标题 24px</code></div><div class="type-sample"><span style="font-size:14px">轻点箭头，沿着轨道出发。</span><code>正文 13–14px<br>行高 1.75</code></div><div class="type-sample"><span style="font-size:12px">撤销 · 重来 · 提示</span><code>标签 12–13px</code></div></div><div><h3>4px 基础间距</h3><div class="space-row" aria-label="4、8、12、16、24、32 像素间距"><span style="--space:4px" data-size="4"></span><span style="--space:8px" data-size="8"></span><span style="--space:12px" data-size="12"></span><span style="--space:16px" data-size="16"></span><span style="--space:24px" data-size="24"></span><span style="--space:32px" data-size="32"></span></div><h3 style="margin-top:40px">统一圆角</h3><div class="shape-row"><div class="shape" style="border-radius:8px">8px<br>小角标</div><div class="shape" style="border-radius:14px">14px<br>控件</div><div class="shape" style="border-radius:24px">24px<br>弹窗</div></div><p class="note">常规触摸区至少 44 × 44px。中文使用 PingFang SC / Microsoft YaHei；原生端如需一致字宽，须统一授权字体资源。</p></div></div></section>
<section class="section" id="motion"><div class="section-head"><div><span class="section-num">05 / MOTION</span><h2>轻快地出现，清楚地反馈</h2><p>打开演示，查看遮罩、弹窗入场和三颗星星的顺序。遵循系统“减少动态效果”设置。</p></div></div><div class="motion-layout"><div class="motion-preview"><div class="mini-modal"><div class="mini-stars" aria-hidden="true"><span class="icon icon-star"></span><span class="icon icon-star"></span><span class="icon icon-star"></span></div><h3>漂亮，全部过关！</h3><button class="button primary" id="show-motion">播放弹窗动效</button></div></div><div class="timings"><div class="timing"><span>按钮按压</span><b>150 <small>ms</small></b></div><div class="timing"><span>弹窗从上方进入</span><b>420 <small>ms</small></b></div><div class="timing"><span>星星依次开始</span><b><small>300 / 490 / 680 ms</small></b></div><div class="timing"><span>碰撞反馈总长</span><b>1250 <small>ms</small></b></div><p class="note">碰撞顺序：接近 → 接触停顿与阻挡棋子轻震 → 原路弹回。该顺序在游戏中执行，此处只演示弹窗；游戏音效在首次手势后启动，可在设置关闭。</p></div></div></section>
design/tokens.json
+1 -1
View File
@@ -196,7 +196,7 @@
"modalMs": 420,
"starStartMs": 300,
"starGapMs": 190,
"collisionMs": 400,
"collisionMs": 800,
"rotationMs": 240,
"exitMsPerUnit": 120,
"exitRampMs": 80,