ZON STYLES ATLAS
MONOCHROME SITE SYSTEM · DOCS FIRST

Styles Atlas 现在不是说明书首页，而是这套黑白网页系统的文档入口

目标不是做一次性页面，而是做一个以后所有网站都能共用的生产系统。 这里负责说明 theme token、component primitive、schema kind、route recipe 和子域部署方式怎么一起工作。

OPEN THEMESOPEN COMPONENTSOPEN SCHEMAOPEN RECIPESOPEN LIVE HIRING PAGE
SYSTEM MODEL

最佳实践不是多写页面，而是给页面建立稳定边界

系统层先稳定，页面层才会越来越便宜。这个 atlas 现在把生产问题拆成四层，而不是只展示一套视觉结果。

DATA LAYER

页面事实、结构、链接和顺序全部放在 data/sites。这里不放颜色、不放布局 class、不放交互细节。

THEME LAYER

theme token 只决定黑白皮肤：背景、前景、边框、面板、按钮与氛围，不写业务文案。

RENDERER LAYER

renderer 只负责把 schema 和 theme 组合成页面，不偷偷塞业务内容。

ROUTING LAYER

host rewrite + route layout 让一个 Vercel 项目承接多个子站，不复制整站。

DOCS MAP

这个 docs 站现在分成四个真正可用的工作面

overview 负责总览；themes 负责选风格；components 负责原语和 block；schema 负责字段规范；recipes 负责页面组装与部署约定。

Themes

先选风格，再看 preview、适用场景、状态和部署路径，而不是只看截图。

OPEN THEMES
Components

看基础视觉原语、按钮/卡片/导航/section block 怎么组合成稳定的页面骨架。

OPEN COMPONENTS
Schema

看所有 section kinds、字段结构、什么时候该扩 kind，什么时候只需要换 data。

OPEN SCHEMA
Recipes

看 intro / hiring / case study / style board 这些页面应该怎么排 section 顺序和部署路径。

OPEN RECIPES
STYLE PICKER

先选 style pack，再看文档

未来这个站的第一职责不是解释，而是帮助你快速选风格。每套风格都应该带 live preview、适用边界和下一步入口。

Swiss / editorial / public

Folio Swiss

简洁、编辑感、结构强，适合公开介绍页和更清晰的个人首页。

ACTIVE
LIVE PREVIEW
Zon
让公开页面更像经过编辑的结构页，而不是一次性 landing page。
PUBLIC INTRO
Folio Swiss
SwissPublicStructured
Best For
个人介绍页
Density
medium
FIT
个人介绍页作品集首页公开 profile轻文档入口
AVOID IF

强沉浸暗色叙事

OPEN THEME DETAILOPEN INTRO SAMPLE
Swiss / grid / red accent

Swiss Modern

黑白底 + 红色点睛 + 可见网格，适合需要更强结构感和更明确焦点的页面。

GROWING
LIVE PREVIEW
Grid stays visible.
参考 frontend-slides 的 Swiss Modern：网格、留白、红色作为唯一强调。
SWISS MODERN
Swiss Modern
GridMonoRed Accent
Best For
公开介绍页
Density
medium
FIT
公开介绍页作品集目录系统化说明页需要更强“结构感”的页面
AVOID IF

温和纸感阅读

OPEN THEME DETAILOPEN INTRO SAMPLE
paper / readable / restrained

Paper Ledger

亮底纸感，适合资料页、长文、对外说明和可打印内容。

ACTIVE
LIVE PREVIEW
Paper keeps the copy calm.
适合把复杂信息拉回可阅读状态，尤其适合需要长时间停留的页面。
READABLE SYSTEM
Paper Ledger
ReadablePaperLong-form
Best For
case study
Density
high
FIT
case study说明页长页阅读打印导出
AVOID IF

强舞台化视觉

OPEN THEME DETAILOPEN STRUCTURED PAGE
noir / private / quiet

Noir Editorial

