VirusTotal

Overview

VirusTotal is a collaborative security analysis platform that transforms threat detection into an intuitive, data-driven experience. The design system embodies "Technical Clarity"—a modern aesthetic that balances the precision of security intelligence with the accessibility of a consumer-grade interface. The brand serves security researchers, IT professionals, and enterprises who need to rapidly assess file, domain, IP, and URL threats. The UI evokes confidence through a dark, focused canvas (rgb(22, 22, 37)) punctuated by a distinctive periwinkle accent (rgb(134, 170, 249)) that signals actionable insights and interactive elements. The emotional response is one of control: users feel empowered to investigate threats without cognitive overload.

Voice: authoritative yet approachable, technical but never jargon-heavy. VirusTotal speaks in declarative, outcome-focused sentences. Example: "Scan complete: 47 vendors flagged this file as malicious. Review detections below." The vocabulary favors action verbs (detect, analyze, share, investigate) and avoids marketing hyperbole. Tone is calm and reassuring, even when reporting critical threats—the interface itself conveys urgency through color and hierarchy, not through breathless language.

Colors

The color system is anchored in a dark, high-contrast foundation designed for extended viewing and rapid threat assessment. Surface (#161625, rgb(22, 22, 37)) serves as the primary canvas, with a carefully calibrated surface stack (surface-container-lowest #0a0a14 through surface-container-highest #262635) providing semantic depth for layered UI elements like modals, drawers, and nested cards. The on-surface palette (#ffffff for primary text, #c3d2e8 for secondary) ensures WCAG AA compliance (contrast ratio ≥4.5:1) across all text sizes.

Primary (#86aaf9, rgb(134, 170, 249)) is the brand's signature accent—a cool periwinkle reserved exclusively for interactive elements: CTA buttons, active tab underlines, link text, and focus states. This color appears in the hero logo, the "Sign up" butt

Typography

The type system pairs Google Sans (headlines, labels, UI controls) with Source Sans Pro (body copy, descriptions, data tables), creating a visual hierarchy that guides users from high-level threat summaries to granular analysis details. Display (56px, 700 weight, -0.02em tracking) anchors hero sections and major page titles. Headline-lg (40px, 600 weight) introduces primary sections; headline-md (28px, 600 weight) breaks up subsections. Title-lg (20px, 600 weight) labels cards and modal headers. Body-lg (18px, 400 weight, 28px line-height) is used sparingly for introductory copy; body-md (14px, 400 weight, 22px line-height) is the default for descriptions, table cells, and form helper text. Label-md (12px, 600 weight, 0.05em tracking) and label-sm (11px, 500 weight, 0.08em tracking) are ap

Layout

The page layout uses a 12-column grid with a max-width of 1300px (--max-page-width), centered on the viewport. The hero section spans full width with 40px (lg spacing) vertical padding top and bottom, creating breathing room around the VirusTotal logo and tagline. The main content area (file/URL/search tabs and upload zone) uses a fixed gutter of 24px (md spacing) between columns and sections. White-space philosophy emphasizes clarity: 40px (lg) separates major sections (hero, upload area, footer callout), 24px (md) divides subsections and card groups, and 12px (sm) provides breathing room within components. The container respects a max-width of 1300px to prevent line-length bloat on ultra-wide displays. Responsive breakpoints scale spacing proportionally: on mobile, gutter reduces to 16px

Elevation & Depth

Depth is conveyed through a layered shadow system and strategic use of surface-container tokens. The base layer (Level 0) is the body background (#161625). Level 1 (Standard Cards) uses surface-container (#161625) with a 1px border in outline-variant (#2f3d5c) and a subtle sm shadow (0 2px 2px 0 rgba(0, 0, 0, 0.24)). Level 2 (Elevated Cards, Hover States) shifts to surface-container-high (#1e1e2d) with md shadow (0 3px 8px rgba(0, 0, 0, 0.15)). Level 3 (Modals, Drawers, Popovers) uses surface-container-highest (#262635) with lg shadow (0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0

Shapes

The shape philosophy is "Technical Precision"—rounded corners are used judiciously to soften hard edges while maintaining a sense of control and structure. Buttons and primary interactive elements use lg (1rem / 16px) border-radius, creating a friendly but professional appearance. Input fields, tabs, and secondary containers use DEFAULT (0.375rem / 6px) for a tighter, more technical feel. Cards and modals use lg (1rem) to signal importance and elevation. Badges and pills use full (50%) for maximum visual distinction. The rationale: larger radii (lg, xl) are reserved for elements that demand us

Components

Action Elements Buttons follow a strict hierarchy. Primary buttons (button-primary) use background: {colors.primary} (#86aaf9), text-color: {colors.on-primary} (#0f2a5f), padding: 12px 24px, height: 44px, rounded: lg (1rem), and typography: label-md (12px, 600 weight, 0.05em tracking). On hover (button-primary-hover), background shifts to #7a9ee8 with a 200ms ease-out transition. Secondary buttons (button-secondary) are transparent with a 1px border in {colors.outline} (#3d4a69), text in {colors.primary}, and the same padding/height/rounded specs. Ghost buttons (button-ghost) are minimal—transparent background, {colors.primary} text, 8px 16px padding, no border—used for tertiary actions and navigation links. All buttons disable with opacity: 0.5 and cursor: not-allowed.

Containers

Do's and Don'ts

**Do**

• Do use primary (#86aaf9) exclusively for interactive elements—buttons, links, active states, and focus indicators—to create a consistent, scannable interface.
• Do maintain the 24px (md) gutter between major sections and 12px (sm) within component groups to preserve visual breathing room and reduce cognitive load.
• Do apply label-md (12px, 600 weight, 0.05em tracking) to all button text and UI chrome; reserve body-md (14px, 400 weight) for descriptions and data.
• Do use the surface-container stack (surface-container-low through surface-container-highest) to signal elevation and hierarchy; never hardcode grays or arbitrary background colors.
• Do add a 3px primary-colored focus outline (rgba(134, 170, 249, 0.12)) to all interactive elements for keyboard navigation and accessibility compliance.

**Don't**

• Don't use secondary (#39ac4c) or tertiary (#e57300) as primary CTAs; reserve them for status indicators (success, warning) and supporting actions.
• Don't apply border-radius > lg (1rem) to buttons or form controls; the technical aesthetic requires crisp, controlled curves, not soft, rounded pills.
• Don't mix Google Sans and Source Sans Pro within a single component; use Google Sans for UI labels and headlines, Source Sans Pro for body copy and data tables only.
• Don't hardcode shadows; always reference the elevation tokens (sm, md, lg) to maintain consistency and enable theme-wide adjustments.
• Don't exceed 1300px container max-width or use gutter values outside the defined spacing scale (xs, sm, md, lg, xl); this breaks the grid rhythm and introduces visual chaos.