brand-agency

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Agency Brand Styling

Agency品牌样式设计

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.

如需获取Agency官方品牌标识与样式资源，可使用此技能。该风格基于新粗野主义（neobrutalism）美学，采用鲜明色彩、硬朗阴影与醒目排版。

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

主色调：

浅背景色：
```
#ffffff
```
- 浅色背景
深前景色：
```
#000000
```
- 主要文本及深色元素
柔和色：
```
#e5e5e5
```
- 浅淡背景、次要元素

主调色板：

主色（橙色）：
```
#e85d04
```
- 主要强调色、CTA按钮、高亮元素
辅助色（黄色）：
```
#ffd60a
```
- 次要强调色、警告、提示
强调色（蓝色）：
```
#3a86ff
```
- 链接、交互元素、信息提示

图表/扩展色彩：

图表绿色：
```
#38b000
```
- 成功状态、正向标识
图表红色：
```
#d62828
```
- 错误状态、破坏性操作

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;
}

字体栈：

标题：Geist ExtraBold（字重800），备选字体：Arial
正文：EB Garamond，备选字体：Georgia
等宽/代码字体：Geist Mono，备选字体：Courier New

Google Fonts导入代码：

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变量：

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

阴影：

硬朗阴影偏移：
```
4px 4px 0px 0px #000000
```
无模糊（标准差：0）
CSS代码：
```
box-shadow: 4px 4px 0px 0px #000000;
```

SVG滤镜：

<feDropShadow dx="4" dy="4" stdDeviation="0" flood-color="#000000"/>

边框：

宽度：3px
颜色：
```
#000000
```
样式：实线
圆角：0（无圆角）

核心原则：

元素间高对比度
鲜明饱和色彩
无渐变（仅纯色）
粗黑轮廓线
偏移硬朗阴影
零圆角

Application Guidelines

应用规范

SVG Graphics

SVG图形

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>

创建Agency品牌风格SVG的示例：

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)

演示文稿（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
```

按幻灯片类型设置背景：

标题页：主色橙色
```
#e85d04
```
内容页：浅色
```
#ffffff
```
或柔和色
```
#e5e5e5
```
强调页：辅助色黄色
```
#ffd60a
```
、强调色蓝色
```
#3a86ff
```
深色页：深前景色
```
#000000
```

文本颜色：

浅色背景上：
```
#000000
```
深色/彩色背景上：
```
#ffffff
```

Web/HTML

网页/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);
}

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`

使用场景	颜色	十六进制值
主要操作	橙色	`#e85d04`
次要操作	黄色	`#ffd60a`
链接/信息	蓝色	`#3a86ff`
成功状态	绿色	`#38b000`
错误/危险	红色	`#d62828`
浅色背景文本	黑色	`#000000`
深色背景文本	白色	`#ffffff`
柔和/禁用状态	灰色	`#e5e5e5`

Assets

资源文件

Logo:

assets/logo.svg

- Agency logo in neobrutalism style (terminal window with code symbols and geometric shapes)

Logo：

assets/logo.svg

- 新粗野主义风格的Agency标志（带有代码符号和几何图形的终端窗口样式）

Social Media Templates

社交媒体模板

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

采用Geist Mono字体的ASCII艺术风格HTML社交媒体模板，可通过Playwright渲染为PNG格式。

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

模板	尺寸	平台
`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

undefined

bash

undefined

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

undefined

node scripts/render-templates.js --list

undefined

ASCII Style Elements

ASCII风格元素

Templates use ASCII box-drawing characters for decoration:

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

Lines:    ─ │ ═ ║ ━ ┃

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

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

Blocks:   █ ▓ ▒ ░

模板使用ASCII框线字符进行装饰：

边框样式:   ┌─────┐  ╔═════╗  ┏━━━━━┓
          │     │  ║     ║  ┃     ┃
          └─────┘  ╚═════╝  ┗━━━━━┛

线条:    ─ │ ═ ║ ━ ┃

箭头:   → ← ↑ ↓ ▶ ◀ ▲ ▼

图形:   ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇

块元素:   █ ▓ ▒ ░

Template Files

模板文件位置

Located in:

assets/templates/

存放路径：

assets/templates/