---
version: "alpha"
name: "Ledger Glass"
description: "Quiet warm-paper content surfaces with liquid glass reserved for floating controls. Chinese-first, mobile-first, tabular numerals; built for ledgers, dashboards and personal tools."
colors:
  primary: "#624613"
  secondary: "#726754"
  tertiary: "#26785a"
  neutral: "#f3f0e9"
  bg: "#f3f0e9"
  bg-soft: "#eeeae1"
  panel: "#f9fcfb"
  panel-strong: "#fcfefd"
  text: "#302c24"
  muted: "#726754"
  line: "rgba(43,78,65,.11)"
  line-strong: "rgba(43,78,65,.22)"
  accent: "#89661f"
  accent-strong: "#624613"
  on-accent: "#ffffff"
  positive: "#26785a"
  danger: "#a0443e"
  glass-surface: "rgba(255,255,255,.74)"
  glass-field: "rgba(255,255,255,.66)"
  glass-inset: "rgba(62,105,85,.055)"
  glass-menu: "rgba(251,254,253,.93)"
  glass-rim: "rgba(255,255,255,.88)"
  glass-glint: "rgba(255,255,255,.85)"
  dock-tint: "rgba(255,255,255,.12)"
  dock-rim: "rgba(255,255,255,.86)"
  dock-ink: "#22372d"
  mist-warm: "rgba(224,202,158,.28)"
  mist-blue: "rgba(186,206,226,.25)"
  mist-sand: "rgba(229,214,182,.24)"
  dark-bg: "#161914"
  dark-bg-soft: "#282d23"
  dark-panel: "#1b2822"
  dark-panel-strong: "#23322b"
  dark-text: "#f3f2e9"
  dark-muted: "#b7b8a6"
  dark-line: "rgba(206,231,215,.12)"
  dark-line-strong: "rgba(206,231,215,.25)"
  dark-accent: "#d5b66f"
  dark-accent-strong: "#f2d48b"
  dark-on-accent: "#231f18"
  dark-positive: "#77c8a1"
  dark-danger: "#e28d86"
  dark-glass-surface: "rgba(31,46,38,.86)"
  dark-glass-field: "rgba(17,30,23,.54)"
  dark-glass-inset: "rgba(6,15,10,.23)"
  dark-glass-menu: "rgba(35,50,42,.96)"
  dark-glass-rim: "rgba(219,247,230,.17)"
  dark-glass-glint: "rgba(239,255,244,.13)"
  dark-dock-tint: "rgba(15,26,21,.24)"
  dark-dock-rim: "rgba(238,255,247,.39)"
  dark-dock-ink: "#d8e8de"
  dark-mist-warm: "rgba(110,101,61,.17)"
  dark-mist-blue: "rgba(52,70,96,.2)"
  dark-mist-sand: "rgba(87,80,47,.12)"
  person-gold: "#d5b66f"
  person-ocean: "#59a9c8"
  person-fern: "#77c8a1"
  person-alpine: "#8ab3d5"
  person-coral: "#df8b76"
  person-violet: "#a993d5"
  person-slate: "#8d9aaa"
  person-sky: "#82b9e7"
typography:
  display:
    fontFamily: "-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
    fontSize: "40px"
    fontWeight: 650
    lineHeight: 1.1
    letterSpacing: "-0.045em"
    fontFeature: "\"tnum\""
  title:
    fontFamily: "-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
    fontSize: "20px"
    fontWeight: 650
    lineHeight: 1.3
    letterSpacing: "-0.025em"
  heading:
    fontFamily: "-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
    fontSize: "18px"
    fontWeight: 600
    lineHeight: 1.35
  subheading:
    fontFamily: "-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
    fontSize: "15px"
    fontWeight: 600
    lineHeight: 1.45
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: 1.5
  caption:
    fontFamily: "-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.6
  amount:
    fontFamily: "-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
    fontSize: "20px"
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: "-0.025em"
    fontFeature: "\"tnum\""
