FIT CARD
BEST FOR
公开介绍页
作品集目录
系统化说明页
需要更强“结构感”的页面
AVOID IF
温和纸感阅读
强沉浸暗色叙事
需要低对比的长文体验
DENSITY
medium
STATUS
GROWING
RENDERER FIT
intro hero splitdocs catalog cardsdense link boards
THEME DETAIL · SWISS
Swiss Modern
黑白底 + 红色点睛 + 可见网格，适合需要更强结构感和更明确焦点的页面。
ACTIVE PREVIEW
先看整页气质，再决定要不要用
这一屏负责回答最实际的问题：这套风格适不适合你当前的内容。预览展示页面母题、token 气质和 renderer fit，而不是只给一张静态截图。
LIVE PREVIEW
Grid stays visible.
参考 frontend-slides 的 Swiss Modern：网格、留白、红色作为唯一强调。
SWISS MODERN
Swiss Modern
黑白底 + 红色点睛 + 可见网格，适合需要更强结构感和更明确焦点的页面。
GridMonoRed Accent
RENDERER FIT
intro hero split
docs catalog cards
dense link boards
LIVE SAMPLE
OPEN SAMPLECOMPONENT STATES
样式选择不能只看首页，还要看状态
这里把按钮、标签、导航、卡面密度和移动压缩一起放出来。这样你在选 style pack 时，能同时看到视觉和维护成本。
LIVE PREVIEW
Swiss Modern component states
页面截图之外，还要看按钮、标签、导航、状态卡和密度压缩后的样子。
DEFAULT / SELECTED
DEFAULTSELECTEDNAV LINK
DENSE CARD
Project / case / card
用来看高密度信息落在这套皮肤里是否仍然可读。
EMPTY / QUIET
No extra ornament
这块主要看风格在低信息量场景下会不会太空。
MOBILE COMPRESSED
COMPACT
STACKED ROW
Preview card
WHY IT MATTERS
光有首页截图不够。真正可维护的 style pack 必须连交互状态和压缩密度一起验证。
PAGE RECIPES
这套风格更适合哪些 renderer recipe
把风格和 recipe 对齐，比把风格单独放着更有用。这样你可以先决定页面类型，再决定风格细节。
RECIPE FIT
intro hero split
如果这个 recipe 在第二个以上真实站点重复出现，就值得继续往共享 pattern 方向抽象。
RECIPE FIT
docs catalog cards
如果这个 recipe 在第二个以上真实站点重复出现，就值得继续往共享 pattern 方向抽象。
RECIPE FIT
dense link boards
如果这个 recipe 在第二个以上真实站点重复出现，就值得继续往共享 pattern 方向抽象。
DEPLOY PATH
部署上先归属到 styles hub，而不是直接拆独立域名
对当前阶段来说，更合理的方式是让 style pack 先成为一个可被选择和说明的目录项，再决定是否值得升级成 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、版本节奏、文档责任都独立后，再拆单独域名或单独项目。
RECOMMENDATION
当前推荐的 canonical path 是 styles.zondev.top/themes/swiss 作为风格详情入口， https://intro.zondev.top/?theme=swiss 作为 live sample。等这套风格在更多真实站点里稳定复用后，再考虑 host alias。