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

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.