rounded:
  xs: "8px"
  sm: "12px"
  md: "14px"
  lg: "16px"
  xl: "22px"
  dialog: "28px"
  dock: "34px"
  pill: "999px"
spacing:
  s1: "4px"
  s2: "8px"
  s3: "12px"
  s4: "16px"
  s5: "20px"
  s6: "24px"
  tap: "44px"
  control: "48px"
  content-max: "920px"
  gutter-mobile: "12px"
  gutter-desktop: "20px"
components:
  rs-page:
    backgroundColor: "{colors.bg}"
    textColor: "{colors.text}"
    typography: "{typography.body}"
  rs-page-dark:
    backgroundColor: "{colors.dark-bg}"
    textColor: "{colors.dark-text}"
  rs-note:
    textColor: "{colors.muted}"
    typography: "{typography.label}"
  rs-note-dark:
    textColor: "{colors.dark-muted}"
  rs-surface:
    backgroundColor: "{colors.glass-surface}"
    rounded: "{rounded.xl}"
    padding: "16px"
  rs-surface-dark:
    backgroundColor: "{colors.dark-glass-surface}"
  rs-stat:
    backgroundColor: "{colors.glass-field}"
    typography: "{typography.amount}"
    rounded: "{rounded.lg}"
    padding: "11px 12px"
  rs-stat-dark:
    backgroundColor: "{colors.dark-glass-field}"
  rs-button-primary:
    backgroundColor: "{colors.accent-strong}"
    textColor: "{colors.on-accent}"
    rounded: "15px"
    padding: "0 20px"
    height: "48px"
  rs-button-primary-dark:
    backgroundColor: "{colors.dark-accent-strong}"
    textColor: "{colors.dark-on-accent}"
  rs-button-secondary:
    backgroundColor: "{colors.bg-soft}"
    textColor: "{colors.text}"
    rounded: "{rounded.sm}"
    height: "44px"
  rs-button-secondary-dark:
    backgroundColor: "{colors.dark-bg-soft}"
    textColor: "{colors.dark-text}"
  rs-button-text:
    textColor: "{colors.accent-strong}"
    rounded: "{rounded.sm}"
    height: "40px"
  rs-button-text-dark:
    textColor: "{colors.dark-accent-strong}"
  rs-field:
    backgroundColor: "{colors.glass-field}"
    rounded: "13px"
    padding: "0 12px"
    height: "48px"
  rs-field-dark:
    backgroundColor: "{colors.dark-glass-field}"
  rs-segmented:
    backgroundColor: "{colors.glass-inset}"
    rounded: "15px"
    padding: "3px"
  rs-segmented-dark:
    backgroundColor: "{colors.dark-glass-inset}"
  rs-chip:
    backgroundColor: "{colors.glass-field}"
    rounded: "{rounded.sm}"
    height: "44px"
  rs-chip-dark:
    backgroundColor: "{colors.dark-glass-field}"
  rs-list-row:
    padding: "8px 0"
  rs-menu:
    backgroundColor: "{colors.glass-menu}"
    rounded: "20px"
    padding: "6px"
  rs-menu-dark:
    backgroundColor: "{colors.dark-glass-menu}"
  rs-dock:
    backgroundColor: "{colors.dock-tint}"
    rounded: "{rounded.dock}"
    padding: "7px"
  rs-dock-dark:
    backgroundColor: "{colors.dark-dock-tint}"
  rs-composer:
    rounded: "27px"
    height: "54px"
  rs-positive:
    textColor: "{colors.positive}"
    typography: "{typography.amount}"
  rs-positive-dark:
    textColor: "{colors.dark-positive}"
  rs-danger:
    textColor: "{colors.danger}"
  rs-danger-dark:
    textColor: "{colors.dark-danger}"
---

<!-- id: ledger-glass · version: 1.0.0 · https://style.robby.wang/s/ledger-glass/ · MCP: https://style.robby.wang/mcp -->

# Ledger Glass（账本玻璃）

