Day 2 — Features That Sell

⏱️ Time needed: 30–45 minutes

🎯 Goal: Build a features section that showcases what your palette generator can do.

📍 What’s Happening Today

Your hero grabbed attention. Now you need to answer the visitor’s next question: “What does this thing actually do?”

The features section is where you lay out the key benefits — not as a boring list, but as a visually appealing grid that’s easy to scan. Think of it like the “key screens” section of a case study.

🧠 The Concept

A good features section:

Shows 3–4 benefits (not 12 — keep it focused)
Uses icons or visuals to make each one scannable
Has short, punchy descriptions
Is arranged in a grid so the eye can jump between them

🚀 Let’s Go

Prompt 1: The Features Grid

Below the hero section, add a features section. Create a grid of 4 feature cards, each with:
- A simple icon or emoji at the top
- A short bold title
- A one-sentence description underneath

The four features are:
1. 🎲 "Instant Generation" — "Click once to get a fresh palette. Click again for another. It never runs out."
2. 🔒 "Lock & Shuffle" — "Found a color you love? Lock it in place and shuffle the rest."
3. 📋 "One-Click Copy" — "Click any swatch to copy its hex code. Ready to paste into your design tool."
4. 💾 "Save Favorites" — "Build a collection of palettes you love. They're saved right in your browser."

Arrange them in a 2x2 grid on desktop. Use consistent spacing, subtle card backgrounds, and make sure the section has a clear heading like "Everything you need, nothing you don't."

Prompt 2: Polish the Cards

Refine the feature cards:
- Add a subtle border or shadow so they feel like distinct cards
- Make the icons larger (about 32-40px) so they're the first thing the eye hits
- Ensure the title and description have clear hierarchy — title in semibold, description in regular weight and a slightly muted color
- Add comfortable internal padding (about 24-32px) so the content doesn't feel squeezed
- On hover, add a subtle lift effect (slight shadow increase or translateY) to make them feel interactive

Prompt 3: Section Styling

Style the features section as a whole:
- Add a section heading above the grid: "Everything you need, nothing you don't" in a large, bold font
- Add a short subtitle: "Built for designers who think in color"
- Center the heading and subtitle, but keep the grid below them
- Give the section a slightly different background from the hero (maybe white if the hero has a gradient, or a very light gray) so it feels like a distinct zone
- Add generous padding above and below the section (at least 80px)

🎨 Design Thinking: Rhythm and Contrast

Notice what you’re doing here — you’re creating rhythm on the page. The hero is spacious and bold. The features section is structured and scannable. Each section has its own personality but they flow together.

This is the same principle as designing a presentation deck or a magazine spread. Variety within consistency. You already think this way.

🎁 Bonus: Responsive Grid

On tablet screens, make the feature cards a 2x2 grid. On mobile (under 600px wide), stack them in a single column. Make sure the cards have enough space between them at every size.

💡 “Responsive” means the layout adapts to different screen sizes. You saw this in Phase 1 — now you’re applying it to a more complex layout. The grid goes from 2x2 → 1 column as the screen gets narrower.

💡 What You Learned Today

How to build a grid-based features section
How to create visual hierarchy within cards (icon → title → description)
How to use section backgrounds and spacing to create rhythm on a page
That hover states add a sense of interactivity even on non-clickable elements

⏭️ Tomorrow

You’ll build a “How It Works” section — a step-by-step walkthrough that shows visitors how easy the tool is to use.

🎯 Checkpoint: You should have a features section with 4 cards in a grid, each with an icon, title, and description. The section should feel visually distinct from the hero above it. If the cards look uneven, try: “The feature cards aren’t the same height. Can you make them all equal height regardless of content length?”