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:

css

@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:

css

: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:

xml

<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

css

: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

bash

# 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:

code

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

Lines:    ─ │ ═ ║ ━ ┃

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

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

Blocks:   █ ▓ ▒ ░

Template Files

Located in: assets/templates/