skills/fund-slides/STYLE_PRESETS.md

Style Presets Reference

Curated visual styles for Frontend Slides. Each preset is inspired by real design references — no generic "AI slop" aesthetics. Abstract shapes only — no illustrations.

Viewport CSS: For mandatory base styles, see references/viewport-base.css. Include in every presentation.

---

Chinese Font Strategy

Every preset must include Chinese font fallback. Load via Google Fonts alongside Latin fonts.

Standard Chinese Font Stack:

Category	Font	Weight	Use Case
Sans	Noto Sans SC	300-700	Body text, UI, data labels
Serif	Noto Serif SC	400-700	Display headings, editorial
Literary	LXGW WenKai	400-700	Drop caps, quotes, literary feel

Loading template:

<!-- Add Chinese font families to the Google Fonts link -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;600;700&family=LXGW+WenKai:wght@400;700&display=swap" rel="stylesheet">

Font-family pairing rules:

• Sans-serif preset display/body: append , 'Noto Sans SC', sans-serif
• Serif preset display: append , 'Noto Serif SC', serif
• Serif preset body: append , 'Noto Sans SC', sans-serif
• Mono preset: append , 'Noto Sans SC', sans-serif as final fallback
• Literary/editorial preset: can use 'LXGW WenKai' for display, 'Noto Sans SC' for body

Example:

:root {
    --font-display: 'Archivo Black', 'Noto Sans SC', sans-serif;
    --font-body: 'Space Grotesk', 'Noto Sans SC', sans-serif;
}

---

Dark Themes

1. Bold Signal

Vibe: Confident, bold, modern, high-impact

Layout: Colored card on dark gradient. Number top-left, navigation top-right, title bottom-left.

Typography:

• Display: Archivo Black, Noto Sans SC (900)
• Body: Space Grotesk, Noto Sans SC (400/500)

Colors:

:root {
    --bg-primary: #1a1a1a;
    --bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    --card-bg: #FF5722;
    --text-primary: #ffffff;
    --text-on-card: #1a1a1a;
    --font-display: 'Archivo Black', 'Noto Sans SC', sans-serif;
    --font-body: 'Space Grotesk', 'Noto Sans SC', sans-serif;
}

Signature Elements:

• Bold colored card as focal point (orange, coral, or vibrant accent)
• Large section numbers (01, 02, etc.)
• Navigation breadcrumbs with active/inactive opacity states
• Grid-based layout for precise alignment

---

2. Electric Studio

Vibe: Bold, clean, professional, high contrast

Layout: Split panel—white top, blue bottom. Brand marks in corners.

Typography:

• Display: Manrope, Noto Sans SC (800)
• Body: Manrope, Noto Sans SC (400/500)

Colors:

:root {
    --bg-dark: #0a0a0a;
    --bg-white: #ffffff;
    --accent-blue: #4361ee;
    --text-dark: #0a0a0a;
    --text-light: #ffffff;
    --font-display: 'Manrope', 'Noto Sans SC', sans-serif;
    --font-body: 'Manrope', 'Noto Sans SC', sans-serif;
}

Signature Elements:

• Two-panel vertical split
• Accent bar on panel edge
• Quote typography as hero element
• Minimal, confident spacing

---

3. Creative Voltage

Vibe: Bold, creative, energetic, retro-modern

Layout: Split panels—electric blue left, dark right. Script accents.

Typography:

• Display: Syne, Noto Sans SC (700/800)
• Mono: Space Mono, Noto Sans SC (400/700)

Colors:

:root {
    --bg-primary: #0066ff;
    --bg-dark: #1a1a2e;
    --accent-neon: #d4ff00;
    --text-light: #ffffff;
    --font-display: 'Syne', 'Noto Sans SC', sans-serif;
    --font-body: 'Space Mono', 'Noto Sans SC', monospace;
}

Signature Elements:

• Electric blue + neon yellow contrast
• Halftone texture patterns
• Neon badges/callouts
• Script typography for creative flair

---

4. Dark Botanical

Vibe: Elegant, sophisticated, artistic, premium

Layout: Centered content on dark. Abstract soft shapes in corner.

Typography:

• Display: Cormorant, Noto Serif SC (400/600) — elegant serif
• Body: IBM Plex Sans, Noto Sans SC (300/400)

Colors:

