Color

Background

Page Primary page background
Surface Card / panel
Muted Secondary background

Text

Primary Headings, emphasis
Secondary Body text
Muted Captions, metadata

Accent

Accent Primary accent (Padparadscha)
Deep Accent Links, hover states
Accent Tint Subtle highlights

Border & Semantic

Border Dividers, card edges
Success Positive states
Warning Caution states
Danger Error states
Note Info callouts

Typography

博物志 Bokushi

H1 — 36px / 700 / 1.22

设计基础 Design Foundations

H2 — 30px / 800 / 1.22 / -0.02em

色彩系统 Color System

H3 — 24px / 700 / 1.22 / -0.01em

浅色主题 Light Theme

H4 — 20px / 700 / 1.22

正文排版服务于长时间阅读，行高宽松，字距微调。The quick brown fox jumps over the lazy dog. 粉圓體赋予页面温暖手写感。

Body — 17px / 400 / 1.75 — jf-openhuninn-2.0

图片说明、脚注和次要信息

Small — 15px / 400 / 1.65

标签 · 日期 · 元数据

Caption — 13px / 400 / 1.75

const design = await vibe.coding()

Code — 11px / 500 — Fira Code

在正文中，粗体会以强调色渲染，而非普通的黑色加粗。这是一个有意为之的设计选择，用于视觉强调。

Cards

Default

.surface-card

White bg, soft border, soft shadow

Soft

.surface-card--soft

No shadow, muted bg blend

Flat

.surface-card--flat

No shadow, subtle border

Compact

.surface-card--compact

Smaller radius (md)

Hover: border

.surface-card--hover-border

Hover to see border change

Buttons

XS round SM round bordered MD square MD square bordered

Pills

Default pill Accent pill Clickable pill Accent clickable

Shadows

--shadow-soft Cards, tables, images
--shadow-strong Unused (reserved)
--shadow-lightbox Lightbox overlay
--shadow-button-hover Button hover glow