LagosLife.partyDesign system
v1.0
THE LAGOSLIFE DESIGN LANGUAGEEDITION 01 / 2026

A little play.
A lot of
possibility.

为轻松探索、清晰阅读和每一次小小的进步而设计。
一套来自游戏攻略站的视觉语言，重新组织为可以直接使用的设计系统。

Explore the system
DESIGN DNA
Aa.
Soft forms. Clear purpose.

FREDOKA + PLUS JAKARTA SANS

FOUNDATIONS / COMPONENTS / PATTERNSVERSION 1.0
20 sections从品牌到响应式规范
1 source fileHTML · CSS · Vanilla JavaScript
2 color modesLight & dark, fully tokenized
参考研究 / Original implementation
依据 lagoslife.online 的首页及攻略组件（2026-10-05 观察）。原站的颜色、字体及圆角比例作为依据；深色主题、完整状态、搜索与组件文档为新增设计。全部示例重新编写，不包含原站图片、Logo 或游戏嵌入。
02 / CHARACTER

Brand personality

轻松，但不幼稚。柔和，但信息清楚。

OBSERVED + REFINED
a
Playful

圆润展示字体，让攻略更有游戏感。

Clear

白色内容面板，稳定的层级与网格。

Soft

大圆角、低饱和底色和轻盈投影。

Helpful

给出下一步，让内容可以快速浏览。

布局依据：原站内容最大宽度 1080px；桌面攻略目录为三列；浮动胶囊导航；主体为白色大面板；文章行宽约 68ch。本文档新增左侧索引，便于长期维护。

03 / COLOR SYSTEM

Good energy, grounded in green.

点击色块复制 HEX。蓝色铺陈氛围，绿色承载操作，海军蓝保证阅读。

FOUNDATION

Semantic colors

Extended palette
✓ Success#0B6E3F / #E8F5EE
! Warning#8A5900 / #FFF4D5
× Error#B42338 / #FFF0F1
i Information#2556A5 / #EDF3FF

所有状态同时使用文字或图标，不单独依靠颜色传递含义。浅蓝色仅用作底色；小字号文字使用深色。色卡列出的 HEX 为浅色主题。

CSS design tokens · 完整变量


04 / TYPOGRAPHY
A friendly voice. A clear read.
保留原站字体搭配；将正文从 15px 提升到 16px，增强长文阅读体验。
OBSERVED + REFINED
DISPLAY500 / 600 / 700
Aa Bb
Fredoka
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
BODY & UI400 / 500 / 600 / 700
Aa Bb
Plus Jakarta Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
标题行高 1.1–1.25，正文 1.65，按钮 1.45；UI 字重 600–700。中文使用系统黑体。字体无法联网加载时自动回退到本机字体。


05 / SPACING
Space to breathe.
基于 4px 的间距序列，让卡片、字段和内容区共享节奏。
EXTENDED
24px container padding / 24px gap / 16px content padding--space-6 / --space-4
Card one
内容拥有稳定留白。
Card two
网格遵循相同间距。


06 / SHAPE
Rounded, with a reason.
10px 小元素，16px 卡片，22–28px 容器，胶囊用于操作。
FOUNDATION


07 / ELEVATION & MOTION
Just enough lift.
只在需要区分层级时使用阴影；交互优先响应，不添加持续动画。
FOUNDATION
Resting
--shadow-sm
轻量分组 / 新增
Card
--shadow-card
0 12px 32px · 12%
Floating
--shadow-float
0 8px 28px · 16%
Motion playground
140ms hover · 220ms transition · 320ms reveal
支持 prefers-reduced-motion。层级：Header 20 / Drawer 30 / Toast 50。



09 / ACTIONS
Buttons that invite.
主操作用绿色，次操作用描边，低优先级用文字。每个示例可点击。
INTERACTIVE
按钮的默认、悬停、按下、焦点和禁用状态
VariantDefaultHoverActiveFocusDisabled
试试点击任意状态示例，或用 Tab 查看真实键盘焦点。


10 / LABELS & FILTERS
Small signals. Useful context.
Badge 是静态标签；Pill 是可选按钮，使用 aria-pressed 暴露选中状态。
COMPONENT
Beginner friendlyGuidePopularDaily gemNeeds review5 min read
这些分类会联动下方 Cards 模块的示例攻略。静态 Badge 不作为按钮使用。


11 / INPUTS & SEARCH
Find your next step.
清楚的标签、可见焦点、与字段相邻的错误信息。
INTERACTIVE
/
搜索会筛选 Cards 中的三张示例卡片；按 / 聚焦，Esc 清空。
Showing 3 guides
仅演示校验，不提交或保存个人信息。
此页面为组件文档，不连接游戏账号。



13 / HERO
A world of small possibilities.
原站首屏为游戏嵌入。本系统新增文字型 Hero，适用于攻略入口与专题页。
EXTENDED PATTERN
YOUR UNOFFICIAL FIELD GUIDE
Your city.
Your pace.
Your next move.
Find a starting point, explore your options, and make room for the little things.
Explore guidesGetting started
STARTER ROUTE
One step at a time.
01Get your bearings
02Explore your options
03Choose your next step
Illustrative content


