Brand Agency Skill for Claude

Agency Brand Styling

Overview

To access Agency's official brand identity and style resources, use this skill. The style is based on neobrutalism aesthetic with bold colors, hard shadows, and strong typography.

Brand Guidelines

Colors

Main Colors:

• Background Light: #ffffff - Light backgrounds
• Foreground Dark: #000000 - Primary text and dark elements
• Muted: #e5e5e5 - Subtle backgrounds, secondary elements

Primary Palette:

• Primary (Orange): #e85d04 - Main accent, CTAs, highlights
• Secondary (Yellow): #ffd60a - Secondary accent, warnings, attention
• Accent (Blue): #3a86ff - Links, interactive elements, info

Chart/Extended Colors:

• Chart Green: #38b000 - Success states, positive indicators
• Chart Red: #d62828 - Error states, destructive actions

Typography

Font Stack:

• Headings: Geist ExtraBold (weight 800), fallback: Arial
• Body Text: EB Garamond, fallback: Georgia
• Monospace/Code: Geist Mono, fallback: Courier New

Google Fonts Import:

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Geist:wght@800&family=Geist+Mono:wght@400;500&display=swap');

CSS Variables:

:root {
  --font-body: 'EB Garamond', Georgia, serif;
  --font-heading: 'Geist', Arial, sans-serif;
  --font-mono: 'Geist Mono', 'Courier New', monospace;
}

Neobrutalism Style

Shadows:

• Hard shadow offset: 4px 4px 0px 0px #000000
• No blur (stdDeviation: 0)
• CSS: box-shadow: 4px 4px 0px 0px #000000;
• SVG filter: <feDropShadow dx="4" dy="4" stdDeviation="0" flood-color="#000000"/>

Borders:

• Width: 3px
• Color: #000000
• Style: solid
• Border radius: 0 (no rounded corners)

Key Principles:

• High contrast between elements
• Bold, saturated colors
• No gradients (flat colors only)
• Strong black outlines
• Offset hard shadows
• Zero border radius

Application Guidelines

SVG Graphics

To create SVG in Agency brand style:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
      <feDropShadow dx="4" dy="4" stdDeviation="0" flood-color="#000000" flood-opacity="1"/>
    </filter>
  </defs>

  <circle cx="200" cy="200" r="80"
    fill="#e85d04"
    stroke="#000000"
    stroke-width="3"
    filter="url(#shadow)"/>
</svg>

Presentations (Marp/PowerPoint)

Slide backgrounds by type:

• Title slides: Primary Orange #e85d04
• Content slides: Light #ffffff or Muted #e5e5e5
• Accent slides: Secondary Yellow #ffd60a, Accent Blue #3a86ff
• Dark slides: Foreground #000000

Text colors:

• On light backgrounds: #000000
• On dark/colored backgrounds: #ffffff

Web/HTML

:root {
  /* Colors */
  --color-background: #ffffff;
  --color-foreground: #000000;
  --color-primary: #e85d04;
  --color-secondary: #ffd60a;
  --color-accent: #3a86ff;
  --color-success: #38b000;
  --color-error: #d62828;
  --color-muted: #e5e5e5;

  /* Typography */
  --font-body: 'EB Garamond', Georgia, serif;
  --font-heading: 'Geist', Arial, sans-serif;
  --font-mono: 'Geist Mono', 'Courier New', monospace;

  /* Shadows */
  --shadow: 4px 4px 0px 0px #000000;
  --shadow-sm: 2px 2px 0px 0px #000000;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
}

/* Body */
body {
  font-family: var(--font-body);
  color: var(--color-foreground);
  background: var(--color-background);
}

/* Buttons */
.btn {
  background: var(--color-primary);
  color: white;
  border: 3px solid var(--color-foreground);
  box-shadow: var(--shadow);
  border-radius: 0;
  font-family: var(--font-heading);
  font-weight: 800;
}

/* Cards */
.card {
  background: var(--color-background);
  border: 3px solid var(--color-foreground);
  box-shadow: var(--shadow);
  border-radius: 0;
}

/* Code */
code, pre {
  font-family: var(--font-mono);
  background: var(--color-foreground);
  color: white;
  border: 3px solid var(--color-foreground);
}

Color Usage Quick Reference

| Context | Color | Hex |

|---------|-------|-----|

| Primary action | Orange | #e85d04 |

| Secondary action | Yellow | #ffd60a |

| Links/Info | Blue | #3a86ff |

| Success | Green | #38b000 |

| Error/Danger | Red | #d62828 |

| Text (light bg) | Black | #000000 |

| Text (dark bg) | White | #ffffff |

| Muted/Disabled | Gray | #e5e5e5 |

Assets

Logo: assets/logo.svg - Agency logo in neobrutalism style (terminal window with code symbols and geometric shapes)

Social Media Templates

ASCII-art style HTML templates for social media using Geist Mono font. Render to PNG using Playwright.

Available Templates

| Template | Size | Platform |

|----------|------|----------|

| instagram/story-announcement | 1080x1920 | IG Story |

| instagram/story-quote | 1080x1920 | IG Story |

| instagram/post-title | 1080x1350 | IG Post |

| instagram/post-tips | 1080x1350 | IG Post |

| instagram/post-event | 1080x1350 | IG Post |

| youtube/thumbnail | 1280x720 | YT Thumbnail |

| youtube/shorts-cover | 1080x1920 | YT Shorts |

| social/cover-banner | 1584x396 | LinkedIn/FB |

| social/tiktok | 1080x1920 | TikTok |

| social/twitter-post | 1200x675 | X/Twitter |

| social/pinterest-pin | 1000x1500 | Pinterest |

Usage

# Render all templates
node scripts/render-templates.js

# Render specific template
node scripts/render-templates.js --template instagram/story-announcement

# Custom output path
node scripts/render-templates.js -t youtube/thumbnail -o my-thumbnail.png

# List available templates
node scripts/render-templates.js --list

ASCII Style Elements

Templates use ASCII box-drawing characters for decoration:

Frames:   ┌─────┐  ╔═════╗  ┏━━━━━┓
          │     │  ║     ║  ┃     ┃
          └─────┘  ╚═════╝  ┗━━━━━┛

Lines:    ─ │ ═ ║ ━ ┃

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

Shapes:   ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇

Blocks:   █ ▓ ▒ ░

Template Files

Located in: assets/templates/