launchreel Studio
launchreel 摄影棚冷白摄影棚纸，倾斜产品镜头，列表行扫过，节点路线图逐步点亮。
Cool white studio paper, tilted product shot, list rows sweeping, a node roadmap lighting step by step.
Focus, shipped
roadmap · step 3 of 4
Palette
Type
标题 Display 永正文 Body — 好的界面不抢内容 1234567890Previews use your installed fonts; webfonts are not bundled.
| Display | Geist, Inter, "Noto Sans SC", system-ui, sans-serif |
|---|---|
| Body | Inter, "Noto Sans SC", system-ui, sans-serif |
| super | 144px |
| chapter | 64px |
| ui title | 40px |
| body | 28px |
| label | 22px |
Display Geist, body Inter. Chinese films: Noto Sans SC. Sizes at 1920×1080.
Shape & surface
| radius · card | 14px |
|---|---|
| radius · screen | 18px |
| shadow | none |
| glass | none |
Motion
- Entrance: mask-rise (out-expo).
- Tempo 116–124 bpm (picked per domain inside the range); hold 900ms.
- Transitions: cut, push, wipe.
Film parameters
| Resolution | 1920×1080 |
|---|---|
| Stage | paper cool base |
| Grain / vignette | off / off |
| Device | none |
| Entrance | mask-rise |
| Tempo | 116–124 bpm |
| Hold | 900ms |
| Layouts (stats / steps / features / screens) | count-up / roadmap / sweep / framed |
| Transitions | cut, push, wipe |
| Openings | tilt-screen, kicker-wordmark |
| End cards | tile, wordmark |
| Best for | productivity / creator-tool / b2b |
Do / Don't
Do
- Tilted product shot as the hero.
- Roadmap nodes light in order.
- Push transitions.
Don't
- No grain.
- Don't use serif.
Used in
Sources
launchreel: src/lib/style/look-menu.ts (LOOK_MENU), src/lib/style/look.ts, src/lib/style/defaults.ts
Updated 2026-10-13
Export
/* launchreel Studio / launchreel 摄影棚 — Cool white studio paper, tilted product shot, list rows sweeping, a node roadmap lighting step by step. */
:root {
--launchreel-studio-bg: #F3F5F8;
--launchreel-studio-surface: color-mix(in oklab, #ffffff 70%, #F3F5F8);
--launchreel-studio-ink: #0E1320;
--launchreel-studio-muted: #5B6474;
--launchreel-studio-accent: #2F6DF6;
--launchreel-studio-accent-ink: #ffffff;
--launchreel-studio-line: color-mix(in oklab, #0E1320 14%, #F3F5F8);
--launchreel-studio-pal-stage-bg: #F3F5F8;
--launchreel-studio-pal-ink: #0E1320;
--launchreel-studio-pal-muted: #5B6474;
--launchreel-studio-pal-accent-example: #2F6DF6;
--launchreel-studio-pal-accent-2-example: #8698D5;
--launchreel-studio-font-display: Geist, Inter, "Noto Sans SC", system-ui, sans-serif;
--launchreel-studio-font-body: Inter, "Noto Sans SC", system-ui, sans-serif;
--launchreel-studio-text-super: 144px;
--launchreel-studio-text-chapter: 64px;
--launchreel-studio-text-ui-title: 40px;
--launchreel-studio-text-body: 28px;
--launchreel-studio-text-label: 22px;
--launchreel-studio-radius-card: 14px;
--launchreel-studio-radius-screen: 18px;
--launchreel-studio-shadow: none;
}/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
--color-bg: #F3F5F8;
--color-surface: color-mix(in oklab, #ffffff 70%, #F3F5F8);
--color-ink: #0E1320;
--color-muted: #5B6474;
--color-accent: #2F6DF6;
--color-accent-ink: #ffffff;
--color-line: color-mix(in oklab, #0E1320 14%, #F3F5F8);
--font-display: Geist, Inter, "Noto Sans SC", system-ui, sans-serif;
--font-sans: Inter, "Noto Sans SC", system-ui, sans-serif;
--radius-card: 14px;
--radius-screen: 18px;
}
// Tailwind v3 — tailwind.config.js
export default {
theme: {
extend: {
colors: {
"bg": "#F3F5F8",
"surface": "color-mix(in oklab, #ffffff 70%, #F3F5F8)",
"ink": "#0E1320",
"muted": "#5B6474",
"accent": "#2F6DF6",
"accent-ink": "#ffffff",
"line": "color-mix(in oklab, #0E1320 14%, #F3F5F8)",
},
fontFamily: {
display: ["Geist, Inter, \"Noto Sans SC\", system-ui, sans-serif"],
sans: ["Inter, \"Noto Sans SC\", system-ui, sans-serif"],
},
borderRadius: {
"card": "14px",
"screen": "18px",
},
},
},
};