Back to Details

brand-guidelines

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

OpenEd Visual Brand Guidelines

OpenEd视觉品牌指南

This skill provides OpenEd's visual brand specifications for presentations, websites, digital materials, and design assets. Use this when you need color palettes, typography standards, spacing guidelines, and responsive design specifications.
此Skill提供了OpenEd针对演示文稿、网站、数字材料和设计资产的视觉品牌规范。当你需要调色板、排版标准、间距指南和响应式设计规范时，可以使用本指南。

When to Use This Skill

何时使用此Skill

Use this skill when:
  • Creating PowerPoint presentations for OpenEd
  • Designing digital materials with OpenEd branding
  • Building websites or digital assets requiring brand consistency
  • Specifying colors, fonts, and layout standards
  • Creating templates or design systems for OpenEd
For messaging, voice, narrative framework, and strategic content direction, see the 
opened-identity
skill.
在以下场景使用此Skill：
  • 创建OpenEd的PowerPoint演示文稿
  • 设计带有OpenEd品牌标识的数字材料
  • 构建需要品牌一致性的网站或数字资产
  • 指定颜色、字体和布局标准
  • 为OpenEd创建模板或设计系统
如需了解文案风格、语气、叙事框架和战略内容方向，请查看
opened-identity
Skill。

Visual Identity

视觉标识

Color Palette

调色板

