Brand Guidelines

OpenCode Brand Styling

Overview

To access OpenCode's official brand identity and style resources, use this skill.

Keywords: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, OpenCode brand, visual formatting, visual design

Brand Guidelines

Colors

Main Colors (based on OpenCode default dark theme):

• Primary/Dark: System terminal background (uses "none" - adapts to terminal)
• Text: System terminal foreground (uses "none" - adapts to terminal)
• Primary Accent: Used for actions and highlights
• Secondary Accent: Used for secondary elements
• Success Green: Used for success states
• Error Red: Used for error states
• Warning Yellow: Used for warnings
• Info Blue: Used for informational elements

Recommended Color Palette (for external artifacts):

When creating artifacts for use outside OpenCode terminal, use these colors:

• Dark Background: #1a1b26 or #1e1e2e (based on Nord/dark themes)
• Light Background: #eceff4 or #d8dee9 (based on Nord light themes)
• Text (Dark): #d8dee9 or #eceff4
• Text (Light): #2e3440 or #434c5e
• Accent Blue: #81a1c1 or #88c0d0
• Accent Green: #a3be8c or #8fbcbb
• Accent Purple: #b48ead or #d08770
• Accent Yellow: #ebcb8b or #bf616a

Typography

• Headings/Code: JetBrains Mono, Fira Code, or any modern monospace font
• Body Text: System sans-serif (Inter, San Francisco, or equivalent)
• Note: Use monospace fonts for code, technical content, and maintain readability with system fonts for general text

Features

Smart Font Application

• Applies monospace fonts to code blocks, headings (24pt and larger)
• Applies system sans-serif fonts to body text
• Automatically falls back to system defaults if custom fonts unavailable
• Preserves readability across all systems

Text Styling

• Code blocks and headings (14pt+): Monospace font
• Body text: System sans-serif font
• Smart color selection based on background (dark/light)
• Preserves text hierarchy and formatting

Shape and Accent Colors

• Non-text shapes use accent colors from palette
• Cycles through blue, green, purple, and yellow accents
• Maintains visual interest while staying on-brand
• Supports both dark and light modes

Technical Details

Font Management

• Uses system-installed JetBrains Mono or Fira Code when available
• Provides automatic fallback to system monospace fonts
• No font installation required - works with existing system fonts
• For best results, install JetBrains Mono or Fira Code in your environment

Color Application

• Uses RGB color values for precise brand matching
• Applied via python-pptx's RGBColor class or similar
• Maintains color fidelity across different systems
• Supports both dark and light modes

Usage Guidelines

When to Use

• Creating presentation slides, reports, or documents
• Designing visual assets or graphics
• Applying consistent styling across multiple artifacts
• Creating branded materials for OpenCode-related content

Best Practices

• Use monospace fonts for code and technical content
• Apply accent colors sparingly for maximum impact
• Ensure sufficient contrast between text and background
• Consider dark/light mode when choosing colors
• Test color combinations in both light and dark contexts

Purpose

Apply consistent brand styling to any artifact: documents, presentations, web pages, or marketing materials.

Core Brand Elements

Colors

Define your brand palette with CSS variables:

:root {
  --brand-primary: #1a73e8;
  --brand-secondary: #34a853;
  --brand-accent: #ea4335;
  --brand-dark: #202124;
  --brand-light: #f8f9fa;
  --brand-text: #3c4043;
  --brand-text-muted: #5f6368;
}

Typography

/* Primary font for headings */
--font-display: 'Product Sans', 'Google Sans', system-ui;

/* Body font */
--font-body: 'Roboto', 'Inter', -apple-system, sans-serif;

/* Monospace for code */
--font-mono: 'Roboto Mono', 'Fira Code', monospace;

/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;

Spacing

--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;

Application Examples

Buttons

.btn-primary {
  background: var(--brand-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
}

Cards

.card {
  background: white;
  border: 1px solid var(--brand-light);
  border-radius: 8px;
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Headers

h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--brand-dark);
  font-weight: 500;
}

Document Templates

Google Docs

• Heading 1: Display font, 24pt, Brand Dark
• Heading 2: Display font, 18pt, Brand Primary
• Body: Body font, 11pt, Brand Text
• Links: Brand Primary, underlined

Presentations

• Title slides: White text on Brand Primary background
• Content slides: Brand Dark text on white
• Accent elements: Brand Secondary or Accent

Best Practices

1. Consistency: Use exact brand colors, never approximate
2. Contrast: Ensure 4.5:1 minimum for text readability
3. Hierarchy: Use size and weight to establish importance
4. Whitespace: Generous spacing feels premium
5. Logo usage: Maintain clear space around logo