MONOCHROME SITE SYSTEM · DOCS FIRST

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

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

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 站现在分成三个真正可用的工作面

入口页负责总览;components 负责看原语和 block;schema 负责字段规范;recipes 负责页面组装与部署约定。

Components

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

OPEN COMPONENTS
Schema

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

OPEN SCHEMA
Recipes

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

OPEN RECIPES
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
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

TOPOLOGY

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

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

app/styles/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/styles-atlas.tsx
data/site-schema.ts
data/site-themes.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。你可以继续保留原始隐藏页,同时让新的系统页承担“以后怎么生产”的职责。