Taste

generated patterns.
---

# Taste — Quality Enforcement Layer

## 1. Purpose & Activation

Taste is a quality enforcement layer that complements the `frontend-design` skill. The relationship is:

- **frontend-design** = "what to build" — creative direction, brand lock, aesthetic choice
- **taste** = "how to build it with premium quality" — anti-slop rules, detail enforcement, interaction fidelity

Neither skill replaces the other. Run `frontend-design` for direction, then apply `taste` to enforce craft standards throughout implementation.

**Activate this skill when:**
- Starting any new page or component from scratch
- Reviewing existing UI for quality issues before shipping
- Auditing a page for AI-generated aesthetic patterns
- Implementing animations or micro-interactions
- Choosing between implementation approaches at the detail level

**Load reference files selectively:**
- Auditing an existing page → load `references/redesign-audit.md`
- Starting a checkout or editorial page → load `references/style-archetypes.md`
- Reviewing code for AI patterns → load `references/anti-slop-patterns.md`
- Implementing complex animations → load `references/motion-choreography.md`

---

## 2. Configuration Dials

Three tunable parameters govern the intensity of taste enforcement. LGJ defaults are calibrated for conversion-focused marketing pages.

| Dial | Range | LGJ Default | What It Controls |
|------|-------|-------------|------------------|
| `DESIGN_VARIANCE` | 1–10 | **6** | 1 = perfectly symmetric, 10 = deliberate chaos. 6 = asymmetric layouts with intentional structure. |
| `MOTION_INTENSITY` | 1–10 | **5** | 1 = no animation, 10 = cinematic sequences. 5 = purposeful reveals + interactions, Core Web Vitals safe. |
| `VISUAL_DENSITY` | 1–10 | **4** | 1 = extreme whitespace, 10 = content-packed. 4 = clean conversion layouts with breathing room. |

**When to override defaults:**
- Checkout/payment pages → `DESIGN_VARIANCE: 4`, `MOTION_INTENSITY: 3` (reduce friction)
- Resource/editorial pages → `DESIGN_VARIANCE: 5`, `VISUAL_DENSITY: 3` (readability priority)
- Hero/above-fold sections → `MOTION_INTENSITY: 7` (first impression matters)

---

## 3. LGJ Brand Lock (Overrides)

When taste rules conflict with LGJ brand rules, use the Resolution column. Brand rules always win.

| Conflict | Taste Default | LGJ Rule | Resolution |
|----------|--------------|----------|------------|
| Heading font | Ban generic fonts | Big Shoulders | **Aligned.** Bold + distinctive. Use weight range 400–900, tight tracking (-0.02em to -0.04em). |
| Body font | Ban system fonts | Manrope | **Aligned.** Geometric, readable. Use 400–600 weight range. |
| Gradients | Use for surface differentiation | Banned entirely | **LGJ wins.** Use solid colors, opacity layering, tinted shadows instead. |
| Icons | Prefer Phosphor/Radix | Use Lucide | **LGJ wins.** Keep Lucide, enforce stroke consistency (strokeWidth 1.5–2.0 only). |
| Accent colors | Maximum 1 accent | Pink #ED0D51 + Blue #0144F8 | **LGJ wins.** Two brand accents allowed. Pink for CTAs/emphasis, blue for trust/secondary. |
| Pure black | Banned | No explicit rule | **Adopt taste rule.** Use slate-950 or zinc-950 instead of #000000. |
| Generic content | Banned | No explicit rule | **Adopt taste rule.** Real names, specific numbers, zero AI clichés. |
| Emojis | Banned | No explicit rule | **Adopt taste rule.** Use Lucide icons instead of emoji in all UI. |

---

## 4. Anti-Slop Rules

Full pattern library in `references/anti-slop-patterns.md`. This is the summary for fast recall.

