Hi, I’m Claude 👋

I’m your AI design assistant, and I’d like to introduce you to my capability of working with beautiful, cohesive color palettes. Let me show you the Earthed palette we’ve created together.

We Did It! 🎉

The Earthed Color Palette

A harmonious blend of earth tones designed for regenerative agriculture and sustainability

Earthed Orange

#FF833F

Vibrant and energetic, representing growth and vitality

Earthed Green

#45B078

Fresh and natural, symbolizing life and renewal

Charcoal Gray

#4A4A4A

Strong and grounding, providing solid foundation

Dark Text

#2C2C2C

Deep and rich, ensuring excellent readability

Warm Cream

#F8F5EE

Soft and inviting, creating comfortable spaces

Pure White

#FFFFFF

Clean and clear, offering perfect contrast

Light Tan

#E8E3D8

Gentle and earthy, bringing warmth to designs

Off White

#F5F5F5

Subtle and sophisticated background tone

Warm White

#FFF9F0

Cozy and welcoming, like natural sunlight

What I Can Do With Palettes

🎨

Create Cohesive Designs

I ensure every element on your site uses colors from your chosen palette, creating visual harmony.

⚡

Instant Updates

Need to change a color? I can update your entire palette across all pages instantly.

♿

Accessibility First

I ensure proper contrast ratios and readability with every color combination I choose.

🎓 Reusable Skill: Spence Style CSS Rules

Want to use Claude with your own MCP connection? Copy this skill and add it to your Claude project knowledge!

📋 SPENCE-STYLE-CSS-RULES.md

# Spence Style Manager - Critical CSS Rules

## ALWAYS Include These Overrides in Every Spence Style Page

### 1. PARAGRAPH CENTERING OVERRIDE (CRITICAL)

**The Problem:**
`.spence-style p` has `margin: 15px auto !important;` and sometimes `text-align: center !important;` which interferes with paragraph layouts.

**The Solution - ALWAYS ADD THIS:**
```css
.spence-style p {
  margin: 15px auto !important;
  text-align: left !important;
  max-width: 100%;
}

/* For paragraphs that SHOULD be centered */
p.centered,
.hero-section p,
.text-center p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
```

### 2. DARK TEXT ON DARK BACKGROUND (CRITICAL)

**The Rule:**
ALWAYS use white text on dark backgrounds. NEVER use dark gray or charcoal text on dark backgrounds.

**The Solution - ALWAYS CHECK HERO SECTIONS:**
```css
/* Hero sections with dark backgrounds */
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section p {
  color: #ffffff !important;
}

/* Any section with dark background */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section p {
  color: #ffffff !important;
}
```

**Background Color Threshold:**
- If background is darker than #999999 → Text MUST be white (#ffffff)
- If using gradients with dark colors → Text MUST be white
- If using dark overlay on images → Text MUST be white

### 3. POLAROID IMAGE EFFECT

**Create tilted photo frames:**
```css
.polaroid-frame {
  background: #ffffff;
  padding: 20px;
  padding-bottom: 80px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  transform: rotate(-3deg);
  transition: transform 0.3s ease;
  max-width: 600px;
}

.polaroid-frame:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
}

.polaroid-frame img {
  width: 100%;
  height: auto;
  display: block;
}
```

## CHECKLIST - Before Publishing ANY Spence Style Page

- [ ] Added `.spence-style p` override for paragraph alignment
- [ ] Checked ALL sections with dark backgrounds for white text
- [ ] Checked ALL sections with light backgrounds for dark text
- [ ] Added `!important` to all color declarations
- [ ] Tested on mobile (responsive breakpoints)
- [ ] Verified no dark-on-dark or light-on-light text

---

Created: October 21, 2025
By: Spencer Forman & Claude
Purpose: Prevent recurring CSS issues in Spence Style Manager pages