DeepFlow

Overview

DeepFlow is an enterprise AI orchestration platform that transforms how organizations operationalize artificial intelligence at scale. The brand serves technical leaders and enterprise architects who demand both visual sophistication and functional clarity. The aesthetic is "Neon Minimalism"—a deliberate collision of austere dark surfaces (#111111) with electric accent colors (#2ea7ff cyan, #0ffaa3 lime, #ff25b3 magenta) that signal energy, precision, and forward momentum. The UI evokes the feeling of a high-tech command center: calm, purposeful, and ready for complex decision-making. Voice: authoritative yet approachable, technical without jargon, action-oriented. Example: "Your AI backbone is now orchestrated. Deploy with confidence."

Colors

The color system is built on a dark-first philosophy with three distinct accent roles. Primary (#2ea7ff) is the signature interaction color—used exclusively on CTAs, focus states, and key affordances. It conveys trust and technological precision. Secondary (#0ffaa3) is the accent for success states, highlights, and supporting UI elements; it provides visual contrast and energy without competing with primary. Tertiary (#ff25b3) is reserved for alerts, emphasis, and brand moments. The surface stack is strictly monochromatic: surface (#111111) is the canvas, surface-container (#161616) lifts cards and modals 1 step, surface-container-high (#222222) provides hover states, and surface-container-highest (#2d2d2d) is reserved for active/pressed states. On-surface is always #ffffff for maximum con

Typography

The type system pairs a display typeface (Abcarizonaflare at 80px, 300 weight) for hero moments with a workhorse sans-serif (Aspektavf) for all body and UI text. Display is used sparingly—only on hero headlines—to create visual impact without cognitive overload. Headline-lg (48px, 600 weight) anchors section breaks; headline-md (32px, 600 weight) organizes content subsections. Body-lg (18px, 400 weight) is used for introductory paragraphs and prominent descriptions; body-md (16px, 400 weight) is the default for all body copy. Label-md (14px, 600 weight) is applied to buttons, badges, and form labels; label-sm (12px, 500 weight) is for captions and tertiary UI text. Letter-spacing is kept tight (-0.02em on display, -0.01em on headlines) to reinforce technical precision. Line-height is gener

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered with auto margins. Sections are separated by lg spacing (40px) on desktop, md spacing (24px) on tablet. The gutter between columns is 24px. Container padding is md (24px) on desktop, sm (12px) on mobile. Hero sections use full-bleed backgrounds with a diagonal or angular accent shape (often a gradient triangle in cyan or lime) that breaks the grid to signal energy and forward motion. Cards and content blocks are inset from the container edge by md spacing. Whitespace is used aggressively—no section should feel crowded. The rhythm is: headline (lg spacing below) → body copy (md spacing below) → CTA or supporting element (lg spacing to next section). This creates a clear visual hierarchy and guides the eye downward.

Elevation & Depth

Depth is achieved through a combination of shadow and background color shifts. Level 1 (Base): surface (#111111) with no shadow. Level 2 (Cards/Containers): surface-container (#161616) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Modals/Popovers): surface-container-high (#222222) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25). Hover states on cards elevate to Level 3 shadow. Focus states use a 3px inset ring of primary color (rgba(46, 167, 255, 0.1)) rather than an outline. Disabled elements drop to surface-container-lowest (#050505) with opacity: 0.5 and no shadow. Gradients (cya

Shapes

The shape philosophy is "Technical Precision"—rounded corners are minimal and purposeful, never organic. Buttons use sm radius (4px / 0.25rem) for a sharp, technical feel that contrasts with the soft, rounded affordances of consumer apps. Cards and containers use lg radius (16px / 1rem) to create visual breathing room without softness. Input fields use DEFAULT radius (8px / 0.5rem) for a balanced, neutral appearance. Badges and pills use full radius (9999px) to signal completeness and status. Dividers and borders are always 1px solid at outline-variant (#444444). Diagonal accent shapes (triang

Components

Action Elements Buttons are the primary interaction primitive. Primary buttons use #2ea7ff background, 15px vertical padding, 24px horizontal padding, 3.75px border-radius, and label-md typography (600 weight, 15px). On hover, the background shifts to primary-fixed-dim (#1e7acc) with a 200ms ease transition. On active/pressed, the background darkens further and the shadow increases to 0 8px 24px rgba(0, 0, 0, 0.25). Secondary buttons use surface-container-high (#3b3b3b) background, 8px vertical padding, 16px horizontal padding, 5.24px border-radius, and label-md typography (500 weight, 14px). On hover, the background lifts to surface-container-highest (#2d2d2d) and text color shifts to primary (#2ea7ff). Ghost buttons (transparent background, primary text) are used for tertiary actions

Do's and Don'ts

**Do**

• Do use primary (#2ea7ff) exclusively for CTAs, focus states, and key interactive elements—never for decorative text or backgrounds.
• Do maintain high contrast: on-surface (#ffffff) on surface (#111111) is 21:1 WCAG AAA compliant; never reduce opacity below 0.7 for body text.
• Do apply lg spacing (40px) between major sections and md spacing (24px) between subsections to create visual rhythm and breathing room.
• Do use the accent colors (secondary #0ffaa3, tertiary #ff25b3) sparingly—they are energy, not noise; reserve them for success states, alerts, and brand moments.
• Do animate state transitions (hover, focus, active) with 150–200ms ease timing to signal responsiveness without feeling sluggish.

**Don't**

• Don't use near-black or near-white as primary—the brand's signature is the electric cyan (#2ea7ff), not a neutral. Monochrome is the canvas, not the brand.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.5)—excessive depth flattens the visual hierarchy and makes the UI feel heavy.
• Don't mix typefaces beyond Abcarizonaflare (display only) and Aspektavf (everything else)—consistency reinforces technical authority.
• Don't reduce the border-radius on buttons below 3.75px or above 1rem—the technical precision is lost if corners become too soft or too sharp.
• Don't use opacity below 0.5 for interactive elements; disabled states should be visually distinct, not invisible.