@birhaus/themes

Industry-specific themes for the BIRHAUS design system with cognitive load optimized color palettes.

Installation

npm install @birhaus/themes

Available Themes

Financial Theme

Optimized for financial applications and church administration.

import { financialTheme } from '@birhaus/themes'

// Colors designed for financial data clarity
const theme = {
  colors: {
    primary: '#0F766E',      // Trustworthy teal
    success: '#059669',      // Positive financial green
    warning: '#D97706',      // Attention amber
    error: '#DC2626',        // Alert red
    background: '#F8FAFC',   // Clean background
    surface: '#FFFFFF',      // Pure surface
    textPrimary: '#1F2937',  // High contrast text
    textSecondary: '#6B7280' // Supporting text
  }
}

Healthcare Theme

Designed for medical and wellness applications.

import { healthcareTheme } from '@birhaus/themes'

// Calming blues and clinical whites
const medicalApp = (
  <BirhausProvider theme={healthcareTheme}>
    <HealthDashboard />
  </BirhausProvider>
)

Education Theme

Vibrant theme for educational platforms.

import { educationTheme } from '@birhaus/themes'

// Engaging colors for learning environments
const learningPlatform = (
  <BirhausProvider theme={educationTheme}>
    <StudentDashboard />
  </BirhausProvider>
)

Usage

With BirhausProvider

import { BirhausProvider } from '@birhaus/provider'
import { financialTheme } from '@birhaus/themes'

function App() {
  return (
    <BirhausProvider theme={financialTheme}>
      <YourApp />
    </BirhausProvider>
  )
}

CSS Custom Properties

Each theme provides CSS variables for integration:

/* Financial theme variables */
:root {
  --birhaus-primary: #0F766E;
  --birhaus-success: #059669;
  --birhaus-warning: #D97706;
  --birhaus-error: #DC2626;
  --birhaus-background: #F8FAFC;
}

Color Psychology

Financial Theme

• Teal Primary: Conveys trust and stability
• Green Success: Positive financial outcomes
• Amber Warning: Attention without panic
• High Contrast: Accessible for data-heavy interfaces

Healthcare Theme

• Calming Blues: Reduce anxiety in medical settings
• Clean Whites: Clinical and professional
• Soft Grays: Gentle on the eyes for long sessions

Education Theme

• Vibrant Orange: Stimulates learning and creativity
• Warm Colors: Create engaging learning environments
• Good Contrast: Accessibility for all learners

Cognitive Load Optimization

All themes follow BIRHAUS principles:

• Limited Color Palette: Maximum 5-7 semantic colors
• High Contrast Ratios: WCAG AAA compliance where possible
• Consistent Semantics: Same meaning across all themes
• Cultural Sensitivity: Appropriate for Spanish-speaking users

Customization

Create custom themes extending base patterns:

import { createBirhausTheme } from '@birhaus/themes'

const customTheme = createBirhausTheme({
  colors: {
    primary: '#your-brand-color',
    // ... other overrides
  },
  typography: {
    // Custom font stacks
  }
})

Real-world Applications

• IPU PY Admin: Financial theme for church administration
• Hospital Systems: Healthcare theme for patient management
• School Platforms: Education theme for student portals

License

MIT - see LICENSE for details.