Thricegate Journal
三思 期刊暖纸、宋体标题、一个赭石色，像一本安静的技术期刊。
Warm paper, serif headings and one ochre accent, like a quiet technical journal.
Thricegate Journal
三思而后答
好的界面不抢内容。Mixture of Agents，其余交给留白。
开始使用了解更多
本月进度62%12:04 · 1,280 字
Thricegate Journal
三思而后答
好的界面不抢内容。Mixture of Agents，其余交给留白。
开始使用了解更多
本月进度62%12:04 · 1,280 字
Palette
Type
标题 Display 永正文 Body — 好的界面不抢内容 123456789000:12:04:18 monoPreviews use your installed fonts; webfonts are not bundled.
| Display | "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif |
|---|---|
| Body | -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif |
| Mono | ui-monospace, "SF Mono", "JetBrains Mono", monospace |
| hero | 36px / 1.2 (28px mobile) |
| page h1 | 30px semibold, tight (26px mobile) |
| h2 | 1.25rem |
| body | 16px / 1.7 |
| eyebrow | 12px, 0.08em tracking |
Noto Serif SC subset vendored via next/font/local for display only.
Shape & surface
| radius · base | 4px |
|---|---|
| radius · media | 8px |
| shadow | none |
| glass | none |
Motion
- Colour-only hover transitions.
- Only keyframe: seal-pulse loader, 1.2s ease-in-out, opacity 1 → .35.
- Reduced motion clamps transitions to 0.01ms.
Do / Don't
Do
- Build hierarchy from size and whitespace.
- Use the ochre fill only for actionable things.
- Separate with hairlines; content width max 1080px.
Don't
- Don't hardcode colours; use tokens.
- Don't use filled colour blocks.
- Don't use the seal colour for buttons.
Used in
Sources
lingbrook-guild: src/app/globals.css, src/app/layout.tsx, src/app/sites/thricegate/*
Updated 2026-10-13
Export
/* Thricegate Journal / 三思 期刊 — Warm paper, serif headings and one ochre accent, like a quiet technical journal. */
:root {
--thricegate-journal-bg: #faf8f4;
--thricegate-journal-surface: #ffffff;
--thricegate-journal-ink: #22201c;
--thricegate-journal-muted: #6b655c;
--thricegate-journal-accent: #b4532a;
--thricegate-journal-accent-ink: #ffffff;
--thricegate-journal-line: #e9e4db;
--thricegate-journal-highlight: #b4532a;
--thricegate-journal-highlight-wash: rgba(180, 83, 42, .08);
--thricegate-journal-pal-paper: #faf8f4;
--thricegate-journal-pal-surface: #ffffff;
--thricegate-journal-pal-ink: #22201c;
--thricegate-journal-pal-muted: #6b655c;
--thricegate-journal-pal-line: #e9e4db;
--thricegate-journal-pal-brand-ochre: #b4532a;
--thricegate-journal-pal-brand-press: #94421f;
--thricegate-journal-pal-seal: #9a4325;
--thricegate-journal-pal-ok: #3f7a55;
--thricegate-journal-pal-warn: #9a6b1f;
--thricegate-journal-pal-danger: #b0413a;
--thricegate-journal-pal-dark-paper: #171512;
--thricegate-journal-pal-dark-brand: #e3875b;
--thricegate-journal-font-display: "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;
--thricegate-journal-font-body: -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
--thricegate-journal-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
--thricegate-journal-text-hero: 36px / 1.2 (28px mobile);
--thricegate-journal-text-page-h1: 30px semibold, tight (26px mobile);
--thricegate-journal-text-h2: 1.25rem;
--thricegate-journal-text-body: 16px / 1.7;
--thricegate-journal-text-eyebrow: 12px, 0.08em tracking;
--thricegate-journal-radius-base: 4px;
--thricegate-journal-radius-media: 8px;
--thricegate-journal-shadow: none;
}
/* Dark (kept usable) */
@media (prefers-color-scheme: dark) {
:root {
--thricegate-journal-bg: #171512;
--thricegate-journal-surface: #1f1c18;
--thricegate-journal-ink: #ece7df;
--thricegate-journal-muted: #a39b8f;
--thricegate-journal-accent: #e3875b;
--thricegate-journal-accent-ink: #171512;
--thricegate-journal-line: #2f2b25;
}
}/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
--color-bg: #faf8f4;
--color-surface: #ffffff;
--color-ink: #22201c;
--color-muted: #6b655c;
--color-accent: #b4532a;
--color-accent-ink: #ffffff;
--color-line: #e9e4db;
--color-highlight: #b4532a;
--font-display: "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;
--font-sans: -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
--radius-base: 4px;
--radius-media: 8px;
}
// Tailwind v3 — tailwind.config.js
export default {
theme: {
extend: {
colors: {
"bg": "#faf8f4",
"surface": "#ffffff",
"ink": "#22201c",
"muted": "#6b655c",
"accent": "#b4532a",
"accent-ink": "#ffffff",
"line": "#e9e4db",
"highlight": "#b4532a",
},
fontFamily: {
display: ["\"Noto Serif SC\", \"Songti SC\", \"Source Han Serif SC\", serif"],
sans: ["-apple-system, \"PingFang SC\", \"Noto Sans SC\", system-ui, sans-serif"],
mono: ["ui-monospace, \"SF Mono\", \"JetBrains Mono\", monospace"],
},
borderRadius: {
"base": "4px",
"media": "8px",
},
},
},
};