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.