launchreel Darkroom
launchreel 暗房暖黑加颗粒和暗角，衬线逐字打出，图片成墙、快速蒙太奇。
Warm black with grain and vignette, serif display typed letter by letter, pictures as a wall and fast montage.
Made by hand
since 2019 · 4,200 makers
Palette
Type
标题 Display 永正文 Body — 好的界面不抢内容 1234567890Previews use your installed fonts; webfonts are not bundled.
| Display | "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif |
|---|---|
| Body | Inter, "Noto Sans SC", system-ui, sans-serif |
| super | 144px |
| chapter | 64px |
| ui title | 40px |
| body | 28px |
| label | 22px |
Display Source Han Serif SC, body Inter. Chinese films: Source Han Serif SC. Sizes at 1920×1080.
Shape & surface
| radius · card | 12px |
|---|---|
| radius · screen | 18px |
| shadow | none |
| glass | none |
Motion
- Entrance: typewriter (out-cubic).
- Tempo 88–100 bpm (picked per domain inside the range); hold 1400ms.
- Transitions: cut, dip-to-black, focus-push, pixelate.
Film parameters
| Resolution | 1920×1080 |
|---|---|
| Stage | dark warm base |
| Grain / vignette | on / on |
| Device | none |
| Entrance | typewriter |
| Tempo | 88–100 bpm |
| Hold | 1400ms |
| Layouts (stats / steps / features / screens) | stat-cards / pills / montage / wall |
| Transitions | cut, dip-to-black, focus-push, pixelate |
| Openings | hero-screen, kicker-wordmark |
| End cards | wordmark, tile |
| Best for | creator-tool / community / consumer-app |
Do / Don't
Do
- Keep grain and vignette on.
- Numbers beside a portrait.
- Dip-to-black between acts.
Don't
- Don't use cool neutrals.
- Don't use device frames.
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 Darkroom / launchreel 暗房 — Warm black with grain and vignette, serif display typed letter by letter, pictures as a wall and fast montage. */
:root {
--launchreel-darkroom-bg: #0B0A08;
--launchreel-darkroom-surface: color-mix(in oklab, #F2ECE1 6%, #0B0A08);
--launchreel-darkroom-ink: #F2ECE1;
--launchreel-darkroom-muted: #8E8474;
--launchreel-darkroom-accent: #6B95FF;
--launchreel-darkroom-accent-ink: #0B0A08;
--launchreel-darkroom-line: color-mix(in oklab, #F2ECE1 14%, #0B0A08);
--launchreel-darkroom-pal-stage-bg: #0B0A08;
--launchreel-darkroom-pal-ink: #F2ECE1;
--launchreel-darkroom-pal-muted: #8E8474;
--launchreel-darkroom-pal-accent-example: #6B95FF;
--launchreel-darkroom-pal-accent-2-example: #ABC0F5;
--launchreel-darkroom-font-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
--launchreel-darkroom-font-body: Inter, "Noto Sans SC", system-ui, sans-serif;
--launchreel-darkroom-text-super: 144px;
--launchreel-darkroom-text-chapter: 64px;
--launchreel-darkroom-text-ui-title: 40px;
--launchreel-darkroom-text-body: 28px;
--launchreel-darkroom-text-label: 22px;
--launchreel-darkroom-radius-card: 12px;
--launchreel-darkroom-radius-screen: 18px;
--launchreel-darkroom-shadow: none;
}/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
--color-bg: #0B0A08;
--color-surface: color-mix(in oklab, #F2ECE1 6%, #0B0A08);
--color-ink: #F2ECE1;
--color-muted: #8E8474;
--color-accent: #6B95FF;
--color-accent-ink: #0B0A08;
--color-line: color-mix(in oklab, #F2ECE1 14%, #0B0A08);
--font-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
--font-sans: 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": "#0B0A08",
"surface": "color-mix(in oklab, #F2ECE1 6%, #0B0A08)",
"ink": "#F2ECE1",
"muted": "#8E8474",
"accent": "#6B95FF",
"accent-ink": "#0B0A08",
"line": "color-mix(in oklab, #F2ECE1 14%, #0B0A08)",
},
fontFamily: {
display: ["\"Source Han Serif SC\", \"Noto Serif SC\", \"Songti SC\", serif"],
sans: ["Inter, \"Noto Sans SC\", system-ui, sans-serif"],
},
borderRadius: {
"card": "12px",
"screen": "18px",
},
},
},
};