majiayu000 OpenEd Visual Brand Guidelines
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.
When to Use This 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.
Visual Identity
Color Palette
| Purpose | Color Name | Hex Value | RGB | Usage |
|---|---|---|---|---|
| Primary Orange | Thought | #f24915 | rgb(242, 73, 21) | Thought category badges, accent elements, icons |
| Primary Blue | Trend | #03a4ea | rgb(3, 164, 234) | Trend category badges, links, buttons, hover states |
| Dark Gray | Tool | #141a1f | rgb(20, 26, 31) | Tool category badges, primary text, dark elements |
| Light Gray | Border | #e0e0e0 | rgb(224, 224, 224) | Borders, dividers, subtle backgrounds |
| Background | Off-White | #fafaf6 | rgb(250, 250, 246) | Page background, light backgrounds |
| Text | Dark | #333333 | rgb(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
Typography
| Element | Font | Weight | Size | Line Height | Color | Usage |
|---|---|---|---|---|---|---|
| Headings (H1-H2) | Inter | 700 | 24-32px | 1.2 | #333 | Newsletter titles, major section headers |
| Subheadings (H3-H4) | Inter | 600 | 18-22px | 1.3 | #333 | Article titles, card headings |
| Body Text | Playfair | Regular | 16px | 1.6 | #333 | Long-form content, article text |
| Small Text | Inter | 400 | 12-14px | 1.5 | #666 | Metadata, timestamps, captions |
| Category Labels | Inter | Bold | 12px | 1.4 | White | Badge 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
Spacing & Layout
| Element | Padding/Margin | Max Width | Notes |
|---|---|---|---|
| Container | 20px (desktop), 15px (mobile) | 600px | Primary content width for emails/newsletters |
| Article Cards | 20px padding, 30px margin-bottom | N/A | White background with 1px border, 5px radius, shadow |
| Section Headers | 0 padding, 30px margin-bottom | N/A | Clear separation between content blocks |
| Icon Circles | 40px (diameter) | N/A | Positioned above cards, -20px top offset |
| Border Radius | 5px | N/A | Applied to cards, buttons, inputs |
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)
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