---
name: Nexus Integrations
colors:
  surface: '#081425'
  surface-dim: '#081425'
  surface-bright: '#2f3a4c'
  surface-container-lowest: '#040e1f'
  surface-container-low: '#111c2d'
  surface-container: '#152031'
  surface-container-high: '#1f2a3c'
  surface-container-highest: '#2a3548'
  on-surface: '#d8e3fb'
  on-surface-variant: '#c1c6d7'
  inverse-surface: '#d8e3fb'
  inverse-on-surface: '#263143'
  outline: '#8b90a0'
  outline-variant: '#414754'
  surface-tint: '#adc7ff'
  primary: '#adc7ff'
  on-primary: '#002e68'
  primary-container: '#4a8eff'
  on-primary-container: '#00285b'
  inverse-primary: '#005bc0'
  secondary: '#b9c7e4'
  on-secondary: '#233148'
  secondary-container: '#3c4962'
  on-secondary-container: '#abb9d6'
  tertiary: '#b7c8e1'
  on-tertiary: '#213145'
  tertiary-container: '#8292aa'
  on-tertiary-container: '#1a2b3e'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#d8e2ff'
  primary-fixed-dim: '#adc7ff'
  on-primary-fixed: '#001a41'
  on-primary-fixed-variant: '#004493'
  secondary-fixed: '#d6e3ff'
  secondary-fixed-dim: '#b9c7e4'
  on-secondary-fixed: '#0d1c32'
  on-secondary-fixed-variant: '#39475f'
  tertiary-fixed: '#d3e4fe'
  tertiary-fixed-dim: '#b7c8e1'
  on-tertiary-fixed: '#0b1c30'
  on-tertiary-fixed-variant: '#38485d'
  background: '#081425'
  on-background: '#d8e3fb'
  surface-variant: '#2a3548'
typography:
  headline-xl:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.25'
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.3'
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.5'
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: '1.5'
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '600'
    lineHeight: '1'
    letterSpacing: 0.05em
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  gutter: 24px
  margin: 32px
  max-width: 1280px
---

## Brand & Style
The design system is engineered to project a sense of "Advanced Reliability." It targets C-suite executives and IT directors in the Colombian market who seek world-class technology integration. 

The visual style is **Corporate/Modern** with a technical edge. It utilizes a deep, dark canvas to signify security and stability, punctuated by vibrant electric pulses that represent data flow and innovation. High-quality imagery should feature macro photography of hardware, clean server environments, and abstract digital lattices. The use of geometric overlays and subtle radial gradients creates a sense of depth and architectural precision.

## Colors
The palette is rooted in a high-contrast dark mode execution. 

*   **Primary (Electric Blue):** Used for critical actions, active states, and highlights. It represents the energy of digital transformation.
*   **Secondary (Deep Navy):** The foundational surface color. It provides a sophisticated, professional backdrop that reduces eye strain and emphasizes content.
*   **Neutral (Slate Grays):** Used for typography and subtle borders. These grays are cool-toned to maintain the high-tech atmosphere.
*   **Accents:** Subtle gradients should transition from the primary blue to a deeper cyan to simulate glowing interfaces.

## Typography
This design system utilizes **Inter** for its exceptional clarity and utilitarian aesthetic. 

Headlines use tighter letter-spacing and heavier weights to command authority. Body text is optimized for readability against dark backgrounds, using a slightly increased line-height to prevent "halation" (the bleeding of light text on dark). Labels and technical metadata are set in uppercase with increased tracking to evoke the feel of technical blueprints or terminal interfaces.

## Layout & Spacing
The system employs a **Fixed Grid** model on desktop and a **Fluid Grid** on mobile. 

Layouts are based on a 12-column grid. Components should align to an 8px spatial rhythm for vertical flow, while the internal composition of elements (like icons within buttons) adheres to a tighter 4px grid. Large-scale sections should be separated by significant whitespace (40px+) to maintain a clean, premium feel and avoid visual clutter.

## Elevation & Depth
Depth is achieved through **Tonal Layering** and **Glassmorphism**, rather than traditional heavy shadows. 

1.  **Base Layer:** The deepest navy (#0A192F).
2.  **Content Surfaces:** A slightly lighter slate (#1E293B) with a subtle 1px border (#334155).
3.  **Floating Elements (Modals/Popovers):** Semi-transparent surfaces with a `backdrop-filter: blur(12px)` and a soft, outer glow using the primary blue at very low opacity (5-10%).

This stacking method creates a sense of "digital glass" panels floating in a vacuum, reinforcing the high-tech narrative.

## Shapes
The shape language is strictly **Geometric and Soft**. 

A base radius of 0.25rem (4px) is applied to most UI components to ensure they feel modern but precise. Large cards and containers may use 0.5rem (8px) for a slightly more approachable feel. Circles are reserved exclusively for avatars and status indicators. Interactive elements should never be fully pill-shaped, as sharp/soft corners convey more "engineering precision" than rounded ones.

## Components

### Buttons
Primary buttons feature a solid Electric Blue fill with white text. Hover states should introduce a slight inner glow. Secondary buttons are "Ghost" style with a Slate border and no fill, emphasizing the clean, minimalist aesthetic.

### Input Fields
Inputs use a dark background (#020617) with a subtle bottom-border highlight in the primary color when focused. Placeholder text remains in a muted gray to maintain hierarchy.

### Cards
Cards are the primary container for integration services. They should use a subtle 45-degree gradient border that catches the light, giving the impression of a physical hardware module.

### Chips & Badges
Used for status indicators (e.g., "Connected," "Encrypted"). These use a high-contrast background with the primary color at 15% opacity and a solid border, keeping the "glass" look consistent.

### Additional Components
*   **Connectivity Graph:** A custom visual component showing live nodes and links to represent integration status.
*   **Data Metrics:** Large-scale numbers with high-weight typography for KPIs and system health monitoring.