PencilBooth

单色日报宣言。PencilBooth 看起来像一份排版精美的日报平铺在画廊墙上——巨大的展示文字锚定双栏阅读行,细线分隔各区块,仅在激活状态时用深海军蓝打破灰调的沉寂。
PencilBooth 是一种单色编辑类日报:纯白色和柔和灰色的表面承载内容,仅在激活/选中状态下使用深海军蓝作为强调。视觉系统以排版架构为核心——96px 大号标题采用 700 字重作为章节锚点,正文内容保持紧凑密集,采用双栏阅读网格布局。界面读起来像一份精心策划的印刷宣言,而非 SaaS 仪表盘:组件为扁平设计,边框为细线,色彩仅作为功能性的点缀(如高亮标签、彩色 表情符号 风格图标头像)。每个表面设计决策均优先考虑可读性与静谧的层级关系,而非视觉装饰。
查看原始网站使用规范
建议采用
- 所有章节开头的展示标题使用 96px Soehne 字重 700;搭配 32px 字重 400 的副标题,颜色为 #5a5e62
- 仅将 #0f1ea1(深海军蓝)用于激活/选中状态——绝不用于装饰元素,也绝不用于脱离标签上下文的主操作
- 所有组件边缘使用 1px #e5e7eb 细线边框;绝不使用阴影实现层级感
- 保持双栏编辑行模板:左侧为展示标题,右侧为正文内容,两者之间以空白间距分隔,而非垂直分隔线
- 页面画布使用 #f2f2f2,卡片使用 #ffffff——这两种近白之间的对比即为整个系统的层级感
- 由 表情符号 字符承载系统中的色彩多样性,用于图标头像;禁止用单色线条图标或 SVG 插画替代
- 所有尺寸下字间距保持 0.0100em——这种统一的字间距是 Soehne 风格的核心特征
建议避免
- 禁止使用蓝色、绿色、红色等颜色来标识链接或可点击元素——链接为 #000000,可选添加细线下划线
- 禁止在卡片、弹窗或悬浮面板上使用阴影——系统刻意保持扁平化
- 禁止在任何表面、按钮或背景上使用渐变填充
- 禁止引入除深海军蓝(#0f1ea1)、天空蓝(#8fbaff)和淡薰衣草色(#cfd2ec)之外的额外强调色
- 禁止使用小于 96px 的展示字号用于章节标题——极端的尺寸跳跃是系统的标志性特征
- 禁止使用带有自定义 SVG 线条插画的图标;应使用 表情符号 风格的彩色头像作为图标系统
- 不要为任何矩形元素使用大于10px的圆角 — 仅图标头像(9999px)和标签(2px)偏离10px的标准