launchreel Console

launchreel 控制台

Filmdarkprecise technical calm

近黑控制台，Geist 一贯到底，遮罩上升标题，倾斜产品镜头，KPI 面板。

Near-black console, Geist throughout, mask-rise titles, tilted product shot, KPI panel, node roadmap.

LAUNCHREEL CONSOLE118–128 bpm

Ship the dashboard

KPI · roadmap · 4 nodes

16:9 frame mock · dark

Palette

Type

标题 Display 永正文 Body — 好的界面不抢内容 123456789000:12:04:18 monoPreviews use your installed fonts; webfonts are not bundled.

Display	"Geist Mono", ui-monospace, monospace
Body	Geist, Inter, "Noto Sans SC", system-ui, sans-serif
Mono	"Geist Mono", ui-monospace, monospace
super	144px
chapter	64px
ui title	40px
body	28px
label	22px

Display Geist Mono, 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 118–128 bpm (picked per domain inside the range); hold 900ms.
Transitions: cut, push, zoom.

Film parameters

Resolution	1920×1080
Stage	dark neutral base
Grain / vignette	off / off
Device	dots
Entrance	mask-rise
Tempo	118–128 bpm
Hold	900ms
Layouts (stats / steps / features / screens)	dashboard / roadmap / cards / framed
Transitions	cut, push, zoom
Openings	tilt-screen, hero-screen
End cards	wordmark, tile
Best for	b2b / productivity / dev-tool

Do / Don't

Do

Tilt the product screen; light it like hardware.
KPI panel for numbers.
Node roadmap for steps.

Don't

Don't use grain or vignette.
Don't use playful whip pans.

Used in

launchreel look menu

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 Console / launchreel 控制台 — Near-black console, Geist throughout, mask-rise titles, tilted product shot, KPI panel, node roadmap. */
:root {
  --launchreel-console-bg: #0B0D12;
  --launchreel-console-surface: color-mix(in oklab, #ECEFF4 6%, #0B0D12);
  --launchreel-console-ink: #ECEFF4;
  --launchreel-console-muted: #8B93A5;
  --launchreel-console-accent: #6B95FF;
  --launchreel-console-accent-ink: #0B0D12;
  --launchreel-console-line: color-mix(in oklab, #ECEFF4 14%, #0B0D12);

  --launchreel-console-pal-stage-bg: #0B0D12;
  --launchreel-console-pal-ink: #ECEFF4;
  --launchreel-console-pal-muted: #8B93A5;
  --launchreel-console-pal-accent-example: #6B95FF;
  --launchreel-console-pal-accent-2-example: #ABC0F5;

  --launchreel-console-font-display: "Geist Mono", ui-monospace, monospace;
  --launchreel-console-font-body: Geist, Inter, "Noto Sans SC", system-ui, sans-serif;
  --launchreel-console-font-mono: "Geist Mono", ui-monospace, monospace;
  --launchreel-console-text-super: 144px;
  --launchreel-console-text-chapter: 64px;
  --launchreel-console-text-ui-title: 40px;
  --launchreel-console-text-body: 28px;
  --launchreel-console-text-label: 22px;

  --launchreel-console-radius-card: 12px;
  --launchreel-console-radius-screen: 18px;
  --launchreel-console-shadow: none;
}

/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
  --color-bg: #0B0D12;
  --color-surface: color-mix(in oklab, #ECEFF4 6%, #0B0D12);
  --color-ink: #ECEFF4;
  --color-muted: #8B93A5;
  --color-accent: #6B95FF;
  --color-accent-ink: #0B0D12;
  --color-line: color-mix(in oklab, #ECEFF4 14%, #0B0D12);
  --font-display: "Geist Mono", ui-monospace, monospace;
  --font-sans: Geist, Inter, "Noto Sans SC", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --radius-card: 12px;
  --radius-screen: 18px;
}

// Tailwind v3 — tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        "bg": "#0B0D12",
        "surface": "color-mix(in oklab, #ECEFF4 6%, #0B0D12)",
        "ink": "#ECEFF4",
        "muted": "#8B93A5",
        "accent": "#6B95FF",
        "accent-ink": "#0B0D12",
        "line": "color-mix(in oklab, #ECEFF4 14%, #0B0D12)",
      },
      fontFamily: {
        display: ["\"Geist Mono\", ui-monospace, monospace"],
        sans: ["Geist, Inter, \"Noto Sans SC\", system-ui, sans-serif"],
        mono: ["\"Geist Mono\", ui-monospace, monospace"],
      },
      borderRadius: {
        "card": "12px",
        "screen": "18px",
      },
    },
  },
};