This repository contains the comprehensive branding and design system configuration for Aiotize, including custom layouts, themes, typography, spacing, and imagery guidelines.
- Light Theme: Clean, bright design for optimal readability
- Dark Theme: Reduced eye strain with elegant dark colors
- Custom Theme: Branded theme with custom color palettes
- Hierarchical heading styles (h1-h6) with automatic numbering
- Multiple font families: Inter (primary), Montserrat (display), Georgia (secondary), Fira Code (monospace)
- Comprehensive font size and weight scales
- Configurable line heights for different content types
- Consistent spacing scale based on 0.25rem units
- Responsive container sizes (sm, md, lg, xl, 2xl)
- Standardized margins and padding
- Sticky header and footer configurations
- Styled hyperlinks with hover, visited, and active states
- Accessibility-focused design with proper focus indicators
- Configurable underline styles and colors
- Automatic heading numbering (1.1, 1.2, etc.)
- Figure and table numbering
- Ordered and unordered list styles
- Standard lens parameters (focal length, aperture, perspective)
- Tone configurations (professional, friendly, dramatic)
- Warmth settings (cool, neutral, warm)
- Aspect ratios for different use cases (16:9, 4:3, 1:1, etc.)
- Image optimization guidelines
- Primary, secondary, and accent colors
- Semantic colors (success, warning, error, info)
- Theme-specific color variations
- Comprehensive brand color scales
branding-config.json: Complete branding configuration in JSON formatstyles.css: CSS implementation of the design systemexample.html: Live demonstration of all branding features
-
Include the stylesheet in your HTML:
<link rel="stylesheet" href="styles.css">
-
Set the theme (optional):
<html data-theme="light"> <!-- or "dark" or "custom" -->
-
Enable heading numbering (optional):
<body class="numbered-headings numbered-figures numbered-tables">
-
Use semantic HTML with provided classes:
<div class="container"> <section> <h1>Your Content</h1> <p>Your text...</p> </section> </div>
Open example.html in a web browser to see a live demonstration of:
- All three themes with theme switcher
- Typography hierarchy
- Color palettes
- Spacing and layout
- Hyperlink styles
- Lists and numbering
- Imagery guidelines
- UI components (buttons, cards, tables)
- Topic chronology structure
The branding-config.json file can be imported into your build tools or applications:
// JavaScript/Node.js
const brandingConfig = require('./branding-config.json');
const primaryColor = brandingConfig.themes.light.colors.primary;# Python
import json
with open('branding-config.json') as f:
config = json.load(f)
primary_color = config['themes']['light']['colors']['primary']Edit branding-config.json to customize colors, typography, spacing, or any other aspect of the design system. The CSS file uses CSS variables that automatically adapt to theme changes.
Add new theme configurations to the themes object in branding-config.json:
{
"themes": {
"myTheme": {
"name": "My Custom Theme",
"colors": {
"primary": "#YOUR_COLOR",
...
}
}
}
}The CSS file is organized into sections:
- CSS Variables (theme definitions)
- Base Styles
- Typography
- Layout
- Components
- Utilities
Add custom styles in any section while maintaining the existing structure.
- Consistency: All elements follow the same spacing, color, and typography rules
- Accessibility: WCAG compliant colors, focus states, and semantic HTML
- Responsiveness: Mobile-first design with adaptive layouts
- Scalability: Modular system that grows with your needs
- Maintainability: Clear documentation and organized code structure
Content should follow this chronological structure:
- Introduction: Overview, objectives, scope
- Main Content: Context, details, examples, analysis
- Conclusion: Summary, takeaways, next steps
This ensures optimal comprehension and navigation through content.
MIT License - See LICENSE file for details.
Author: Aiotize Organization
Maintainer: Aiotize Team
License: MIT
Created: 2025
This repository contains default community health files and organization-wide configurations for the Aiotize organization.
The .github-private repository serves as a centralized location for:
- Community health files
- Issue and PR templates
- Workflow configurations
- Organization standards and guidelines
.github-private/
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.yml # Bug report template with metadata
│ │ ├── feature_request.yml # Feature request template
│ │ └── config.yml # Issue template configuration
│ ├── PULL_REQUEST_TEMPLATE.md # PR template with metadata
│ ├── STYLE_GUIDE.md # Comprehensive style guide
│ └── STANDARDS_SUMMARY.md # Quick reference guide
├── README.md # This file
├── LICENSE # MIT License
├── .gitignore # Git ignore rules
├── CODEOWNERS # Code ownership with author credentials
├── CODE_OF_CONDUCT.md # Community guidelines with metadata
├── CONTRIBUTING.md # Contribution guidelines with standards
└── SECURITY.md # Security policy with metadata
- Repository Type: Organization Configuration
- Visibility: Private
- Language: Markdown
- Framework: GitHub Community Standards
This repository establishes organization-wide standards for:
- All files include proper author attribution
- Metadata includes creation and modification dates
- Version tracking for all documents
- Standard text size: 14-16px (web) / 11-12pt (documents)
- Text intensity: WCAG AA compliant (4.5:1 contrast ratio minimum)
- Headers: Hierarchical structure (H1: 32-36px, H2: 24-28px, H3: 20-24px)
- Line height: 1.5-1.6 for optimal readability
- Style Guide - Complete formatting and metadata standards
- Standards Summary - Quick reference for common standards
- Contributing Guide - How to contribute with proper metadata
- Code of Conduct - Community guidelines
For questions or issues, please contact the Aiotize team.
© 2025 Aiotize. All rights reserved.