launchreel Broadsheet

launchreel 报纸

Filmlighteditorial thoughtful human

暖新闻纸，衬线标题，逐行打字，一点一页，像翻报纸一样溶解。

Warm newsprint paper, serif headlines, typed lines, one framed page per point, dissolves like turning a page.

LAUNCHREEL BROADSHEET84–96 bpm

The weekly read

Issue 42 · one page per idea

16:9 frame mock · light

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	"Source Han Serif SC", "Noto Serif SC", "Songti SC", serif
super	144px
chapter	64px
ui title	40px
body	28px
label	22px

Display Source Han Serif SC, body Source Han Serif SC. Chinese films: Source Han Serif SC. Sizes at 1920×1080.

Shape & surface

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

Motion

Entrance: typewriter (out-cubic).
Tempo 84–96 bpm (picked per domain inside the range); hold 1600ms.
Transitions: cut, dissolve, iris.

Film parameters

Resolution	1920×1080
Stage	paper warm base
Grain / vignette	off / off
Device	none
Entrance	typewriter
Tempo	84–96 bpm
Hold	1600ms
Layouts (stats / steps / features / screens)	count-up / lines / word-cards / framed
Transitions	cut, dissolve, iris
Openings	kicker-wordmark, hero-screen
End cards	wordmark, tile
Best for	community / creator-tool

Do / Don't

Do

One framed page per point.
Dissolve like a page turn.
Long holds (1.6s).

Don't

Don't use sans display.
Don't use flash or whip transitions.

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 Broadsheet / launchreel 报纸 — Warm newsprint paper, serif headlines, typed lines, one framed page per point, dissolves like turning a page. */
:root {
  --launchreel-broadsheet-bg: #F5F1EA;
  --launchreel-broadsheet-surface: color-mix(in oklab, #ffffff 70%, #F5F1EA);
  --launchreel-broadsheet-ink: #1B1915;
  --launchreel-broadsheet-muted: #6F695E;
  --launchreel-broadsheet-accent: #2F6DF6;
  --launchreel-broadsheet-accent-ink: #ffffff;
  --launchreel-broadsheet-line: color-mix(in oklab, #1B1915 14%, #F5F1EA);

  --launchreel-broadsheet-pal-stage-bg: #F5F1EA;
  --launchreel-broadsheet-pal-ink: #1B1915;
  --launchreel-broadsheet-pal-muted: #6F695E;
  --launchreel-broadsheet-pal-accent-example: #2F6DF6;
  --launchreel-broadsheet-pal-accent-2-example: #8698D5;

  --launchreel-broadsheet-font-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
  --launchreel-broadsheet-font-body: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
  --launchreel-broadsheet-text-super: 144px;
  --launchreel-broadsheet-text-chapter: 64px;
  --launchreel-broadsheet-text-ui-title: 40px;
  --launchreel-broadsheet-text-body: 28px;
  --launchreel-broadsheet-text-label: 22px;

  --launchreel-broadsheet-radius-card: 14px;
  --launchreel-broadsheet-radius-screen: 18px;
  --launchreel-broadsheet-shadow: none;
}

/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
  --color-bg: #F5F1EA;
  --color-surface: color-mix(in oklab, #ffffff 70%, #F5F1EA);
  --color-ink: #1B1915;
  --color-muted: #6F695E;
  --color-accent: #2F6DF6;
  --color-accent-ink: #ffffff;
  --color-line: color-mix(in oklab, #1B1915 14%, #F5F1EA);
  --font-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
  --font-sans: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
  --radius-card: 14px;
  --radius-screen: 18px;
}

// Tailwind v3 — tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        "bg": "#F5F1EA",
        "surface": "color-mix(in oklab, #ffffff 70%, #F5F1EA)",
        "ink": "#1B1915",
        "muted": "#6F695E",
        "accent": "#2F6DF6",
        "accent-ink": "#ffffff",
        "line": "color-mix(in oklab, #1B1915 14%, #F5F1EA)",
      },
      fontFamily: {
        display: ["\"Source Han Serif SC\", \"Noto Serif SC\", \"Songti SC\", serif"],
        sans: ["\"Source Han Serif SC\", \"Noto Serif SC\", \"Songti SC\", serif"],
      },
      borderRadius: {
        "card": "14px",
        "screen": "18px",
      },
    },
  },
};