### Visual Bans
- Equal-width columns on every layout element
- Cards forced to identical heights with `min-h`
- `text-center` on everything — center only headlines and CTAs, left-align body text
- `shadow-md` applied uniformly to all cards and buttons
- Generic hero: large heading + subtext + button + stock photo background

### Layout Bans
- Symmetric padding on every section (`py-16` everywhere)
- Predictable section order: hero → features → testimonials → pricing → CTA
- Three-column equal feature grid as the only layout pattern
- Divider `<hr>` lines between every section (use whitespace instead)

### Clarity-Over-Aesthetics Rule
- Design serves clarity. If a visual effect slows comprehension by even 1 second, remove it.
- No complex parallax on landing pages. No cognitive overload.
- Test: can a new visitor understand the offer in 4-5 seconds? If no, design is too complex.
- This doesn't mean boring — bold typography, clean spacing, and striking color all serve clarity.
- See `hero-section-designer` for the Above-Fold Constraint (6 elements max).

### Content Bans
- Generic section headings that communicate nothing when scanned: "How It Works", "Features", "About Us", "Our Process", "Why Choose Us", "What You Get" (see `conversion-copywriting` Scan-Only Headline Rule for replacements)
- Superlatives: "Revolutionary", "Game-changing", "Supercharge", "Revolutionize", "Unlock", "Seamlessly", "Cutting-edge"
- Vague social proof: "Trusted by 1,000+ companies"
- Generic testimonials: "Great product! — John D."
- Round numbers: "100+ clients", "10x growth"
- Emoji as bullet points or list markers
- Any Lorem ipsum or placeholder text shipped to production

### Code Bans
- Inline styles for positioning (`style={{ position: 'absolute', top: 20 }}`)
- `!important` more than twice per file
- `z-index` values above 50
- `motion.div` wrapping every element regardless of purpose
- Hardcoded hex colors inline instead of Tailwind classes or CSS variables

---

## 5. Premium Implementation Patterns

Apply these patterns by default when implementing components.

### Tactile Feedback
```tsx
// Button press feedback
<motion.button
  whileHover={{ scale: 1.02 }}
  whileTap={{ scale: 0.97 }}
  transition={{ type: "spring", stiffness: 400, damping: 30 }}
>

// Input focus glow — use brand color at 20% opacity
<input className="focus:ring-2 focus:ring-[#ED0D51]/20 focus:border-[#ED0D51]" />
```

### Tinted Shadows
```tsx
// Never use generic grey shadows
// Wrong:
className="shadow-md"
// Right: tinted with brand color at 5–10% opacity
className="shadow-[0_4px_24px_rgba(237,13,81,0.08)]"
// Or for cards and containers:
className="shadow-[0_2px_16px_rgba(1,68,248,0.06)]"
```

### Spring Physics
```tsx
// Standard spring for most transitions
const spring = { type: "spring", stiffness: 300, damping: 30 }

// Snappy for toggles and checkboxes
const snappy = { type: "spring", stiffness: 400, damping: 30 }

// Soft for modals and overlays
const soft = { type: "spring", stiffness: 200, damping: 25 }
```

### Skeleton Loaders
```tsx
// Match actual content shape — never generic bars
// For a testimonial card:
<div className="animate-pulse">
  <div className="flex gap-3 mb-4">
    <div className="h-10 w-10 rounded-full bg-slate-200" />   {/* avatar */}
    <div className="space-y-2 flex-1">
      <div className="h-4 w-32 rounded bg-slate-200" />       {/* name */}
      <div className="h-3 w-24 rounded bg-slate-200" />       {/* company */}
    </div>
  </div>
  <div className="space-y-2">
    <div className="h-3 w-full rounded bg-slate-200" />
    <div className="h-3 w-5/6 rounded bg-slate-200" />
    <div className="h-3 w-4/6 rounded bg-slate-200" />
  </div>
</div>
```

