Initial commit
This commit is contained in:
581
skills/ppt/themes.md
Executable file
581
skills/ppt/themes.md
Executable file
@@ -0,0 +1,581 @@
|
||||
# Themes — Preset Theme Configuration
|
||||
|
||||
Each theme = a set of colors + a set of fonts + mood tags. Once a theme is selected, all colors are automatically derived according to the color scale rules in `design-system.md`.
|
||||
|
||||
---
|
||||
|
||||
## Theme Selection Rules
|
||||
|
||||
1. AI selects the theme based on scene classification and content tone
|
||||
2. Each PPT deck uses only one theme, **no switching throughout**
|
||||
3. If the user specifies a color or style preference, select the closest theme or customize accordingly (still must follow color scale rules)
|
||||
|
||||
---
|
||||
|
||||
## Preset Themes
|
||||
|
||||
### 1. Ocean (Deep Sea Blue)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Professional, trustworthy |
|
||||
| **Suitable for** | Work reports, business proposals, company introductions |
|
||||
| **Primary** | `#1B2A4A` |
|
||||
| **Accent (A — default)** | `#2A9D8F` (teal) |
|
||||
| **Accent B** | `#D7A460` (warm gold) |
|
||||
| **Accent C** | `#6C92E0` (bright blue) |
|
||||
| **CJK Title Font** | Microsoft YaHei Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Gill Sans MT Bold |
|
||||
| **Latin Body Font** | Gill Sans MT |
|
||||
| **Image Keywords** | ocean, deep blue, corporate, skyline, technology, water, aerial city |
|
||||
| **Mask Color** | `rgba(18,32,64,0.75)` (primary-90 based) |
|
||||
|
||||
Color Scale:
|
||||
|
||||
| Scale | Color Value | Usage Example |
|
||||
|------|------|---------|
|
||||
| primary-100 | `#0D1525` | Dark mode background |
|
||||
| primary-90 | `#122040` | Title bar background |
|
||||
| primary-80 | `#1B2A4A` | Title text |
|
||||
| primary-60 | `#3D5A80` | Subtitle / icons |
|
||||
| primary-40 | `#6B8AB0` | Secondary text |
|
||||
| primary-20 | `#B0C4DE` | Light decoration |
|
||||
| primary-10 | `#DFE8F2` | Card background / border |
|
||||
| primary-5 | `#F0F4F8` | Surface base color |
|
||||
|
||||
---
|
||||
|
||||
### 2. Graphite (Graphite Gray)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Modern, restrained, clean and sharp |
|
||||
| **Suitable for** | Tech products, weekly/monthly reports, technical sharing |
|
||||
| **Primary** | `#2D3436` |
|
||||
| **Accent (A — default)** | `#D77860` (coral red) |
|
||||
| **Accent B** | `#6BCB77` (emerald green) |
|
||||
| **Accent C** | `#9B8EC4` (light purple) |
|
||||
| **CJK Title Font** | SimHei Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Century Gothic Bold |
|
||||
| **Latin Body Font** | Corbel |
|
||||
| **Image Keywords** | architecture, minimal, concrete, technology, geometric, monochrome, server room |
|
||||
| **Mask Color** | `rgba(34,40,41,0.75)` (primary-90 based) |
|
||||
|
||||
Color Scale:
|
||||
|
||||
| Scale | Color Value |
|
||||
|------|------|
|
||||
| primary-100 | `#161A1B` |
|
||||
| primary-90 | `#222829` |
|
||||
| primary-80 | `#2D3436` |
|
||||
| primary-60 | `#576163` |
|
||||
| primary-40 | `#8D9496` |
|
||||
| primary-20 | `#C3C8CA` |
|
||||
| primary-10 | `#E4E7E8` |
|
||||
| primary-5 | `#F3F4F5` |
|
||||
|
||||
---
|
||||
|
||||
### 3. Forest (Forest Green)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Natural, serene, organic and gentle |
|
||||
| **Suitable for** | Educational courseware, humanities/liberal arts academic, ESG/sustainability |
|
||||
| **Primary** | `#1B4332` |
|
||||
| **Accent (A — default)** | `#DCBD74` (golden) |
|
||||
| **Accent B** | `#E18C70` (coral) |
|
||||
| **Accent C** | `#7EC8B0` (mint) |
|
||||
| **CJK Title Font** | SimSun Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Palatino Linotype Bold |
|
||||
| **Latin Body Font** | Corbel |
|
||||
| **Image Keywords** | forest, nature, leaves, green, organic, sustainability, botanical, meadow |
|
||||
| **Mask Color** | `rgba(18,45,31,0.75)` (primary-90 based) |
|
||||
|
||||
Color Scale:
|
||||
|
||||
| Scale | Color Value |
|
||||
|------|------|
|
||||
| primary-100 | `#0B1E14` |
|
||||
| primary-90 | `#122D1F` |
|
||||
| primary-80 | `#1B4332` |
|
||||
| primary-60 | `#2E6B4F` |
|
||||
| primary-40 | `#60A882` |
|
||||
| primary-20 | `#A8D4BC` |
|
||||
| primary-10 | `#D8EEE2` |
|
||||
| primary-5 | `#EEF7F1` |
|
||||
|
||||
---
|
||||
|
||||
### 4. Twilight (Dark Night Purple)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Creative, unique, personality-driven |
|
||||
| **Suitable for** | Creative proposals, brand planning, design sharing |
|
||||
| **Primary** | `#2D2B55` |
|
||||
| **Accent (A — default)** | `#9B50F5` (electric purple) |
|
||||
| **Accent B** | `#E3B27D` (warm orange) |
|
||||
| **Accent C** | `#5EC4D4` (sky blue) |
|
||||
| **CJK Title Font** | Microsoft YaHei Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Candara Bold |
|
||||
| **Latin Body Font** | Candara |
|
||||
| **Image Keywords** | galaxy, night sky, aurora, creative, neon, abstract art, purple gradient |
|
||||
| **Mask Color** | `rgba(33,31,64,0.75)` (primary-90 based) |
|
||||
|
||||
Color Scale:
|
||||
|
||||
| Scale | Color Value |
|
||||
|------|------|
|
||||
| primary-100 | `#15142A` |
|
||||
| primary-90 | `#211F40` |
|
||||
| primary-80 | `#2D2B55` |
|
||||
| primary-60 | `#555380` |
|
||||
| primary-40 | `#8886AB` |
|
||||
| primary-20 | `#BFBED6` |
|
||||
| primary-10 | `#E2E1ED` |
|
||||
| primary-5 | `#F2F2F7` |
|
||||
|
||||
---
|
||||
|
||||
### 5. Sandstone (Warm Sand)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Premium, warm, composed and grand |
|
||||
| **Suitable for** | Investment roadshows, real estate, luxury goods, finance |
|
||||
| **Primary** | `#3C2415` |
|
||||
| **Accent (A — default)** | `#C09E30` (gold) |
|
||||
| **Accent B** | `#D4766A` (ochre red) |
|
||||
| **Accent C** | `#8BB174` (olive) |
|
||||
| **CJK Title Font** | SimSun Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Palatino Linotype Bold |
|
||||
| **Latin Body Font** | Corbel |
|
||||
| **Image Keywords** | luxury, gold, marble, architecture, warm light, classical, elegant interior |
|
||||
| **Mask Color** | `rgba(45,27,16,0.75)` (primary-90 based) |
|
||||
|
||||
Color Scale:
|
||||
|
||||
| Scale | Color Value |
|
||||
|------|------|
|
||||
| primary-100 | `#1E120A` |
|
||||
| primary-90 | `#2D1B10` |
|
||||
| primary-80 | `#3C2415` |
|
||||
| primary-60 | `#6B5443` |
|
||||
| primary-40 | `#9E8A7A` |
|
||||
| primary-20 | `#CEBFB5` |
|
||||
| primary-10 | `#E9E2DC` |
|
||||
| primary-5 | `#F5F2F0` |
|
||||
|
||||
---
|
||||
|
||||
### 6. Mono (Minimalist Black)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Sharp, minimalist, visual impact |
|
||||
| **Suitable for** | Product launches, minimalist style, photography showcases |
|
||||
| **Primary** | `#1A1A1A` |
|
||||
| **Accent (A — default)** | `#E6754C` (burnt orange) |
|
||||
| **Accent B** | `#4ECDC4` (cyan) |
|
||||
| **Accent C** | `#C44569` (rose) |
|
||||
| **CJK Title Font** | Microsoft YaHei Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Arial Bold |
|
||||
| **Latin Body Font** | Arial |
|
||||
| **Image Keywords** | minimal, black white, contrast, product, clean, abstract, studio lighting |
|
||||
| **Mask Color** | `rgba(20,20,20,0.75)` (primary-90 based) |
|
||||
|
||||
Color Scale:
|
||||
|
||||
| Scale | Color Value |
|
||||
|------|------|
|
||||
| primary-100 | `#0A0A0A` |
|
||||
| primary-90 | `#141414` |
|
||||
| primary-80 | `#1A1A1A` |
|
||||
| primary-60 | `#4A4A4A` |
|
||||
| primary-40 | `#808080` |
|
||||
| primary-20 | `#B8B8B8` |
|
||||
| primary-10 | `#E0E0E0` |
|
||||
| primary-5 | `#F2F2F2` |
|
||||
|
||||
---
|
||||
|
||||
### 7. Deep Mineral (Dark Night Blue)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | High-end, immersive, cinematic depth |
|
||||
| **Suitable for** | Tech launches, keynotes, data dashboards, night-mode presentations |
|
||||
| **Primary** | `#FFFFFF` |
|
||||
| **Accent (A — default)** | `#44D1E4` (electric cyan) |
|
||||
| **Accent B** | `#EDCD82` (warm yellow) |
|
||||
| **Accent C** | `#E65174` (rose) |
|
||||
| **Background Override** | `#162235` (replaces default `#FFFFFF`) |
|
||||
| **CJK Title Font** | Microsoft YaHei Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Trebuchet MS Bold |
|
||||
| **Latin Body Font** | Corbel |
|
||||
| **Image Keywords** | dark blue, night city, deep ocean, space, data visualization, neon glow |
|
||||
| **Mask Color** | `rgba(16,26,40,0.70)` (primary-100 based) |
|
||||
|
||||
**Dark theme notes**: This is a dark-background theme — the color logic is inverted:
|
||||
- `background` = `#162235` (dark), `surface` = `#1E2D45` (slightly lighter), `surface-card` = `#243550` (card layer)
|
||||
- `text-primary` = `#FFFFFF`, `text-secondary` = `rgba(255,255,255,0.75)`, `text-muted` = `rgba(255,255,255,0.45)`
|
||||
- Cards use `surface-card` with no shadow (shadows invisible on dark backgrounds)
|
||||
- Accent (`#44D1E4`) is used for highlights, KPI numbers, accent bars, and emphasis elements
|
||||
|
||||
Color Scale (inverted — lighter values are "darker" in visual weight):
|
||||
|
||||
| Scale | Color Value | Usage |
|
||||
|------|------|---------|
|
||||
| primary-100 | `#0D1525` | Deepest background |
|
||||
| primary-90 | `#122040` | Title bar background |
|
||||
| primary-80 | `#FFFFFF` | Title text / primary elements |
|
||||
| primary-60 | `rgba(255,255,255,0.75)` | Subtitle / secondary text |
|
||||
| primary-40 | `rgba(255,255,255,0.45)` | Muted text / annotations |
|
||||
| primary-20 | `#2A3F5F` | Card borders / subtle decorations |
|
||||
| primary-10 | `#1E2D45` | Surface / content area base |
|
||||
| primary-5 | `#162235` | Page background |
|
||||
|
||||
---
|
||||
|
||||
### 8. Warm Retro (Vintage Warmth)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Vintage, cultured, warm and grounded |
|
||||
| **Suitable for** | Cultural events, humanities, food/lifestyle, brand storytelling |
|
||||
| **Primary** | `#2A4A3A` |
|
||||
| **Accent (A — default)** | `#C89F62` (antique gold) |
|
||||
| **Accent B** | `#C06C58` (copper red) |
|
||||
| **Accent C** | `#7BA68C` (moss green) |
|
||||
| **Background Override** | `#F4F1E9` (warm off-white, replaces default `#FFFFFF`) |
|
||||
| **CJK Title Font** | SimSun Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Palatino Linotype Bold |
|
||||
| **Latin Body Font** | Garamond |
|
||||
| **Image Keywords** | vintage, warm light, craft, leather, coffee, botanical, old book, linen texture |
|
||||
| **Mask Color** | `rgba(30,40,34,0.75)` (primary-90 based) |
|
||||
|
||||
**Warm background notes**: This theme uses a warm off-white (`#F4F1E9`) instead of pure white:
|
||||
- `background` = `#F4F1E9`, `surface` = `#EDE9DF` (slightly darker warm), `surface-card` = `#FEFDFB` (near-white card)
|
||||
- The warm base gives a cozy, analog feel — avoid pure white elements that would look jarring
|
||||
|
||||
Color Scale:
|
||||
|
||||
| Scale | Color Value | Usage |
|
||||
|------|------|---------|
|
||||
| primary-100 | `#0F1C15` | Darkest (rarely used) |
|
||||
| primary-90 | `#1E2822` | Title bar background |
|
||||
| primary-80 | `#2A4A3A` | Title text / primary elements |
|
||||
| primary-60 | `#4A7A62` | Subtitle / icons |
|
||||
| primary-40 | `#7AAA90` | Secondary text |
|
||||
| primary-20 | `#B5D4C2` | Light decoration |
|
||||
| primary-10 | `#DCE9E0` | Card background / border |
|
||||
| primary-5 | `#F0F5F1` | Surface base (use `#EDE9DF` for warm surface) |
|
||||
|
||||
---
|
||||
|
||||
### 9. Deep Forest (Dark Green)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Calm, grounded, nature-tech fusion |
|
||||
| **Suitable for** | ESG reports, sustainability, ecology, green tech |
|
||||
| **Primary** | `#FFFFFF` |
|
||||
| **Accent (A — default)** | `#D7D968` (electric lime) |
|
||||
| **Accent B** | `#E18C70` (coral orange) |
|
||||
| **Accent C** | `#85C5E0` (sky blue) |
|
||||
| **Background Override** | `#193328` (deep forest green, replaces default `#FFFFFF`) |
|
||||
| **CJK Title Font** | Microsoft YaHei Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Gill Sans MT Bold |
|
||||
| **Latin Body Font** | Corbel |
|
||||
| **Image Keywords** | dark forest, moss, fern, green nature, sustainability, eco technology, rain forest |
|
||||
| **Mask Color** | `rgba(18,38,30,0.70)` (primary-100 based) |
|
||||
|
||||
**Dark theme notes**: Same inverted logic as Deep Mineral — see its notes above.
|
||||
- `background` = `#193328`, `surface` = `#1F3F32`, `surface-card` = `#264A3C`
|
||||
- `text-primary` = `#FFFFFF`, `text-secondary` = `rgba(255,255,255,0.75)`, `text-muted` = `rgba(255,255,255,0.45)`
|
||||
|
||||
Color Scale (inverted):
|
||||
|
||||
| Scale | Color Value | Usage |
|
||||
|------|------|---------|
|
||||
| primary-100 | `#0D1A14` | Deepest background |
|
||||
| primary-90 | `#12261E` | Title bar background |
|
||||
| primary-80 | `#FFFFFF` | Title text / primary elements |
|
||||
| primary-60 | `rgba(255,255,255,0.75)` | Subtitle / secondary text |
|
||||
| primary-40 | `rgba(255,255,255,0.45)` | Muted text / annotations |
|
||||
| primary-20 | `#2A5040` | Card borders / subtle decorations |
|
||||
| primary-10 | `#1F3F32` | Surface / content area base |
|
||||
| primary-5 | `#193328` | Page background |
|
||||
|
||||
---
|
||||
|
||||
### 10. Coral (Coral Pink)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Warm, vibrant, youthful |
|
||||
| **Suitable for** | Brand marketing, consumer products, lifestyle, female-audience presentations |
|
||||
| **Primary** | `#8B3A4A` |
|
||||
| **Accent (A — default)** | `#E2A574` (warm peach) |
|
||||
| **Accent B** | `#DC755B` (burnt sienna) |
|
||||
| **Accent C** | `#6BC5B8` (mint contrast) |
|
||||
| **CJK Title Font** | Microsoft YaHei Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Candara Bold |
|
||||
| **Latin Body Font** | Corbel |
|
||||
| **Image Keywords** | pink, flowers, beauty, lifestyle, warm light, cafe, fashion, soft texture |
|
||||
| **Mask Color** | `rgba(100,42,54,0.75)` (primary-90 based) |
|
||||
|
||||
Color Scale:
|
||||
|
||||
| Scale | Color Value | Usage |
|
||||
|------|------|---------|
|
||||
| primary-100 | `#3D1A22` | Deepest background |
|
||||
| primary-90 | `#642A36` | Title bar background |
|
||||
| primary-80 | `#8B3A4A` | Title text / primary elements |
|
||||
| primary-60 | `#B06070` | Subtitle / icons |
|
||||
| primary-40 | `#D08A96` | Secondary text |
|
||||
| primary-20 | `#E8BAC2` | Light decoration |
|
||||
| primary-10 | `#F3DDE1` | Card background / border |
|
||||
| primary-5 | `#FAF0F2` | Surface base color |
|
||||
|
||||
---
|
||||
|
||||
### 11. Mint (Mint Green)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Fresh, clean, health-oriented |
|
||||
| **Suitable for** | Healthcare, wellness, eco-friendly, food & beverage |
|
||||
| **Primary** | `#1A6B5A` |
|
||||
| **Accent (A — default)** | `#E3987D` (warm coral) |
|
||||
| **Accent B** | `#DEC363` (golden yellow) |
|
||||
| **Accent C** | `#8574E2` (medium slate blue) |
|
||||
| **CJK Title Font** | Microsoft YaHei Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Gill Sans MT Bold |
|
||||
| **Latin Body Font** | Corbel |
|
||||
| **Image Keywords** | mint, fresh, health, botanical, clean, green smoothie, spa, herbal |
|
||||
| **Mask Color** | `rgba(18,78,64,0.75)` (primary-90 based) |
|
||||
|
||||
Color Scale:
|
||||
|
||||
| Scale | Color Value | Usage |
|
||||
|------|------|---------|
|
||||
| primary-100 | `#0A3028` | Deepest background |
|
||||
| primary-90 | `#124E40` | Title bar background |
|
||||
| primary-80 | `#1A6B5A` | Title text / primary elements |
|
||||
| primary-60 | `#3D9B86` | Subtitle / icons |
|
||||
| primary-40 | `#6DBFAB` | Secondary text |
|
||||
| primary-20 | `#A8DACE` | Light decoration |
|
||||
| primary-10 | `#D6EDE7` | Card background / border |
|
||||
| primary-5 | `#EFF8F5` | Surface base color |
|
||||
|
||||
---
|
||||
|
||||
### 12. Azure (Sky Blue)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Open, lightweight, approachable technology |
|
||||
| **Suitable for** | SaaS products, AI/tech, onboarding, training materials |
|
||||
| **Primary** | `#1E5F8C` |
|
||||
| **Accent (A — default)** | `#FF6B2B` (electric orange) |
|
||||
| **Accent B** | `#DD5F5F` (red) |
|
||||
| **Accent C** | `#9270E1` (violet) |
|
||||
| **CJK Title Font** | Microsoft YaHei Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Trebuchet MS Bold |
|
||||
| **Latin Body Font** | Corbel |
|
||||
| **Image Keywords** | sky, cloud, technology, light blue, software, digital, clean interface |
|
||||
| **Mask Color** | `rgba(20,68,104,0.75)` (primary-90 based) |
|
||||
|
||||
Color Scale:
|
||||
|
||||
| Scale | Color Value | Usage |
|
||||
|------|------|---------|
|
||||
| primary-100 | `#0C2A40` | Deepest background |
|
||||
| primary-90 | `#144468` | Title bar background |
|
||||
| primary-80 | `#1E5F8C` | Title text / primary elements |
|
||||
| primary-60 | `#4085B0` | Subtitle / icons |
|
||||
| primary-40 | `#70AAD0` | Secondary text |
|
||||
| primary-20 | `#A8CEE5` | Light decoration |
|
||||
| primary-10 | `#D8E9F3` | Card background / border |
|
||||
| primary-5 | `#F0F6FA` | Surface base color |
|
||||
|
||||
---
|
||||
|
||||
### 13. Ember (Amber Red)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Bold, energetic, high-impact |
|
||||
| **Suitable for** | Annual events, product launches, sales campaigns, motivational presentations |
|
||||
| **Primary** | `#8B2500` |
|
||||
| **Accent (A — default)** | `#F04828` (fire orange) |
|
||||
| **Accent B** | `#2EC4B6` (teal contrast) |
|
||||
| **Accent C** | `#EC7979` (coral red) |
|
||||
| **CJK Title Font** | SimHei Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Arial Bold |
|
||||
| **Latin Body Font** | Corbel |
|
||||
| **Image Keywords** | fire, red, energy, stage light, celebration, bold, dynamic, explosion |
|
||||
| **Mask Color** | `rgba(100,26,0,0.75)` (primary-90 based) |
|
||||
|
||||
Color Scale:
|
||||
|
||||
| Scale | Color Value | Usage |
|
||||
|------|------|---------|
|
||||
| primary-100 | `#3E1000` | Deepest background |
|
||||
| primary-90 | `#641A00` | Title bar background |
|
||||
| primary-80 | `#8B2500` | Title text / primary elements |
|
||||
| primary-60 | `#B85030` | Subtitle / icons |
|
||||
| primary-40 | `#D88060` | Secondary text |
|
||||
| primary-20 | `#EBB8A0` | Light decoration |
|
||||
| primary-10 | `#F5DCD0` | Card background / border |
|
||||
| primary-5 | `#FBF0EB` | Surface base color |
|
||||
|
||||
---
|
||||
|
||||
### 14. Volt (Electric / Startup Dark)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Electric, aggressive, high-energy |
|
||||
| **Suitable for** | AI/tech product launches, startup pitches, youth tech brands, digital innovation |
|
||||
| **Primary** | `#FFFFFF` |
|
||||
| **Accent (A — default)** | `#00F5A0` (electric mint-green) |
|
||||
| **Accent B** | `#FF5E3A` (electric orange) |
|
||||
| **Accent C** | `#A855F7` (electric purple) |
|
||||
| **Background Override** | `#080B14` (near-black with blue tint, replaces default `#FFFFFF`) |
|
||||
| **CJK Title Font** | Microsoft YaHei Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Trebuchet MS Bold |
|
||||
| **Latin Body Font** | Corbel |
|
||||
| **Image Keywords** | neon, circuit board, futuristic, dark ui, electric glow, startup, code, data stream |
|
||||
| **Mask Color** | `rgba(5,7,16,0.70)` (primary-100 based) |
|
||||
|
||||
**Dark theme notes**: Same inverted logic as Deep Mineral — see its notes above.
|
||||
- `background` = `#080B14`, `surface` = `#0F1424`, `surface-card` = `#162033`
|
||||
- `text-primary` = `#FFFFFF`, `text-secondary` = `rgba(255,255,255,0.75)`, `text-muted` = `rgba(255,255,255,0.45)`
|
||||
- Accents are extremely vivid by design — use sparingly (bars, numbers, key labels only)
|
||||
|
||||
Color Scale (inverted):
|
||||
|
||||
| Scale | Color Value | Usage |
|
||||
|------|------|---------|
|
||||
| primary-100 | `#050710` | Deepest background |
|
||||
| primary-90 | `#0D1320` | Title bar background |
|
||||
| primary-80 | `#FFFFFF` | Title text / primary elements |
|
||||
| primary-60 | `rgba(255,255,255,0.75)` | Subtitle / secondary text |
|
||||
| primary-40 | `rgba(255,255,255,0.45)` | Muted text / annotations |
|
||||
| primary-20 | `#1E2E48` | Card borders / subtle decorations |
|
||||
| primary-10 | `#0F1424` | Surface / content area base |
|
||||
| primary-5 | `#080B14` | Page background |
|
||||
|
||||
---
|
||||
|
||||
### 15. Vermillion (Chinese Red)
|
||||
|
||||
| Property | Value |
|
||||
|------|-----|
|
||||
| **Mood** | Ceremonial, festive, culturally resonant |
|
||||
| **Suitable for** | Chinese cultural events, Spring Festival, traditional ceremonies, brand storytelling with Chinese aesthetics |
|
||||
| **Primary** | `#8B1A1A` |
|
||||
| **Accent (A — default)** | `#D4AF37` (Chinese gold) |
|
||||
| **Accent B** | `#C4762A` (copper bronze) |
|
||||
| **Accent C** | `#2D6B8A` (cool blue contrast) |
|
||||
| **Background Override** | `#FDF8F2` (warm rice-paper white, replaces default `#FFFFFF`) |
|
||||
| **CJK Title Font** | SimSun Bold |
|
||||
| **CJK Body Font** | Microsoft YaHei |
|
||||
| **Latin Title Font** | Palatino Linotype Bold |
|
||||
| **Latin Body Font** | Corbel |
|
||||
| **Image Keywords** | red lantern, Chinese architecture, traditional culture, festival, gold ornament, calligraphy, temple, Spring Festival |
|
||||
| **Mask Color** | `rgba(107,20,20,0.75)` (primary-90 based) |
|
||||
|
||||
**Warm background notes**: Uses warm rice-paper white `#FDF8F2` instead of pure white:
|
||||
- `background` = `#FDF8F2`, `surface` = `#F5EDE0` (warm tint), `surface-card` = `#FEFDFB` (near-white card)
|
||||
- Avoid pure white elements that would look jarring against the warm base
|
||||
|
||||
Color Scale:
|
||||
|
||||
| Scale | Color Value | Usage |
|
||||
|------|------|---------|
|
||||
| primary-100 | `#450D0D` | Deepest background / dramatic pages |
|
||||
| primary-90 | `#6B1414` | Title bar background |
|
||||
| primary-80 | `#8B1A1A` | Title text / primary elements |
|
||||
| primary-60 | `#B84040` | Subtitle / icons |
|
||||
| primary-40 | `#D57070` | Secondary text |
|
||||
| primary-20 | `#EDB0B0` | Light decoration |
|
||||
| primary-10 | `#F8E0E0` | Card background / border |
|
||||
| primary-5 | `#FDF4F4` | Surface base color |
|
||||
|
||||
---
|
||||
|
||||
## Custom Themes
|
||||
|
||||
If the user specifies a particular color, create a custom theme following these steps:
|
||||
|
||||
1. Use the user-specified color as `primary-80`
|
||||
2. Derive the full 8-level color scale according to the color scale generation rules in section 3.1 of `design-system.md`
|
||||
3. Select an Accent color with a hue difference of ≥ 30° from the Primary (to ensure visual distinction). Recommended range: 60°–180°. Provide 3 accent variants (A/B/C) for variety.
|
||||
4. Choose the most suitable font pairing from the presets, or use the user-specified fonts
|
||||
5. Record the complete configuration in comments within the generated code to ensure consistency across the entire PPT deck
|
||||
|
||||
## Font Pairing Notes
|
||||
|
||||
Each theme has **4 font roles**:
|
||||
|
||||
| Role | HTML font-family Syntax | Usage |
|
||||
|------|----------------------|------|
|
||||
| CJK Title | Write PPT font name directly: `font-family:'SimHei','Microsoft YaHei',sans-serif` | h1, h2, cover title |
|
||||
| CJK Body | Write PPT font name directly: `font-family:'Microsoft YaHei',sans-serif` | body, lists, annotations |
|
||||
| Latin Title | Write PPT font name directly: `font-family:'Century Gothic','Corbel',sans-serif` | Pure Latin character titles |
|
||||
| Latin Body | Write PPT font name directly: `font-family:'Corbel',sans-serif` | Pure Latin character body text |
|
||||
|
||||
**v3 Smart Font Mapping**: html2pptx.js automatically handles fonts:
|
||||
- **PPT-safe fonts** (SimHei, Corbel, Palatino Linotype, etc. 40+) → Passed through directly, preserved as-is
|
||||
- **macOS-exclusive fonts** (PingFang, Hiragino) → Automatically mapped to cross-platform equivalent fonts
|
||||
- **Web fonts** (Roboto, Montserrat, Inter, etc.) → Automatically mapped to the visually closest PPT-safe font
|
||||
- **fontConfig still available**: Serves as the final fallback default for CJK/Latin
|
||||
|
||||
**fontConfig can be passed when calling html2pptx()** (optional, used to override default fallback):
|
||||
```javascript
|
||||
const fontConfig = { cjk: 'SimHei', latin: 'Corbel' };
|
||||
```
|
||||
|
||||
**Recommended practice**: Write the target PPT font name directly in HTML; do not rely on fontConfig for switching.
|
||||
|
||||
**PPT-safe Chinese fonts**: Microsoft YaHei / SimHei / SimSun / KaiTi / FangSong / DengXian
|
||||
**PPT-safe English fonts**: Corbel / Arial / Times New Roman / Palatino Linotype / Gill Sans MT / Century Gothic / Garamond / Rockwell / Candara / Constantia / Cambria / Trebuchet MS
|
||||
|
||||
---
|
||||
|
||||
## Dark Mode Semantic Color Mapping
|
||||
|
||||
For themes that need a full dark-mode deck (not just individual dark slides), use these semantic overrides:
|
||||
|
||||
| Semantic Token | Light Mode Value | Dark Mode Value |
|
||||
|---------------|-----------------|-----------------|
|
||||
| `background` | `#FFFFFF` | `primary-100` |
|
||||
| `surface` | `primary-5` | `primary-90` |
|
||||
| `surface-card` | `#FFFFFF` | `primary-80` |
|
||||
| `text-primary` | `primary-80` | `#FFFFFF` |
|
||||
| `text-secondary` | `primary-60` | `rgba(255,255,255,0.75)` |
|
||||
| `text-muted` | `primary-40` | `rgba(255,255,255,0.45)` |
|
||||
| `border` | `primary-10` | `primary-60` |
|
||||
| `on-dark` | `#FFFFFF` | `#FFFFFF` (unchanged) |
|
||||
|
||||
Deep Mineral and Deep Forest themes already use dark mode by default. For any other theme, apply this mapping to create a dark variant.
|
||||
|
||||
Cards in dark mode use `surface-card` background with **no shadow** (shadows invisible on dark backgrounds). Use subtle `border: 1pt solid primary-60` instead for card definition.
|
||||
Reference in New Issue
Block a user