:root {
    --bg-primary: #0f0f0f;
    --text-primary: #e8e4df;
    --text-secondary: #9a9590;
    --accent-warm: #d4a574;
    --accent-pink: #e8b4b8;
    --accent-gold: #c9b896;
    --font-display: 'Cormorant', 'Noto Serif SC', serif;
    --font-body: 'IBM Plex Sans', 'Noto Sans SC', sans-serif;
}

Signature Elements:

• Abstract soft gradient circles (blurred, overlapping)
• Warm color accents (pink, gold, terracotta)
• Thin vertical accent lines
• Italic signature typography
• No illustrations—only abstract CSS shapes

---

Light Themes

5. Notebook Tabs

Vibe: Editorial, organized, elegant, tactile

Layout: Cream paper card on dark background. Colorful tabs on right edge.

Typography:

• Display: Bodoni Moda, Noto Serif SC (400/700) — classic editorial
• Body: DM Sans, Noto Sans SC (400/500)

Colors:

:root {
    --bg-outer: #2d2d2d;
    --bg-page: #f8f6f1;
    --text-primary: #1a1a1a;
    --tab-1: #98d4bb; /* Mint */
    --tab-2: #c7b8ea; /* Lavender */
    --tab-3: #f4b8c5; /* Pink */
    --tab-4: #a8d8ea; /* Sky */
    --tab-5: #ffe6a7; /* Cream */
    --font-display: 'Bodoni Moda', 'Noto Serif SC', serif;
    --font-body: 'DM Sans', 'Noto Sans SC', sans-serif;
}

Signature Elements:

• Paper container with subtle shadow
• Colorful section tabs on right edge (vertical text)
• Binder hole decorations on left
• Tab text must scale with viewport: font-size: clamp(0.5rem, 1vh, 0.7rem)

---

6. Pastel Geometry

Vibe: Friendly, organized, modern, approachable

Layout: White card on pastel background. Vertical pills on right edge.

Typography:

• Display: Plus Jakarta Sans, Noto Sans SC (700/800)
• Body: Plus Jakarta Sans, Noto Sans SC (400/500)

Colors:

:root {
    --bg-primary: #c8d9e6;
    --card-bg: #faf9f7;
    --pill-pink: #f0b4d4;
    --pill-mint: #a8d4c4;
    --pill-sage: #5a7c6a;
    --pill-lavender: #9b8dc4;
    --pill-violet: #7c6aad;
    --font-display: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
    --font-body: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
}

Signature Elements:

• Rounded card with soft shadow
• Vertical pills on right edge with varying heights (like tabs)
• Consistent pill width, heights: short → medium → tall → medium → short
• Download/action icon in corner

---

7. Split Pastel

Vibe: Playful, modern, friendly, creative

Layout: Two-color vertical split (peach left, lavender right).

Typography:

• Display: Outfit, Noto Sans SC (700/800)
• Body: Outfit, Noto Sans SC (400/500)

Colors:

:root {
    --bg-peach: #f5e6dc;
    --bg-lavender: #e4dff0;
    --text-dark: #1a1a1a;
    --badge-mint: #c8f0d8;
    --badge-yellow: #f0f0c8;
    --badge-pink: #f0d4e0;
    --font-display: 'Outfit', 'Noto Sans SC', sans-serif;
    --font-body: 'Outfit', 'Noto Sans SC', sans-serif;
}

Signature Elements:

• Split background colors
• Playful badge pills with icons
• Grid pattern overlay on right panel
• Rounded CTA buttons

---

8. Vintage Editorial

Vibe: Witty, confident, editorial, personality-driven

Layout: Centered content on cream. Abstract geometric shapes as accent.

Typography:

• Display: Fraunces, Noto Serif SC (700/900) — distinctive serif
• Body: Work Sans, Noto Sans SC (400/500)

Colors:

:root {
    --bg-cream: #f5f3ee;
    --text-primary: #1a1a1a;
    --text-secondary: #555;
    --accent-warm: #e8d4c0;
    --font-display: 'Fraunces', 'Noto Serif SC', serif;
    --font-body: 'Work Sans', 'Noto Sans SC', sans-serif;
}

Signature Elements:

• Abstract geometric shapes (circle outline + line + dot)
• Bold bordered CTA boxes
• Witty, conversational copy style
• No illustrations—only geometric CSS shapes

---

Specialty Themes

