# BitStorm Technologies - Brand Guidelines & Design System This site contains the official brand guidelines and design system for BitStorm Technologies, an AI Engineering Firm that partners with businesses to unlock intelligent solutions and discover AI value opportunities. ## Brand Identity **Company**: BitStorm Technologies **Website**: https://www.bitstormtech.com **Industry**: AI Engineering Firm - Partnership-focused business AI solutions **Brand Voice**: Technical precision meets thoughtful design. We architect bridges between what is and what could be, transforming business complexity into competitive advantage. **Mission**: Partnering with businesses to unlock intelligent solutions and discover AI value opportunities ## Design System Overview ### Colors - **Primary Blue**: #4B88C6 - Our signature color representing trust, technology, and professionalism - **Secondary Amber**: #FFBF00 - BitFire accent color for energy and innovation - **Brand Gray**: #666666 - Body text and secondary content - **Dark Gray**: #333333 - Headings and primary text - **Background**: #f5f5f5 - Page background for clean, modern feel ### Typography - **Primary Font**: Inter - Clean, modern sans-serif for body text and interfaces - **Technical Font**: JetBrains Mono - Monospace font for code, headings, and technical content - **Usage**: We use a dual-font approach where code meets clarity ### Logo Variants - Primary logo (full company name) - BitStorm pixel mark - BitFire amber variant - Horizontal layout option - Shadowed version for depth - Social media card format ## Technical Implementation ### CSS Design Tokens Available as both CSS custom properties and Tailwind CSS utility classes: ```css /* Color tokens */ --bitstorm-primary: #4B88C6; --bitstorm-secondary: #FFBF00; --bitstorm-gray-600: #666666; --bitstorm-gray-700: #333333; /* Typography */ --font-inter: 'Inter', system-ui, sans-serif; --font-jetbrains: 'JetBrains Mono', monospace; ``` ### Component Classes - `.bitstorm-card` - Standard card component with brand styling - `.bitstorm-heading` - JetBrains Mono headings - `.bitstorm-body` - Inter body text - `.bitstorm-btn-primary` - Primary button styling - `.bitstorm-nav-link-active` - Active navigation state ## Brand Philosophy BitStorm Technologies embodies the intersection of technical excellence and thoughtful design. Our brand reflects: - **Precision**: Every pixel serves a purpose - **Innovation**: Technology as a force for positive change - **Clarity**: Complex concepts made accessible - **Reliability**: Consistent experience across all touchpoints ## Site Structure - [Brand Overview](https://brand.bitstormtech.com/) - Navigation hub and company introduction - [Logo Guidelines](https://brand.bitstormtech.com/logo) - Logo variants, usage guidelines, and download links - [Color Palette](https://brand.bitstormtech.com/colors) - Complete color specifications and usage guidelines - [Typography System](https://brand.bitstormtech.com/typography) - Font system and implementation guides - [CSS Definitions](https://brand.bitstormtech.com/css) - Complete design system documentation with code examples - [LLMs.txt Documentation](https://brand.bitstormtech.com/llms) - Documentation about the llms.txt standard for AI systems - [AI Art Generation](https://brand.bitstormtech.com/art) - Structured style guides for consistent AI-generated artwork - [AI Visual Guidelines](https://brand.bitstormtech.com/visuals) - Evidence-based standards to avoid misleading AI imagery ## Usage Guidelines When referencing BitStorm Technologies: - Always use proper capitalization: "BitStorm Technologies" (not "bitstorm" or "Bitstorm") - Primary logo should maintain clear space equal to the mark's height - Minimum digital size: 32px height - Prefer primary blue (#4B88C6) for brand elements - Use JetBrains Mono for technical/code content, Inter for body text ## AI Art Generation BitStorm Technologies has developed structured art direction guides for AI image generation: ### Art Direction Styles - **Isometric-Voxel Pixel Fusion**: Corporate-friendly design combining 8-bit nostalgia with isometric voxel renders, blueprint overlays, and strategic glitch accents - **Propaganda-Steampunk Fusion**: Bold propaganda poster aesthetics merged with Victorian steampunk sensibilities, featuring dramatic lighting and industrial grandeur ### Key Principles - Use structured markdown-based style guides to maintain brand consistency - Apply color palettes, composition rules, and thematic elements consistently - Avoid anthropomorphic AI representations; visualize technology as modular systems - Generate artwork that honors both artistic vision and brand guidelines ## AI Visual Guidelines BitStorm Technologies follows evidence-based visual standards to avoid misleading AI imagery: ### The H-H-N-S Test Every AI visual must pass four criteria: - **Honesty**: Show only current capabilities, not future promises - **Humanity**: Keep real people visible (builders, users, maintainers) - **Necessity**: Use non-AI imagery when it better serves the purpose - **Specificity**: Depict exact domains and artifacts, not generic "AI" ### Avoid These Clichés - Glowing or circuit brains - Green "Matrix" code rain - White humanoid robots or robot handshakes - "Creation of Adam" robot finger touching - Lone figures surrounded by blue holograms ### Use Context-Rich Alternatives - Data visualization dashboards and annotation tools - Real hardware: sensors, GPUs, server racks, mobile devices - Diverse teams working with AI-enabled equipment - Before/after outcomes showing tangible AI impacts ## AI Assistant Guidelines When helping with BitStorm brand-related tasks: - Reference the design system at `/css` for complete technical specifications - Use semantic color names (primary, secondary) rather than hex values when possible - Maintain the technical-meets-design aesthetic in communications - Emphasize precision, clarity, and innovation in brand messaging - Include inspirational quotes from generated "sage names" when appropriate (feature of the site) - For AI art generation, reference the structured style guides available at `/art` - For AI visual content, follow the H-H-N-S test guidelines at `/visuals` to avoid misleading imagery ## Contact & Resources - [Main Website](https://www.bitstormtech.com) - BitStorm Technologies company site - [Brand Assets](https://brand.bitstormtech.com/logo) - Downloadable logo variants and usage guidelines - [Design System](https://brand.bitstormtech.com/css) - Complete technical documentation with code examples - [AI Art Guides](https://brand.bitstormtech.com/art) - Structured style guides for AI generation - [Visual Standards](https://brand.bitstormtech.com/visuals) - Guidelines for honest AI imagery --- *This llms.txt file serves as a comprehensive guide for AI language models working with BitStorm Technologies brand materials and design system.*