launchreel Neon

launchreel 霓虹

品牌色染的夜舞台，快速淡入，网站图片墙，功能标签，像素化和闪切。

A night stage tinted with the brand colour, fast fade-up, a wall of the site's pictures, feature tags, pixelate and flash cuts.

LAUNCHREEL NEON136–150 bpm

Tonight, louder

#live · 128 bpm

16:9 frame mock · dark

Palette

Type

标题 Display 永正文 Body — 好的界面不抢内容 1234567890Previews use your installed fonts; webfonts are not bundled.

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

Display Sora, body Inter. Chinese films: Noto Sans SC. Sizes at 1920×1080.

Shape & surface

radius · card	12px
radius · screen	18px
shadow	none
glass	none

Motion

Entrance: fade-up (ease-out).
Tempo 136–150 bpm (picked per domain inside the range); hold 600ms.
Transitions: cut, pixelate, flash-scan, whip-pan.

Film parameters

Resolution	1920×1080
Stage	brand-tinted stage (example brand #2F6DF6)
Grain / vignette	off / off
Device	glow
Entrance	fade-up
Tempo	136–150 bpm
Hold	600ms
Layouts (stats / steps / features / screens)	count-up / pills / tags / wall
Transitions	cut, pixelate, flash-scan, whip-pan
Openings	hero-screen, word-swap
End cards	tile, wordmark
Best for	consumer-app / creator-tool / community

Do / Don't

Do

Device glow on product shots.
Picture wall from the site's own images.
Pixelate and flash cuts on beat.

Don't

Don't use dissolves.
Don't use serif.

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 Neon / launchreel 霓虹 — A night stage tinted with the brand colour, fast fade-up, a wall of the site's pictures, feature tags, pixelate and flash cuts. */
:root {
  --launchreel-neon-bg: #0C1630;
  --launchreel-neon-surface: color-mix(in oklab, #F4F6FA 6%, #0C1630);
  --launchreel-neon-ink: #F4F6FA;
  --launchreel-neon-muted: #9AA6C4;
  --launchreel-neon-accent: #6B95FF;
  --launchreel-neon-accent-ink: #0C1630;
  --launchreel-neon-line: color-mix(in oklab, #F4F6FA 14%, #0C1630);

  --launchreel-neon-pal-stage-bg: #0C1630;
  --launchreel-neon-pal-ink: #F4F6FA;
  --launchreel-neon-pal-muted: #9AA6C4;
  --launchreel-neon-pal-accent-example: #6B95FF;
  --launchreel-neon-pal-accent-2-example: #ABC0F5;

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

  --launchreel-neon-radius-card: 12px;
  --launchreel-neon-radius-screen: 18px;
  --launchreel-neon-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: Sora, Inter, "Noto Sans SC", sans-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": "#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: ["Sora, Inter, \"Noto Sans SC\", sans-serif"],
        sans: ["Inter, \"Noto Sans SC\", system-ui, sans-serif"],
      },
      borderRadius: {
        "card": "12px",
        "screen": "18px",
      },
    },
  },
};