---
name: "Brand agency"
repo: https://github.com/glebis/claude-skills
source: https://github.com/glebis/claude-skills/blob/HEAD/brand-agency/SKILL.md
license: "MIT"
install: "npx skills add glebis/claude-skills --skill brand-agency"
page: https://100xlab.com/resources/agent-skills/glebis-claude-skills--brand-agency--pcktj4
---
# 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: ``
**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
```
### 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:
```
Frames: ┌─────┐ ╔═════╗ ┏━━━━━┓
│ │ ║ ║ ┃ ┃
└─────┘ ╚═════╝ ┗━━━━━┛
Lines: ─ │ ═ ║ ━ ┃
Arrows: → ← ↑ ↓ ▶ ◀ ▲ ▼
Shapes: ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇
Blocks: █ ▓ ▒ ░
```
### Template Files
Located in: `assets/templates/`
---
## Supporting file: .claude-plugin/plugin.json
```json
{
"name": "brand-agency",
"description": "Applies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interf",
"author": {
"name": "Gleb Kalinin"
},
"repository": "https://github.com/glebis/claude-skills",
"license": "MIT"
}
```