Congruence Hugo Theme

Status: Planned

This project is currently in development. The theme powers the Congruence Foundation website and will be released as an open-source project.

Project Overview

The Congruence Hugo Theme is a modern, accessible website theme built specifically for non-profit organizations, foundations, and NGOs. It prioritizes accessibility, performance, and ease of use while providing all the features organizations need to communicate their mission effectively.

Repository

GitHub: https://github.com/congruence-foundation/congruence-hugo-theme (coming soon)

Key Features

Accessibility First

• WCAG 2.1 AA Compliance: Full adherence to web accessibility guidelines
• Screen Reader Optimized: Proper ARIA labels and semantic HTML
• Keyboard Navigation: Complete site navigation without a mouse
• High Contrast Support: Readable in all viewing conditions
• Skip to Content: Quick navigation for assistive technology users

Multilingual Support

• Built-in internationalization (i18n)
• Language switcher component
• RTL language support ready
• Separate content directories per language
• Localized date and number formatting

Modern Technology Stack

• Hugo: Fast static site generator
• Tailwind CSS: Utility-first CSS framework
• Alpine.js: Lightweight JavaScript interactivity
• Chart.js: Interactive data visualizations
• PostCSS: Modern CSS processing

Content Types

• Projects: Showcase initiatives with status tracking
• Publications: Research papers and reports with abstracts
• Resources: Downloadable tools and guides
• Board Members: Team profiles with photos
• Testimonials: Community feedback display
• Partners: Logo grid with links

Components

• Responsive navigation with mobile menu
• Hero sections with parallax effects
• Card grids for content display
• Call-to-action buttons
• Newsletter signup forms
• Cookie consent banner
• Breadcrumb navigation
• Social sharing buttons

Performance

• Optimized asset pipeline
• Lazy loading images
• Minified CSS/JS in production
• Fast build times (<1 second typical)
• Small bundle size

Technical Specifications

Requirements

• Hugo Extended v0.110.0 or later
• Node.js 18+ (for Tailwind CSS)
• npm or yarn

Installation

# Clone into your Hugo themes directory
git clone https://github.com/congruence-foundation/congruence-hugo-theme themes/congruence

# Install dependencies
npm install

# Run development server
hugo server

Configuration

# hugo.toml
theme = 'congruence'

[params]
  foundationName = "Your Organization"
  foundationTagline = "Your Tagline"
  description = "Organization description"
  logo = "/img/logo.png"

[params.homepage]
  hideProjects = false
  hideTestimonials = false
  hidePartners = false

Shortcodes Included

Customization

Theming

• CSS custom properties for colors
• Configurable typography scale
• Flexible spacing system
• Dark mode ready (planned)

Layouts

• Modular partial templates
• Override-friendly structure
• Block-based page layouts
• Custom archetype templates

Roadmap

Phase 1: Core Release (Q1 2026)

• Clean up codebase for public release
• Write comprehensive documentation
• Create demo site
• Publish to Hugo Themes directory

Phase 2: Enhancements (Q2 2026)

• Dark mode support
• Additional color schemes
• More shortcodes
• Search functionality

Phase 3: Community (Q3 2026)

• Contribution guidelines
• Issue templates
• Community showcase
• Translation contributions

License

Released under the MIT License - free for personal and commercial use.

Get Involved

As a Developer

• Star the repository
• Report issues
• Submit pull requests
• Improve documentation

As a User

• Use the theme for your organization
• Share feedback
• Request features
• Spread the word

This theme is developed and maintained by the Congruence Foundation as part of our commitment to open-source technology for social good.

For questions or collaboration, contact us.