Massive Marine AI

Overview

Massive Marine AI is a Vision AI platform delivering real-time collision avoidance and maritime safety systems. The design system embodies 'Technical Clarity with Maritime Authority'—a sophisticated aesthetic that balances the precision of advanced AI systems with the gravitas of maritime operations. The visual language uses a deep navy-to-white gradient spectrum (primary #0b0b45 transitioning through #3a6cd4 secondary to white surfaces), evoking both the ocean's depth and the clarity of digital perception. The brand personality is authoritative yet approachable: confident in technical capability, respectful of maritime tradition, and focused on human safety. Voice is direct and precise—avoiding hype, emphasizing data and outcomes. Example: 'Our Vision AI detects obstacles in 360° coverage, day or night, with millisecond response times—because at sea, awareness saves lives.'

Colors

The color system is anchored in a deep navy primary (#0b0b45) that conveys maritime authority and technical sophistication. This is paired with a secondary blue (#3a6cd4) used for interactive elements, data visualization, and secondary CTAs—representing the clarity of digital systems overlaid on maritime operations. Tertiary accent (#e35c11, a warm orange) is reserved for alerts, warnings, and critical safety indicators, ensuring high contrast and immediate recognition in high-stakes scenarios. Surface colors range from pure white (#ffffff) for primary content areas to soft lavender-tinted grays (#e9eaf3, #c5c5e8) for container backgrounds, creating visual hierarchy without harsh contrast. Error states use a maritime red (#d32525) paired with light error-container (#ffcaca) for accessibili

Typography

The typography system uses Poppins exclusively, a geometric sans-serif that conveys both technical precision and maritime modernity. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements with commanding presence. Headline-lg (48px, 600 weight) and headline-md (40px, 600 weight) establish section hierarchy with tight negative letter-spacing (-0.02em to -0.01em) to enhance visual impact and readability at scale. Body-lg (20px, 400 weight) and body-md (16px, 400 weight) maintain legibility in dense content blocks, with 1.4–1.5 line-height ratios (28px and 24px respectively) to support scanning. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons, badges, and form labels with consistent 20px line-height. Label-sm (12px, 500 weight, 0.02em tra

Layout

The layout system uses a 12-column grid with a maximum container width of 1440px, maintaining responsive fluidity on mobile (single column, 20px horizontal padding) through tablet (2–4 columns, 24px gutter) to desktop (full 12-column grid, 62px left/right padding on hero sections). Spacing follows a 4px base unit with semantic scale: xs (4px) for micro-interactions, sm (12px) for compact grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for full-page rhythm. Hero sections use 184px top padding on desktop (lg breakpoint) with 62px left offset to align with the grid. Card grids use md (24px) gap on desktop, reducing to sm (12px) on tablet and xs (4px) on mobile. The container-max width of 1440px ensures content never exceeds comfortable re

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering rather than aggressive drop-shadows. Level 1 (Base): flat white or light gray surfaces with no shadow, establishing the primary content plane. Level 2 (Raised Cards & Inputs): 0 4px 12px rgba(0, 0, 0, 0.08) with 1px border in outline-variant (#c5c5e8), creating subtle separation from the base. Level 3 (Modals & Overlays): 0 16px 40px rgba(0, 0, 0, 0.12) with backdrop-filter: blur(8px) on semi-transparent overlays (rgba(11, 11, 69, 0.4)). Header elements use a glass-morphic treatment: backdrop-filter: blur(12px), backgroun

Shapes

The shape philosophy is 'Precision with Approachability'—combining sharp technical edges with human-friendly rounded corners. Buttons and primary CTAs use full-radius (9999px) for maximum approachability and visual softness, signaling safety and trust. Secondary buttons and navigation elements use lg (16px) radius, balancing geometric precision with friendliness. Cards and containers use md (12px) radius, creating a modern, clean aesthetic without appearing sterile. Input fields use DEFAULT (8px) radius for subtle definition without visual noise. The header navigation bar uses full-radius (999

Components

Action Elements Buttons are the primary interaction mechanism and use three distinct variants. Primary buttons (bg-#0b0b45, text-white, 48px height, 12px 24px padding, rounded-full, box-shadow: 0 3px 8px rgba(0,0,0,0.15)) are reserved for critical CTAs like 'Request Demo' and 'Submit'. On hover, background shifts to #070738 (darker navy) with a 150ms cubic-bezier(0.4, 0, 0.2, 1) transition. Secondary buttons (bg-white, text-#0b0b45, 1px border in #c5c5e8, 48px height, rounded-full) are used for alternative actions and navigation. On hover, background becomes #f0f0f5 with the same transition timing. Ghost buttons (bg-transparent, text-#0b0b45, 44px height, 12px 20px padding, rounded-lg) appear in navigation contexts and on dense backgrounds. On hover, background becomes #dfe0eb. All but

Do's and Don'ts

**Do**

• Do use primary navy (#0b0b45) for all body text, navigation, and primary CTAs to maintain visual authority and consistency.
• Do apply secondary blue (#3a6cd4) exclusively to interactive hover states, active navigation, and data-critical UI elements—never use it for body text or backgrounds.
• Do reserve tertiary orange (#e35c11) only for safety-critical alerts and warning badges to preserve signal integrity and user attention.
• Do maintain 150ms cubic-bezier(0.4, 0, 0.2, 1) transition timing on all interactive state changes (hover, focus, active) for consistent, predictable feedback.
• Do use full-radius (9999px) on all primary CTAs and header navigation to signal approachability and trust in a safety-critical domain.
• Do apply text-shadow: 0 2px 4px rgba(0,0,0,0.2) to small labels and text over busy backgrounds (hero imagery, gradients) to ensure legibility.
• Do use md (24px) spacing for standard section separation and lg (40px) for major section breaks to create visual rhythm and breathing room.
• Do apply glass-morphic treatment (backdrop-filter: blur(12px), background: rgba(255,255,255,0.5)) only to header and overlay elements—never to content cards.

**Don't**

• Don't use secondary blue (#3a6cd4) for body text, backgrounds, or non-interactive elements—it must remain reserved for interactive states to maintain visual hierarchy.
• Don't apply tertiary orange (#e35c11) to non-critical UI; overuse dilutes its signal strength and confuses users about priority and safety.
• Don't mix border-radius values arbitrarily; use the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 20px, full: 9999px) to maintain visual consistency.
• Don't use transition timing longer than 150ms or shorter than 100ms on interactive elements—this breaks the predictable, responsive feel of the system.
• Don't apply drop-shadows larger than 0 16px 40px rgba(0,0,0,0.12); excessive shadows create visual clutter and reduce clarity in a technical interface.
• Don't use Poppins weights outside the defined set (400, 500, 600, 700); inconsistent weights break typographic hierarchy and readability.
• Don't apply glass-morphic effects (backdrop-filter, semi-transparent backgrounds) to content cards or body sections—reserve them for headers and overlays only.
• Don't use container max-widths smaller than 1276px or larger than 1440px; this breaks the responsive grid and creates uncomfortable reading widths.