brand-guidelines

name	brand-guidelines
description	Applies Open Session's official brand colors and typography to any sort of artifact that may benefit from having our brand's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

Open Session Brand Styling

Overview

To access Open Session's official brand identity and style resources, use this skill. Open Session is a design consultancy democratizing Fortune 500-level design through AI augmentation, design systems expertise, and education.

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

Brand Guidelines

Colors

Primary Palette:

• Charcoal: #191919 - Primary background color (dark mode), primary text on light backgrounds. Use for 45-50% of composition.
• Vanilla: #FFFAEE - Primary light background, text on dark backgrounds. Use for 45-50% of composition.
• Aperol: #FE5102 - Primary accent color for CTAs, highlights, interactive elements. MAXIMUM 10% of composition.

Grayscale System:

• Black: #000000 - Pure black (rare use)
• Black-90: #1E1E1E - Near-black alternatives
• Black-80: #383838 - Dark grays
• Black-70: #4A4A4A - Interface borders
• Black-60: #595959 - Disabled states
• Black-50: #787878 - Mid-gray
• Black-40: #A3A3A3 - Subtle text
• Black-30: #C7C7C7 - Light borders
• Black-20: #DDDDE0 - Light backgrounds
• Black-10: #F0F0F0 - Near-white
• White: #FFFFFF - Pure white

Typography

• Display Font: Neue Haas Grotesk Display Pro (with system-ui, sans-serif fallback)

  • Weights: 400 (Roman), 500 (Medium), 700 (Bold)
  • Use for: Large headings (Display 1, Display 2, H1-H2), presentations, hero text

• Body/Text Font: Neue Haas Grotesk Text Pro (with system-ui, sans-serif fallback)

  • Weights: 400 (Roman), 500 (Medium), 700 (Bold)
  • Use for: Body text, paragraphs, captions, labels, buttons

• Mono/Accent Font: Offbit (with ui-monospace, SFMono-Regular, monospace fallback)

  • Weights: 400 (Regular), 700 (Bold)
  • Use for: H5-H6 subheadings, code snippets, technical content, personality accents
  • Rule: Maximum 2 instances of Offbit per viewport

Font Fallback Stack:

• Display: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif
• Text: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif
• Mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

Logo & Assets

• Logo location: /public/assets/logos/
• Icon set: IBM Icon Library (2000+ icons), accessed via dedicated Figma branch
• Illustrations: Sigma (Counterfeit Works) - Shapes Vol.1 & Vol.2
• Fonts location: /public/assets/fonts/
• Image style: Photography-first with 6 creative territories (Auto, Lifestyle, Move, Escape, Work, Feel)

Brand Personality

• Mission: Democratizing Fortune 500-level design through AI augmentation, design systems, and education
• Tone: Friendly, creative, relatable, intelligent, approachable
• Core Traits:
  • Instructional content: Friendly + Creative (warm, clear, supportive)
  • AI/Innovation content: Visionary + Creative (forward-thinking, experimental)
  • Internal comms: Friendly + Creative (casual, collaborative)
  • Business/Enterprise: Visionary + Friendly (professional, credible)

Features

Smart Font Application

• Applies Neue Haas Grotesk Display Pro to display text and large headings (H1-H2)
• Applies Neue Haas Grotesk Text Pro to body text, buttons, labels
• Applies Offbit to H5-H6 subheadings for personality (max 2 per viewport)
• Automatically falls back to system fonts if custom fonts unavailable
• Preserves readability across all systems

Text Styling

• Display text (60px+): Neue Haas Grotesk Display Pro Bold
• Headings H1-H4: Neue Haas Grotesk Display Pro (Bold or Medium)
• Headings H5-H6: Offbit (Regular)
• Body text: Neue Haas Grotesk Text Pro Roman
• Buttons/Labels: Neue Haas Grotesk Text Pro Medium
• Smart color selection based on background (Charcoal on Vanilla, Vanilla on Charcoal)
• Preserves text hierarchy and formatting
• Maintains WCAG AAA contrast standards

Color Application Rules

• Background colors: Only Vanilla or Charcoal (alternate for rhythm)
• Text colors: Charcoal on Vanilla, Vanilla on Charcoal
• Aperol usage: Maximum 10% of composition, prefer on Charcoal backgrounds
• Aperol text: Only for numbers in lists or subheadings (never body copy)
• Accent elements: CTAs, highlights, interactive elements, decorative shapes
• Maintain 45-50% Vanilla, 45-50% Charcoal, max 10% Aperol ratio

Usage Guidelines

When to Apply This Skill

Use this skill when creating:

• Presentations (PPTX) for clients or speaking engagements
• Documents (DOCX, PDF) for proposals, case studies, reports
• Marketing materials (social graphics, newsletters, web assets)
• Educational content (course materials, templates, workshops)
• Internal documentation and brand resources
• Any branded content for Open Session

