# 烧饼博客 Design System

u.sb Design System · Last updated 2026-07-07

## Overview

Warm-stone editorial style: an off-white canvas with warm ink text in light mode; a warm near-black night sky with espresso cards in dark mode. Dual themes (Light by default / Dark), manual toggle in the header, first visit follows the system preference, choice persisted in localStorage.

The one and only accent is **golden**: in dark mode, link hovers, wavy underlines, sparkles, and the active-nav indicator all use `#ffcc00`. In light mode the accent recedes to a warm gray (darkening-style hover) and stays quiet. The signature elements are the wavy underline beneath links and the starfield on the homepage hero.

## Colors

### Light (default)

| Token | Value | Usage |
|---|---|---|
| `--background` | `#f5f5f5` | Canvas |
| `--foreground` | `#0c0a09` | Ink headings / primary text |
| `--card` | `#ffffff` | Card surface |
| `--secondary` | `#f0efed` | Secondary panels, chips |
| Panels / tiles | `#f0efed` | Info card, tile links, QR cards (same value as secondary) |
| `--content` | `#3f3d3a` | Article body text |
| `--muted-foreground` | `#777169` | Secondary text, dates, meta |
| `--border` | `#e7e5e4` | Hairline dividers |
| `--hairline-strong` | `#d6d3d1` | Strong strokes (outline buttons etc.) |
| `--primary` | `#292524` | Ink pill button (hover `#0c0a09`) |
| `--link-wave` | `#777169` | Link hover color (darkening style) |
| `--sparkle` | `#a8a29e` | Sparkle decorations |
| Wave underline | `#a8a29e` | Wavy underline beneath body links |
| `--code-bg` | `#fbf1c7` | Code surface: Gruvbox Light cream paper (base text `#504945`) |

### Dark

| Token | Value | Usage |
|---|---|---|
| `--background` | `#0c0a09` | Warm near-black canvas |
| `--foreground` | `#f5f5f4` | Primary text |
| `--card` | `#231d18` | Espresso card surface |
| `--secondary` | `#292524` | Hover states, secondary chips |
| Panels / tiles | `#171412` | Info card, tile links, QR cards (same surface as code blocks) |
| `--content` | `#d6d3d1` | Article body text |
| `--muted-foreground` | `#a8a29e` | Secondary text |
| `--border` | `#2a2624` | Hairlines |
| `--hairline-strong` | `#44403c` | Strong strokes |
| `--primary` | `#f5f5f4` | Inverted ink pill (hover `#ffffff`, label `#0c0a09`) |
| `--link-wave` | `#ffcc00` | Golden accent: link hover / wave / active nav |
| `--sparkle` | `#ffcc00` | Golden sparkles |
| Inline code | `#3b2e19` bg · `#55411f` border · `#f0d9a5` text | Warm amber chip |
| `--code-bg` | `#171412` | Code surface: same as panels (base text `#d5c4a1`) |

### Fixed colors (theme-independent)

| Element | Value |
|---|---|
| Syntax highlighting | Gruvbox Medium, Light/Dark palettes via CSS vars (`src/styles/highlight.css`) |
| Window dots | `#ff5f57` · `#febc2e` · `#28c840` (macOS traffic lights on code windows) |
| Tooltip bubble | `#151917` bg · white text |
| Line-copy highlight | `rgba(255, 219, 51, 0.28)` |
| Seal logo | Ink `#0a0a0a` / Paper `#ffffff` (see /brand/) |

## Typography

| Family | Usage | Weights |
|---|---|---|
| Space Grotesk | Latin display & body (`--font-sans` / `--font-head`) | 400 / 500 / 600 / 700 ([open source](https://github.com/floriankarsten/space-grotesk)) |
| Berkeley Mono | Code and the numerals in dates/meta — dates render as `2022 年 12 月 2 日`, CJK falls back to the system stack (`--font-mono`) | 400 / 700 + Italic (local woff2; commercial font, [license required](https://usgraphics.com/products/berkeley-mono)) |
| PingFang SC · Microsoft YaHei · Noto Sans CJK SC | CJK fallback (system fonts, no files loaded) | - |
| [Maple Mono NF CN](https://github.com/subframe7536/maple-font) | Lettering inside the seal logo (not loaded on the web) | - |
| Berkeley Mono + [Noto Sans CJK SC](https://github.com/notofonts/noto-cjk) | OG share image rendering (build time only) | - |

## Shape

| Element | Radius |
|---|---|
| Buttons, badges, tag pills | pill (9999px) |
| Cards (article card, mark cards) | 16px (rounded-2xl) |
| Panels, tiles, code blocks, tables | 12px (rounded-xl) |
| ToC items, small widgets | 8px (rounded-lg) |
| Inline code chips | 6px |

## Elevation & Shadows

Hairline + soft-shadow system; every shadow is tinted with ink `rgb(12 10 9 / α)`:

| Tier | Value |
|---|---|
| shadow-sm | `0 2px 8px rgb(12 10 9 / 0.04)` |
| shadow-md | `0 4px 16px rgb(12 10 9 / 0.06)` |
| shadow-lg | `0 8px 32px rgb(12 10 9 / 0.08)` |
| shadow-xl | `0 16px 48px rgb(12 10 9 / 0.10)` |

Card = card background + 1px border + shadow-sm; overlays (search, ToC) use shadow-xl/2xl.

## Signature Elements

- **Wavy underline**: on hover, an SVG wave expands from zero beneath body links (`background-size` transition, 0.3s); the active nav item carries the same wave permanently; gray in light, golden in dark
- **Starfield hero**: hand-placed 4-point stars and dust dots to the right of the homepage title, each twinkling slowly with staggered durations/delays; moving the mouse scatters small stars and `♥` along the trail (0.7s fade-out, max 24 alive)
- **Tooltips**: site-wide link `title` attributes are converted at runtime into dark bubbles (8px above; flipped below inside the header), fading in over 0.2s
- **Code blocks**: macOS-style windows — traffic-light dots, language name, and a persistent Copy button in the title bar; Gruvbox Medium surfaces per theme (cream paper in light, near-black in dark); `data-code-group` multi-tab blocks carry the dots on the group window and switch panes with a liquid-glass segmented control (CSS approximation) plus a panel enter animation

## Motion Principles

- Durations 0.2s-0.7s; entrances use a strong ease-out `cubic-bezier(0.23, 1, 0.32, 1)`
- Animate only `transform` and `opacity` (GPU compositing)
- All decorative motion respects `prefers-reduced-motion`: twinkles freeze, trail stars disable, tab panels fall back to a plain fade

## Related

- Logos & downloads: <https://u.sb/brand/>
- This file: <https://u.sb/design.md>