---

name: brand-guidelines description: Applies AI Security Assurance's official brand colors, typography, and voice to any artifact. Use when creating presentations, documents, marketing materials, or any content that should reflect the company's professional cybersecurity identity.

AI Security Assurance Brand Guidelines

Overview

Use this skill to apply AI Security Assurance's brand identity to artifacts including presentations, documents, marketing materials, and web content.

Keywords: branding, corporate identity, visual identity, AI-Storm, cybersecurity, security assurance, brand colors, typography, professional styling

Company Identity

Company Name: AI Security Assurance Product Name: AI-Storm (AI-powered Systems-Theoretic Operational Risk Mitigation) Tagline: Find deep, systemic flaws that other security tools miss Twitter/X: @AISec_Assurance

Brand Guidelines

Colors

All colors are defined in HSL format for consistency with the design system.

Primary Colors:

• Primary Blue: hsl(210, 40%, 55%) / #5a8fc2 - Main brand color, buttons, links
• Primary Foreground: hsl(0, 0%, 100%) / #ffffff - Text on primary backgrounds
• Accent Blue: hsl(200, 50%, 65%) / #6bb8d9 - Secondary accent, hover states

Background Colors:

• Background: hsl(0, 0%, 100%) / #ffffff - Main background
• Muted: hsl(210, 15%, 97%) / #f6f7f8 - Subtle backgrounds, sections
• Card: hsl(0, 0%, 100%) / #ffffff - Card backgrounds

Text Colors:

• Foreground: hsl(215, 20%, 15%) / #212830 - Primary text
• Muted Foreground: hsl(215, 15%, 45%) / #636e7d - Secondary text, descriptions

Semantic Colors:

• Destructive: hsl(0, 84%, 60%) / #ef4444 - Errors, warnings
• Border: hsl(215, 15%, 92%) / #e8eaed - Borders, dividers

Gradients:

• Hero Gradient: linear-gradient(135deg, hsl(210 25% 97%) 0%, hsl(205 30% 96%) 50%, hsl(215 20% 97%) 100%)
• Accent Gradient: linear-gradient(90deg, hsl(210 40% 55%), hsl(200 50% 65%))
• Glow Effect: 0 0 40px hsl(210 40% 55% / 0.15)

Typography

• Headings: System UI fonts (clean, professional sans-serif)
• Body Text: System UI fonts for readability
• Code/Technical: Monospace fonts for code examples
• Font Sizes:
  • Hero Title: 5xl-7xl (3rem-4.5rem)
  • Page Titles: 4xl-6xl (2.25rem-3.75rem)
  • Section Headings: 3xl-4xl (1.875rem-2.25rem)
  • Body: base-xl (1rem-1.25rem)

Border Radius

• Large: 0.5rem (8px)
• Medium: 0.375rem (6px)
• Small: 0.25rem (4px)

Brand Voice & Messaging

Tone

• Professional: Authoritative without being intimidating
• Technical: Precise terminology, assumes educated audience
• Confident: Clear value propositions, no hedging language
• Accessible: Complex concepts explained clearly

Key Messages

1. Deep Security Analysis: "Find deep, systemic, and logical vulnerabilities—the kind that memory-safe languages and traditional tools miss"
2. End-to-End Automation: "Automate end-to-end security analysis from high-level STPA-Sec threat modeling down to source code"
3. Formal Verification: "Formally verified, machine-readable assurance case that proves security-by-design"
4. Human-in-the-Loop: "Full transparency and control—review, refine, or override AI decisions at every step"
5. Language Support: "C/C++, Java, Go, Python"
6. OWASP Alignment: "Addresses the OWASP Top 10 'Insecure Design' category"

Terminology

• Use "AI-Storm" (with hyphen) for the product name
• Use "STPA-Sec" (Systems-Theoretic Process Analysis for Security)
• Use "assurance case" not "security report"
• Use "formally verified" when discussing output guarantees
• Use "logical vulnerabilities" or "design flaws" not just "bugs"

Avoid

• Overly casual language
• Fear-based marketing ("Your systems are at risk!")
• Vague claims without technical substance
• Excessive jargon without explanation
• Emojis in professional content (unless explicitly requested)

Visual Elements

Logo Usage

• Primary logo is a shield icon (/shield-icon.svg)
• Animated logo available for web (AnimatedLogo component)
• Maintain clear space around logo equal to the height of the shield element

Imagery Style

• Professional, clean aesthetic
• Technology-focused but not overly futuristic
• Subtle security imagery (shields, locks) used sparingly
• Avoid clichéd hacker imagery (hoodies, green matrix text)

Animations

• fade-in: Subtle entrance animation (0.6s ease-out)
• pulse-glow: Blue glow effect for emphasis (2s infinite)
• Keep animations professional and minimal

Application Examples

Presentation Slides

• Use hero gradient for title slides
• Primary blue for headers and key points
• Muted backgrounds for content slides
• Accent gradient for call-to-action buttons

Documents

• Primary blue for headings
• Foreground color for body text
• Muted foreground for secondary information
• Border color for dividers and tables

Marketing Materials

• Lead with the AI-Storm product name
• Include the tagline on main materials
• Use accent gradient for buttons and CTAs
• Include formal verification messaging for technical audiences