CutHub Mastering Room
cuthub 调色间暗色中性的调色间，只有流水线进度用 SMPTE 色。
A dark, neutral grading suite where only pipeline progress gets colour.
CutHub Mastering Room
素材台
好的界面不抢内容。00:12:04:18 · CHAPTERS，其余交给留白。
开始使用了解更多
本月进度62%12:04 · 1,280 字
CutHub Mastering Room
素材台
好的界面不抢内容。00:12:04:18 · CHAPTERS，其余交给留白。
开始使用了解更多
本月进度62%12:04 · 1,280 字
Palette
Type
标题 Display 永正文 Body — 好的界面不抢内容 123456789000:12:04:18 monoPreviews use your installed fonts; webfonts are not bundled.
| Display | Archivo, Inter, "PingFang SC", sans-serif |
|---|---|
| Body | Inter, "PingFang SC", system-ui, sans-serif |
| Mono | "IBM Plex Mono", ui-monospace, monospace |
| body | 1rem / 1.75, 0.01em |
| label | 12px mono uppercase |
| timecode | 13px mono, tabular |
Tabular numerals everywhere. No CJK webfont.
Shape & surface
| radius · base | 6px |
|---|---|
| radius · md | 4px |
| radius · sm | 2px |
| shadow | 0 1px 2px hsl(225 13% 2% / .6) |
| glass | none |
Motion
- fade-in 0.5s with 10px rise; scale-in 0.3s from .95.
- Accordion 0.2s.
- Looping shimmer/float/glow effects are legacy; don't use them in new work.
Do / Don't
Do
- Keep the UI neutral: paper on ink.
- Reserve SMPTE hues for the pipeline rail and the 2px footer bar.
- Use 6px radius and flat single-layer shadows.
Don't
- Don't use purple gradients or coloured glows (retired).
- Don't use large radii.
- Don't use loud red; destructive is desaturated.
Used in
Sources
cuthub-frontend: app/globals.css, app/layout.tsx, docs/frontend-v2-design.md
Updated 2026-10-13
Export
/* CutHub Mastering Room / cuthub 调色间 — A dark, neutral grading suite where only pipeline progress gets colour. */
:root {
--cuthub-mastering-room-bg: #0e0f12;
--cuthub-mastering-room-surface: #16181d;
--cuthub-mastering-room-ink: #ece9e2;
--cuthub-mastering-room-muted: #8b8e96;
--cuthub-mastering-room-accent: #ece9e2;
--cuthub-mastering-room-accent-ink: #0e0f12;
--cuthub-mastering-room-line: #2d3039;
--cuthub-mastering-room-highlight: #e69d2e;
--cuthub-mastering-room-pal-ink: #0e0f12;
--cuthub-mastering-room-pal-panel: #16181d;
--cuthub-mastering-room-pal-paper: #ece9e2;
--cuthub-mastering-room-pal-dim: #8b8e96;
--cuthub-mastering-room-pal-border: #2d3039;
--cuthub-mastering-room-pal-ingest: #c7c7c7;
--cuthub-mastering-room-pal-chapters: #ebd53b;
--cuthub-mastering-room-pal-insights: #20c4df;
--cuthub-mastering-room-pal-craft: #34b162;
--cuthub-mastering-room-pal-done: #e69d2e;
--cuthub-mastering-room-pal-destructive: #be4537;
--cuthub-mastering-room-pal-light-bg: #f8f6f1;
--cuthub-mastering-room-font-display: Archivo, Inter, "PingFang SC", sans-serif;
--cuthub-mastering-room-font-body: Inter, "PingFang SC", system-ui, sans-serif;
--cuthub-mastering-room-font-mono: "IBM Plex Mono", ui-monospace, monospace;
--cuthub-mastering-room-text-body: 1rem / 1.75, 0.01em;
--cuthub-mastering-room-text-label: 12px mono uppercase;
--cuthub-mastering-room-text-timecode: 13px mono, tabular;
--cuthub-mastering-room-radius-base: 6px;
--cuthub-mastering-room-radius-md: 4px;
--cuthub-mastering-room-radius-sm: 2px;
--cuthub-mastering-room-shadow: 0 1px 2px hsl(225 13% 2% / .6);
}
/* Light */
@media (prefers-color-scheme: light) {
:root {
--cuthub-mastering-room-bg: #f8f6f1;
--cuthub-mastering-room-surface: #fbfaf7;
--cuthub-mastering-room-ink: #16181d;
--cuthub-mastering-room-muted: #5f6370;
--cuthub-mastering-room-accent: #21242c;
--cuthub-mastering-room-accent-ink: #f8f6f1;
--cuthub-mastering-room-line: #dcd8cf;
}
}/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
--color-bg: #0e0f12;
--color-surface: #16181d;
--color-ink: #ece9e2;
--color-muted: #8b8e96;
--color-accent: #ece9e2;
--color-accent-ink: #0e0f12;
--color-line: #2d3039;
--color-highlight: #e69d2e;
--font-display: Archivo, Inter, "PingFang SC", sans-serif;
--font-sans: Inter, "PingFang SC", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
--radius-base: 6px;
--radius-md: 4px;
--radius-sm: 2px;
--shadow-look: 0 1px 2px hsl(225 13% 2% / .6);
}
// Tailwind v3 — tailwind.config.js
export default {
theme: {
extend: {
colors: {
"bg": "#0e0f12",
"surface": "#16181d",
"ink": "#ece9e2",
"muted": "#8b8e96",
"accent": "#ece9e2",
"accent-ink": "#0e0f12",
"line": "#2d3039",
"highlight": "#e69d2e",
},
fontFamily: {
display: ["Archivo, Inter, \"PingFang SC\", sans-serif"],
sans: ["Inter, \"PingFang SC\", system-ui, sans-serif"],
mono: ["\"IBM Plex Mono\", ui-monospace, monospace"],
},
borderRadius: {
"base": "6px",
"md": "4px",
"sm": "2px",
},
},
},
};