Color Usage Rules

Background Rules:

• Only use Vanilla (#FFFAEE) or Charcoal (#191919) as primary backgrounds
• Never use Aperol as a primary background
• Alternate between Vanilla and Charcoal sections for visual rhythm
• Maintain 45-50% composition for each primary color

Text Rules:

• On Vanilla backgrounds: Use Charcoal (#191919) text ONLY
• On Charcoal backgrounds: Use Vanilla (#FFFAEE) text ONLY
• Aperol text: Only for numbers in lists or subheadings on Charcoal
• Never use Aperol for body copy or large headlines
• Always maintain WCAG AAA contrast (Vanilla/Charcoal pairing exceeds this)

Accent Usage (Aperol):

• Maximum 10% of any composition
• Preferred on Charcoal backgrounds for better accessibility (AA compliant)
• Use sparingly on Vanilla backgrounds
• Best for: CTAs, highlights, interactive elements, decorative shapes
• Never for: Large text blocks, primary navigation, body content

Accessibility Standards:

• Vanilla + Charcoal pairing: WCAG AAA (highest standard)
• Aperol on Charcoal: WCAG AA (meets minimum)
• Aperol on Vanilla: Borderline, use very sparingly
• Interactive elements: Minimum 44x44px touch targets
• Glass effects: Decorative only, never for functional elements

Typography Rules

Hierarchy:

• Display 1 (60-160px): Neue Haas Display Pro Bold - Hero text, major headings
• Display 2 (38-120px): Neue Haas Display Pro Bold - Secondary display
• Heading 1 (32-56px): Neue Haas Display Pro Bold - Page titles
• Heading 2 (28-48px): Neue Haas Display Pro Bold - Section titles
• Heading 3 (24-40px): Neue Haas Display Pro Medium - Subsections
• Heading 4 (22-32px): Neue Haas Display Pro Medium - Minor headings
• Heading 5 (20-28px): Offbit Regular - Accent subheadings (personality)
• Heading 6 (18-24px): Offbit Regular - Small accent headings
• Body 1 (20px): Neue Haas Text Pro Roman - Main body text
• Body 2 (16px): Neue Haas Text Pro Roman - Secondary text
• Button (16px): Neue Haas Text Pro Medium - Interactive elements
• Caption/Label (12px): Neue Haas Text Pro - Small text

Font Application Rules:

• Minimum 2 size steps between hierarchy levels for contrast
• Use bold for emphasis, not just sizing up
• Offbit: Maximum 2 instances per viewport (adds personality without overwhelming)
• Line height: 1.2 for headings, 1.5 for body text
• Letter spacing: Negative for large display text, normal for body
• Never use Offbit for body text or formal documentation

Technical Details

Font Management

• Uses system-installed Neue Haas Grotesk Display Pro, Neue Haas Grotesk Text Pro, and Offbit when available
• Provides automatic fallback to system-ui, sans-serif, and monospace families
• No font installation required - works with existing system fonts
• For best results, install Neue Haas Grotesk and Offbit fonts from /public/assets/fonts/
• Font files use .woff2 format for web compatibility
• Font display: swap (ensures text remains visible during font loading)

Color Application

• Uses RGB and hex color values for precise brand matching
• Charcoal: RGB(25, 25, 25) / #191919
• Vanilla: RGB(255, 250, 238) / #FFFAEE
• Aperol: RGB(254, 81, 2) / #FE5102
• Applied via CSS custom properties and Tailwind configuration
• Maintains color fidelity across different systems and platforms

Design Tokens

Color tokens defined in tokens.css:

--color-brand-charcoal: #191919;
--color-brand-vanilla: #FFFAEE;
--color-brand-aperol: #FE5102;

Typography tokens:

--font-display: "Neue Haas Grotesk Display Pro", system-ui, sans-serif;
--font-text: "Neue Haas Grotesk Text Pro", system-ui, sans-serif;
--font-mono: Offbit, ui-monospace, monospace;

Responsive Typography Scale

Open Session uses a mobile-first responsive type scale:

• Mobile: Base sizes optimized for 375px-767px screens
• Tablet: Scaled up for 768px-1023px screens
• Desktop: Full scale for 1024px+ screens

Example: Display 1 scales from 60px (mobile) → 112px (tablet) → 160px (desktop)

---

Brand Philosophy

Open Session embodies creative vision through friendly, approachable design. We're building the future of AI-assisted creativity while maintaining human warmth and accessibility.

Core Principles:

• Experimentation is encouraged - we're early in our journey
• Accessibility first - all primary colors meet WCAG standards
• Modern credibility - balance innovation with professional polish
• Human warmth - technology should feel approachable, not cold
• Democratize design - make Fortune 500-level design accessible to all

Remember: Every design decision should balance innovation with human warmth. We are building an approachable future.