Design Theme

---
name: design-theme
description: >
  Apply one of 11 preset themes (colors, fonts) to slides, docs, or landing
  pages. Use when "apply theme", "color palette", "brand colors", "styling
  slides", "presentation design", "visual identity", or styling artifacts
  consistently.
license: MIT
---

# Theme Factory Skill

**Degree of freedom: MIXED.** Custom-theme authoring `[HIGH freedom]`; wait-for-
selection and existing-token inventory `[LOW freedom — run exactly]`.

A curated collection of professional font and color themes. Once a theme is chosen, it can be applied to any artifact.

## How to reason

1. **Inventory** — existing tokens, fonts, and brand colors
2. **Select** — show the catalog; wait for an explicit choice
3. **Apply** — one palette + pairing everywhere on the artifact
4. **Contrast** — 4.5:1 text; do not override the design system arbitrarily

## Worked example

> **Inventory:** slide deck uses mixed hex; `globals.css` already has `--primary`.
> **Select:** user picks **Forest Canopy** after seeing the 11 options.
> **Apply:** headings Merriweather / body Lato; `#276749` primary on `#f0fff4`.
> **Contrast:** body text vs background ≥4.5:1; app chrome still uses existing tokens.

## Self-critique before reporting

- **Choice recorded** — a theme was not applied until the user picked one
- **One pairing** — no leftover fonts or hex from a second theme
- **Readable** — contrast checked, not assumed
- **Right owner** — component library / tokens from scratch → `design-system`; drifted token SSOT → `housekeep-design`

## Purpose

To apply consistent, professional styling to presentation slide decks or other artifacts. Each theme includes:
- A cohesive color palette with hex codes
- Complementary font pairings for headers and body text
- A distinct visual identity suitable for different contexts and audiences

## Usage Instructions  [LOW freedom — run exactly]

To apply styling to a slide deck or other artifact:

1. **Show available themes**: Display the theme options to allow users to see all available themes
2. **Ask for their choice**: Ask which theme to apply
3. **Wait for selection**: Get explicit confirmation about the chosen theme
4. **Apply the theme**: Apply the selected theme's colors and fonts

## Themes Available

The following 11 themes are available:

### 1. Ocean Depths
Professional and calming maritime theme
- **Primary**: `#1a365d` (deep blue)
- **Secondary**: `#2c5282`
- **Accent**: `#63b3ed`
- **Background**: `#ebf8ff`
- **Heading Font**: Playfair Display
- **Body Font**: Source Sans Pro

### 2. Sunset Boulevard
Warm and vibrant sunset colors
- **Primary**: `#c05621` (burnt orange)
- **Secondary**: `#dd6b20`
- **Accent**: `#ed8936`
- **Background**: `#fffaf0`
- **Heading Font**: Poppins
- **Body Font**: Open Sans

### 3. Forest Canopy
Natural and grounded earth tones
- **Primary**: `#276749` (forest green)
- **Secondary**: `#38a169`
- **Accent**: `#9ae6b4`
- **Background**: `#f0fff4`
- **Heading Font**: Merriweather
- **Body Font**: Lato

### 4. Modern Minimalist
Clean and contemporary grayscale
- **Primary**: `#1a202c` (charcoal)
- **Secondary**: `#4a5568`
- **Accent**: `#718096`
- **Background**: `#f7fafc`
- **Heading Font**: Inter
- **Body Font**: Inter

### 5. Golden Hour
Rich and warm autumnal palette
- **Primary**: `#744210` (golden brown)
- **Secondary**: `#b7791f`
- **Accent**: `#ecc94b`
- **Background**: `#fffff0`
- **Heading Font**: Cormorant Garamond
- **Body Font**: Work Sans

### 6. Arctic Frost
Cool and crisp winter-inspired theme
- **Primary**: `#2b6cb0` (ice blue)
- **Secondary**: `#4299e1`
- **Accent**: `#90cdf4`
- **Background**: `#ebf8ff`
- **Heading Font**: Montserrat
- **Body Font**: Nunito