9. Neon Cyber

Vibe: Futuristic, techy, confident

Typography: Clash Display + Satoshi (Fontshare), CN fallback: Noto Sans SC

Colors: Deep navy (#0a0f1c), cyan accent (#00ffcc), magenta (#ff00aa)

Font vars:

:root {
    --font-display: 'Clash Display', 'Noto Sans SC', sans-serif;
    --font-body: 'Satoshi', 'Noto Sans SC', sans-serif;
}

Signature: Particle backgrounds, neon glow, grid patterns

---

10. Terminal Green

Vibe: Developer-focused, hacker aesthetic

Typography: JetBrains Mono (monospace only), CN fallback: Noto Sans SC

Colors: GitHub dark (#0d1117), terminal green (#39d353)

Font vars:

:root {
    --font-display: 'JetBrains Mono', 'Noto Sans SC', monospace;
    --font-body: 'JetBrains Mono', 'Noto Sans SC', monospace;
}

Signature: Scan lines, blinking cursor, code syntax styling

---

11. Swiss Modern

Vibe: Clean, precise, Bauhaus-inspired

Typography: Archivo (800) + Nunito (400), CN fallback: Noto Sans SC

Colors: Pure white, pure black, red accent (#ff3300)

Font vars:

:root {
    --font-display: 'Archivo', 'Noto Sans SC', sans-serif;
    --font-body: 'Nunito', 'Noto Sans SC', sans-serif;
}

Signature: Visible grid, asymmetric layouts, geometric shapes

---

12. Paper & Ink

Vibe: Editorial, literary, thoughtful

Typography: Cormorant Garamond + Source Serif 4, CN: LXGW WenKai (display) + Noto Serif SC (body)

Colors: Warm cream (#faf9f7), charcoal (#1a1a1a), crimson accent (#c41e3a)

Font vars:

:root {
    --font-display: 'Cormorant Garamond', 'LXGW WenKai', serif;
    --font-body: 'Source Serif 4', 'Noto Serif SC', serif;
}

Signature: Drop caps, pull quotes, elegant horizontal rules

---

Font Pairing Quick Reference

Preset	Display Font	Body Font	CN Fallback	Source
Bold Signal	Archivo Black	Space Grotesk	Noto Sans SC	Google
Electric Studio	Manrope	Manrope	Noto Sans SC	Google
Creative Voltage	Syne	Space Mono	Noto Sans SC	Google
Dark Botanical	Cormorant	IBM Plex Sans	Noto Serif SC / Noto Sans SC	Google
Notebook Tabs	Bodoni Moda	DM Sans	Noto Serif SC / Noto Sans SC	Google
Pastel Geometry	Plus Jakarta Sans	Plus Jakarta Sans	Noto Sans SC	Google
Split Pastel	Outfit	Outfit	Noto Sans SC	Google
Vintage Editorial	Fraunces	Work Sans	Noto Serif SC / Noto Sans SC	Google
Neon Cyber	Clash Display	Satoshi	Noto Sans SC	Fontshare
Terminal Green	JetBrains Mono	JetBrains Mono	Noto Sans SC	JetBrains
Swiss Modern	Archivo	Nunito	Noto Sans SC	Google
Paper & Ink	Cormorant Garamond	Source Serif 4	LXGW WenKai / Noto Serif SC	Google
Research Formal	Noto Serif SC	Noto Sans SC	(native)	Google
Roadshow Elegance	Playfair Display	Noto Sans SC	Noto Serif SC	Google
Data Dashboard	Noto Sans SC	Noto Sans SC	(native)	Google

---

Financial Themes (金融专用)

13. Research Formal (研报正式)

Vibe: Institutional, authoritative, data-driven. Suitable for research reports, analyst presentations, internal review meetings.

Layout: Clean white background with navy sidebar navigation. Emphasis on tables and structured data. Section numbers in sidebar.

Typography:

• Display: Noto Serif SC (600/700) — authoritative serif for Chinese headings
• Body: Noto Sans SC (400/500) — clean sans for data and body text

Colors:

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #1a1a2e;
    --text-secondary: #5a5a7a;
    --accent: #1a365d;
    --accent-secondary: #2563eb;
    --accent-gold: #c5963a;
    --border-color: rgba(26, 54, 93, 0.12);
    --color-positive: #dc2626;
    --color-negative: #16a34a;
    --font-display: 'Noto Serif SC', serif;
    --font-body: 'Noto Sans SC', sans-serif;
}

Signature Elements:

• Navy blue sidebar with section navigation and page numbers
• Horizontal rule separators between sections (2px solid navy)
• Tables with navy header row and alternating gray rows
• Source citations in small text at slide bottom
• Company/team logo placement: top-right corner
• Section numbering: large navy numerals (01, 02, 03)

Financial Layouts: Optimized for KPI Dashboard, Data Table, Chart + Text Split. See references/financial-layouts.md.

---

14. Roadshow Elegance (路演风范)

Vibe: Premium, confident, investor-grade. For IPO roadshows, investor meetings, board presentations.

Layout: Dark gradient background with centered content. Gold accent highlights key metrics. Generous whitespace for gravitas.

Typography:

• Display: Playfair Display, Noto Serif SC (700/800) — premium serif
• Body: Noto Sans SC (300/400) — light weight for elegance

Colors:

:root {
    --bg-primary: #0c1929;
    --bg-gradient: linear-gradient(145deg, #0c1929 0%, #162d50 40%, #0c1929 100%);
    --text-primary: #f0ece4;
    --text-secondary: #8a9bb5;
    --accent: #d4a853;
    --accent-secondary: #e8c882;
    --border-color: rgba(212, 168, 83, 0.2);
    --color-positive: #ef4444;
    --color-negative: #22c55e;
    --card-bg: rgba(255, 255, 255, 0.04);
    --font-display: 'Playfair Display', 'Noto Serif SC', serif;
    --font-body: 'Noto Sans SC', sans-serif;
}

Signature Elements:

• Subtle radial gradient glow behind key content
• Gold accent lines (1px) as decorative separators
• Large KPI values in gold with light glow effect
• Minimal text, maximum impact
• Abstract geometric shapes: thin gold circles, lines
• Progress indicators and slide numbers in muted gold

Best for: Title slides with company valuation, KPI highlights with trend arrows (CSS ::after triangles, not emoji), full-width chart slides with dark chart themes.

---

15. Data Dashboard (数据简报)

Vibe: Efficient, analytical, information-dense. For daily/weekly market updates, portfolio reviews, data-driven briefings.

Layout: Grid-based with tight spacing. Header bar with date and context. Content area maximizes data display. 2-3 column grids for KPI cards.

Typography:

• Display: Noto Sans SC (700) — clean, functional
• Body: Noto Sans SC (400) — consistent sans throughout

Colors:

:root {
    --bg-primary: #f5f5f5;
    --bg-card: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --accent: #2563eb;
    --accent-secondary: #60a5fa;
    --border-color: #e5e7eb;
    --color-positive: #dc2626;
    --color-negative: #16a34a;
    --font-display: 'Noto Sans SC', sans-serif;
    --font-body: 'Noto Sans SC', sans-serif;
}

Signature Elements:

• Top status bar: date + report title + page count
• Card-based layout with thin borders (1px solid #e5e7eb)
• Compact KPI cards with mini inline sparklines (SVG)
• Data tables with fixed header and zebra striping
• Trend indicators: CSS triangles + percentage (never emoji)
• Minimal decoration, maximum data real estate
• Color coding: blue = neutral/info, red = up (A-share), green = down

Best for: Multi-metric overview pages, dense comparison tables, chart grids (2x2), status/alert slides.

---

DO NOT USE (Generic AI Patterns)

Fonts: Inter, Roboto, Arial, system fonts as display

Colors: #6366f1 (generic indigo), purple gradients on white

Layouts: Everything centered, generic hero sections, identical card grids

Decorations: Realistic illustrations, gratuitous glassmorphism, drop shadows without purpose

---

CSS Gotchas

Negating CSS Functions

WRONG — silently ignored by browsers (no console error):

right: -clamp(28px, 3.5vw, 44px);   /* Browser ignores this */
margin-left: -min(10vw, 100px);      /* Browser ignores this */

CORRECT — wrap in calc():

right: calc(-1 * clamp(28px, 3.5vw, 44px));  /* Works */
margin-left: calc(-1 * min(10vw, 100px));     /* Works */

CSS does not allow a leading - before function names. The browser silently discards the entire declaration — no error, the element just appears in the wrong position. Always use calc(-1 * ...) to negate CSS function values.