Skip to main content

🎨 TalkOps.ai Custom Theming & Branding

Welcome to the TalkOps.ai documentation hub! This page showcases our advanced theming and branding features.

Theme Features​

Our custom theming system includes:

  • 🎨 Custom Branding: TalkOps.ai color palette with gradient effects
  • 📱 Responsive Design: Mobile-first approach with adaptive typography
  • 🌙 Dark Mode: Seamless theme switching with optimized colors
  • ♿ Accessibility: WCAG 2.1 AA compliant with keyboard navigation
  • 🎯 Typography: Inter font family with optimized spacing and hierarchy

Color Palette​

Our brand colors are carefully selected for both light and dark themes:

ColorLight ModeDark ModeUsage
Primary#1457ff#7ea6ffMain brand color
Light#3a73ff#a5c0ffHover states
Lighter#5a88ff#c4d6ffBackground accents
Lightest#8aa9ff#e2ebffSubtle highlights

Typography System​

We use the Inter font family for optimal readability:

  • H1: 2.5rem, 700 weight, gradient text
  • H2: 2rem, 600 weight, primary color
  • H3: 1.5rem, 600 weight, base color
  • Body: 16px, 1.6 line height, Inter font

Custom Components​

TalkOps Buttons​

<button className="button--talkops">
  TalkOps Button
</button>

TalkOps Cards​

<div className="card--talkops">
  <h3>Card Title</h3>
  <p>Card content with hover effects</p>
</div>

TalkOps Badges​

<span className="badge--talkops">
  New Feature
</span>

Responsive Design​

Our theming adapts seamlessly across devices:

  • Desktop: Full typography scale and spacing
  • Tablet: Optimized for touch interactions
  • Mobile: Compact layout with touch-friendly elements

Accessibility Features​

  • Keyboard Navigation: Full keyboard support with visible focus states
  • Screen Readers: Semantic HTML and ARIA labels
  • High Contrast: Support for high contrast mode
  • Reduced Motion: Respects user motion preferences
  • Color Contrast: WCAG 2.1 AA compliant ratios

Dark Mode​

Toggle between light and dark themes using the theme switcher in the navbar. Our dark mode:

  • Uses GitHub-inspired dark colors
  • Maintains excellent contrast ratios
  • Preserves brand identity
  • Optimizes for low-light reading

Optimized for printing with:

  • Clean typography without gradients
  • Removed navigation and footer
  • Full-width content layout
  • High contrast text colors

This theming system is built with modern CSS custom properties, ensuring maintainability and flexibility for future updates.