烧饼博客

设计规范

烧饼博客的设计系统:暖石色编辑部风格,Light / Dark 双主题,唯一 accent 是暗色下的金黄。完整规范见文档。

配色

两套主题各自展示在自己的底色上;右下为不随主题的固定色。

Light

Background#f5f5f5
Foreground#0c0a09
Card#ffffff
Secondary#f0efed
Panel#f0efed
Content#3f3d3a
Muted#777169
Border#e7e5e4
Sparkle / Wave#a8a29e

Dark

Background#0c0a09
Foreground#f5f5f4
Card#231d18
Secondary#292524
Panel#171412
Content#d6d3d1
Muted#a8a29e
Border#2a2624
Accent#ffcc00

固定色 · 不随主题

代码块表面#171412
代码基础文字#d5c4a1
Tooltip#151917
行内代码 · Dark#3b2e19

字体

Space Grotesk

拉丁 display 与正文

Server Ops & Domains 烧饼博客

400 / 500 / 600 / 700

Berkeley Mono

代码与日期数字(中文日期的数字部分)

sudo apt update · 2026 年 5 月 21 日

400 / 700 + Italic

系统中文栈

中文回退,不加载字体文件

烧饼博客是一个专注于服务器运维的网站。

PingFang SC · Microsoft YaHei · Noto Sans CJK SC

Space Grotesk 是开源字体;Berkeley Mono 是商业字体,需购买授权;印章标志内文字使用 Maple Mono NF CN;OG 分享图由构建期以 Berkeley Mono + Noto Sans CJK SC 渲染,均不在网页加载。

形状与层级

按钮 / 药丸pill · 9999px
卡片16px · rounded-2xl
面板 / 代码块12px · rounded-xl
行内代码6px
墨丸按钮描边药丸面板 12pxcode

阴影统一染墨色:0 4px 16px rgb(12 10 9 / 0.06) 起步的柔影 + 1px 发丝线。

签名元素

正文链接 hover 时脚下有一条展开的波浪线,导航栏当前页常驻同款波浪。

全站链接自带 tooltip 气泡;首页 hero 有缓慢闪烁的星空,鼠标扫过会沿轨迹撒下星星和 ♥。

代码块是不随主题的深色面,配 Gruvbox 高亮与 行内琥珀芯片(Dark);所有装饰动效在 prefers-reduced-motion 下降级。