launchreel Ledger

launchreel 账本

Filmlighttrustworthy precise calm

石白纸面，只用 Inter，稳定的遮罩上升，数字便当格滚动，三张玻璃卡。

Stone-white paper, Inter only, steady mask-rise, a bento of numbers rolling up, three glass cards, roadmap.

LAUNCHREEL LEDGER104–112 bpm

Every cent, accounted

$1.2M settled · 0 disputes

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	14px
radius · screen	18px
shadow	none
glass	none

Motion

Entrance: mask-rise (out-expo).
Tempo 104–112 bpm (picked per domain inside the range); hold 1100ms.
Transitions: cut, dissolve, zoom.

Film parameters

Resolution	1920×1080
Stage	paper stone base
Grain / vignette	off / off
Device	none
Entrance	mask-rise
Tempo	104–112 bpm
Hold	1100ms
Layouts (stats / steps / features / screens)	bento / roadmap / cards / framed
Transitions	cut, dissolve, zoom
Openings	kicker-wordmark, tilt-screen
End cards	wordmark, tile
Best for	fintech / b2b

Do / Don't

Do

Numbers roll up inside a bento.
Three glass cards for features.
Steady, medium tempo.

Don't

Don't use playful entrances.
Don't use more than one accent.

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 Ledger / launchreel 账本 — Stone-white paper, Inter only, steady mask-rise, a bento of numbers rolling up, three glass cards, roadmap. */
:root {
  --launchreel-ledger-bg: #F2F1ED;
  --launchreel-ledger-surface: color-mix(in oklab, #ffffff 70%, #F2F1ED);
  --launchreel-ledger-ink: #15161A;
  --launchreel-ledger-muted: #63646B;
  --launchreel-ledger-accent: #2F6DF6;
  --launchreel-ledger-accent-ink: #ffffff;
  --launchreel-ledger-line: color-mix(in oklab, #15161A 14%, #F2F1ED);

  --launchreel-ledger-pal-stage-bg: #F2F1ED;
  --launchreel-ledger-pal-ink: #15161A;
  --launchreel-ledger-pal-muted: #63646B;
  --launchreel-ledger-pal-accent-example: #2F6DF6;
  --launchreel-ledger-pal-accent-2-example: #8698D5;

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

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

/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
  --color-bg: #F2F1ED;
  --color-surface: color-mix(in oklab, #ffffff 70%, #F2F1ED);
  --color-ink: #15161A;
  --color-muted: #63646B;
  --color-accent: #2F6DF6;
  --color-accent-ink: #ffffff;
  --color-line: color-mix(in oklab, #15161A 14%, #F2F1ED);
  --font-display: Inter, "Noto Sans SC", system-ui, sans-serif;
  --font-sans: Inter, "Noto Sans SC", system-ui, sans-serif;
  --radius-card: 14px;
  --radius-screen: 18px;
}

// Tailwind v3 — tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        "bg": "#F2F1ED",
        "surface": "color-mix(in oklab, #ffffff 70%, #F2F1ED)",
        "ink": "#15161A",
        "muted": "#63646B",
        "accent": "#2F6DF6",
        "accent-ink": "#ffffff",
        "line": "color-mix(in oklab, #15161A 14%, #F2F1ED)",
      },
      fontFamily: {
        display: ["Inter, \"Noto Sans SC\", system-ui, sans-serif"],
        sans: ["Inter, \"Noto Sans SC\", system-ui, sans-serif"],
      },
      borderRadius: {
        "card": "14px",
        "screen": "18px",
      },
    },
  },
};