### 7. Desert Rose
Soft and sophisticated dusty tones
- **Primary**: `#97266d` (dusty rose)
- **Secondary**: `#d53f8c`
- **Accent**: `#ed64a6`
- **Background**: `#fff5f7`
- **Heading Font**: DM Serif Display
- **Body Font**: DM Sans

### 8. Tech Innovation
Bold and modern tech aesthetic
- **Primary**: `#2d3748` (slate)
- **Secondary**: `#4c51bf`
- **Accent**: `#667eea`
- **Background**: `#edf2f7`
- **Heading Font**: JetBrains Mono
- **Body Font**: IBM Plex Sans

### 9. Botanical Garden
Fresh and organic garden colors
- **Primary**: `#285e61` (teal)
- **Secondary**: `#319795`
- **Accent**: `#81e6d9`
- **Background**: `#e6fffa`
- **Heading Font**: Libre Baskerville
- **Body Font**: Karla

### 10. Midnight Galaxy
Dramatic and cosmic deep tones
- **Primary**: `#1a1a2e` (midnight)
- **Secondary**: `#16213e`
- **Accent**: `#e94560`
- **Background**: `#0f0f23`
- **Text**: `#edf2f7`
- **Heading Font**: Orbitron
- **Body Font**: Rajdhani

### 11. Tsumagoi Ranch
Neo-Brutalist "Cute-alism" - Japanese ranch/campground aesthetic
- **Primary**: `#0c85f4` (mountain blue)
- **Secondary**: `#10b981` (pine green)
- **Accent**: `#ff6b35` (campfire orange)
- **Accent Alt**: `#FF6D38` (navigate orange - CTAs)
- **Premium**: `#8584FF` (navigate purple)
- **Background Light**: `#faf7f2` (warm cream)
- **Background Dark**: `#0c1424` (night sky)
- **Border**: `#b8a080` (wood/sand tone)
- **Text**: `#1a1a1a` (near black)
- **Heading Font**: M PLUS Rounded 1c
- **Body Font**: Inter
- **Body JP**: Noto Sans JP
- **Mono**: JetBrains Mono

**Neo-Brutal Shadows**: Hard-edge `3px 3px 0 0 #b8a080` (no blur)
**Border Style**: 3px solid with rounded-xl corners
**Motion**: Bounce easing `cubic-bezier(0.34, 1.56, 0.64, 1)`

See `themes/tsumagoi-ranch.md` for full specification including mobile patterns.

## Application Process  [LOW freedom — run exactly]

After a preferred theme is selected:
1. Read the corresponding theme specifications
2. Apply the specified colors and fonts consistently throughout
3. Ensure proper contrast and readability
4. Maintain the theme's visual identity across all elements

## Create Your Own Theme  [HIGH freedom]

To handle cases where none of the existing themes work, create a custom theme based on:
- User's brand colors
- Specific aesthetic direction
- Industry or context requirements

Generate a new theme with:
- 5 color palette (primary, secondary, accent, background, text)
- Font pairing (heading + body)
- A descriptive name

Name the fallbacks and avoid them: Inter/Roboto as the pairing, a cream or off-white background, a purple gradient — a custom theme that lands on those is the model's default, not the user's brand.

After generating, show it for review before applying.

## Check existing first  [LOW freedom — run exactly]

**Before applying ANY theme, verify:**

1. **Check for existing theme/design system:**
```bash
cat tailwind.config.* 2>/dev/null | grep -A30 "colors\|fontFamily"
cat src/styles/globals.css docs/THEME_GUIDE.md 2>/dev/null
```

2. **Check for existing CSS variables:**
```bash
rg "var\(--" --type css --type tsx | head -20
```

3. **Check for existing brand colors:**
- Look in `public/` for logos
- Check existing components for color patterns

**Why:** Themes must integrate with existing design systems, not override them arbitrarily.

## Validation  [LOW freedom — do not skip]

After applying a theme:

1. **Visual consistency** → All components use theme colors
2. **Contrast check** → Text readable on backgrounds (4.5:1 min)
3. **Font loading** → Google Fonts load correctly
4. **Dark mode** → If applicable, verify dark variant works
5. **Mobile check** → Typography scales appropriately
6. **Print preview** → If printable, colors work in print