launchreel Blueprint
launchreel 蓝图品牌色染深的舞台，窗口推进到产品屏幕，行扫过，步骤标签。
Deep stage tinted with the brand colour, a window zooming into the product screen, rows sweeping, step tags.
From sketch to ship
step 02 · build
Palette
Type
标题 Display 永正文 Body — 好的界面不抢内容 1234567890Previews use your installed fonts; webfonts are not bundled.
| Display | "Space Grotesk", Inter, "Noto Sans SC", sans-serif |
|---|---|
| Body | Geist, Inter, "Noto Sans SC", system-ui, sans-serif |
| super | 144px |
| chapter | 64px |
| ui title | 40px |
| body | 28px |
| label | 22px |
Display Space Grotesk, body Geist. Chinese films: Noto Sans SC. Sizes at 1920×1080.
Shape & surface
| radius · card | 12px |
|---|---|
| radius · screen | 18px |
| shadow | none |
| glass | none |
Motion
- Entrance: mask-rise (out-expo).
- Tempo 124–136 bpm (picked per domain inside the range); hold 700ms.
- Transitions: cut, zoom-through, wipe, flash-scan.
Film parameters
| Resolution | 1920×1080 |
|---|---|
| Stage | brand-tinted stage (example brand #2F6DF6) |
| Grain / vignette | off / off |
| Device | grid |
| Entrance | mask-rise |
| Tempo | 124–136 bpm |
| Hold | 700ms |
| Layouts (stats / steps / features / screens) | count-up / step-tags / pov / sweep |
| Transitions | cut, zoom-through, wipe, flash-scan |
| Openings | hero-screen, kicker-wordmark |
| End cards | tile, wordmark |
| Best for | dev-tool / productivity / creator-tool |
Do / Don't
Do
- Tint the stage from the site's brand colour.
- Use the device grid.
- Zoom-through between sections.
Don't
- Don't go grey; a tint that is too grey falls back to neutral dark.
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 Blueprint / launchreel 蓝图 — Deep stage tinted with the brand colour, a window zooming into the product screen, rows sweeping, step tags. */
:root {
--launchreel-blueprint-bg: #0C1630;
--launchreel-blueprint-surface: color-mix(in oklab, #F4F6FA 6%, #0C1630);
--launchreel-blueprint-ink: #F4F6FA;
--launchreel-blueprint-muted: #9AA6C4;
--launchreel-blueprint-accent: #6B95FF;
--launchreel-blueprint-accent-ink: #0C1630;
--launchreel-blueprint-line: color-mix(in oklab, #F4F6FA 14%, #0C1630);
--launchreel-blueprint-pal-stage-bg: #0C1630;
--launchreel-blueprint-pal-ink: #F4F6FA;
--launchreel-blueprint-pal-muted: #9AA6C4;
--launchreel-blueprint-pal-accent-example: #6B95FF;
--launchreel-blueprint-pal-accent-2-example: #ABC0F5;
--launchreel-blueprint-font-display: "Space Grotesk", Inter, "Noto Sans SC", sans-serif;
--launchreel-blueprint-font-body: Geist, Inter, "Noto Sans SC", system-ui, sans-serif;
--launchreel-blueprint-text-super: 144px;
--launchreel-blueprint-text-chapter: 64px;
--launchreel-blueprint-text-ui-title: 40px;
--launchreel-blueprint-text-body: 28px;
--launchreel-blueprint-text-label: 22px;
--launchreel-blueprint-radius-card: 12px;
--launchreel-blueprint-radius-screen: 18px;
--launchreel-blueprint-shadow: none;
}/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
--color-bg: #0C1630;
--color-surface: color-mix(in oklab, #F4F6FA 6%, #0C1630);
--color-ink: #F4F6FA;
--color-muted: #9AA6C4;
--color-accent: #6B95FF;
--color-accent-ink: #0C1630;
--color-line: color-mix(in oklab, #F4F6FA 14%, #0C1630);
--font-display: "Space Grotesk", Inter, "Noto Sans SC", sans-serif;
--font-sans: Geist, Inter, "Noto Sans SC", system-ui, sans-serif;
--radius-card: 12px;
--radius-screen: 18px;
}
// Tailwind v3 — tailwind.config.js
export default {
theme: {
extend: {
colors: {
"bg": "#0C1630",
"surface": "color-mix(in oklab, #F4F6FA 6%, #0C1630)",
"ink": "#F4F6FA",
"muted": "#9AA6C4",
"accent": "#6B95FF",
"accent-ink": "#0C1630",
"line": "color-mix(in oklab, #F4F6FA 14%, #0C1630)",
},
fontFamily: {
display: ["\"Space Grotesk\", Inter, \"Noto Sans SC\", sans-serif"],
sans: ["Geist, Inter, \"Noto Sans SC\", system-ui, sans-serif"],
},
borderRadius: {
"card": "12px",
"screen": "18px",
},
},
},
};