| 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.
