Brass Reading

黄铜阅读

Webdarkreading quiet editorial warm

夜里的安静书房：深纸底、衬线正文，金句用一抹黄铜标出，正在播放用薄荷绿。

A quiet night study: dark paper, serif body text, brass marks the key sentence and mint marks what is playing.

Brass Reading

把长视频读成一篇文章

好的界面不抢内容。阅读比看快，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Web sample · dark

Palette

Type

标题 Display 永正文 Body — 好的界面不抢内容 123456789000:12:04:18 monoPreviews use your installed fonts; webfonts are not bundled.

Display	Newsreader, "Noto Serif SC", "Songti SC", serif
Body	"Public Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif
Mono	"Fragment Mono", ui-monospace, SFMono-Regular, monospace
article	1.1875rem / 1.85
article small	1.0625rem / 1.8
ui	0.9375rem / 1.5
timecode	0.8125rem mono, tabular

Article text is serif (Newsreader + Noto Serif SC); every control is sans. Letter-spacing 0.002em on the article.

Shape & surface

radius · control	8px
radius · panel	12px
shadow	none
glass	none

Motion

No decorative motion; the reading column never moves on its own.
Highlights are painted with ::highlight so they never shift layout.
金句 = faint brass wash plus a brass hairline underline snapped to the text baseline.

Do / Don't

Do

Keep brass for one meaning only: AI marked this sentence as a 金句.
Keep mint for one meaning only: currently playing. They must never read as the same thing.
Use white for primary buttons; accent colours are for reading cues.

Don't

Don't use the earlier amber #e3bf66; it reads as a warning.
Don't put brass on buttons or links.
Don't let a long token widen the page on a phone; wrap with overflow-wrap.

Used in

readvideo reading page

Sources

asr-websites/apps/readvideo-web/src/app/globals.css

Updated 2026-10-13

Export

/* Brass Reading / 黄铜阅读 — A quiet night study: dark paper, serif body text, brass marks the key sentence and mint marks what is playing. */
:root {
  --readvideo-brass-reading-bg: #131416;
  --readvideo-brass-reading-surface: #1b1c1f;
  --readvideo-brass-reading-ink: #f1f0ed;
  --readvideo-brass-reading-muted: #b1b2b8;
  --readvideo-brass-reading-accent: #f1f0ed;
  --readvideo-brass-reading-accent-ink: #131416;
  --readvideo-brass-reading-line: #2b2d32;
  --readvideo-brass-reading-highlight: #dcc28a;
  --readvideo-brass-reading-highlight-wash: color-mix(in oklab, #dcc28a 11%, transparent);

  --readvideo-brass-reading-pal-paper: #131416;
  --readvideo-brass-reading-pal-panel: #1b1c1f;
  --readvideo-brass-reading-pal-ink: #f1f0ed;
  --readvideo-brass-reading-pal-ink-muted: #b1b2b8;
  --readvideo-brass-reading-pal-ink-faint: #95979f;
  --readvideo-brass-reading-pal-line: #2b2d32;
  --readvideo-brass-reading-pal-line-strong: #46494f;
  --readvideo-brass-reading-pal-accent-mint: #9ac5b0;
  --readvideo-brass-reading-pal-marker: #b8d8c7;
  --readvideo-brass-reading-pal-brass: #dcc28a;
  --readvideo-brass-reading-pal-highlight-ink: #f6f1e4;
  --readvideo-brass-reading-pal-search-hit: #6aa9ff;
  --readvideo-brass-reading-pal-danger: #f39187;

  --readvideo-brass-reading-font-display: Newsreader, "Noto Serif SC", "Songti SC", serif;
  --readvideo-brass-reading-font-body: "Public Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --readvideo-brass-reading-font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, monospace;
  --readvideo-brass-reading-text-article: 1.1875rem / 1.85;
  --readvideo-brass-reading-text-article-small: 1.0625rem / 1.8;
  --readvideo-brass-reading-text-ui: 0.9375rem / 1.5;
  --readvideo-brass-reading-text-timecode: 0.8125rem mono, tabular;

  --readvideo-brass-reading-radius-control: 8px;
  --readvideo-brass-reading-radius-panel: 12px;
  --readvideo-brass-reading-shadow: none;
}

/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
  --color-bg: #131416;
  --color-surface: #1b1c1f;
  --color-ink: #f1f0ed;
  --color-muted: #b1b2b8;
  --color-accent: #f1f0ed;
  --color-accent-ink: #131416;
  --color-line: #2b2d32;
  --color-highlight: #dcc28a;
  --font-display: Newsreader, "Noto Serif SC", "Songti SC", serif;
  --font-sans: "Public Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, monospace;
  --radius-control: 8px;
  --radius-panel: 12px;
}

// Tailwind v3 — tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        "bg": "#131416",
        "surface": "#1b1c1f",
        "ink": "#f1f0ed",
        "muted": "#b1b2b8",
        "accent": "#f1f0ed",
        "accent-ink": "#131416",
        "line": "#2b2d32",
        "highlight": "#dcc28a",
      },
      fontFamily: {
        display: ["Newsreader, \"Noto Serif SC\", \"Songti SC\", serif"],
        sans: ["\"Public Sans\", \"PingFang SC\", \"Microsoft YaHei\", system-ui, sans-serif"],
        mono: ["\"Fragment Mono\", ui-monospace, SFMono-Regular, monospace"],
      },
      borderRadius: {
        "control": "8px",
        "panel": "12px",
      },
    },
  },
};