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:

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:

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/