暗底叙事，适合私有页面、求职页和更沉浸的长页表达。

ACTIVE
LIVE PREVIEW
Quiet, but still structured.
更适合把“判断力”和“证据”包进一条沉浸式阅读路径。
PRIVATE ROUTE
Noir Editorial
PrivateDarkNarrative
Best For
private hiring
Density
medium
FIT
private hiringcase narrativeportfolio long pagehigh-contrast reading
AVOID IF

轻快公开首页

OPEN THEME DETAILOPEN PRIVATE SAMPLE
system / grid / mono

Mono Frame

更系统化的黑白皮肤，适合规范站、组件站和信息密度更高的目录页。

GROWING
LIVE PREVIEW
Grids, tokens, and repeatable primitives.
适合把视觉选择、组件关系和路由配方讲清楚。
STYLE SYSTEM
Mono Frame
GridSystemDocs
Best For
styles atlas
Density
high
FIT
styles atlasspec docspattern librarydense dashboards
AVOID IF

情绪表达优先

OPEN THEME DETAILOPEN SYSTEM SAMPLE
THEMES

同一份内容，现在已经可以切多套黑白皮肤

theme token 只换气质和表面，不换内容本身。下一个页面如果要换明暗或网格密度，不再复制 page.tsx。

Noir Editorial

暗底叙事，适合私有求职页、作品集长页与更沉浸的阅读场景。

Dark / cinematic / quiet
SAME CONTENT
One schema, another skin.

皮肤变化只来自 theme token。

Surface
Panel / Border / Wash
Action
OPEN
OPEN LIVE PAGE IN THIS THEME

Paper Ledger

亮底纸感，适合资料页、介绍页、长文与更克制的黑白展示。

Light / editorial / readable
SAME CONTENT
One schema, another skin.

皮肤变化只来自 theme token。

Surface
Panel / Border / Wash
Action
OPEN
OPEN LIVE PAGE IN THIS THEME

Mono Frame

更系统感的黑白网格皮肤，适合样式站、规范站和组件展示。

Dark / system / grid
SAME CONTENT
One schema, another skin.

皮肤变化只来自 theme token。

Surface
Panel / Border / Wash
Action
OPEN
OPEN LIVE PAGE IN THIS THEME

Folio Swiss

更简洁的公开介绍页皮肤，参考 Swiss Modern 与 editorial split 的黑白结构。

Light / Swiss / structured
SAME CONTENT
One schema, another skin.

皮肤变化只来自 theme token。

Surface
Panel / Border / Wash
Action
OPEN
OPEN LIVE PAGE IN THIS THEME

Swiss Modern

黑白底 + 红色点睛 + 可见网格，参考 frontend-slides 的 Swiss Modern 预设，更适合需要“清晰结构感”的公开页面。

Light / grid / red accent
SAME CONTENT
One schema, another skin.

皮肤变化只来自 theme token。

Surface
Panel / Border / Wash
Action
OPEN
OPEN LIVE PAGE IN THIS THEME
TOKEN FAMILIES

先定义 token 家族，再定义组件

Brad Frost 式设计系统里，token 应该先成为公共语言，再由 block 和 route 消费。这里已经把黑白站最常用的 token 面拆出来。

Surface

background / panel / panelStrong / border / line / shadow

Content Rhythm

kicker / label / copy / note / chip

Action

buttonBg / buttonFg / buttonGhost / navLink states

Atmosphere

grid / washA / washB / themeColor / colorScheme

HOST STRATEGY

样式总入口先收敛在同一个 style hub

现在最值得做的是统一 catalog、preview 和使用说明，而不是过早拆多个域名。styles.zondev.top 继续做 canonical hub，其他 host 负责内容消费或专题表达。

RECOMMENDED
styles.zondev.top
canonical style hub

继续作为统一样式入口，承接选择、预览、组件目录和接入说明。

CURRENT
motion.zondev.top
motion lab

保持动效专题站，不和 style catalog 混在一起。