### Staggered Reveals
```tsx
const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.08,   // lists
      delayChildren: 0.1,
    },
  },
}
// For card grids: staggerChildren: 0.12
// For nav items: staggerChildren: 0.03

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 30 } },
}
```

### Micro-Interactions
```tsx
// Checkbox fills with spring
<motion.div
  animate={{ scale: checked ? 1 : 0 }}
  transition={{ type: "spring", stiffness: 400, damping: 30 }}
  className="h-full w-full bg-[#ED0D51] rounded-sm"
/>

// Card hover — lift 2px, tinted shadow increases
<motion.div
  whileHover={{ y: -2, boxShadow: "0 8px 32px rgba(237,13,81,0.10)" }}
  transition={{ duration: 0.2, ease: "easeOut" }}
/>

// Toggle slides with bounce
<motion.div
  layout
  transition={{ type: "spring", stiffness: 300, damping: 15 }}
  className="absolute inset-y-1 rounded-full bg-white shadow-sm"
/>
```

---

## 6. Style Archetypes

Full specs in `references/style-archetypes.md`. Load that file when starting an archetype page.

### Standard (default)
Full LGJ brand expression. All dials at default. Use for: landing pages, homepage, feature pages. Most content at this site uses Standard.

### Soft-Premium
For: checkout, payment flows, high-stakes conversions. Reduces visual noise, builds trust, slows the eye down. Key markers: double-bezel cards, 2x padding, muted pink, Manrope throughout. Motion is minimal and purposeful.

### Editorial-Minimal
For: resource pages, blog posts, documentation. Readability-first. Key markers: 720px content max-width, warm monochrome, bento grid where applicable, typography dominates, motion is nearly invisible.

---

## 7. Performance Guardrails

### GPU-Only Animation Rule
Only animate `transform` and `opacity`. These properties run on the compositor thread and never trigger layout recalculation.

```tsx
// Correct — GPU accelerated
animate={{ opacity: 1, y: 0, scale: 1 }}

// Wrong — triggers layout recalculation
animate={{ width: "100%", height: "auto", padding: "16px" }}
```

### RSC Isolation
Animations live in Client Components only. Never import Framer Motion in Server Components.

```tsx
// Add to any file using motion.*
'use client'
import { motion } from 'framer-motion'
```

### z-index Discipline Scale
| Layer | Range | Use Case |
|-------|-------|----------|
| Base | 0–9 | Normal document flow |
| Dropdown | 10–19 | Menus, popovers, tooltips |
| Sticky | 20–29 | Sticky headers, floating elements |
| Modal | 30–39 | Dialogs, drawers, lightboxes |
| Toast | 40–49 | Notifications, alerts |

Never exceed 49 without documenting why.

### Font Loading
```tsx
// In layout.tsx — preconnect before font load
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />

// Google Fonts config
const bigShoulders = Big_Shoulders_Display({
  subsets: ['latin'],
  display: 'swap',
  weight: ['400', '500', '600', '700', '800', '900'],
})

const manrope = Manrope({
  subsets: ['latin'],
  display: 'swap',
  weight: ['400', '500', '600', '700'],
})
```

### Image Optimization
```tsx
// Always use next/image
<Image
  src={src}
  alt={alt}
  width={800}
  height={600}
  loading="lazy"          // below fold
  placeholder="blur"      // blurDataURL for known images
  className="object-cover"
/>
// Above-fold hero image: loading="eager" priority={true}
```

---

## 8. Reference File Index

| File | When to Load |
|------|-------------|
| `references/redesign-audit.md` | Auditing existing pages for quality issues |
| `references/style-archetypes.md` | Starting a checkout page or editorial/resource page |
| `references/anti-slop-patterns.md` | Reviewing code for AI-generated patterns |
| `references/motion-choreography.md` | Implementing complex animations or page choreography |

Load reference files on demand — they are detail supplements, not required reading for every task. When a task is purely compositional (adding a button, updating copy), apply the core rules in sections 1–7 without loading references.