agentman-styleguide

# Agentman Style Guide

## Overview

This skill provides the comprehensive Agentman design system for building professional, trust-inspiring interfaces. The system emphasizes restraint, consistency, and clarity—avoiding the "AI-generated" aesthetic of gradients, glassmorphism, and excessive animations.

## When to Use This Skill

- Creating React/Next.js components with Tailwind CSS
- Building landing pages, marketing sites, or product UI
- Designing presentations, documents, or visual assets
- Reviewing designs for brand consistency
- Writing marketing copy, CTAs, or headlines

## Core Design Principles

1. **Trust through restraint** - Professional, clean design builds credibility
2. **Consistency = professionalism** - Predictable patterns reduce cognitive load
3. **Clarity = competence** - Clear communication demonstrates expertise

## Quick Reference

### Tech Stack
- Next.js 14.2.5 (Pages Router)
- Tailwind CSS 3.4
- Shadcn/UI (New York style)
- lucide-react icons
- Framer Motion (sparingly)

### Key Color Decisions

| Element | Color Token | HEX |
|---------|-------------|-----|
| Body text | `charcoal-950` | `#141413` |
| Headings | `charcoal-950` | `#141413` |
| Primary CTA | `agentman-500` | `#CC785C` |
| CTA hover | `agentman-600` | `#A65945` |
| Title accent | `agentman-400` | `#D97757` |
| Section bg light | `agentman-75` | `#F0EEE6` |
| Section bg medium | `agentman-150` | `#E3DACC` |

### Button Hierarchy

1. **Primary** (orange) - Page-level CTAs only: `bg-agentman-500 hover:bg-agentman-600 text-white`
2. **Secondary** (dark) - Important actions: `bg-charcoal-950 text-agentman-50`
3. **Tertiary** (neutral) - Card buttons: `bg-white border border-gray-300 text-gray-900`
4. **Outline** - Less emphasis: `border-slate-300 text-slate-900`

### Critical Rules

**ALWAYS:**
- Use `charcoal-950` for all body text
- Use solid backgrounds (white, `agentman-75`, `agentman-150`)
- Use one consistent icon color per section
- Keep animations subtle (color/shadow transitions only)
- Use `viewport={{ once: true }}` on scroll animations

**NEVER:**
- Gradients on buttons or text
- Glassmorphism (`backdrop-blur`, `bg-white/60`)
- Floating orbs or blur blobs
- Rainbow icons (different colors per icon)
- `whileHover={{ scale }}` or lift effects
- `rounded-3xl` (use `rounded-lg` or `rounded-xl`)

## Workflow

### For New Components

1. Read `references/components.md` for code patterns
2. Apply colors from `references/colors.md`
3. Follow typography from `references/typography.md`
4. Check against `references/anti-patterns.md`
5. Verify with implementation checklist below

### For Marketing Copy

1. Read `references/voice-tone.md` for guidelines
2. Use clear, specific language (no buzzwords)
3. Write CTAs as actions ("Start building" not "Learn more")

### For Design Reviews

1. Run through implementation checklist
2. Check `references/anti-patterns.md` for violations
3. Verify color/typography consistency

## Implementation Checklist

Before shipping any component:

- [ ] Primary CTAs use `agentman-500` (not gradients)
- [ ] Hover states use `agentman-600`
- [ ] Card buttons use neutral colors (white bg, gray border)
- [ ] All body text uses `charcoal-950`
- [ ] Backgrounds are solid (no glassmorphism)
- [ ] Section backgrounds alternate: white → agentman-75 → agentman-150
- [ ] No floating orbs or blur blobs
- [ ] Animations are subtle (color/shadow only)
- [ ] Icons use consistent colors within sections
- [ ] Border radius is `rounded-lg` or `rounded-xl`
- [ ] Only one H1 per page
- [ ] WCAG AA contrast maintained (4.5:1)

## Resources

This skill includes detailed reference documentation:

- `references/colors.md` - Complete color palette with usage guidelines
- `references/typography.md` - Font families, type scale, examples
- `references/components.md` - Button, card, badge, hero, tab patterns with code
- `references/spacing.md` - Spacing system and container widths
- `references/animations.md` - Allowed animations and timing
- `references/voice-tone.md` - Writing guidelines, CTAs, headlines
- `references/anti-patterns.md` - What NOT to do with examples

To use detailed specifications, read the appropriate reference file for the task at hand.