ThreatVector

Overview

ThreatVector is an enterprise cybersecurity and penetration testing services brand that communicates authority, precision, and technical excellence through a stark, high-contrast visual language. The aesthetic is 'Architectural Brutalism'—clean white surfaces punctuated by vivid red (#ff0000) accent elements that command immediate attention and signal urgency and power. The brand serves security-conscious businesses and conveys confidence through minimalist geometry: sharp corners (0px border-radius on primary CTAs), bold typography in TT Mussels at 40–60px weights, and a deliberate absence of soft shadows or rounded edges. The emotional response is one of professional authority: the user feels they are engaging with serious, no-nonsense security experts.

The voice is direct, technical, and action-oriented. Vocabulary emphasizes enterprise-grade solutions, threat detection, compliance, and digital asset protection. Sentences are declarative and benefit-driven: 'ThreatVector delivers enterprise-grade cybersecurity solutions including penetration testing, vulnerability assessments, and incident response.' The brand personality rejects decoration and frivolity; every design element serves a functional purpose. Example sentence in brand voice: 'Trusted by businesses worldwide to secure their digital assets and maintain compliance with industry standards.'

Colors

The color system is built on a high-contrast foundation: pure white (#ffffff) as the dominant surface, paired with a vivid signal red (#ff0000) as the primary accent. This red is used exclusively for call-to-action buttons, the logo mark ('VECTOR' in the header), and critical interactive elements. The red communicates urgency and authority without ambiguity—it is the color users instinctively click. Secondary colors include Bootstrap blue (#0d6efd) for informational elements and trust signals, and Bootstrap green (#198754) for success states and positive confirmations. The neutral palette is anchored in dark charcoal (#212529) for body text and headlines, with mid-tone grays (#6c757d, #495057) for secondary text and borders. Surface containers use a subtle gray gradient (#f8f9fa → #ced4da)

Typography

The type system is anchored in TT Mussels, a geometric sans-serif that reinforces the brand's technical, no-nonsense personality. Display and headline levels (60px, 40px, 28px) use fontWeight 500–700 with tight line-height (68px, 48px, 36px) and negative letter-spacing (-0.04em to -0.01em) to create visual density and authority. Body text (16–18px) maintains a regular weight (400) with generous line-height (24–28px) for legibility on white backgrounds. Labels and CTAs use fontWeight 600 at 12–16px with letter-spacing 0.01–0.05em to add precision and visual separation. The type pairing communicates 'technical confidence'—no serifs, no decorative flourishes, just clean geometry. When small labels appear over busy backgrounds (e.g., badge elements), apply text-shadow: 0 1px 2px rgba(0, 0, 0,

Layout

The page layout uses Bootstrap's 12-column grid with a fixed container max-width of 1320px (responsive down to 960px at lg breakpoint, 720px at md). The grid gutter is 24px (--bs-gutter-x: 1.5rem), creating consistent breathing room between columns. White-space philosophy is 'generous but purposeful': sections are separated by lg spacing (40px) vertically, with md spacing (24px) used for internal component padding. The hero section uses a centered column layout with corner-box decorative elements (red L-shaped brackets at 0px border-radius, positioned absolutely at the four corners) to frame the headline and CTA. Secondary actions (links like 'View Our Services →') are positioned below the primary button with sm spacing (12px) and use the primary red color (#ff0000) for consistency. Trust

Elevation & Depth

Depth in this system is achieved through minimal, functional shadows and stark color contrast rather than layered blur or glassmorphism. Level 1 (Base): white background (#ffffff) with no shadow. Level 2 (Cards/Containers): 1px solid border at #dee2e6 (outline-variant) with optional box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover. Level 3 (Modals/Overlays): box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) with background-color: #ffffff. The red primary color (#ff0000) acts as a visual 'lift' mechanism—red buttons and accents appear to float above the white surface through color contrast alone,

Shapes

The shape philosophy is 'Architectural Sharpness'—all primary interactive elements (buttons, CTAs, logo mark) use 0px border-radius to communicate precision, authority, and technical rigor. This sharp geometry is the brand's signature and must never be softened. Secondary elements like input fields and cards use minimal rounding: DEFAULT (0.5rem / 8px) for form inputs, md (0.75rem / 12px) for optional card corners. Decorative elements like the corner-box brackets use 0px radius to reinforce the architectural theme. Badge elements use full (9999px) border-radius for visual contrast and to signa

Components

Action Elements Primary buttons use backgroundColor: {colors.primary} (#ff0000), textColor: {colors.on-primary} (#ffffff), padding: 16px 32px, height: 56px, and rounded: 0px. Font is TT Mussels, fontWeight 600, fontSize 16px. On hover, transition backgroundColor to {colors.primary-container} (#dc3545) over 150ms (transition: background-color 150ms ease-in-out). Focus state adds a 2px solid red outline with 3px rgba(255, 0, 0, 0.1) inner glow. Secondary buttons use backgroundColor: transparent, textColor: {colors.primary}, borderWidth: 2px, borderColor: {colors.primary}, with the same padding and height. On hover, backgroundColor transitions to {colors.surface-container-low} (#f0f1f3). Links use textColor: {colors.primary} with text-decoration: underline; on hover, textColor transitions

Do's and Don'ts

**Do**

• Do use #ff0000 (primary red) exclusively for CTAs, critical actions, and brand-defining moments—never dilute its impact with secondary uses.
• Do maintain 0px border-radius on all primary buttons and logo elements to preserve the architectural sharpness that defines the brand.
• Do pair TT Mussels headlines at 40px+ with tight line-height (48px) and negative letter-spacing (-0.02em) to create visual density and authority.
• Do use white (#ffffff) as the dominant surface and trust it to provide contrast; avoid adding unnecessary background colors or gradients.
• Do apply functional shadows (0 3px 8px rgba(0, 0, 0, 0.15)) only on hover or elevated states; never use diffuse or decorative shadows.
• Do use Bootstrap's gray scale (#212529, #495057, #6c757d) for text hierarchy and borders to maintain consistency with the neutral palette.

**Don't**

• Don't soften primary buttons with border-radius; sharp corners are non-negotiable and signal technical precision.
• Don't use secondary colors (blue #0d6efd, green #198754) for primary CTAs; reserve red (#ff0000) for all high-priority actions.
• Don't apply text-shadow or glow effects to body text; keep typography clean and legible on white backgrounds.
• Don't use glassmorphism, blur effects, or layered transparency; the brand aesthetic is stark and architectural, not ethereal.
• Don't exceed 40px font-size for headlines on mobile; use responsive scaling (calc(1.375rem + 1.5vw)) to maintain hierarchy.
• Don't add decorative elements or rounded corners to primary components; every design decision must serve a functional purpose.