launchreel Hanzi Pop

launchreel 汉字波普

品牌色洗过的亮舞台，粗黑中文，快速淡入，卡片轮播，节点路线图，甩镜。中文优先。

A bright stage washed in the brand colour, bold Chinese sans, quick fade-up, card carousel, node roadmap, whip pans. Chinese-first.

LAUNCHREEL HANZI POP128–140 bpm

一键开团

三步上手

16:9 frame mock · light

Palette

Type

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

Display	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 Inter, 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 128–140 bpm (picked per domain inside the range); hold 700ms.
Transitions: cut, whip-pan, flash-scan.

Film parameters

Resolution	1920×1080
Stage	brand-tinted stage (example brand #2F6DF6)
Grain / vignette	off / off
Device	none
Entrance	fade-up
Tempo	128–140 bpm
Hold	700ms
Layouts (stats / steps / features / screens)	count-up / roadmap / carousel / framed
Transitions	cut, whip-pan, flash-scan
Openings	word-swap, tilt-screen
End cards	tile, wordmark
Best for	chinese-consumer / consumer-app

Do / Don't

Do

Bold Chinese sans (Noto Sans SC) for zh films.
Card carousel for features.
Word-swap opening.

Don't

Don't use serif.
Don't use in English films unless asked.

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 Hanzi Pop / launchreel 汉字波普 — A bright stage washed in the brand colour, bold Chinese sans, quick fade-up, card carousel, node roadmap, whip pans. Chinese-first. */
:root {
  --launchreel-hanzi-pop-bg: #E2EAFE;
  --launchreel-hanzi-pop-surface: color-mix(in oklab, #ffffff 70%, #E2EAFE);
  --launchreel-hanzi-pop-ink: #121318;
  --launchreel-hanzi-pop-muted: #4F5770;
  --launchreel-hanzi-pop-accent: #2F6DF6;
  --launchreel-hanzi-pop-accent-ink: #ffffff;
  --launchreel-hanzi-pop-line: color-mix(in oklab, #121318 14%, #E2EAFE);

  --launchreel-hanzi-pop-pal-stage-bg: #E2EAFE;
  --launchreel-hanzi-pop-pal-ink: #121318;
  --launchreel-hanzi-pop-pal-muted: #4F5770;
  --launchreel-hanzi-pop-pal-accent-example: #2F6DF6;
  --launchreel-hanzi-pop-pal-accent-2-example: #8698D5;

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

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

/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
  --color-bg: #E2EAFE;
  --color-surface: color-mix(in oklab, #ffffff 70%, #E2EAFE);
  --color-ink: #121318;
  --color-muted: #4F5770;
  --color-accent: #2F6DF6;
  --color-accent-ink: #ffffff;
  --color-line: color-mix(in oklab, #121318 14%, #E2EAFE);
  --font-display: Inter, "Noto Sans SC", system-ui, 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": "#E2EAFE",
        "surface": "color-mix(in oklab, #ffffff 70%, #E2EAFE)",
        "ink": "#121318",
        "muted": "#4F5770",
        "accent": "#2F6DF6",
        "accent-ink": "#ffffff",
        "line": "color-mix(in oklab, #121318 14%, #E2EAFE)",
      },
      fontFamily: {
        display: ["Inter, \"Noto Sans SC\", system-ui, sans-serif"],
        sans: ["Inter, \"Noto Sans SC\", system-ui, sans-serif"],
      },
      borderRadius: {
        "card": "12px",
        "screen": "18px",
      },
    },
  },
};