PurposeColor NameHex ValueRGBUsage
Primary OrangeThought#f24915rgb(242, 73, 21)Thought category badges, accent elements, icons
Primary BlueTrend#03a4eargb(3, 164, 234)Trend category badges, links, buttons, hover states
Dark GrayTool#141a1frgb(20, 26, 31)Tool category badges, primary text, dark elements
Light GrayBorder#e0e0e0rgb(224, 224, 224)Borders, dividers, subtle backgrounds
BackgroundOff-White#fafaf6rgb(250, 250, 246)Page background, light backgrounds
TextDark#333333rgb(51, 51, 51)Primary text content
Color Usage Guidelines:
  • Orange (#f24915): Draws attention, used for primary calls-to-action and "Thought" category content
  • Blue (#03a4ea): Conveys trust and forward momentum, used for "Trend" content and secondary CTAs
  • Dark Gray (#141a1f): Professional authority, used for "Tool" category and primary text
  • Light Gray (#e0e0e0): Creates visual hierarchy and separation without harshness
  • Off-White (#fafaf6): Reduces eye strain, perfect for backgrounds and large content areas
用途颜色名称十六进制值RGB使用场景
主色调橙色Thought#f24915rgb(242, 73, 21)Thought分类徽章、强调元素、图标
主色调蓝色Trend#03a4eargb(3, 164, 234)Trend分类徽章、链接、按钮、悬停状态
深灰色Tool#141a1frgb(20, 26, 31)Tool分类徽章、正文文本、深色元素
浅灰色边框色#e0e0e0rgb(224, 224, 224)边框、分隔线、浅背景
背景色米白色#fafaf6rgb(250, 250, 246)页面背景、浅色背景区域
文本色深灰色#333333rgb(51, 51, 51)主要文本内容
颜色使用指南：
  • 橙色 (#f24915)：吸引注意力，用于主要行动召唤按钮和“Thought”类内容
  • 蓝色 (#03a4ea)：传递信任感与前进感，用于“Trend”类内容和次要行动召唤按钮
  • 深灰色 (#141a1f)：体现专业权威，用于“Tool”类内容和主要文本
  • 浅灰色 (#e0e0e0)：创建视觉层级与分隔，且不会过于生硬
  • 米白色 (#fafaf6)：减少眼部疲劳，适合作为背景和大内容区域底色

Typography

排版

ElementFontWeightSizeLine HeightColorUsage
Headings (H1-H2)Inter70024-32px1.2#333Newsletter titles, major section headers
Subheadings (H3-H4)Inter60018-22px1.3#333Article titles, card headings
Body TextPlayfairRegular16px1.6#333Long-form content, article text
Small TextInter40012-14px1.5#666Metadata, timestamps, captions
Category LabelsInterBold12px1.4WhiteBadge labels for content categories
Font Stack Guidelines:
  • Headings (Inter): System font stack: 
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
  • Body (Playfair): Serif stack: 
    Georgia, "Times New Roman", Times, serif
Typography Principles:
  • Inter is modern, clean, and scannable—perfect for headlines and navigation
  • Playfair provides warmth and readability for longer-form content
  • Maintain 1.6 line height for body text for optimal readability
  • Use font-weight 600-700 for headings to create clear hierarchy
元素字体字重字号行高颜色使用场景
标题（H1-H2）Inter70024-32px1.2#333通讯标题、主要章节标题
副标题（H3-H4）Inter60018-22px1.3#333文章标题、卡片标题
正文文本Playfair常规16px1.6#333长文内容、文章正文
小号文本Inter40012-14px1.5#666元数据、时间戳、说明文字
分类标签Inter粗体12px1.4白色内容分类的徽章标签
字体栈指南：
  • 标题字体（Inter）：系统字体栈：
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
  • 正文字体（Playfair）：衬线字体栈：
    Georgia, "Times New Roman", Times, serif
排版原则：
  • Inter字体现代、简洁且易读，非常适合标题和导航
  • Playfair字体为长文内容增添温度与可读性
  • 正文字体保持1.6倍行高以优化可读性
  • 标题使用600-700字重，明确视觉层级

Spacing & Layout

间距与布局

ElementPadding/MarginMax WidthNotes
Container20px (desktop), 15px (mobile)600pxPrimary content width for emails/newsletters
Article Cards20px padding, 30px margin-bottomN/AWhite background with 1px border, 5px radius, shadow
Section Headers0 padding, 30px margin-bottomN/AClear separation between content blocks
Icon Circles40px (diameter)N/APositioned above cards, -20px top offset
Border Radius5pxN/AApplied to cards, buttons, inputs
元素内边距/外边距最大宽度说明
容器20px（桌面端），15px（移动端）600px邮件/通讯的主要内容宽度
文章卡片20px内边距，30px底部外边距无白色背景搭配1px边框、5px圆角、阴影效果
章节标题0内边距，30px底部外边距无清晰分隔内容区块
图标圆形区域40px（直径）无置于卡片上方，向上偏移-20px
圆角5px无应用于卡片、按钮、输入框

Shadow & Depth

阴影与层次感

  • Card Shadow: 
    0 4px 8px rgba(0,0,0,0.1)
    (default)
  • Card Shadow on Hover: 
    0 6px 12px rgba(0,0,0,0.15)
    (interactive)
  • Icon Shadow: 
    0 2px 4px rgba(0,0,0,0.2)
    (subtle depth)
  • 卡片阴影：
    0 4px 8px rgba(0,0,0,0.1)
    （默认）
  • 卡片悬停阴影：
    0 6px 12px rgba(0,0,0,0.15)
    （交互状态）
  • 图标阴影：
    0 2px 4px rgba(0,0,0,0.2)
    （轻微层次感）

Responsive Breakpoints

响应式断点

  • Desktop: 600px+ (standard)
  • Mobile: < 600px (media query adjustments)
  • Small Mobile: < 480px (additional scaling)
Mobile Adjustments:
  • Reduce heading size to 24px (from 28px)
  • Reduce padding to 15px (from 20px)
  • Scale icons to 0.9x
  • Maintain 600px max-width constraint
  • 桌面端：600px及以上（标准）
  • 移动端：小于600px（媒体查询调整）
  • 小屏移动端：小于480px（额外缩放）
移动端调整说明：
  • 标题字号从28px缩小至24px
  • 内边距从20px缩小至15px
  • 图标缩放至0.9倍
  • 维持600px最大宽度限制