14 / CARDS & GAME GUIDE PATTERNS
A library worth exploring.
三列卡片、清楚的分类与时间信息。以下为界面示例，不是经核验的游戏攻略。
INTERACTIVE
3 guides · all categories
Stage selector
适用于分段教程或关卡攻略；示例编号不代表原游戏关卡。
EXTENDED
Selected: Stage 01 · Introduction


15 / CONTENT BLOCKS
Make every detail useful.
把线索、提示和步骤组织成可以快速理解的内容单元。
GUIDE PATTERNS
Discovery cardSample, not live
A clue to get you curious.
SAMPLE CLUE
“A quiet corner, an open book, a new possibility.”
Editorial pattern
Keep the useful bit close.
短句、明确的小标题和单一主题，帮助读者快速定位重点。长段落不超过 68ch。
Helpful note提示应说明原因和下一步，避免只有颜色没有说明。
Check before you act游戏数据可能更新。正式攻略应保留核验日期及来源。
Walkthrough pattern
3 STEPS / EDITORIAL EXAMPLE
  1. Get the context.
    先给出本节目标、前提与所需信息。让读者知道完成后会得到什么。
  2. Take one clear action.
    一次只说明一个操作；把相关提示放在附近，用同一组件呈现相同信息。
  3. Check the outcome.
    用文字说明预期结果。成功或错误反馈应同时包含说明和可执行的下一步。
演示状态仅在本次页面会话中有效。


16 / TABLE OF CONTENTS
Give long reads a map.
目录是真实锚点；明确显示当前位置，并为固定导航预留滚动偏移。
CONTENT PATTERN
Sample article
Start with a goal.
一篇攻略从一个具体问题开始。标题说明目标，开篇提供背景，再将复杂内容拆成可浏览的步骤。
Find your rhythm.
保持标题、正文和提示之间的间距一致。导航提供定位，文章承担解释，不把所有文字挤成同一个层级。
Keep moving.
结尾给出明确的下一步。相关链接应描述目的地，让读者知道点击之后会看到什么。
查看步骤式内容示例


17 / FAQ ACCORDION
A little clarity goes a long way.
使用原生 details / summary，支持键盘与无 JavaScript 展开。
INTERACTIVE
这套设计系统保留了原站哪些特征？
绿色 #008751、天空蓝 #6EC4EF、海军蓝 #16203C，以及 Fredoka 和 Plus Jakarta Sans 字体组合。大圆角面板、胶囊导航、三列攻略目录和柔和阴影也来自观察。
哪些内容属于新增设计？
语义化变量命名、完整按钮与表单状态、键盘焦点、搜索与筛选、阶段选择、深色主题和文档侧栏是为可复用性补充的设计。原站的问答以常规标题呈现，本系统增加可折叠样式。
如何把这些组件用于新页面？
先复制 design-tokens 样式块，再复制所需组件样式及语义 HTML。颜色与间距优先引用变量；保留关联的 aria 属性、标签和 focus-visible 样式。需要交互时再复用对应 JavaScript。
HTML 文件离线也能打开吗？
可以。页面、CSS、交互逻辑及图标都在文件中。只有 Google Fonts 需要网络；离线时自动使用系统字体。没有分析追踪、账号登录或远程数据依赖。
示例中的关卡、线索和攻略是否为真实游戏数据？
不是。它们是用于展示组件结构的示例。页面不嵌入游戏，不声明官方身份，也不提供实时奖励、账号或玩家统计。



19 / DARK MODE
Same personality. After hours.
新增深色主题：更亮的绿色承载操作；保持蓝色氛围与原有圆角层级。
EXTENDED
DOCUMENT THEMECurrent
A fresh start.
本卡片继承文档主题，可使用右上角切换全页。
ISOLATED PREVIEW
Beginner friendly
Keep the city close.
Tokens carry the same components from day to night.
Dark mode implementation
/* Set an attribute on the root to switch all semantic tokens. */
<html data-theme="dark">

/* Isolate a preview by scoping the same variables. */
<section class="dark-scope">...</section>

/* See the full light / dark definitions under Colors → CSS tokens. */


20 / RESPONSIVE BEHAVIOR
Good at every size.
下面按实际容器宽度重排示例。浏览器本身缩窄时，整份文档同样响应。
LIVE PREVIEW
Max 960px · container responsive
LagosLife.party
Explore   Guides   FAQ
≡
A LITTLE PLAY
Your next chapter starts here.
One clear goal. A few useful guides. Room to explore.
01Get started
02Find your path
03Explore the city
ViewportNavigationCards / layoutGutter
≥ 981px固定文档侧栏 + 完整导航攻略三列 / 内容双列24–60px
701–980px可关闭的抽屉目录攻略三列 / 内容双列28px
≤ 700px抽屉目录 + 示例折叠菜单攻略与内容单列 / 色卡双列16px
容器示例在 600px / 380px 重排为两列 / 一列。文档支持可见键盘焦点、Esc 关闭菜单和清空搜索、44px 常用操作区域，以及减少动态效果偏好。状态对照表保留局部横向滚动。