---
name: Velocity Delivery
colors:
  surface: '#131313'
  surface-dim: '#131313'
  surface-bright: '#393939'
  surface-container-lowest: '#0e0e0e'
  surface-container-low: '#1b1b1b'
  surface-container: '#1f1f1f'
  surface-container-high: '#2a2a2a'
  surface-container-highest: '#353535'
  on-surface: '#e2e2e2'
  on-surface-variant: '#c3c5d9'
  inverse-surface: '#e2e2e2'
  inverse-on-surface: '#303030'
  outline: '#8d90a2'
  outline-variant: '#434656'
  surface-tint: '#b6c4ff'
  primary: '#b6c4ff'
  on-primary: '#002780'
  primary-container: '#0055ff'
  on-primary-container: '#e3e6ff'
  inverse-primary: '#004dea'
  secondary: '#c6c6c7'
  on-secondary: '#2f3131'
  secondary-container: '#454747'
  on-secondary-container: '#b4b5b5'
  tertiary: '#c8c6c5'
  on-tertiary: '#313030'
  tertiary-container: '#686767'
  on-tertiary-container: '#e9e6e6'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#dce1ff'
  primary-fixed-dim: '#b6c4ff'
  on-primary-fixed: '#001551'
  on-primary-fixed-variant: '#0039b3'
  secondary-fixed: '#e2e2e2'
  secondary-fixed-dim: '#c6c6c7'
  on-secondary-fixed: '#1a1c1c'
  on-secondary-fixed-variant: '#454747'
  tertiary-fixed: '#e5e2e1'
  tertiary-fixed-dim: '#c8c6c5'
  on-tertiary-fixed: '#1c1b1b'
  on-tertiary-fixed-variant: '#474746'
  background: '#131313'
  on-background: '#e2e2e2'
  surface-variant: '#353535'
typography:
  headline-xl:
    fontFamily: Space Grotesk
    fontSize: 48px
    fontWeight: '700'
    lineHeight: '1.1'
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Space Grotesk
    fontSize: 32px
    fontWeight: '700'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Space Grotesk
    fontSize: 24px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.5'
    letterSpacing: 0em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.5'
    letterSpacing: 0em
  label-caps:
    fontFamily: Space Grotesk
    fontSize: 12px
    fontWeight: '700'
    lineHeight: '1'
    letterSpacing: 0.1em
  data-mono:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: '500'
    lineHeight: '1'
    letterSpacing: 0.02em
spacing:
  unit: 4px
  gutter: 16px
  margin: 24px
  container-max: 1280px
---

## Brand & Style

This design system is built for the hyper-fast, high-stakes world of local logistics. It prioritizes information density and immediate legibility to foster a sense of technical reliability and relentless speed. The brand personality is aggressive, precise, and utilitarian, catering to users who value time above all else.

The visual style leans heavily into **Technical Brutalism** mixed with **High-Contrast Minimalism**. It eschews soft shadows and rounded corners in favor of hard edges, sharp intersections, and a "dashboard" aesthetic. The goal is to evoke the feeling of a mission-control interface: everything is actionable, real-time, and mission-critical.

## Colors

The palette is strictly limited to maximize contrast and focus. 

- **Primary (Electric Blue):** Used exclusively for interactive states, progress indicators, and movement. It represents the "pulse" of the delivery.
- **Background (Deep Black):** A true black (#000000) base to eliminate visual noise and allow the primary color to "pop" with maximum luminance.
- **Surface (Technical Grey):** Dark, low-contrast greys are used for container grouping without breaking the dark-mode immersion.
- **Content (White):** Pure white is reserved for critical data points and primary labels to ensure maximum readability under various lighting conditions.

## Typography

The typography strategy employs **Space Grotesk** for its technical, geometric edge and **Inter** for its unparalleled legibility in dense UI layouts.

- **Headlines:** Set in Space Grotesk with tight tracking and heavy weights to command attention and imply urgency.
- **Labels:** Small-caps Space Grotesk is used for metadata, inventory headers, and technical specs (e.g., "ETA", "WEIGHT", "STATUS").
- **Body:** Inter is used for descriptions and addresses where reading speed is secondary to accuracy.
- **Numerical Data:** All time-based and currency-based data must use Space Grotesk to maintain the technical aesthetic.

## Layout & Spacing

This design system utilizes a **Fixed Grid with Technical Gutters**. The layout is strictly based on a 4px baseline grid to ensure mathematical alignment of all elements.

- **Grid:** A 12-column grid for desktop, 4-column for mobile.
- **Rhythm:** Spacing is aggressive and tight. Use 8px (2u) for related elements and 24px (6u) for section blocks. 
- **Density:** High information density is encouraged. Elements should feel packed and efficient, like a cockpit or a shipping manifest.

## Elevation & Depth

Depth is conveyed through **Tonal Layering and Sharp Borders** rather than shadows. 

- **Level 0:** True Black (#000000) for the primary application background.
- **Level 1:** Technical Grey (#1A1A1A) for cards and containers.
- **Level 2:** Lighter Grey (#2A2A2A) for active or hovered states.
- **Separators:** Use 1px solid borders in #333333 to define boundaries. 
- **Active Indicators:** Use 2px Electric Blue borders to signify focus or "live" tracking status. Shadows are strictly prohibited unless used as a subtle "glow" for the primary blue color in specific high-energy states.

## Shapes

The shape language is strictly **Sharp (0px)**. 

Every UI element—from buttons and input fields to map overlays and cards—must feature 90-degree angles. This reinforces the technical, industrial nature of the service. Geometric patterns (like 45-degree chamfered corners on status tags) can be used sparingly to indicate "clipping" or "processing" states.

## Components

### Buttons & Interaction
- **Primary CTA:** Solid Electric Blue background with White text. Sharp edges. No gradients. High-visibility hover state (White background with Blue text).
- **Secondary Action:** Ghost style with a 2px White or Blue border.
- **Status Chips:** High-contrast blocks (e.g., Bright Green for "In Transit", Orange for "Delayed") with monospace-style labels.

### Technical UI Elements
- **ETA Trackers:** Large, bold numerical displays using Space Grotesk. Real-time updates should trigger a brief Electric Blue flash.
- **Inventory Status:** Grid-based lists with 1px dividers. Use iconography that mimics schematic drawings.
- **Input Fields:** Black background, 1px White border. On focus, the border thickness increases to 2px and changes to Electric Blue.

### Cards & Containers
- Cards do not have shadows. They use a #1A1A1A background to stand out from the #000000 base.
- Headers within cards should be separated by a solid horizontal line.

### Progress & Loading
- Linear, 100% sharp-edged progress bars. 
- Loading states utilize "scanning" animations—horizontal lines moving vertically—to maintain the technical/digital theme.