SqueezeReel Workbench
轻舟 工作台白天的安静工作台：暖纸底，一个铜色只给按钮和进度。
A quiet daytime workbench on warm paper, with one copper accent reserved for actions and progress.
SqueezeReel Workbench
视频压小，画质不丢
好的界面不抢内容。拖进来就好，其余交给留白。
开始使用了解更多
本月进度62%12:04 · 1,280 字
SqueezeReel Workbench
视频压小，画质不丢
好的界面不抢内容。拖进来就好，其余交给留白。
开始使用了解更多
本月进度62%12:04 · 1,280 字
Palette
Type
标题 Display 永正文 Body — 好的界面不抢内容 123456789000:12:04:18 monoPreviews use your installed fonts; webfonts are not bundled.
| Display | Fraunces, "Songti SC", serif |
|---|---|
| Body | Inter, "PingFang SC", system-ui, sans-serif |
| Mono | "IBM Plex Mono", ui-monospace, monospace |
| h2 | 1.35rem, 600, -0.01em |
| h3 | 1.05rem |
| prose | 1rem / 1.75 (zh 1.9) |
| rail label | 13px |
| tag | 12px |
Fraunces only for the home H1 and wordmark; numbers in mono with tabular figures.
Shape & surface
| radius · card | 12px |
|---|---|
| radius · drop zone | 14px |
| radius · tag | 6px |
| shadow | none |
| glass | none |
Motion
- Buttons and borders 120–140ms ease-out with a 1px press translate.
- Progress bar width 400ms.
- Engine stages use a 2.4s ease-in-out breath loader, never a percentage.
Do / Don't
Do
- Use copper only for CTA, progress and focus.
- Set numbers in mono with tabular figures.
- Use 1px warm hairlines for structure.
Don't
- Don't add glass, glow or gradients.
- Don't use the serif outside the H1 and wordmark.
- Don't show a percentage during engine stages.
Used in
Sources
squeezereel: src/app/globals.css, src/app/layout.tsx
Updated 2026-10-13
Export
/* SqueezeReel Workbench / 轻舟 工作台 — A quiet daytime workbench on warm paper, with one copper accent reserved for actions and progress. */
:root {
--squeezereel-workbench-bg: #f6f4f0;
--squeezereel-workbench-surface: #ffffff;
--squeezereel-workbench-ink: #1c1b19;
--squeezereel-workbench-muted: #5a564f;
--squeezereel-workbench-accent: #a5561d;
--squeezereel-workbench-accent-ink: #ffffff;
--squeezereel-workbench-line: #e3dfd8;
--squeezereel-workbench-highlight: #a5561d;
--squeezereel-workbench-highlight-wash: #f3e6da;
--squeezereel-workbench-pal-paper: #f6f4f0;
--squeezereel-workbench-pal-panel: #ffffff;
--squeezereel-workbench-pal-raised: #efece6;
--squeezereel-workbench-pal-ink: #1c1b19;
--squeezereel-workbench-pal-muted: #5a564f;
--squeezereel-workbench-pal-line: #e3dfd8;
--squeezereel-workbench-pal-line-strong: #c9c3b9;
--squeezereel-workbench-pal-copper: #a5561d;
--squeezereel-workbench-pal-copper-deep: #8a4615;
--squeezereel-workbench-pal-copper-soft: #f3e6da;
--squeezereel-workbench-pal-ok: #2f7a4f;
--squeezereel-workbench-pal-danger: #b3412f;
--squeezereel-workbench-pal-dark-bg: #121214;
--squeezereel-workbench-pal-dark-copper: #e3a56b;
--squeezereel-workbench-font-display: Fraunces, "Songti SC", serif;
--squeezereel-workbench-font-body: Inter, "PingFang SC", system-ui, sans-serif;
--squeezereel-workbench-font-mono: "IBM Plex Mono", ui-monospace, monospace;
--squeezereel-workbench-text-h2: 1.35rem, 600, -0.01em;
--squeezereel-workbench-text-h3: 1.05rem;
--squeezereel-workbench-text-prose: 1rem / 1.75 (zh 1.9);
--squeezereel-workbench-text-rail-label: 13px;
--squeezereel-workbench-text-tag: 12px;
--squeezereel-workbench-radius-card: 12px;
--squeezereel-workbench-radius-drop-zone: 14px;
--squeezereel-workbench-radius-tag: 6px;
--squeezereel-workbench-shadow: none;
}
/* Dark */
@media (prefers-color-scheme: dark) {
:root {
--squeezereel-workbench-bg: #121214;
--squeezereel-workbench-surface: #1b1b1f;
--squeezereel-workbench-ink: #f2efea;
--squeezereel-workbench-muted: #b6b3ad;
--squeezereel-workbench-accent: #e3a56b;
--squeezereel-workbench-accent-ink: #1d1308;
--squeezereel-workbench-line: #2c2c32;
--squeezereel-workbench-highlight-wash: #2a2119;
}
}/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
--color-bg: #f6f4f0;
--color-surface: #ffffff;
--color-ink: #1c1b19;
--color-muted: #5a564f;
--color-accent: #a5561d;
--color-accent-ink: #ffffff;
--color-line: #e3dfd8;
--color-highlight: #a5561d;
--font-display: Fraunces, "Songti SC", serif;
--font-sans: Inter, "PingFang SC", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
--radius-card: 12px;
--radius-drop-zone: 14px;
--radius-tag: 6px;
}
// Tailwind v3 — tailwind.config.js
export default {
theme: {
extend: {
colors: {
"bg": "#f6f4f0",
"surface": "#ffffff",
"ink": "#1c1b19",
"muted": "#5a564f",
"accent": "#a5561d",
"accent-ink": "#ffffff",
"line": "#e3dfd8",
"highlight": "#a5561d",
},
fontFamily: {
display: ["Fraunces, \"Songti SC\", serif"],
sans: ["Inter, \"PingFang SC\", system-ui, sans-serif"],
mono: ["\"IBM Plex Mono\", ui-monospace, monospace"],
},
borderRadius: {
"card": "12px",
"drop-zone": "14px",
"tag": "6px",
},
},
},
};