CURRENT
intro.zondev.top
content consumer site

继续作为内容消费站，优先展示 data-driven 页面，而不是文档本身。

LATER
folio.zondev.top
future alias only

只有当某一套风格拥有独立受众和版本节奏时，再考虑加 alias。

DEPLOYMENT

部署策略也要跟着系统成熟度走

先把所有风格 pack 放到一个 hub 下，再决定哪些值得升级成 alias 或独立产品。这个顺序比一开始拆多个项目更稳。

Now
One hub, many paths

先把所有 style pack、preview、recipes 和接入说明集中在 `styles.zondev.top`。优先统一 catalog，而不是拆多个独立项目。

Next
Stable packs with alias

当某一套风格在 2-3 个真实站点中稳定复用后，可以加 host alias，但仍指向同一项目里的 `/styles/themes/<id>`。

Later
Independent product only when deserved

只有当样式库本身要对外服务，并且 token contract、版本节奏、文档责任都独立后，再拆单独域名或单独项目。

UNIFICATION MAP

下一步统一 pattern，不硬塞 schema

现在最应该抽的是重复的表现层对象，比如 heading、action link、row 和 card；而 intro hero 这类强叙事结构，暂时继续留在专属 renderer 更干净。

Shared Now

theme tokens、site shell、surface、buttons、chips、nav links、docs host routing，以及 action link / section heading / theme switch / metric card 这些 shared pattern 已经开始共用。

继续让更多页面消费同一套 token contract，而不是再写单页样式分支。

Extract Next

intro home 和 structured hiring 仍然有明显重叠：timeline rows、contact cards、project rows 和更完整的 link card 还没有统一。

下一批值得升格为 shared pattern 的是 project row、contact card、timeline item 和 richer link card。

Keep Separate

motion 预览、pm briefing 模板、intro hero split 仍然属于更强语义的专属块。

这些先保持专属 renderer，等第二个真实页面复用后再决定是否抽象。

TOPOLOGY

样式库要能被团队记住，就要有稳定的文件拓扑

文档页、renderer、schema、theme、site data、host rewrite 现在都在固定位置。以后扩新页面，只需要继续沿着这条拓扑增加。

app/styles/page.tsx
app/styles/themes/page.tsx
app/styles/themes/[themeId]/page.tsx
app/styles/components/page.tsx
app/styles/schema/page.tsx
app/styles/recipes/page.tsx
components/site-system/site-renderer.tsx
components/site-system/site-primitives.tsx
components/site-system/styles-atlas.tsx
components/site-system/theme-gallery.tsx
data/site-schema.ts
data/site-themes.ts
data/style-library.ts
data/sites/<slug>.ts
middleware.ts
NEXT STEP
01先在 data/sites 新建一个 document，而不是先开 route
02优先复用已有 section kind；真不够再扩 schema
03在 styles docs 里先把新 primitive 说明清楚，再让真实页面消费
04把新的 host path 交给 middleware 统一映射，不在每个页面做判断
LIVE SURFACE

组件文档不是只给截图，要给真实皮肤中的可读结果

下面这块 preview 用的就是 site token 和真实 class。components/schema 子页会继续把 block 级别的能力拆开讲。

LIVE PREVIEW
Shared shell primitives
同一套 shell class 可以被 hiring page、future intro、styles examples 共同消费。
MONO SYSTEM

Reusable page shell

所有站点先共享节奏、surface、按钮与文本层级，再让 data 自己决定内容。

PanelChipNav LinkTheme Switch
Primary
OPEN
Secondary
DETAIL
Navigation
OVERVIEWSCHEMARECIPES
LIVE ENTRY

当前系统样板页已经接到真实 route，不影响你原来的满意版本

新的结构化求职页继续保持独立 route。你可以继续保留原始隐藏页，同时让新的系统页承担“以后怎么生产”的职责。

OPEN STRUCTURED HIRING PAGEOPEN MOTION ATLAS