## Overview

**Ledger Glass（账本玻璃）** 抽象自 [ledger.robby.wang](https://ledger.robby.wang) 旅行账本的默认 classic 主题与 liquid-glass 材质层。

一句话：**内容安静，浮层带玻璃。** 页面是一张暖纸色的底，四角各有一团很淡的雾色光（暖金、灰蓝、沙色）；承载数据的卡片是半透明的“柔光面”，不做背景模糊；只有真正浮在内容之上的东西——底部 Tab Dock、输入胶囊、弹出菜单、对话框——才用 `backdrop-filter` 做成玻璃。

产品气质：私人、克制、可信。像一本好用的随身账本，而不是一块花哨的仪表盘。中文优先，移动端优先，单手操作优先；数字永远等宽对齐。

## Colors

两套配色（light / dark）一一对应，全部通过 CSS 变量切换，跟随 `prefers-color-scheme`。

- **底色 `bg` (#f3f0e9 / #161914)**：暖纸色。暗色模式不是纯黑，而是带一点橄榄绿的墨色。
- **正文 `text` (#302c24)** 与 **次要 `muted` (#726754)**：暖褐灰，不用纯黑纯灰。
- **强调 `accent` (#89661f) / `accent-strong` (#624613)**：旧金/铜色，全站唯一的交互色。主按钮背景、选中 Tab 文字、焦点环都用它；暗色模式变为香槟金 (#d5b66f / #f2d48b)。
- **语义色**：`positive` (#26785a) 只用于“应收/结算完成/成功提示”；`danger` (#a0443e) 只用于删除与错误。两者都偏低饱和。
- **分隔线 `line` / `line-strong`**：带绿调的极淡透明线（11% / 22%），绝不用实心灰线。
- **玻璃色 `glass-*`**：白色半透明叠层，`glass-surface` 74% 用于内容卡，`glass-field` 66% 用于输入框和数字块，`glass-inset` 是 5.5% 的绿灰凹陷，用于分段控件底和次按钮。`glass-rim` 是卡片上沿的高光描边。
- **人员色 `people.*`**：8 个柔和色（金、海蓝、蕨绿、雪山蓝、珊瑚、紫罗兰、岩灰、天空蓝），只以小圆点、选中芯片底色（13% 混色）和边框（65% 混色）出现，从不做大面积填充。

强调色混色规则：选中/高亮背景一律 `color-mix(in srgb, var(--accent) 10–14%, transparent)`，焦点环 `0 0 0 3px` 14% 混色。

## Typography

只用系统字体栈：`-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif`，不引 Web 字体。

- 字重只用 400 / 500 / 600 / 650 四档。标题 600–650，大数字 650。
- 标题与大数字使用负字距（-0.025em ~ -0.045em），正文不加字距。
- **所有金额、时间、汇率都加 `font-variant-numeric: tabular-nums`**。
- 输入框字号不小于 16px（防 iOS 缩放）。
- 层级靠字号与 `muted` 颜色区分，而不是加粗一切：标签 13px muted，说明 12px muted，正文 15–16px。
- 典型屏幕：页面标题 20px/650，汇总大数字 30–40px/650，分项金额 20px/600，列表金额 17px/600。

## Layout

- 内容最大宽度 920px，居中；移动端左右边距 12px，桌面 20px。
- 间距基于 4px：4 / 8 / 12 / 16 / 20 / 24。卡片之间 12px，卡片内边距 16px（汇总卡 14px 16px）。
- **最小点击区 44px**，主要控件高度 48px。
- 主导航是**底部浮动 Dock**：距底 10px + safe-area，左右 12px，最大宽 760px；页面底部要预留 Dock 高度的内边距。
- 移动端一屏只讲一件事：顶部紧凑标题行（标题 + 下拉箭头 + 右侧头像），下面依次是卡片。
- 网格：汇总数字 4 列 → 700px 以下 2 列 → 480px 以下表单单列。

## Elevation & Depth

三种材质，界限分明：

1. **柔光面（content surface）**：`glass-surface` 底 + 145° 从 `glass-field` 到透明的渐变 + 1px `glass-rim` 描边 + `inset 0 1px 0 glass-glint` 上沿高光 + 很浅的双层阴影 `surface`。**不加 backdrop-filter**，长列表和图表上做模糊会卡顿且显脏。
2. **常规玻璃（menu glass）**：弹出菜单、排序、导出、对话框。`glass-menu` 93% 底 + `blur(26px) saturate(1.5)` + `float` 阴影。
3. **透明玻璃（dock glass）**：底部 Dock 与输入胶囊。几乎透明的 `dock-tint`（12%），靠 `blur(8px) saturate(1.25)`、高光 rim、内阴影和第二道细轮廓线读出玻璃边缘，不把中间刷白。

页面背景用 `body::before` 固定三团径向雾光（右上暖、左中蓝、右下沙），整个页面只此一处装饰。

## Shapes

圆角随层级递增：标签/小按钮 8–12px → 输入框 13px → 主按钮/分段 15px → 数字块 16px → 菜单 20px → 内容卡 22px → 对话框 28px → Dock 34px → 头像/胶囊全圆。

嵌套圆角保持同心：外层圆角 = 内层圆角 + 内边距（分段控件 15px 外 / 11px 内，3px 内边距）。

## Components

所有组件类名统一前缀 `rs-`（Robby Style），同一套类名在不同风格间可互换。完整实现见 `style.css`，示例页见 `example.html`。

- **rs-surface**：内容卡片。标题行用 `rs-section-heading`（左标题、右文字按钮）。
- **rs-stat**：汇总数字块，左上小圆点+名字，下方大数字，再下方 muted 原币明细。
- **rs-button --primary / --secondary / --text**：主按钮是 170° 的微渐变金铜色，带 1px 深色描边与内高光；按下 `scale(.98)`。
- **rs-field**：输入、下拉、多行。下拉箭头用 CSS 渐变画，不用图片。焦点时边框变强调色并加 3px 光环。
- **rs-segmented**：凹陷底 + 选中项浮起（玻璃高光 + 1px 阴影 + 强调色文字 600）。
- **rs-chip**：人员/筛选多选，`--person-color` 驱动选中底色与边框。
- **rs-list / rs-list-row**：长列表不做卡片，行间只有顶部 1px `line`，左信息、右等宽金额。
- **rs-menu**：弹出层，内部选项 14px 圆角，hover 用 `glass-selected`。
- **rs-dock**：底部浮动 Tab，4 个等宽按钮（图标 23px + 12px 文字），选中项有一块滑动的半透明底板（320ms），文字变 `accent-strong`。
- **rs-composer**：Dock 上方的输入胶囊：左图片按钮、中间输入、右麦克风，全高 54px。

## Do's and Don'ts

**Do**

- 先用 CSS 变量，再写组件；暗色模式只换变量。
- 让数据卡片安静：柔光面、无模糊、阴影极浅。
- 玻璃只给浮层（Dock、菜单、对话框）。
- 金额、日期统一等宽数字；货币符号前置（≈ ¥200.00），原币明细放在下方 muted 小字。
- 点击区 ≥ 44px，输入框字号 ≥ 16px，支持 safe-area、`prefers-reduced-motion`、`prefers-contrast: more`、`forced-colors`。
- 文案简短直接的中文，按钮用动词（保存、记一笔、全选）。

**Don't**

- 不要给长列表、图表、整页加 `backdrop-filter`。
- 不要使用纯黑 #000、纯白大底或冷灰；不要第二个强调色。
- 不要大面积使用人员色或语义色；红绿只表达状态。
- 不要粗重投影、霓虹渐变、拟物纹理、Emoji 装饰标题。
- 不要在 hover 时改变文字或点击区尺寸（反馈要“安静、本地”）。
- 不要引入 Web 字体或图标字体；图标用 1.8px 描边的内联 SVG。