Data Canal
数据之渠冷石板灰底、白字、蓝点缀，一条蓝青光纤的渠串起一个个风格统一的图标方块。
Cold slate-grey stage, white type, blue accents; a blue-cyan fibre canal threads a row of matching icon tiles together.
数据之渠
一条光纤 串起每个方块
Palette
Type
标题 Display 永正文 Body — 好的界面不抢内容 1234567890Previews use your installed fonts; webfonts are not bundled.
| Display | "Noto Sans SC", Inter, sans-serif |
|---|---|
| Body | Inter, "Noto Sans SC", sans-serif |
| title | 64px |
| caption | 34px |
| label | 22px |
Chinese Noto Sans SC, Latin and numbers Inter. Chinese captions use spaces, not punctuation.
Shape & surface
| radius · icon tile | 28px |
|---|---|
| radius · glass card | 20px |
| shadow | none |
| glass | 24px blur · rgb(20 23 31 / .55) |
Dark frosted glass cards with a light-grey hairline; labels and cards do not glow.
Motion
- The canal is data, not water: discrete glowing grains, then a running river, then emergence.
- A glowing lead orb travels and links the tiles; slow camera, macro shallow depth of field, circular match cuts.
- Give durations room first, compress last; keyframes must cover the whole shot.
Film parameters
| Resolution | 1920×1080, 30 fps |
|---|---|
| Stage | One slate base reused across all dark shots (do not re-imitate it) |
| Light | Single soft top light pool plus thin haze |
| Hero | A glowing orb; only its membrane glows |
| Colour budget | One main colour plus one accent per film; no purple |
| Layout (UI concept) | Screen ~74% left, annotation rail ~26% right, level ruler on the left |
| Stack | Canvas/WebGL rendered in headless Chrome |
Do / Don't
Do
- Use the slate base with blue only as accent: icons, underline, fibre, pulses.
- Each icon tile is one thing (hardware, app or scene), all drawn in one consistent style.
- Draw robots as line art or simple geometry, never as a real product.
Don't
- Don't flood the frame with blue (rejected).
- Don't go pure black-white-grey or the darker median-14 base (rejected as lifeless).
- Don't use particle swarms, realistic modelling or before/after comparisons.
Used in
- Client film, 2026
Sources
Internal production notes, client film, 2026
Updated 2026-10-13
Export
/* Data Canal / 数据之渠 — Cold slate-grey stage, white type, blue accents; a blue-cyan fibre canal threads a row of matching icon tiles together. */
:root {
--data-canal-bg: #2a2f3a;
--data-canal-surface: rgb(20 23 31 / .55);
--data-canal-ink: #ffffff;
--data-canal-muted: #b3b9c6;
--data-canal-accent: #176eff;
--data-canal-accent-ink: #ffffff;
--data-canal-line: rgb(201 206 216 / .28);
--data-canal-highlight: #4d8dff;
--data-canal-pal-slate-deep: #1b1e26;
--data-canal-pal-slate: #2a2f3a;
--data-canal-pal-light-pool: #4e525f;
--data-canal-pal-white: #ffffff;
--data-canal-pal-glass-edge: #c9ced8;
--data-canal-pal-accent-blue: #176eff;
--data-canal-pal-blue-light: #4d8dff;
--data-canal-pal-fibre-cyan: #5fd6ff;
--data-canal-font-display: "Noto Sans SC", Inter, sans-serif;
--data-canal-font-body: Inter, "Noto Sans SC", sans-serif;
--data-canal-text-title: 64px;
--data-canal-text-caption: 34px;
--data-canal-text-label: 22px;
--data-canal-radius-icon-tile: 28px;
--data-canal-radius-glass-card: 20px;
--data-canal-glass-blur: 24px;
--data-canal-glass-fill: rgb(20 23 31 / .55);
--data-canal-shadow: none;
}/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
--color-bg: #2a2f3a;
--color-surface: rgb(20 23 31 / .55);
--color-ink: #ffffff;
--color-muted: #b3b9c6;
--color-accent: #176eff;
--color-accent-ink: #ffffff;
--color-line: rgb(201 206 216 / .28);
--color-highlight: #4d8dff;
--font-display: "Noto Sans SC", Inter, sans-serif;
--font-sans: Inter, "Noto Sans SC", sans-serif;
--radius-icon-tile: 28px;
--radius-glass-card: 20px;
--blur-glass: 24px;
}
// Tailwind v3 — tailwind.config.js
export default {
theme: {
extend: {
colors: {
"bg": "#2a2f3a",
"surface": "rgb(20 23 31 / .55)",
"ink": "#ffffff",
"muted": "#b3b9c6",
"accent": "#176eff",
"accent-ink": "#ffffff",
"line": "rgb(201 206 216 / .28)",
"highlight": "#4d8dff",
},
fontFamily: {
display: ["\"Noto Sans SC\", Inter, sans-serif"],
sans: ["Inter, \"Noto Sans SC\", sans-serif"],
},
borderRadius: {
"icon-tile": "28px",
"glass-card": "20px",
},
backdropBlur: { glass: "24px" },
},
},
};