brand-agency

Agency 品牌样式

概述

如需获取 Agency 的官方品牌标识与样式资源，请使用此技能。样式采用新粗野主义美学，特点是大胆的色彩、硬阴影和醒目的排版。

品牌指南

颜色

主色：

• 浅色背景：#ffffff - 浅色背景
• 深色前景：#000000 - 主要文本和深色元素
• 柔和色：#e5e5e5 - 低调的背景、次要元素

主色板：

• 主色（橙色）：#e85d04 - 主要强调色、CTA、突出显示
• 次要色（黄色）：#ffd60a - 次要强调色、警告、提示
• 强调色（蓝色）：#3a86ff - 链接、交互元素、信息

图表/扩展色：

• 图表绿色：#38b000 - 成功状态、积极指标
• 图表红色：#d62828 - 错误状态、破坏性操作

字体排版

字体栈：

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

Google Fonts 导入：

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

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

新粗野主义风格

阴影：

• 硬阴影偏移：4px 4px 0px 0px #000000
• 无模糊（stdDeviation: 0）
• CSS：box-shadow: 4px 4px 0px 0px #000000;
• SVG 滤镜：<feDropShadow dx="4" dy="4" stdDeviation="0" flood-color="#000000"/>

边框：

• 宽度：3px
• 颜色：#000000
• 样式：实线
• 圆角半径：0（不使用圆角）

核心原则：

• 元素之间保持高对比度
• 使用醒目、饱和的颜色
• 不使用渐变（仅使用纯色）
• 使用醒目的黑色描边
• 使用偏移硬阴影
• 圆角半径为零

应用指南

SVG 图形

如需创建 Agency 品牌风格的 SVG：

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

演示文稿（Marp/PowerPoint）

按类型设置幻灯片背景：

• 标题幻灯片：主色橙色 #e85d04
• 内容幻灯片：浅色 #ffffff 或柔和色 #e5e5e5
• 强调幻灯片：次要色黄色 #ffd60a、强调色蓝色 #3a86ff
• 深色幻灯片：前景色 #000000

文本颜色：

• 浅色背景上：#000000
• 深色/彩色背景上：#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);
}

颜色使用速查

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

资源

徽标： assets/logo.svg - 新粗野主义风格的 Agency 徽标（带有代码符号和几何图形的终端窗口）

社交媒体模板

使用 Geist Mono 字体的 ASCII 艺术风格 HTML 模板，适用于社交媒体。使用 Playwright 渲染为 PNG。

可用模板

模板	尺寸	平台
instagram/story-announcement	1080x1920	IG 快拍
instagram/story-quote	1080x1920	IG 快拍
instagram/post-title	1080x1350	IG 帖子
instagram/post-tips	1080x1350	IG 帖子
instagram/post-event	1080x1350	IG 帖子
youtube/thumbnail	1280x720	YT 缩略图
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

用法

# 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 风格元素

模板使用 ASCII 制表符号进行装饰：

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

Lines:    ─ │ ═ ║ ━ ┃

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

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

Blocks:   █ ▓ ▒ ░

模板文件

位于：assets/templates/