[teamai] Push 87 resource(s) from XingfenD
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"id": "bauhaus-bold",
|
||||
"name": "Bauhaus Bold",
|
||||
"nameZh": "包豪斯",
|
||||
"description": "Pure off-white surface, primary-blue accent, and chunky Archivo Black display type. Bauhaus / brutalist modernist — best for opinionated manifestos and bold product pitches.",
|
||||
"descriptionZh": "净色底 + 主色蓝强调色 + Archivo Black 黑体. 包豪斯 / 布鲁塔利风格, 适合观点鲜明的演讲与产品发布.",
|
||||
"mood": [
|
||||
"light",
|
||||
"modernist",
|
||||
"bauhaus",
|
||||
"geometric",
|
||||
"bold",
|
||||
"manifesto"
|
||||
],
|
||||
"bestFor": [
|
||||
"产品发布",
|
||||
"观点宣言",
|
||||
"设计演讲",
|
||||
"品牌主张"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#f0eee8",
|
||||
"surface": "#fafaf7",
|
||||
"text": "#0a0a0a",
|
||||
"accent": "#1a4cdb"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · bauhaus-bold
|
||||
* Modernist / brutalist manifesto. Off-white canvas, pure ink black,
|
||||
* primary-blue accent. Archivo Black display, Inter body. SHARP
|
||||
* corners (0 radius), THICK borders (4-8px), no decoration. Motion
|
||||
* is sharp & quick — no overshoot, no easing tricks.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — Archivo Black, near-zero tracking, MASSIVE
|
||||
* • rule — 4px solid black (geometric heavy)
|
||||
* • card — 0 radius, 4px black border
|
||||
* • surface — clean (no pattern)
|
||||
* • motion — quick, sharp ease-out only
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #1a1a1a;
|
||||
--surface: #f4f1ea;
|
||||
--surface-2: #ffffff;
|
||||
--surface-3: #e8e3d4;
|
||||
--text: #0a0a0a;
|
||||
--text-2: #1f1f1f;
|
||||
--text-mute: #5a5a5a;
|
||||
--text-faint: #8c8c8c;
|
||||
--rule: #0a0a0a;
|
||||
--accent: #2541ee;
|
||||
--accent-soft: rgba(37, 65, 238, 0.12);
|
||||
--accent-glow: rgba(37, 65, 238, 0.40);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
||||
--font-display-en: "Archivo Black", "Inter", "Helvetica Neue", sans-serif;
|
||||
--font-body: "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "tnum", "ss01";
|
||||
|
||||
/* ─── motion: sharp & fast ─── */
|
||||
--ease-overshoot: cubic-bezier(0.4, 0, 0.2, 1); /* no overshoot in bauhaus */
|
||||
--dur-quick: 180ms;
|
||||
--dur-base: 400ms;
|
||||
--dur-slow: 650ms;
|
||||
--dur-cinematic: 1000ms;
|
||||
|
||||
/* ─── design identity: heavy geometry ─── */
|
||||
--r-card: var(--r-flat); /* SIGNATURE — pure rectangles */
|
||||
--r-stage: 0;
|
||||
--rule-w: 4px; /* SIGNATURE — heavy lines */
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 900;
|
||||
--hero-num-track: -0.05em;
|
||||
--stage-pad-x: 80px;
|
||||
--stage-pad-y: 60px;
|
||||
--card-shadow: 8px 8px 0 var(--text); /* SIGNATURE — offset solid shadow */
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(0, 0, 0, 0.55),
|
||||
0 0 0 4px var(--text); /* thick black frame around stage */
|
||||
--stage-border: 4px solid var(--text);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "blueprint",
|
||||
"name": "Blueprint",
|
||||
"nameZh": "蓝图",
|
||||
"description": "Deep navy backdrop with cyan accent and IBM Plex Mono. Engineering blueprint / industrial schematic vibe — best for system architecture and technical breakdowns.",
|
||||
"descriptionZh": "深藏青底 + 青色强调色 + IBM Plex Mono. 工程蓝图 / 工业图纸气质, 适合系统架构与技术拆解.",
|
||||
"mood": [
|
||||
"dark",
|
||||
"engineering",
|
||||
"blueprint",
|
||||
"industrial",
|
||||
"technical",
|
||||
"navy"
|
||||
],
|
||||
"bestFor": [
|
||||
"技术架构",
|
||||
"系统拆解",
|
||||
"技术评测",
|
||||
"工程教程",
|
||||
"API / SDK 介绍"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#0a121f",
|
||||
"surface": "#0e1830",
|
||||
"text": "#e6f0ff",
|
||||
"accent": "#5fc7e8"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · blueprint
|
||||
* Engineering schematic / architect's drafting board. Deep navy with
|
||||
* drafting-cyan accent, IBM Plex Mono everywhere, signature DASHED
|
||||
* 2px rules + 60px drafting grid baked into the stage. Hero numbers
|
||||
* are mono cyan with ticks.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — mono cyan, 0 letter-spacing
|
||||
* • rule — 2px DASHED cyan (drafting line)
|
||||
* • card — 2px solid border, 0 radius
|
||||
* • surface — 60px drafting grid
|
||||
* • motion — measured (precise drafting tools)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #0a1224;
|
||||
--surface: #0e1a2e;
|
||||
--surface-2: #142441;
|
||||
--surface-3: #1c2f54;
|
||||
--text: #d6e5ff;
|
||||
--text-2: #a8c2f0;
|
||||
--text-mute: #6c89b8;
|
||||
--text-faint: #3e5680;
|
||||
--rule: rgba(120, 200, 255, 0.30);
|
||||
--accent: #4dd2ff;
|
||||
--accent-soft: rgba(77, 210, 255, 0.10);
|
||||
--accent-glow: rgba(77, 210, 255, 0.55);
|
||||
|
||||
/* ─── fonts (mono pairing) ─── */
|
||||
--font-display-cn: "IBM Plex Sans", "Noto Sans SC", sans-serif;
|
||||
--font-display-en: "IBM Plex Mono", "JetBrains Mono", monospace;
|
||||
--font-body: "IBM Plex Sans", "Noto Sans SC", sans-serif;
|
||||
--font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;
|
||||
--font-features: "tnum", "zero", "ss01";
|
||||
|
||||
/* ─── motion: drafting-precise ─── */
|
||||
--dur-base: 500ms;
|
||||
--dur-slow: 800ms;
|
||||
--dur-cinematic: 1200ms;
|
||||
|
||||
/* ─── design identity: drafting board ─── */
|
||||
--r-card: var(--r-flat); /* SIGNATURE — engineering, not branding */
|
||||
--r-stage: 0;
|
||||
--rule-w: 2px;
|
||||
--rule-style: dashed; /* SIGNATURE — drafting line */
|
||||
--hero-num-font: var(--font-mono);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 500;
|
||||
--hero-num-track: -0.02em;
|
||||
--stage-pad-x: 96px;
|
||||
--stage-pad-y: 72px;
|
||||
--card-shadow: inset 0 0 0 2px var(--rule);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(0, 20, 60, 0.55),
|
||||
0 0 0 1px rgba(120, 200, 255, 0.10);
|
||||
|
||||
/* ─── decoration: 60px drafting grid ─── */
|
||||
--surface-pattern:
|
||||
linear-gradient(rgba(120, 200, 255, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(120, 200, 255, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(rgba(120, 200, 255, 0.04) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(120, 200, 255, 0.04) 1px, transparent 1px);
|
||||
--surface-pattern-size: 240px 240px, 240px 240px, 60px 60px, 60px 60px;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "bold-signal",
|
||||
"name": "Bold Signal",
|
||||
"nameZh": "焦点信号",
|
||||
"description": "Dark gradient backdrop with a hot orange focal card and Archivo Black / Space Grotesk typography. Signature: oversized orange focal card as the stage's anchor + tabular section numbers. Built for pitch decks, product launches and statement chapters.",
|
||||
"descriptionZh": "暗渐变底 + 大橙色焦点色卡 + Archivo Black / Space Grotesk 字体。签名：占位主角色卡 + 大编号制表数。适合 pitch deck、产品发布、宣言型章节。",
|
||||
"mood": [
|
||||
"dark",
|
||||
"bold",
|
||||
"signal",
|
||||
"hero",
|
||||
"modern",
|
||||
"pitch"
|
||||
],
|
||||
"bestFor": [
|
||||
"pitch deck / 投资人路演",
|
||||
"产品发布 / 新品宣传",
|
||||
"营销片头 / brand keynote",
|
||||
"大字宣言 / 标题片",
|
||||
"season hero / 主题营销"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#0c0c0c",
|
||||
"surface": "#1a1a1a",
|
||||
"text": "#f5f5f5",
|
||||
"accent": "#ff5722"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · bold-signal
|
||||
* Hero pitch-deck dark. Dark canvas with a single hot orange as the
|
||||
* focal accent — chapters build huge accent-colored cards on top of
|
||||
* the dark surface. Archivo Black for display (chunky modernist
|
||||
* slogans), Space Grotesk for body, JetBrains Mono for tabular badges.
|
||||
*
|
||||
* --shell + --surface form a soft diagonal gradient (via
|
||||
* --surface-pattern) so the stage doesn't read as flat black.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — Archivo Black, weight 900, near-zero tracking
|
||||
* • rule — 2px solid (mid-weight, modern)
|
||||
* • card — refined 12px radius (chunk + soft)
|
||||
* • surface — gentle diagonal gradient (#1a1a1a → #2d2d2d)
|
||||
* • motion — punchy ease-out (quick reveals)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #0c0c0c;
|
||||
--surface: #1a1a1a;
|
||||
--surface-2: #2d2d2d;
|
||||
--surface-3: #3a3a3a;
|
||||
--text: #f5f5f5;
|
||||
--text-2: #d8d8d8;
|
||||
--text-mute: #8a8a8a;
|
||||
--text-faint: #5a5a5a;
|
||||
--rule: #3d3d3d;
|
||||
--accent: #ff5722; /* hot signal orange */
|
||||
--accent-soft: rgba(255, 87, 34, 0.14);
|
||||
--accent-glow: rgba(255, 87, 34, 0.50);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
||||
--font-display-en: "Archivo Black", "Inter", "Helvetica Neue", sans-serif;
|
||||
--font-body: "Space Grotesk", "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "tnum", "ss01", "ss02";
|
||||
|
||||
/* ─── motion: punchy pitch ─── */
|
||||
--dur-quick: 180ms;
|
||||
--dur-base: 420ms;
|
||||
--dur-slow: 680ms;
|
||||
--dur-cinematic: 1050ms;
|
||||
|
||||
/* ─── design identity: bold hero ─── */
|
||||
--r-card: var(--r-md); /* 12px chunky-but-soft */
|
||||
--r-stage: 0;
|
||||
--rule-w: 2px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 900;
|
||||
--hero-num-track: -0.04em;
|
||||
--stage-pad-x: 100px;
|
||||
--stage-pad-y: 80px;
|
||||
--card-shadow:
|
||||
0 24px 60px rgba(0, 0, 0, 0.45),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.04);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(0, 0, 0, 0.60),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* ─── decoration: diagonal hero gradient (signal) ─── */
|
||||
--surface-pattern:
|
||||
linear-gradient(135deg, rgba(255, 87, 34, 0.0) 0%, rgba(255, 87, 34, 0.04) 40%, transparent 70%),
|
||||
linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
|
||||
--surface-pattern-size: 100% 100%, 100% 100%;
|
||||
--surface-pattern-blend: normal, normal;
|
||||
--surface-pattern-opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "chalk-garden",
|
||||
"name": "Chalk Garden",
|
||||
"nameZh": "粉笔花园",
|
||||
"description": "Dark slate chalkboard backdrop with handwritten Patrick Hand typography and a chalk-yellow accent. Friendly classroom / explainer vibe.",
|
||||
"descriptionZh": "深色石板底 + Patrick Hand 手写字体 + 粉笔黄强调色. 教室 / 课堂讲解风.",
|
||||
"mood": [
|
||||
"dark",
|
||||
"handwritten",
|
||||
"classroom",
|
||||
"playful",
|
||||
"chalk",
|
||||
"explainer"
|
||||
],
|
||||
"bestFor": [
|
||||
"科普讲解",
|
||||
"教学课堂",
|
||||
"知识分享",
|
||||
"亲切口吻视频",
|
||||
"面向初学者"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#1a1a1a",
|
||||
"surface": "#1e1e24",
|
||||
"text": "#f4f4f5",
|
||||
"accent": "#fde047"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · chalk-garden
|
||||
* Handwritten classroom: dark slate chalkboard, Patrick Hand body,
|
||||
* chalk-yellow accent, faint film grain + radial vignette so the
|
||||
* whole stage feels like a 35mm photo of a real chalkboard.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — chunky chalk-handwritten
|
||||
* • rule — 2px DASHED chalk
|
||||
* • card — soft 16px radius, slight rotation in chapter
|
||||
* • surface — film grain (overlay) + edge vignette
|
||||
* • motion — soft, hand-drawn pace
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #16171c;
|
||||
--surface: #1e1e24;
|
||||
--surface-2: #28282f;
|
||||
--surface-3: #34343c;
|
||||
--text: #f4f4f5;
|
||||
--text-2: #d4d4d8;
|
||||
--text-mute: #a1a1aa;
|
||||
--text-faint: #71717a;
|
||||
--rule: rgba(255, 255, 255, 0.20);
|
||||
--accent: #facc15;
|
||||
--accent-soft: rgba(250, 204, 21, 0.14);
|
||||
--accent-glow: rgba(250, 204, 21, 0.55);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Patrick Hand", "Noto Serif SC", cursive, serif;
|
||||
--font-display-en: "Patrick Hand", "Caveat", cursive;
|
||||
--font-body: "Patrick Hand", "Noto Sans SC", sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "tnum";
|
||||
|
||||
/* ─── motion: hand-drawn pace ─── */
|
||||
--dur-base: 650ms;
|
||||
--dur-slow: 950ms;
|
||||
--dur-cinematic: 1400ms;
|
||||
|
||||
/* ─── design identity: chalkboard ─── */
|
||||
--r-card: var(--r-md);
|
||||
--r-stage: 0;
|
||||
--rule-w: 2px;
|
||||
--rule-style: dashed; /* SIGNATURE — every divider is dashed */
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 400;
|
||||
--hero-num-track: 0;
|
||||
--stage-pad-x: 120px;
|
||||
--stage-pad-y: 80px;
|
||||
--text-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 0 8px rgba(255, 255, 255, 0.10);
|
||||
|
||||
/* ─── decoration: film grain + vignette ─── */
|
||||
--surface-pattern:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
|
||||
--surface-pattern-size: 240px 240px;
|
||||
--surface-pattern-blend: overlay;
|
||||
--surface-pattern-opacity: 0.20;
|
||||
--surface-vignette:
|
||||
radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "creative-voltage",
|
||||
"name": "Creative Voltage",
|
||||
"nameZh": "电压创意",
|
||||
"description": "Saturated electric-blue canvas with neon-yellow accent and Syne / Space Mono typography. Signature: halftone dot pattern (retro-punk creative studio). Built for design weeks, creative-studio decks and visual culture talks.",
|
||||
"descriptionZh": "饱和电光蓝底 + 霓虹黄强调 + Syne 几何衬线 / Space Mono 等宽。签名：halftone 网点纹理（复古朋克工作室感）。适合设计周、创意工作室、视觉文化话题。",
|
||||
"mood": [
|
||||
"dark",
|
||||
"creative",
|
||||
"energetic",
|
||||
"retro-modern",
|
||||
"electric",
|
||||
"punk"
|
||||
],
|
||||
"bestFor": [
|
||||
"设计周 / 创意分享",
|
||||
"工作室作品集 / showcase",
|
||||
"视觉文化 / 字体话题",
|
||||
"音乐 / 艺术节预热",
|
||||
"复古朋克 / 街头文化"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#001a4d",
|
||||
"surface": "#0033b8",
|
||||
"text": "#ffffff",
|
||||
"accent": "#d4ff00"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · creative-voltage
|
||||
* Retro-modern creative studio. Saturated electric-blue surface (the
|
||||
* brand color IS the canvas) + neon-yellow accent for shock contrast.
|
||||
* Syne for display (curved geometric serif-sans hybrid), Space Mono
|
||||
* for body / mono badges (creative-coder vibe). SIGNATURE: subtle
|
||||
* halftone dot pattern overlay.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — Syne, weight 800 (geometric chunk)
|
||||
* • rule — 2px solid neon yellow (bold, decisive)
|
||||
* • card — refined-sm radius (mostly sharp)
|
||||
* • surface — halftone dot pattern (retro print signature)
|
||||
* • motion — punchy + slight overshoot (energy)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #001a4d;
|
||||
--surface: #0033b8; /* saturated electric blue */
|
||||
--surface-2: #00257d;
|
||||
--surface-3: #001f5e;
|
||||
--text: #ffffff;
|
||||
--text-2: #e8eaff;
|
||||
--text-mute: #98a4d8;
|
||||
--text-faint: #6878b8;
|
||||
--rule: rgba(212, 255, 0, 0.32);
|
||||
--accent: #d4ff00; /* neon yellow */
|
||||
--accent-soft: rgba(212, 255, 0, 0.14);
|
||||
--accent-glow: rgba(212, 255, 0, 0.50);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
||||
--font-display-en: "Syne", "Archivo Black", "Inter", sans-serif;
|
||||
--font-body: "Space Mono", "JetBrains Mono", "Inter", "Noto Sans SC", monospace;
|
||||
--font-mono: "Space Mono", "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "ss02", "tnum";
|
||||
|
||||
/* ─── motion: punchy energy ─── */
|
||||
--dur-quick: 200ms;
|
||||
--dur-base: 450ms;
|
||||
--dur-slow: 720ms;
|
||||
--dur-cinematic: 1100ms;
|
||||
|
||||
/* ─── design identity: punk studio ─── */
|
||||
--r-card: var(--r-sm);
|
||||
--r-stage: 0;
|
||||
--rule-w: 2px; /* SIGNATURE — bold dividers */
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 800;
|
||||
--hero-num-track: -0.03em;
|
||||
--stage-pad-x: 96px;
|
||||
--stage-pad-y: 72px;
|
||||
--card-shadow:
|
||||
0 1px 0 var(--rule),
|
||||
8px 8px 0 rgba(212, 255, 0, 0.30); /* offset neon-yellow shadow */
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(0, 20, 60, 0.65),
|
||||
0 0 0 1px rgba(212, 255, 0, 0.18);
|
||||
|
||||
/* ─── decoration: SIGNATURE — halftone dot pattern overlay ─── */
|
||||
--surface-pattern:
|
||||
radial-gradient(circle, rgba(212, 255, 0, 0.18) 1.5px, transparent 2px);
|
||||
--surface-pattern-size: 18px 18px;
|
||||
--surface-pattern-blend: normal;
|
||||
--surface-pattern-opacity: 0.55;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "dark-botanical",
|
||||
"name": "Dark Botanical",
|
||||
"nameZh": "暗夜植物",
|
||||
"description": "Premium editorial dark with elegant Cormorant italic and warm terracotta / blush / gold accents. Soft blurred light pools as the signature — magazine-cover sophistication for fashion, lifestyle, brand storytelling.",
|
||||
"descriptionZh": "高级感暗底 + Cormorant 斜体衬线 + 暖陶 / 玫粉 / 鎏金叠层。签名：柔光晕染 (blurred light pool)。气质介于时尚刊物封面与博物馆图录之间。",
|
||||
"mood": [
|
||||
"dark",
|
||||
"elegant",
|
||||
"editorial",
|
||||
"premium",
|
||||
"sophisticated",
|
||||
"botanical"
|
||||
],
|
||||
"bestFor": [
|
||||
"品牌故事 / 形象片",
|
||||
"时尚 / 美妆",
|
||||
"生活方式 / 旅行",
|
||||
"文化 / 艺术评论",
|
||||
"高端产品发布"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#0a0a0a",
|
||||
"surface": "#141312",
|
||||
"text": "#e8e4df",
|
||||
"accent": "#d4a574"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · dark-botanical
|
||||
* Premium editorial dark. Near-black canvas with warm terracotta gold
|
||||
* accent, Cormorant italic English vs Noto Serif SC Chinese, IBM Plex
|
||||
* Sans body. Signature: soft blurred light pools (botanical glow) in
|
||||
* the corners — a single decoration, never grain, never grid.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — italic Cormorant, weight 400 (editorial)
|
||||
* • rule — 1px solid faint warm hairline
|
||||
* • card — refined small radius (paper-lift)
|
||||
* • surface — soft blurred light pool (gold/terra haze)
|
||||
* • motion — slow + cinematic (editorial pace)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #0a0a0a;
|
||||
--surface: #141312;
|
||||
--surface-2: #1c1a18;
|
||||
--surface-3: #25221f;
|
||||
--text: #e8e4df;
|
||||
--text-2: #c8c0b6;
|
||||
--text-mute: #7a7268;
|
||||
--text-faint: #4a4540;
|
||||
--rule: #2a2622;
|
||||
--accent: #d4a574; /* warm terracotta gold */
|
||||
--accent-soft: rgba(212, 165, 116, 0.12);
|
||||
--accent-glow: rgba(212, 165, 116, 0.45);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Serif SC", "Source Han Serif SC", serif;
|
||||
--font-display-en: "Cormorant", "Cormorant Garamond", "GT Sectra", "Playfair Display", Georgia, serif;
|
||||
--font-body: "IBM Plex Sans", "Manrope", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "tnum", "kern";
|
||||
|
||||
/* ─── motion: slow, editorial ─── */
|
||||
--dur-base: 750ms;
|
||||
--dur-slow: 1200ms;
|
||||
--dur-cinematic: 1700ms;
|
||||
|
||||
/* ─── design identity: elegant editorial ─── */
|
||||
--r-card: var(--r-sm); /* refined paper-lift, not flat */
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: italic;
|
||||
--hero-num-weight: 400;
|
||||
--hero-num-track: -0.035em;
|
||||
--stage-pad-x: 140px;
|
||||
--stage-pad-y: 100px;
|
||||
--card-shadow:
|
||||
0 1px 0 var(--rule),
|
||||
0 20px 60px rgba(0, 0, 0, 0.45);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(0, 0, 0, 0.65),
|
||||
0 0 0 1px rgba(212, 165, 116, 0.06);
|
||||
|
||||
/* ─── decoration: SIGNATURE — soft blurred light pools (botanical glow) ─── */
|
||||
--surface-pattern:
|
||||
radial-gradient(ellipse 60% 50% at 12% 22%, rgba(212, 165, 116, 0.18) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 55% 45% at 88% 82%, rgba(232, 180, 184, 0.14) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 40% 35% at 78% 18%, rgba(201, 184, 150, 0.10) 0%, transparent 60%);
|
||||
--surface-pattern-size: 100% 100%;
|
||||
--surface-vignette:
|
||||
radial-gradient(circle at 50% 55%, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "dune",
|
||||
"name": "Dune",
|
||||
"nameZh": "沙丘",
|
||||
"description": "Charcoal-brown on desert sand — near-accent-less restraint. Inter sans display + Source Serif body. Architecture portfolio / gallery brochure / desert dusk aesthetic — quiet, sophisticated, design-first.",
|
||||
"descriptionZh": "炭褐当墨 + 沙底，几乎不用 accent —— 克制、高级。Inter 显示 + Source Serif 正文。像建筑作品集、画廊手册、沙漠黄昏的色温。",
|
||||
"mood": [
|
||||
"light",
|
||||
"dune",
|
||||
"sand",
|
||||
"muted",
|
||||
"architecture",
|
||||
"gallery"
|
||||
],
|
||||
"bestFor": [
|
||||
"建筑 / 室内 / 空间",
|
||||
"艺术展览 / 画廊手册",
|
||||
"设计师 / 工作室作品集",
|
||||
"时尚 / 高端品牌",
|
||||
"审美优先的私享会"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#dcc8a5",
|
||||
"surface": "#f0e6d2",
|
||||
"text": "#1f1a14",
|
||||
"accent": "#8c6a48"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · dune
|
||||
* Architecture / gallery brochure restraint. Warm desert sand canvas,
|
||||
* charcoal-brown ink, near-zero accent saturation (clay-brown). Inter
|
||||
* for display (architecture portfolios love Inter / Helvetica), Source
|
||||
* Serif for body (gallery wall-text feel). SIGNATURE: NO decoration,
|
||||
* NO pattern, NO vignette — purity. Like monochrome-print but warmer
|
||||
* and with sans-serif headlines instead of serif.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — Inter, weight 300 (light, refined)
|
||||
* • rule — 1px solid faint sand hairline
|
||||
* • card — refined small radius (paper-lift)
|
||||
* • surface — clean (NO pattern, NO vignette)
|
||||
* • motion — quietest pace (sand barely moves)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #dcc8a5;
|
||||
--surface: #f0e6d2;
|
||||
--surface-2: #f6ecd9;
|
||||
--surface-3: #e3d7bf;
|
||||
--text: #1f1a14; /* charcoal-brown ink */
|
||||
--text-2: #2d2620;
|
||||
--text-mute: #6b5c46;
|
||||
--text-faint: #9a8c70;
|
||||
--rule: #c4b496;
|
||||
--accent: #8c6a48; /* muted clay (low saturation) */
|
||||
--accent-soft: rgba(140, 106, 72, 0.10);
|
||||
--accent-glow: rgba(140, 106, 72, 0.25);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
||||
--font-display-en: "Inter", "Helvetica Neue", "Helvetica", sans-serif;
|
||||
--font-body: "Source Serif 4", "Source Serif Pro", "Noto Serif SC", serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "ss02", "cv02", "tnum";
|
||||
|
||||
/* ─── motion: quietest gallery pace ─── */
|
||||
--dur-base: 780ms;
|
||||
--dur-slow: 1250ms;
|
||||
--dur-cinematic: 1750ms;
|
||||
|
||||
/* ─── design identity: gallery restraint ─── */
|
||||
--r-card: var(--r-xs); /* 4px — barely-there refinement */
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 300;
|
||||
--hero-num-track: -0.04em;
|
||||
--stage-pad-x: 140px; /* generous = refined */
|
||||
--stage-pad-y: 100px;
|
||||
--card-shadow:
|
||||
0 1px 0 var(--rule),
|
||||
0 18px 44px rgba(60, 40, 20, 0.10);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(60, 40, 20, 0.30),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
/* SIGNATURE: NO surface-pattern, NO vignette — desert dusk purity. */
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "electric-studio",
|
||||
"name": "Electric Studio",
|
||||
"nameZh": "电光企业",
|
||||
"description": "Clean white canvas with single electric-blue accent and Manrope sans throughout. Signature: 4px electric-blue accent bar baked into the bottom of the stage — corporate confidence without coldness.",
|
||||
"descriptionZh": "净白底 + 单一电光蓝 + Manrope 全场。签名：贴底 4px 电蓝色块。企业感、清晰、自信，不冷漠，适合 B2B 与投资人场景。",
|
||||
"mood": [
|
||||
"light",
|
||||
"corporate",
|
||||
"electric",
|
||||
"confident",
|
||||
"enterprise",
|
||||
"clean"
|
||||
],
|
||||
"bestFor": [
|
||||
"B2B 产品演讲",
|
||||
"投资人 / 路演 deck",
|
||||
"企业财报 / 季度更新",
|
||||
"行业研究 / 趋势报告",
|
||||
"企业咨询 / 培训"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#0a0a0a",
|
||||
"surface": "#ffffff",
|
||||
"text": "#0a0a0a",
|
||||
"accent": "#4361ee"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · electric-studio
|
||||
* Corporate clarity. Near-black shell makes the white surface read as
|
||||
* "stage on dark", single electric-blue accent for emphasis. Manrope
|
||||
* for display + body (geometric corporate sans). SIGNATURE: a 4px
|
||||
* electric-blue accent bar baked into the bottom edge of the stage,
|
||||
* giving every chapter an instantly-recognizable corporate frame
|
||||
* without a navbar / footer.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — Manrope, weight 800
|
||||
* • rule — 1px solid mid-gray
|
||||
* • card — refined-md radius (12px)
|
||||
* • surface — clean white + bottom electric-blue accent bar
|
||||
* • motion — punchy ease-out (corporate snap)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #0a0a0a;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #f5f7fb;
|
||||
--surface-3: #e8ecf3;
|
||||
--text: #0a0a0a;
|
||||
--text-2: #1f2530;
|
||||
--text-mute: #5a6478;
|
||||
--text-faint: #98a0b0;
|
||||
--rule: #d8dde6;
|
||||
--accent: #4361ee; /* electric corporate blue */
|
||||
--accent-soft: rgba(67, 97, 238, 0.10);
|
||||
--accent-glow: rgba(67, 97, 238, 0.32);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
||||
--font-display-en: "Manrope", "Inter", -apple-system, sans-serif;
|
||||
--font-body: "Manrope", "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "ss02", "ss03", "cv02", "tnum";
|
||||
|
||||
/* ─── motion: punchy corporate ─── */
|
||||
--dur-base: 420ms;
|
||||
--dur-slow: 700ms;
|
||||
--dur-cinematic: 1050ms;
|
||||
|
||||
/* ─── design identity: corporate clarity ─── */
|
||||
--r-card: var(--r-md); /* 12px modern radius */
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 800;
|
||||
--hero-num-track: -0.035em;
|
||||
--stage-pad-x: 110px;
|
||||
--stage-pad-y: 80px;
|
||||
--card-shadow:
|
||||
0 1px 2px rgba(20, 30, 60, 0.06),
|
||||
0 24px 56px rgba(20, 30, 60, 0.10);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(0, 0, 0, 0.55),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* ─── decoration: SIGNATURE — bottom electric-blue accent bar ─── */
|
||||
--surface-pattern:
|
||||
linear-gradient(0deg, #4361ee 0%, #4361ee 4px, transparent 4px, transparent 100%);
|
||||
--surface-pattern-size: 100% 100%;
|
||||
--surface-pattern-blend: normal;
|
||||
--surface-pattern-opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "forest-ink",
|
||||
"name": "Forest Ink",
|
||||
"nameZh": "森林墨",
|
||||
"description": "Deep-forest-green ink on ivory cream — the green IS the ink. Source Serif body + Playfair Display + Noto Serif SC display. Reads like a vintage National Geographic issue — sustainable, grounded, considered.",
|
||||
"descriptionZh": "深森林绿当墨（绿就是字色本身）+ 象牙暖纸。Source Serif 正文 + Playfair Display + Noto Serif SC。像旧版《国家地理》，沉稳、有呼吸感、克制。",
|
||||
"mood": [
|
||||
"light",
|
||||
"forest",
|
||||
"nature",
|
||||
"editorial",
|
||||
"documentary",
|
||||
"warm"
|
||||
],
|
||||
"bestFor": [
|
||||
"自然 / 可持续 / 环保",
|
||||
"户外品牌 / 农业",
|
||||
"纪录 / 非虚构",
|
||||
"文化 / 行业观察",
|
||||
"慢生活 / 文学农庄"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#ece7da",
|
||||
"surface": "#f5f1e8",
|
||||
"text": "#1a2e1f",
|
||||
"accent": "#4d7a4d"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · forest-ink
|
||||
* Deep-forest-green ink on ivory cream. Like indigo-porcelain, the
|
||||
* move is that the ink itself is green — text / headings / hero
|
||||
* numbers all render in deep forest, never pure black. Source Serif
|
||||
* body + Playfair Display display = vintage National Geographic
|
||||
* spread. The accent is a slightly brighter green (used sparingly
|
||||
* for kpi / link emphasis).
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — italic Playfair Display, weight 500
|
||||
* • rule — 1px solid faint warm hairline
|
||||
* • card — refined small radius
|
||||
* • surface — very subtle paper grain (warm, multiply)
|
||||
* • motion — slow + cinematic (documentary pace)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #ece7da;
|
||||
--surface: #f5f1e8;
|
||||
--surface-2: #faf7ee;
|
||||
--surface-3: #ebe7d8;
|
||||
--text: #1a2e1f; /* SIGNATURE — forest green IS the ink */
|
||||
--text-2: #253d2c;
|
||||
--text-mute: #5c6a5e;
|
||||
--text-faint: #909a92;
|
||||
--rule: #c8c0a8;
|
||||
--accent: #4d7a4d; /* slightly brighter forest for emphasis */
|
||||
--accent-soft: rgba(77, 122, 77, 0.10);
|
||||
--accent-glow: rgba(77, 122, 77, 0.32);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Serif SC", "Source Han Serif SC", serif;
|
||||
--font-display-en: "Playfair Display", "GT Sectra", "Bodoni 72", "Times New Roman", serif;
|
||||
--font-body: "Source Serif 4", "Source Serif Pro", "Noto Serif SC", "Times New Roman", serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "tnum", "lnum";
|
||||
|
||||
/* ─── motion: slow documentary pace ─── */
|
||||
--dur-base: 720ms;
|
||||
--dur-slow: 1150ms;
|
||||
--dur-cinematic: 1650ms;
|
||||
|
||||
/* ─── design identity: vintage editorial ─── */
|
||||
--r-card: var(--r-sm);
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: italic;
|
||||
--hero-num-weight: 500;
|
||||
--hero-num-track: -0.035em;
|
||||
--stage-pad-x: 130px;
|
||||
--stage-pad-y: 92px;
|
||||
--card-shadow:
|
||||
0 1px 0 var(--rule),
|
||||
0 20px 48px rgba(26, 46, 31, 0.10);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(26, 46, 31, 0.28),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* ─── decoration: faint warm paper grain (National Geographic feel) ─── */
|
||||
--surface-pattern:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.50 0 0 0 0 0.35 0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
||||
--surface-pattern-size: 320px 320px;
|
||||
--surface-pattern-blend: multiply;
|
||||
--surface-pattern-opacity: 0.55;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "indigo-porcelain",
|
||||
"name": "Indigo Porcelain",
|
||||
"nameZh": "靛蓝瓷",
|
||||
"description": "Deep-indigo ink on porcelain white — the indigo IS the ink, not just an accent. Playfair Display + Noto Serif SC + IBM Plex Sans body. Academic, scholarly, like a Chinese journal of contemporary thought.",
|
||||
"descriptionZh": "深靛蓝当墨（靛蓝就是字色本身，而非 accent）+ 瓷白纸。Playfair Display + Noto Serif SC + IBM Plex Sans。学术、有深度，像蓝印花瓷器或一本当代思想期刊。",
|
||||
"mood": [
|
||||
"light",
|
||||
"indigo",
|
||||
"porcelain",
|
||||
"academic",
|
||||
"editorial",
|
||||
"scholarly"
|
||||
],
|
||||
"bestFor": [
|
||||
"学术 / 研究 / 论文解读",
|
||||
"AI / 数据 / 工程深度",
|
||||
"中国当代文化",
|
||||
"技术发布会 / 严肃汇报",
|
||||
"思想型 / 评论型长文改编"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#e4e8ec",
|
||||
"surface": "#f1f3f5",
|
||||
"text": "#0a1f3d",
|
||||
"accent": "#1e3a8a"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · indigo-porcelain
|
||||
* Deep-indigo ink on porcelain white. The signature isn't the accent
|
||||
* color — it's that the INK ITSELF is indigo (not black). All headings
|
||||
* / body / hero numbers render in deep navy-indigo, so the page reads
|
||||
* like a Chinese journal of contemporary thought or an academic
|
||||
* editorial. Playfair Display italic English vs Noto Serif SC for
|
||||
* display, IBM Plex Sans body adds a quiet technical undertone.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — italic Playfair Display, weight 500
|
||||
* • rule — 1px solid faint porcelain hairline
|
||||
* • card — refined small radius (academic paper-lift)
|
||||
* • surface — clean porcelain (no pattern; purity)
|
||||
* • motion — quiet editorial pace (slower than warm-keynote)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #e4e8ec;
|
||||
--surface: #f1f3f5;
|
||||
--surface-2: #f8fafc;
|
||||
--surface-3: #e7ebef;
|
||||
--text: #0a1f3d; /* SIGNATURE — indigo IS the ink */
|
||||
--text-2: #152a4a;
|
||||
--text-mute: #4a5a78;
|
||||
--text-faint: #8595ad;
|
||||
--rule: #c6cdd6;
|
||||
--accent: #1e3a8a; /* slightly brighter indigo for emphasis */
|
||||
--accent-soft: rgba(30, 58, 138, 0.10);
|
||||
--accent-glow: rgba(30, 58, 138, 0.30);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Serif SC", "Source Han Serif SC", serif;
|
||||
--font-display-en: "Playfair Display", "GT Sectra", "Bodoni 72", "Times New Roman", serif;
|
||||
--font-body: "IBM Plex Sans", "Manrope", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "tnum", "lnum", "kern";
|
||||
|
||||
/* ─── motion: quiet academic pace ─── */
|
||||
--dur-base: 680ms;
|
||||
--dur-slow: 1050ms;
|
||||
--dur-cinematic: 1550ms;
|
||||
|
||||
/* ─── design identity: porcelain editorial ─── */
|
||||
--r-card: var(--r-sm);
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: italic;
|
||||
--hero-num-weight: 500;
|
||||
--hero-num-track: -0.035em;
|
||||
--stage-pad-x: 130px;
|
||||
--stage-pad-y: 92px;
|
||||
--card-shadow:
|
||||
0 1px 0 var(--rule),
|
||||
0 18px 48px rgba(10, 31, 61, 0.08);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(10, 31, 61, 0.20),
|
||||
0 0 0 1px rgba(10, 31, 61, 0.04);
|
||||
/* SIGNATURE: NO surface-pattern — porcelain is meant to be clean. */
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "kraft-paper",
|
||||
"name": "Kraft Paper",
|
||||
"nameZh": "牛皮纸",
|
||||
"description": "Deep-brown ink on kraft beige — old notebook / hand-stamped envelope. Fraunces serif + Noto Serif SC + Source Serif body. Vintage, warm, hand-crafted, with a copper accent for editorial emphasis.",
|
||||
"descriptionZh": "深棕当墨 + 牛皮米。像老笔记本或手戳信封：暖、有年代感、手作味。Fraunces + Noto Serif SC + Source Serif 正文 + 紫铜色 accent。",
|
||||
"mood": [
|
||||
"light",
|
||||
"vintage",
|
||||
"literary",
|
||||
"kraft",
|
||||
"hand-craft",
|
||||
"warm"
|
||||
],
|
||||
"bestFor": [
|
||||
"书评 / 文学随笔",
|
||||
"历史 / 怀旧 / 老物",
|
||||
"独立杂志 / zine",
|
||||
"手工艺 / 食物 / 农产品",
|
||||
"慢生活 / 人文"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#dccab0",
|
||||
"surface": "#eedfc7",
|
||||
"text": "#2a1e13",
|
||||
"accent": "#a35b2a"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · kraft-paper
|
||||
* Deep-brown ink on warm kraft beige. Reads like the back of a kraft
|
||||
* envelope or the pages of a 70s notebook. Fraunces display + Source
|
||||
* Serif body keeps the hand-crafted character; copper-rust accent for
|
||||
* page numbers / kicker / link emphasis. SIGNATURE: coarse kraft
|
||||
* paper grain (warmer than newsroom, heavier than sunset-zine).
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — italic Fraunces, weight 600
|
||||
* • rule — 1px solid kraft hairline
|
||||
* • card — refined small radius
|
||||
* • surface — coarse kraft paper grain (warm multiply)
|
||||
* • motion — slow + tactile (turning a real page)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #dccab0;
|
||||
--surface: #eedfc7;
|
||||
--surface-2: #f3e9d6;
|
||||
--surface-3: #e0d0b6;
|
||||
--text: #2a1e13; /* SIGNATURE — deep kraft brown ink */
|
||||
--text-2: #3a2a1d;
|
||||
--text-mute: #6e5a40;
|
||||
--text-faint: #a08c70;
|
||||
--rule: #b8a486;
|
||||
--accent: #a35b2a; /* copper-rust */
|
||||
--accent-soft: rgba(163, 91, 42, 0.10);
|
||||
--accent-glow: rgba(163, 91, 42, 0.32);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Serif SC", "Source Han Serif SC", serif;
|
||||
--font-display-en: "Fraunces", "Recoleta", "GT Sectra", "Playfair Display", serif;
|
||||
--font-body: "Source Serif 4", "Source Serif Pro", "Noto Serif SC", serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "ss02", "tnum", "dlig";
|
||||
|
||||
/* ─── motion: tactile turn-a-page pace ─── */
|
||||
--dur-base: 720ms;
|
||||
--dur-slow: 1100ms;
|
||||
--dur-cinematic: 1550ms;
|
||||
|
||||
/* ─── design identity: kraft notebook ─── */
|
||||
--r-card: var(--r-sm);
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: italic;
|
||||
--hero-num-weight: 600;
|
||||
--hero-num-track: -0.035em;
|
||||
--stage-pad-x: 130px;
|
||||
--stage-pad-y: 92px;
|
||||
--card-shadow:
|
||||
0 1px 0 var(--rule),
|
||||
0 22px 56px rgba(60, 40, 20, 0.16);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(60, 40, 20, 0.40),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* ─── decoration: SIGNATURE — coarse warm kraft grain ─── */
|
||||
--surface-pattern:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
||||
--surface-pattern-size: 260px 260px;
|
||||
--surface-pattern-blend: multiply;
|
||||
--surface-pattern-opacity: 0.55;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "midnight-press",
|
||||
"name": "Midnight Press",
|
||||
"nameZh": "暗色印刷",
|
||||
"description": "Warm dark backdrop with a single hot accent. Cinematic, terminal-y, developer vibe.",
|
||||
"descriptionZh": "暖色暗底 + 单一热橙强调色。电影感、终端气质、开发者审美。",
|
||||
"mood": [
|
||||
"dark",
|
||||
"cinematic",
|
||||
"terminal",
|
||||
"developer",
|
||||
"warm"
|
||||
],
|
||||
"bestFor": [
|
||||
"开发者教程",
|
||||
"AI / 工具评测",
|
||||
"极客向产品介绍",
|
||||
"技术 deep dive"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#0d0b09",
|
||||
"surface": "#1a1714",
|
||||
"text": "#f5f0e5",
|
||||
"accent": "#ff4a2b"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · midnight-press
|
||||
* Cinematic editorial dark. Warm espresso instead of pure black, single
|
||||
* hot orange accent, Instrument-Serif italic English vs Noto-Serif-SC
|
||||
* Chinese. Magazine-cover gravitas at night.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — italic editorial serif
|
||||
* • rule — 1px solid warm hairline
|
||||
* • card radius — sharp (no radius on stage; small radius on cards)
|
||||
* • surface — warm vignette only, no grain
|
||||
* • motion — slow + cinematic (1100ms reveals)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #0d0b09;
|
||||
--surface: #1a1714;
|
||||
--surface-2: #231f1a;
|
||||
--surface-3: #2c2823;
|
||||
--text: #f5f0e5;
|
||||
--text-2: #ece4d2;
|
||||
--text-mute: #7a7972;
|
||||
--text-faint: #4a443e;
|
||||
--rule: #2f2a25;
|
||||
--accent: #ff4a2b;
|
||||
--accent-soft: rgba(255, 74, 43, 0.14);
|
||||
--accent-glow: rgba(255, 74, 43, 0.55);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Serif SC", "Source Han Serif SC", serif;
|
||||
--font-display-en: "Instrument Serif", "GT Sectra", "Playfair Display", Georgia, serif;
|
||||
--font-body: "Manrope", "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "cv11", "tnum";
|
||||
|
||||
/* ─── motion: slow & cinematic ─── */
|
||||
--dur-base: 700ms;
|
||||
--dur-slow: 1100ms;
|
||||
--dur-cinematic: 1600ms;
|
||||
|
||||
/* ─── design identity ─── */
|
||||
--r-card: var(--r-sm); /* refined, almost flat */
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: italic;
|
||||
--hero-num-weight: 400;
|
||||
--hero-num-track: -0.025em;
|
||||
--stage-pad-x: 140px;
|
||||
--stage-pad-y: 100px;
|
||||
|
||||
/* ─── decoration: warm vignette, no grain ─── */
|
||||
--surface-vignette:
|
||||
radial-gradient(circle at 50% 60%, transparent 0%, rgba(0, 0, 0, 0.45) 100%);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "monochrome-print",
|
||||
"name": "Monochrome Print",
|
||||
"nameZh": "黑白印刷",
|
||||
"description": "Off-white paper with ink-black serif text and a single ink-blue accent. High-contrast print magazine vibe — Monocle, Wallpaper, MIT Press. Quiet, sophisticated, considered.",
|
||||
"descriptionZh": "微暖白底 + 墨黑 serif + 单一墙墨蓝强调色. 高对比印刷杂志气质, Monocle / Wallpaper / MIT Press 那种沉静讲究.",
|
||||
"mood": [
|
||||
"light",
|
||||
"print",
|
||||
"minimal",
|
||||
"serif",
|
||||
"monochrome",
|
||||
"sophisticated"
|
||||
],
|
||||
"bestFor": [
|
||||
"深度阅读改编",
|
||||
"学术 / 思想型内容",
|
||||
"品牌故事",
|
||||
"高级感产品",
|
||||
"文化 / 艺术评论"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#f5f3ee",
|
||||
"surface": "#fbfaf6",
|
||||
"text": "#0a0a0a",
|
||||
"accent": "#1d4ed8"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · monochrome-print
|
||||
* Quiet refined print magazine — Monocle / Wallpaper / MIT Press.
|
||||
* Off-white, ink-black serif body (Source Serif), single deep ink-blue
|
||||
* accent. Hairlines (1px) only. Generous stage padding. Hero numbers
|
||||
* are tabular figures in italic Source Serif. No decoration — purity.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — italic Source Serif, tabular figures, very tight
|
||||
* • rule — 1px hairline solid (refined ink)
|
||||
* • card — 4px tiny radius (refined corner cue)
|
||||
* • surface — clean (NO pattern, NO vignette)
|
||||
* • motion — extra-quiet, longer durations
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #e8e3d8;
|
||||
--surface: #fbf9f4;
|
||||
--surface-2: #ffffff;
|
||||
--surface-3: #f0ebde;
|
||||
--text: #0e1418;
|
||||
--text-2: #1f2a32;
|
||||
--text-mute: #6b7178;
|
||||
--text-faint: #a8aeb4;
|
||||
--rule: #c9c5b8;
|
||||
--accent: #1a3a8c; /* deep ink-blue */
|
||||
--accent-soft: rgba(26, 58, 140, 0.08);
|
||||
--accent-glow: rgba(26, 58, 140, 0.25);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Serif SC", "Source Han Serif SC", serif;
|
||||
--font-display-en: "Source Serif 4", "Source Serif Pro", "EB Garamond", "Times New Roman", serif;
|
||||
--font-body: "Source Serif 4", "Source Serif Pro", "Noto Serif SC", serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "tnum", "lnum", "kern";
|
||||
|
||||
/* ─── motion: extra quiet ─── */
|
||||
--dur-base: 750ms;
|
||||
--dur-slow: 1200ms;
|
||||
--dur-cinematic: 1700ms;
|
||||
|
||||
/* ─── design identity: refined print ─── */
|
||||
--r-card: var(--r-xs); /* 4px — barely-there refinement */
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: italic;
|
||||
--hero-num-weight: 500;
|
||||
--hero-num-track: -0.03em;
|
||||
--stage-pad-x: 140px; /* generous = refined */
|
||||
--stage-pad-y: 100px;
|
||||
--card-shadow:
|
||||
0 1px 0 var(--rule),
|
||||
0 16px 40px rgba(20, 30, 40, 0.06);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(20, 30, 40, 0.20),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
/* SIGNATURE: NO surface-pattern, NO vignette — purity. */
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "neon-cyber",
|
||||
"name": "Neon Cyber",
|
||||
"nameZh": "霓虹赛博",
|
||||
"description": "Deep-navy canvas with electric cyan + magenta glow and Clash Display + Satoshi typography. Signature: cyan grid + dual-tone neon outline. Futurist cyberpunk for AI, web3, security and future-tech content.",
|
||||
"descriptionZh": "深海军底 + 电光青 + 玫红双霓虹 + Clash Display / Satoshi 字体。签名：青色发光网格 + 双色霓虹描边。赛博朋克未来派审美。",
|
||||
"mood": [
|
||||
"dark",
|
||||
"cyberpunk",
|
||||
"neon",
|
||||
"futuristic",
|
||||
"technical",
|
||||
"saturated"
|
||||
],
|
||||
"bestFor": [
|
||||
"AI / 大模型评测",
|
||||
"web3 / 区块链",
|
||||
"网络安全 / 黑客向",
|
||||
"未来主义产品",
|
||||
"赛博朋克 / 科幻话题"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#04060f",
|
||||
"surface": "#0a0f1c",
|
||||
"text": "#e8f4ff",
|
||||
"accent": "#00ffcc"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · neon-cyber
|
||||
* Cyberpunk future-tech. Deep navy canvas, electric cyan as primary
|
||||
* accent, magenta as the secondary glow tint (used only via *-glow
|
||||
* alpha). Clash Display for display, Satoshi for body, JetBrains Mono
|
||||
* for terminal-y bits. Signature: faint cyan grid + neon text-shadow
|
||||
* on hero text.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — Clash Display, weight 700, tabular figures
|
||||
* • rule — 1px solid cyan (low alpha)
|
||||
* • card — slight radius (8-12px) with cyan inset glow
|
||||
* • surface — fine cyan grid (40px) + soft scan vignette
|
||||
* • motion — snappy + futuristic (faster than midnight)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #04060f;
|
||||
--surface: #0a0f1c;
|
||||
--surface-2: #111828;
|
||||
--surface-3: #1a2238;
|
||||
--text: #e8f4ff;
|
||||
--text-2: #b8c8e0;
|
||||
--text-mute: #6a7a98;
|
||||
--text-faint: #3a4660;
|
||||
--rule: rgba(0, 255, 204, 0.22);
|
||||
--accent: #00ffcc; /* electric cyan */
|
||||
--accent-soft: rgba(0, 255, 204, 0.10);
|
||||
--accent-glow: rgba(255, 0, 170, 0.55); /* SIGNATURE — magenta glow */
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
||||
--font-display-en: "Clash Display", "Space Grotesk", "Manrope", "Inter", sans-serif;
|
||||
--font-body: "Satoshi", "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "tnum", "ss01", "ss02", "zero";
|
||||
|
||||
/* ─── motion: snappy future ─── */
|
||||
--dur-quick: 160ms;
|
||||
--dur-base: 380ms;
|
||||
--dur-slow: 650ms;
|
||||
--dur-cinematic: 1050ms;
|
||||
|
||||
/* ─── design identity: cyber edge ─── */
|
||||
--r-card: var(--r-sm);
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 700;
|
||||
--hero-num-track: -0.02em;
|
||||
--stage-pad-x: 100px;
|
||||
--stage-pad-y: 80px;
|
||||
--text-shadow:
|
||||
0 0 12px rgba(0, 255, 204, 0.35),
|
||||
0 0 24px rgba(255, 0, 170, 0.12); /* SIGNATURE — cyan + magenta tail */
|
||||
--card-shadow:
|
||||
inset 0 0 0 1px var(--rule),
|
||||
0 0 40px rgba(0, 255, 204, 0.06);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(0, 30, 50, 0.65),
|
||||
0 0 0 1px rgba(0, 255, 204, 0.18),
|
||||
0 0 80px rgba(0, 255, 204, 0.08);
|
||||
|
||||
/* ─── decoration: cyan grid + soft scan vignette ─── */
|
||||
--surface-pattern:
|
||||
linear-gradient(rgba(0, 255, 204, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 255, 204, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(rgba(0, 255, 204, 0.025) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 255, 204, 0.025) 1px, transparent 1px);
|
||||
--surface-pattern-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
|
||||
--surface-vignette:
|
||||
radial-gradient(ellipse at center, transparent 35%, rgba(0, 10, 25, 0.6) 100%);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "newsroom",
|
||||
"name": "Newsroom",
|
||||
"nameZh": "报社",
|
||||
"description": "Newsprint cream backdrop with ink-black serif type and a banner red accent. Old-school broadsheet / documentary feel — feels like a New York Times feature article.",
|
||||
"descriptionZh": "报纸奶油底 + 墨黑 serif + 报头红强调色. 老派大报 / 纪录片气质, 像一篇 NYT 特稿.",
|
||||
"mood": [
|
||||
"light",
|
||||
"newspaper",
|
||||
"editorial",
|
||||
"serif",
|
||||
"documentary",
|
||||
"warm"
|
||||
],
|
||||
"bestFor": [
|
||||
"纪录片 / 报道",
|
||||
"深度评测",
|
||||
"时事评论",
|
||||
"AI 产品分析",
|
||||
"热点解读"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#ebe5d6",
|
||||
"surface": "#f4ede0",
|
||||
"text": "#1a1a1a",
|
||||
"accent": "#c9302c"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · newsroom
|
||||
* NYT broadsheet / documentary. Newsprint cream, ink-black serif body
|
||||
* (Playfair Display + Noto Serif SC), banner-red accent. Tight stage
|
||||
* padding mimics newspaper density. Hero numbers are HUGE editorial
|
||||
* italic figures.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — italic display serif, very tight tracking
|
||||
* • rule — 1px hairline solid (broadsheet ink)
|
||||
* • card — flat (newspaper has no rounded corners)
|
||||
* • surface — subtle paper grain
|
||||
* • motion — quiet, longer durations (printed page pace)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #c8bca0;
|
||||
--surface: #f1ebd8;
|
||||
--surface-2: #f8f3e2;
|
||||
--surface-3: #ebe3cc;
|
||||
--text: #14110b;
|
||||
--text-2: #2a261a;
|
||||
--text-mute: #5e564a;
|
||||
--text-faint: #8c8473;
|
||||
--rule: #968e7a;
|
||||
--accent: #c8260d;
|
||||
--accent-soft: rgba(200, 38, 13, 0.10);
|
||||
--accent-glow: rgba(200, 38, 13, 0.30);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Serif SC", "Source Han Serif SC", serif;
|
||||
--font-display-en: "Playfair Display", "GT Sectra", "Bodoni 72", "Times New Roman", serif;
|
||||
--font-body: "Source Serif 4", "Source Serif Pro", "Noto Serif SC", "Times New Roman", serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "tnum", "lnum";
|
||||
|
||||
/* ─── motion: quiet print pace ─── */
|
||||
--dur-base: 650ms;
|
||||
--dur-slow: 1000ms;
|
||||
--dur-cinematic: 1500ms;
|
||||
|
||||
/* ─── design identity: broadsheet ─── */
|
||||
--r-card: var(--r-flat); /* SIGNATURE — newsprint has no radius */
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: italic;
|
||||
--hero-num-weight: 400;
|
||||
--hero-num-track: -0.04em;
|
||||
--stage-pad-x: 100px;
|
||||
--stage-pad-y: 72px;
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(40, 30, 15, 0.30),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* ─── decoration: subtler paper grain (less hairy than paper-press) ─── */
|
||||
--surface-pattern:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='8'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
||||
--surface-pattern-size: 320px 320px;
|
||||
--surface-pattern-blend: multiply;
|
||||
--surface-pattern-opacity: 0.6;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"id": "paper-press",
|
||||
"name": "Paper Press",
|
||||
"nameZh": "亮色印刷",
|
||||
"description": "Warm cream backdrop with a single hot accent. Editorial magazine, gentle, daytime vibe.",
|
||||
"descriptionZh": "暖色奶油底 + 单一热橙强调色。杂志气质、柔和日间审美。",
|
||||
"mood": [
|
||||
"light",
|
||||
"editorial",
|
||||
"magazine",
|
||||
"warm",
|
||||
"daytime"
|
||||
],
|
||||
"bestFor": [
|
||||
"杂志型内容",
|
||||
"生活方式",
|
||||
"日常工具评测",
|
||||
"温和教程",
|
||||
"面向大众的科技解读"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#d8cfb8",
|
||||
"surface": "#efe7d6",
|
||||
"text": "#1a1714",
|
||||
"accent": "#ff4a2b"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · paper-press
|
||||
* Editorial daylight twin of midnight-press. Warm cream paper, hot
|
||||
* orange accent, subtle film grain (multiply blend) so the surface
|
||||
* feels printed rather than digital.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — italic editorial serif
|
||||
* • rule — 1px solid faint paper line
|
||||
* • card — refined, paper-lift shadow
|
||||
* • surface — multiply paper grain
|
||||
* • motion — slow + cinematic
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #d8cfb8;
|
||||
--surface: #efe7d6;
|
||||
--surface-2: #f5f0e5;
|
||||
--surface-3: #ece4d2;
|
||||
--text: #1a1714;
|
||||
--text-2: #2c2823;
|
||||
--text-mute: #6b685e;
|
||||
--text-faint: #98948a;
|
||||
--rule: #d4ccba;
|
||||
--accent: #ff4a2b;
|
||||
--accent-soft: rgba(255, 74, 43, 0.10);
|
||||
--accent-glow: rgba(255, 74, 43, 0.30);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Serif SC", "Source Han Serif SC", serif;
|
||||
--font-display-en: "Instrument Serif", "GT Sectra", "Playfair Display", Georgia, serif;
|
||||
--font-body: "Manrope", "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "cv11", "tnum";
|
||||
|
||||
/* ─── motion: slow & cinematic ─── */
|
||||
--dur-base: 700ms;
|
||||
--dur-slow: 1100ms;
|
||||
--dur-cinematic: 1600ms;
|
||||
|
||||
/* ─── design identity ─── */
|
||||
--r-card: var(--r-sm);
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: italic;
|
||||
--hero-num-weight: 400;
|
||||
--hero-num-track: -0.025em;
|
||||
--stage-pad-x: 140px;
|
||||
--stage-pad-y: 100px;
|
||||
--card-shadow:
|
||||
0 1px 0 var(--rule),
|
||||
0 24px 60px rgba(40, 30, 15, 0.18);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(40, 30, 15, 0.35),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* ─── decoration: paper grain (multiply on the stage) ─── */
|
||||
--surface-pattern:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
||||
--surface-pattern-size: 280px 280px;
|
||||
--surface-pattern-blend: multiply;
|
||||
--surface-pattern-opacity: 0.45;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "pastel-dream",
|
||||
"name": "Pastel Dream",
|
||||
"nameZh": "柔光梦",
|
||||
"description": "Soft pastel canvas with cream card and a single sage-green accent. Plus Jakarta Sans throughout, generous rounded cards. Signature: faint multi-tone pill ribbon along one edge — friendly without being saccharine.",
|
||||
"descriptionZh": "柔粉蓝灰底 + 奶油卡 + 单一鼠尾草绿强调色 + Plus Jakarta Sans。签名：单边多色 pill 色条。友好但不腻，适合女性向 / 教学 / onboarding。",
|
||||
"mood": [
|
||||
"light",
|
||||
"pastel",
|
||||
"friendly",
|
||||
"soft",
|
||||
"approachable",
|
||||
"warm"
|
||||
],
|
||||
"bestFor": [
|
||||
"产品 onboarding / 教程",
|
||||
"友好教学 / 知识科普",
|
||||
"女性向 / 生活方式",
|
||||
"心理 / 健康 / 母婴",
|
||||
"情绪向品牌片"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#c8d9e6",
|
||||
"surface": "#faf9f7",
|
||||
"text": "#1f2429",
|
||||
"accent": "#5a7c6a"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · pastel-dream
|
||||
* Friendly modern pastel. Soft blue-gray shell, cream card surface,
|
||||
* single sage-green as the only saturated accent. Plus Jakarta Sans
|
||||
* everywhere — rounded geometric sans. SIGNATURE: large rounded
|
||||
* cards (20px+) + faint multi-tone pill ribbon decoration (sage /
|
||||
* lavender / blush / cream) tucked along the right edge.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — Plus Jakarta Sans, weight 800
|
||||
* • rule — 1px solid soft gray
|
||||
* • card — large 20px radius (friendly, rounded)
|
||||
* • surface — pastel pill ribbon at right edge (very faint)
|
||||
* • motion — soft springy (gentle overshoot)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #c8d9e6;
|
||||
--surface: #faf9f7;
|
||||
--surface-2: #ffffff;
|
||||
--surface-3: #f0ecde;
|
||||
--text: #1f2429;
|
||||
--text-2: #3a4046;
|
||||
--text-mute: #707880;
|
||||
--text-faint: #a8b0b8;
|
||||
--rule: #d8d4cb;
|
||||
--accent: #5a7c6a; /* sage green */
|
||||
--accent-soft: rgba(90, 124, 106, 0.10);
|
||||
--accent-glow: rgba(90, 124, 106, 0.30);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
||||
--font-display-en: "Plus Jakarta Sans", "Inter", -apple-system, sans-serif;
|
||||
--font-body: "Plus Jakarta Sans", "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "ss02", "cv02", "tnum";
|
||||
|
||||
/* ─── motion: soft springy ─── */
|
||||
--dur-base: 520ms;
|
||||
--dur-slow: 820ms;
|
||||
--dur-cinematic: 1200ms;
|
||||
|
||||
/* ─── design identity: friendly rounded ─── */
|
||||
--r-card: var(--r-lg); /* SIGNATURE — 20px+ friendly rounding */
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 800;
|
||||
--hero-num-track: -0.035em;
|
||||
--stage-pad-x: 100px;
|
||||
--stage-pad-y: 80px;
|
||||
--card-shadow:
|
||||
0 1px 0 var(--rule),
|
||||
0 24px 56px rgba(40, 60, 80, 0.10);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(50, 70, 90, 0.25),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.03);
|
||||
|
||||
/* ─── decoration: SIGNATURE — pastel pill ribbon at right edge ─── */
|
||||
--surface-pattern:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' preserveAspectRatio='xMaxYMid slice'><g><rect x='1820' y='180' width='44' height='160' rx='22' fill='%23f0b4d4' opacity='0.55'/><rect x='1820' y='360' width='44' height='220' rx='22' fill='%23a8d4c4' opacity='0.55'/><rect x='1820' y='600' width='44' height='140' rx='22' fill='%23c7b8ea' opacity='0.55'/><rect x='1820' y='760' width='44' height='180' rx='22' fill='%23ffe6a7' opacity='0.55'/></g></svg>");
|
||||
--surface-pattern-size: 100% 100%;
|
||||
--surface-pattern-blend: normal;
|
||||
--surface-pattern-opacity: 0.9;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "split-canvas",
|
||||
"name": "Split Canvas",
|
||||
"nameZh": "双拼画布",
|
||||
"description": "Two-tone canvas: warm peach + cool lavender as paired surfaces. Outfit sans display, magenta accent. Signature: dual-tone surface (left peach / right lavender) — built for contrast and dialog chapters.",
|
||||
"descriptionZh": "双色画布：暖蜜桃 + 冷薰衣草作为成对底色 + Outfit 几何无衬线 + 玫红强调。签名：双调底色（左桃 / 右紫），适合做对照与对话型章节。",
|
||||
"mood": [
|
||||
"light",
|
||||
"playful",
|
||||
"dual-tone",
|
||||
"friendly",
|
||||
"creative",
|
||||
"warm-cool"
|
||||
],
|
||||
"bestFor": [
|
||||
"双主题对比 / 辩论",
|
||||
"故事讲述 / 对话",
|
||||
"创意分享",
|
||||
"轻量品牌片",
|
||||
"概念对照型科普"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#dcc7b8",
|
||||
"surface": "#f5e6dc",
|
||||
"text": "#1a1410",
|
||||
"accent": "#d24a78"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · split-canvas
|
||||
* Dual-tone canvas. Warm peach left + cool lavender right (50/50 hard
|
||||
* vertical split realized via --surface-pattern). Outfit sans for all
|
||||
* display + body, magenta accent. Chapters can place content on either
|
||||
* side of the divide, or straddle it for compare / debate / dialog
|
||||
* layouts.
|
||||
*
|
||||
* --surface stays peach (the "primary" half); --surface-2 = lavender
|
||||
* is exposed for cards / panels that need to live on the cool side.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — Outfit, weight 800
|
||||
* • rule — 1px solid warm
|
||||
* • card — refined-md radius (12px)
|
||||
* • surface — SIGNATURE — 50/50 peach/lavender hard split
|
||||
* • motion — playful, medium-fast
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #dcc7b8;
|
||||
--surface: #f5e6dc; /* peach (left half default) */
|
||||
--surface-2: #e4dff0; /* lavender (right half / cool card) */
|
||||
--surface-3: #f0d8c7;
|
||||
--text: #1a1410;
|
||||
--text-2: #322820;
|
||||
--text-mute: #6b5a4d;
|
||||
--text-faint: #9a8a7c;
|
||||
--rule: #b8a89a;
|
||||
--accent: #d24a78; /* magenta */
|
||||
--accent-soft: rgba(210, 74, 120, 0.10);
|
||||
--accent-glow: rgba(210, 74, 120, 0.35);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
||||
--font-display-en: "Outfit", "Plus Jakarta Sans", "Inter", -apple-system, sans-serif;
|
||||
--font-body: "Outfit", "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "ss02", "tnum";
|
||||
|
||||
/* ─── motion: playful medium ─── */
|
||||
--dur-base: 480ms;
|
||||
--dur-slow: 780ms;
|
||||
--dur-cinematic: 1150ms;
|
||||
|
||||
/* ─── design identity: dual-tone ─── */
|
||||
--r-card: var(--r-md);
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 800;
|
||||
--hero-num-track: -0.04em;
|
||||
--stage-pad-x: 100px;
|
||||
--stage-pad-y: 80px;
|
||||
--card-shadow:
|
||||
0 1px 0 var(--rule),
|
||||
0 20px 48px rgba(80, 50, 40, 0.12);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(80, 50, 60, 0.30),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* ─── decoration: SIGNATURE — 50/50 hard peach/lavender split ─── */
|
||||
--surface-pattern:
|
||||
linear-gradient(90deg, transparent 0%, transparent 49.95%, #e4dff0 50.05%, #e4dff0 100%);
|
||||
--surface-pattern-size: 100% 100%;
|
||||
--surface-pattern-blend: normal;
|
||||
--surface-pattern-opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "sunset-zine",
|
||||
"name": "Sunset Zine",
|
||||
"nameZh": "日落 Zine",
|
||||
"description": "Warm peach paper backdrop with a magenta accent and chunky Fraunces serif. Indie magazine / risograph zine vibe — playful, expressive, character-forward.",
|
||||
"descriptionZh": "暖蜗色纸底 + 玫红强调色 + 厚体 Fraunces serif. 独立杂志 / 丝网印 zine 风, 俏皮有人情味.",
|
||||
"mood": [
|
||||
"light",
|
||||
"magazine",
|
||||
"zine",
|
||||
"playful",
|
||||
"warm",
|
||||
"expressive"
|
||||
],
|
||||
"bestFor": [
|
||||
"生活向 vlog",
|
||||
"创意分享",
|
||||
"趣味评测",
|
||||
"小红书 / 抖音风",
|
||||
"文化 / 表达型"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#f7d8b5",
|
||||
"surface": "#fbe8d3",
|
||||
"text": "#2a1c12",
|
||||
"accent": "#e6386b"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · sunset-zine
|
||||
* Indie risograph zine. Warm peach paper, riso-magenta accent,
|
||||
* Fraunces serif (with playful curves), DASHED rules (cut-and-paste
|
||||
* feel), springy motion. Hero numbers are oversized italic Fraunces.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — italic Fraunces, very tight tracking
|
||||
* • rule — 1.5px DASHED (zine cut line)
|
||||
* • card — 12px radius (slight softening)
|
||||
* • surface — coarser peach paper grain (riso noise)
|
||||
* • motion — springy with overshoot (playful)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #f4d4b6;
|
||||
--surface: #fcecd4;
|
||||
--surface-2: #ffe6c8;
|
||||
--surface-3: #f0d4a8;
|
||||
--text: #2a1810;
|
||||
--text-2: #4a2c20;
|
||||
--text-mute: #7a5040;
|
||||
--text-faint: #a07866;
|
||||
--rule: #c89878;
|
||||
--accent: #e91e63; /* riso magenta */
|
||||
--accent-soft: rgba(233, 30, 99, 0.10);
|
||||
--accent-glow: rgba(233, 30, 99, 0.40);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Serif SC", "Source Han Serif SC", serif;
|
||||
--font-display-en: "Fraunces", "Recoleta", "GT Sectra", "Playfair Display", serif;
|
||||
--font-body: "Fraunces", "Source Serif Pro", "Noto Serif SC", serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "ss02", "tnum", "dlig";
|
||||
|
||||
/* ─── motion: springy zine ─── */
|
||||
--dur-base: 550ms;
|
||||
--dur-slow: 850ms;
|
||||
--dur-cinematic: 1300ms;
|
||||
|
||||
/* ─── design identity: zine ─── */
|
||||
--r-card: var(--r-md); /* slight softening */
|
||||
--r-stage: 0;
|
||||
--rule-w: 2px;
|
||||
--rule-style: dashed; /* SIGNATURE — cut-and-paste */
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: italic;
|
||||
--hero-num-weight: 600;
|
||||
--hero-num-track: -0.04em;
|
||||
--stage-pad-x: 110px;
|
||||
--stage-pad-y: 80px;
|
||||
--card-shadow:
|
||||
0 1px 0 var(--rule),
|
||||
8px 8px 0 var(--accent-soft); /* offset peach shadow */
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(120, 70, 40, 0.30),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* ─── decoration: coarse riso paper grain ─── */
|
||||
--surface-pattern:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='12'/><feColorMatrix values='0 0 0 0 0.65 0 0 0 0 0.50 0 0 0 0 0.40 0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
||||
--surface-pattern-size: 200px 200px;
|
||||
--surface-pattern-blend: multiply;
|
||||
--surface-pattern-opacity: 0.55;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "swiss-ikb",
|
||||
"name": "Swiss IKB",
|
||||
"nameZh": "瑞士克莱因蓝",
|
||||
"description": "Swiss International Style. Ultra-thin 200-weight Inter / Helvetica, crisp warm-white canvas, IKB (International Klein Blue) as the single high-saturation accent. Signature: 1px hairline grid + 200-weight hero numbers. Massimo Vignelli + Helvetica Forever energy.",
|
||||
"descriptionZh": "瑞士国际主义风。**极细 200 weight** Inter / Helvetica + 净暖白底 + 克莱因蓝（IKB）单一锚点色。签名：1px 发丝网格 + 200 重字 hero 数字。Massimo Vignelli / Helvetica Forever 那种克制冷静。",
|
||||
"mood": [
|
||||
"light",
|
||||
"swiss",
|
||||
"modernist",
|
||||
"international-style",
|
||||
"grid",
|
||||
"extra-light"
|
||||
],
|
||||
"bestFor": [
|
||||
"AI / 科技产品发布",
|
||||
"年度总结 / 数据汇报",
|
||||
"设计 / 工程领域分享",
|
||||
"严肃学术 / 国际化品牌",
|
||||
"信息驱动设计 / 信息图"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#e8e8e6",
|
||||
"surface": "#fafaf8",
|
||||
"text": "#0a0a0a",
|
||||
"accent": "#002fa7"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · swiss-ikb
|
||||
* Swiss International Style. The signature is two-fold:
|
||||
* 1) ALL display + hero text uses extra-light (200 weight) Inter /
|
||||
* Helvetica. Tight tracking, big sizes — "越大越细" (bigger gets
|
||||
* thinner). This is the opposite of bauhaus-bold's 900 weight.
|
||||
* 2) A 1px hairline grid (#e0e0e0) is baked into the stage as the
|
||||
* designer's invisible-but-visible scaffolding.
|
||||
* The single saturated accent is IKB (International Klein Blue) —
|
||||
* crisp, deep, encyclopedic. Used for kicker / kpi / link emphasis.
|
||||
*
|
||||
* Swap accent for the other 3 guizang Swiss flavors by changing
|
||||
* --accent only:
|
||||
* • lemon yellow #FFD500 — set --accent-on to #0a0a0a (yellow can't
|
||||
* carry white text)
|
||||
* • lemon green #C5E803 — same, --accent-on = #0a0a0a
|
||||
* • safety orange #FF6B35 — keep --accent-on white but use weight ≥ 600
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — Inter, weight 200 (SIGNATURE — extra-light)
|
||||
* • rule — 1px solid hairline grey
|
||||
* • card — flat 0 radius (Swiss = direct rectangles)
|
||||
* • surface — 1px hairline grid (very faint)
|
||||
* • motion — punchy + linear (Swiss isn't springy)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #e8e8e6;
|
||||
--surface: #fafaf8;
|
||||
--surface-2: #f0f0ee;
|
||||
--surface-3: #d4d4d2;
|
||||
--text: #0a0a0a;
|
||||
--text-2: #2a2a2a;
|
||||
--text-mute: #737373;
|
||||
--text-faint: #a8a8a8;
|
||||
--rule: #e0e0e0;
|
||||
--accent: #002fa7; /* IKB — International Klein Blue */
|
||||
--accent-soft: rgba(0, 47, 167, 0.08);
|
||||
--accent-glow: rgba(0, 47, 167, 0.35);
|
||||
|
||||
/* ─── fonts (sans everywhere — Swiss is anti-serif) ─── */
|
||||
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
||||
--font-display-en: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
--font-body: "Inter", "Helvetica Neue", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "tnum", "ss01", "ss02", "cv02";
|
||||
|
||||
/* ─── motion: punchy + linear (Swiss isn't springy) ─── */
|
||||
--dur-quick: 180ms;
|
||||
--dur-base: 400ms;
|
||||
--dur-slow: 650ms;
|
||||
--dur-cinematic: 1000ms;
|
||||
|
||||
/* ─── design identity: international style ─── */
|
||||
--r-card: var(--r-flat); /* SIGNATURE — direct rectangles */
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 200; /* SIGNATURE — extra-light */
|
||||
--hero-num-track: -0.04em;
|
||||
--stage-pad-x: 96px;
|
||||
--stage-pad-y: 72px;
|
||||
--card-shadow: inset 0 0 0 1px var(--rule);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(0, 0, 0, 0.18),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* ─── decoration: SIGNATURE — 1px hairline grid (the Swiss scaffold) ─── */
|
||||
--surface-pattern:
|
||||
linear-gradient(rgba(10, 10, 10, 0.045) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(10, 10, 10, 0.045) 1px, transparent 1px);
|
||||
--surface-pattern-size: 64px 64px;
|
||||
--surface-pattern-blend: normal;
|
||||
--surface-pattern-opacity: 0.85;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "terminal-green",
|
||||
"name": "Terminal Green",
|
||||
"nameZh": "终端绿",
|
||||
"description": "True-black backdrop with phosphor-green accent and JetBrains Mono everywhere. Matrix / hacker / 80s terminal vibe — best for technical demos and CLI walkthroughs.",
|
||||
"descriptionZh": "纯黑底 + 磷光绿强调色, 全程等宽字体. Matrix 黑客 / 80 年代终端感, 最适合技术演示与 CLI 教程.",
|
||||
"mood": [
|
||||
"dark",
|
||||
"terminal",
|
||||
"hacker",
|
||||
"monospace",
|
||||
"phosphor",
|
||||
"technical"
|
||||
],
|
||||
"bestFor": [
|
||||
"CLI 工具教程",
|
||||
"黑客 / 安全话题",
|
||||
"技术演示",
|
||||
"命令行实操",
|
||||
"复古技术致敬"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#050a05",
|
||||
"surface": "#0a0f0a",
|
||||
"text": "#d3f0d3",
|
||||
"accent": "#00ff88"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · terminal-green
|
||||
* 80s phosphor terminal. True-black backdrop, single phosphor green.
|
||||
* JetBrains Mono is the ONLY font. Sharp 0-2px corners. CRT scanline
|
||||
* overlay. Snappy motion (240ms / 480ms / 800ms) — terminal speed.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — mono, 0 letter-spacing, glow drop-shadow
|
||||
* • rule — 1px solid phosphor green
|
||||
* • card — 0 radius (terminal cells)
|
||||
* • surface — horizontal scanlines (2px) + soft phosphor glow
|
||||
* • motion — snappy + linear (terminal not springy)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #000000;
|
||||
--surface: #050a07;
|
||||
--surface-2: #0a1410;
|
||||
--surface-3: #0f1c17;
|
||||
--text: #41ff97;
|
||||
--text-2: #2ed084;
|
||||
--text-mute: #1a8a55;
|
||||
--text-faint: #0f5c39;
|
||||
--rule: rgba(65, 255, 151, 0.30);
|
||||
--accent: #41ff97;
|
||||
--accent-soft: rgba(65, 255, 151, 0.10);
|
||||
--accent-glow: rgba(65, 255, 151, 0.7);
|
||||
|
||||
/* ─── fonts (mono everywhere) ─── */
|
||||
--font-display-cn: "JetBrains Mono", "Noto Sans Mono CJK SC", monospace;
|
||||
--font-display-en: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-body: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss05", "zero", "tnum";
|
||||
|
||||
/* ─── motion: snappy terminal ─── */
|
||||
--ease-quart: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-expo: cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
--dur-quick: 180ms;
|
||||
--dur-base: 400ms;
|
||||
--dur-slow: 650ms;
|
||||
--dur-cinematic: 1000ms;
|
||||
|
||||
/* ─── design identity: terminal cells ─── */
|
||||
--r-card: var(--r-flat); /* SIGNATURE — sharp corners */
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-mono);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 500;
|
||||
--hero-num-track: 0;
|
||||
--stage-pad-x: 80px;
|
||||
--stage-pad-y: 60px;
|
||||
--text-shadow: 0 0 8px rgba(65, 255, 151, 0.4);
|
||||
--card-shadow: inset 0 0 0 1px var(--rule), 0 0 30px rgba(65, 255, 151, 0.05);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(65, 255, 151, 0.10),
|
||||
0 0 0 1px rgba(65, 255, 151, 0.15);
|
||||
|
||||
/* ─── decoration: CRT scanlines ─── */
|
||||
--surface-pattern:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent 0px,
|
||||
transparent 2px,
|
||||
rgba(65, 255, 151, 0.04) 2px,
|
||||
rgba(65, 255, 151, 0.04) 3px
|
||||
);
|
||||
--surface-pattern-size: 100% 100%;
|
||||
--surface-vignette:
|
||||
radial-gradient(ellipse at center, transparent 30%, rgba(0, 30, 15, 0.6) 100%);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "vintage-editorial",
|
||||
"name": "Vintage Editorial",
|
||||
"nameZh": "复古编辑",
|
||||
"description": "Witty editorial cream canvas with chunky italic Fraunces and a warm terracotta accent. Signature: hairline geometric overlay (circle + line + dot). Personality-forward, conversational — like a magazine columnist who knows you'll laugh.",
|
||||
"descriptionZh": "奶油底 + 厚体 Fraunces 斜体 + 暖陶强调色，有性格、会说话。签名：细线几何叠层（圆 + 线 + 点）。介于杂志专栏与艺术评论之间，俏皮、自信、有声音。",
|
||||
"mood": [
|
||||
"light",
|
||||
"vintage",
|
||||
"editorial",
|
||||
"opinionated",
|
||||
"witty",
|
||||
"personality"
|
||||
],
|
||||
"bestFor": [
|
||||
"个人见解 / 评论",
|
||||
"文化随笔 / 美学话题",
|
||||
"有声音的博主",
|
||||
"设计 / 字体话题",
|
||||
"文艺类长文改编"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#e8e0cf",
|
||||
"surface": "#f5f3ee",
|
||||
"text": "#1a1a1a",
|
||||
"accent": "#c25e3a"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · vintage-editorial
|
||||
* Witty light editorial. Warm cream canvas, chunky italic Fraunces
|
||||
* display, Work Sans body, warm-terra accent. Signature decoration:
|
||||
* hairline geometric overlay (very faint dot + ring rhythm) so the
|
||||
* stage reads "designed magazine" rather than blank cream.
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — italic Fraunces, weight 700 (chunky editorial)
|
||||
* • rule — 1px solid warm hairline
|
||||
* • card — refined small radius
|
||||
* • surface — faint geometric dot + ring overlay
|
||||
* • motion — medium pace with subtle overshoot (witty)
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #e8e0cf;
|
||||
--surface: #f5f3ee;
|
||||
--surface-2: #fbf9f3;
|
||||
--surface-3: #ebe4d2;
|
||||
--text: #1a1a1a;
|
||||
--text-2: #2e2a25;
|
||||
--text-mute: #6b6357;
|
||||
--text-faint: #9a9385;
|
||||
--rule: #c8bfa8;
|
||||
--accent: #c25e3a; /* warm terracotta */
|
||||
--accent-soft: rgba(194, 94, 58, 0.10);
|
||||
--accent-glow: rgba(194, 94, 58, 0.32);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Serif SC", "Source Han Serif SC", serif;
|
||||
--font-display-en: "Fraunces", "Recoleta", "GT Sectra", "Playfair Display", serif;
|
||||
--font-body: "Work Sans", "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "ss01", "ss02", "tnum", "dlig";
|
||||
|
||||
/* ─── motion: medium with subtle witty overshoot ─── */
|
||||
--dur-base: 600ms;
|
||||
--dur-slow: 950ms;
|
||||
--dur-cinematic: 1400ms;
|
||||
|
||||
/* ─── design identity: witty editorial ─── */
|
||||
--r-card: var(--r-sm);
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: italic;
|
||||
--hero-num-weight: 700;
|
||||
--hero-num-track: -0.04em;
|
||||
--stage-pad-x: 120px;
|
||||
--stage-pad-y: 88px;
|
||||
--card-shadow:
|
||||
0 1px 0 var(--rule),
|
||||
0 18px 48px rgba(60, 40, 20, 0.10);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(60, 40, 20, 0.28),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* ─── decoration: SIGNATURE — faint geometric dot + ring overlay ─── */
|
||||
--surface-pattern:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><g fill='none' stroke='%23a89878' stroke-width='1' opacity='0.16'><circle cx='80' cy='90' r='52'/><circle cx='340' cy='250' r='78'/><circle cx='180' cy='320' r='2.5' fill='%23a89878' stroke='none'/><circle cx='280' cy='110' r='2.5' fill='%23a89878' stroke='none'/><line x1='40' y1='200' x2='110' y2='200'/><line x1='300' y1='370' x2='370' y2='370'/></g></svg>");
|
||||
--surface-pattern-size: 400px 400px;
|
||||
--surface-pattern-blend: multiply;
|
||||
--surface-pattern-opacity: 0.85;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"id": "warm-keynote",
|
||||
"name": "Warm Keynote",
|
||||
"nameZh": "暖色 Keynote",
|
||||
"description": "Cream paper backdrop with a single teal accent and a soft warm grid drawn on the stage. SaaS keynote / editorial vibe.",
|
||||
"descriptionZh": "奶油纸底 + 单一青色强调色 + 舞台上的暖色网格. SaaS Keynote 与编辑器气质.",
|
||||
"mood": [
|
||||
"light",
|
||||
"keynote",
|
||||
"editorial",
|
||||
"warm",
|
||||
"spring",
|
||||
"saas"
|
||||
],
|
||||
"bestFor": [
|
||||
"SaaS 产品 keynote",
|
||||
"B 端产品发布",
|
||||
"工具产品讲解",
|
||||
"团队对外汇报"
|
||||
],
|
||||
"preview": {
|
||||
"shell": "#FDFBF7",
|
||||
"surface": "#FFFFFF",
|
||||
"text": "#43302B",
|
||||
"accent": "#14B8A6"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────
|
||||
* Theme · warm-keynote
|
||||
* Modern SaaS keynote with editorial warmth: warm cream canvas + sepia
|
||||
* ink + teal accent + huge rounded glass slabs. Inter for everything,
|
||||
* font-black for hero numbers (chunky modernist).
|
||||
*
|
||||
* character knobs:
|
||||
* • hero numbers — chunky black sans (font-weight 900)
|
||||
* • rule — 1px solid neutral hairline + 4px accent rule
|
||||
* • card — large radius (24-32px), soft warm shadow
|
||||
* • surface — warm 40px paper grid
|
||||
* • motion — springy with slight overshoot
|
||||
* ───────────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* ─── palette ─── */
|
||||
--shell: #f5efe1;
|
||||
--surface: #fdfbf7;
|
||||
--surface-2: #ffffff;
|
||||
--surface-3: #f0e9d8;
|
||||
--text: #43302b;
|
||||
--text-2: #5b443d;
|
||||
--text-mute: #8a7969;
|
||||
--text-faint: #b8a994;
|
||||
--rule: #e6dcc4;
|
||||
--accent: #14b8a6;
|
||||
--accent-soft: rgba(20, 184, 166, 0.10);
|
||||
--accent-glow: rgba(20, 184, 166, 0.45);
|
||||
|
||||
/* ─── fonts ─── */
|
||||
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
||||
--font-display-en: "Inter", "SF Pro Display", -apple-system, sans-serif;
|
||||
--font-body: "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--font-features: "cv11", "ss01", "tnum";
|
||||
|
||||
/* ─── motion: springy keynote ─── */
|
||||
--dur-base: 500ms;
|
||||
--dur-slow: 800ms;
|
||||
--dur-cinematic: 1200ms;
|
||||
|
||||
/* ─── design identity: glass slabs ─── */
|
||||
--r-card: var(--r-xl); /* 32px keynote slabs */
|
||||
--r-stage: 0;
|
||||
--rule-w: 1px;
|
||||
--rule-style: solid;
|
||||
--hero-num-font: var(--font-display-en);
|
||||
--hero-num-style: normal;
|
||||
--hero-num-weight: 900;
|
||||
--hero-num-track: -0.04em;
|
||||
--stage-pad-x: 100px;
|
||||
--stage-pad-y: 80px;
|
||||
--card-shadow:
|
||||
0 1px 2px rgba(67, 48, 43, 0.04),
|
||||
0 24px 60px rgba(67, 48, 43, 0.10);
|
||||
--card-glass-bg: rgba(255, 255, 255, 0.85);
|
||||
--card-glass-border: rgba(255, 255, 255, 0.9);
|
||||
--shadow-stage:
|
||||
0 60px 160px rgba(67, 48, 43, 0.18),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.03);
|
||||
|
||||
/* ─── decoration: warm 40px grid ─── */
|
||||
--surface-pattern:
|
||||
linear-gradient(rgba(190, 175, 150, 0.18) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(190, 175, 150, 0.18) 1px, transparent 1px);
|
||||
--surface-pattern-size: 40px 40px;
|
||||
}
|
||||
Reference in New Issue
Block a user