---
version: "alpha"
name: "AVENIX"
description: "AVENIX es una agencia creativa tech construida sobre azul electrico y near-black navy: tipografia geometrica en peso maximo, cards flotantes con blue-glow edge y un sistema de identidad disenado para marcas digitales que buscan liderazgo visual."
colors:
  primary: "#0044FF"
  secondary: "#3B6BFF"
  tertiary: "#8FA3CC"
  neutral: "#FFFFFF"
  background: "#060C1A"
  surface: "#0D1630"
  text-primary: "#FFFFFF"
  text-secondary: "#8FA3CC"
  border: "#1A3070"
  accent: "#0044FF"
typography:
  display-lg:
    fontFamily: "Outfit"
    fontSize: "96px"
    fontWeight: 900
    lineHeight: "96px"
    letterSpacing: "-0.02em"
    textTransform: "uppercase"
  body-md:
    fontFamily: "DM Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "26px"
    letterSpacing: "0em"
  label-md:
    fontFamily: "DM Sans"
    fontSize: "11px"
    fontWeight: 500
    lineHeight: "16px"
    letterSpacing: "0.12em"
    textTransform: "uppercase"
rounded:
  sm: "8px"
  md: "12px"
  lg: "20px"
  pill: "9999px"
spacing:
  base: "8px"
  sm: "4px"
  md: "12px"
  lg: "20px"
  xl: "32px"
  gap: "16px"
  card-padding: "28px"
  section-padding: "40px"
components:
  button-primary:
    backgroundColor: "#0044FF"
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
    rounded: "8px"
    padding: "12px 20px"
  card:
    rounded: "12px"
    padding: "28px"
    background: "#0D1630"
    border: "1px solid #1A3070"
---

## Overview

- **Composition cues:**
  - Layout: Modular Grid
  - Content Width: Full Bleed
  - Framing: Floating cards on dark canvas
  - Grid: Editorial / asymmetric

## Colors

The color system is dark-mode-first with electric blue #0044FF as the primary action color and a near-black navy #060C1A as the base canvas.

- **Primary (#0044FF):** Electric blue. Action states, CTAs, primary emphasis. The signature hue of the system.
- **Secondary (#3B6BFF):** Mid blue. Hover states, secondary elements, gradient endpoints.
- **Tertiary (#8FA3CC):** Blue-tinted gray. Muted text, subtle labels, supporting copy.
- **Neutral (#FFFFFF):** White. Headlines, primary text, high-contrast moments.

- **Usage:** Background: #060C1A; Surface: #0D1630; Text Primary: #FFFFFF; Text Secondary: #8FA3CC; Border: #1A3070; Accent: #0044FF

- **Gradients:** radial blue glow from #0044FF at low opacity over the near-black canvas; linear gradient on cards from #0D1630 to #060C1A

## Typography

Typography uses Outfit for display (bold, geometric, forceful - weight 900) and DM Sans for body and labels (clean, neutral, readable).

- **Display (`display-lg`):** Outfit, 96px, weight 900, line-height 96px, letter-spacing -0.02em, uppercase.
- **Body (`body-md`):** DM Sans, 16px, weight 400, line-height 26px, letter-spacing 0em.
- **Labels (`label-md`):** DM Sans, 11px, weight 500, line-height 16px, letter-spacing 0.12em, uppercase.

## Layout

Layout follows a modular editorial grid. Large display type anchors section headers; floating cards provide supporting structure. Content reads full-bleed at section level.

- **Layout type:** Modular Grid
- **Content width:** Full Bleed
- **Base unit:** 8px
- **Scale:** 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px
- **Section padding:** 40px, 60px, 80px
- **Card padding:** 24px, 28px
- **Gaps:** 8px, 12px, 16px, 24px

## Elevation & Depth

Depth is communicated through dark surface layering, blue-tinted borders, and radial blue glows beneath key elements. Cards float over the canvas with subtle electric blue edge glows. No glass blur, no gradient border shells.

- **Surface style:** Floating dark cards with blue-glow edge
- **Borders:** 1px solid #1A3070; 1px solid rgba(0, 68, 255, 0.3)
- **Shadows:** 0 20px 60px -20px rgba(0, 68, 255, 0.25); 0 4px 24px rgba(0, 0, 0, 0.4)
- **Blur:** 0px (no glass backdrop-filter)

### Techniques
- **Blue glow:** Cards and interactive elements emit a faint radial blue glow using box-shadow with low-opacity #0044FF to communicate elevation without glass. The blue hue is consistent with the accent color so the depth system reads as part of the brand language.

## Shapes

Shapes use a consistent rounded system. 8px for controls and buttons, 12px for cards and panels, 20px for large containers, 9999px for tags and badges. No sharp cuts (0px) or extreme pills on non-badge elements.

- **Corner radii:** 8px, 12px, 20px, 9999px
- **Icon sets:** Phosphor / Lucide compatible

## Components

Anchor interactions to the detected button and card styles. Reuse the blue-glow card surface recipe for all content blocks.

### Buttons
- **Primary:** background #0044FF, text #FFFFFF, radius 8px, padding 12px 20px, font DM Sans 500 uppercase 11px ls 0.12em.
- **Secondary:** background transparent, text #0044FF, border 1px solid rgba(0,68,255,0.4), same padding and radius.
- **Ghost:** background transparent, text #FFFFFF, border 1px solid rgba(255,255,255,0.18), same padding and radius.

### Cards and Surfaces
- **Card surface:** background #0D1630, border 1px solid #1A3070, radius 12px, padding 28px, shadow 0 4px 24px rgba(0,0,0,0.4).
- **Highlighted card:** same + box-shadow: 0 0 40px -10px rgba(0,68,255,0.3), 0 20px 60px -20px rgba(0,68,255,0.2).

### Iconography
- **Treatment:** Line icons, 1.5px stroke, white or #8FA3CC on dark surfaces.
- **Sets:** Phosphor.

## Do's and Don'ts

Use these constraints to keep future generations aligned with the AVENIX system instead of drifting into adjacent styles.

### Do
- Do use electric blue #0044FF exclusively for primary actions and key emphasis moments.
- Do keep the canvas near-black; do not lift it with grays that break the depth system.
- Do use Outfit 900 for all large display moments - it is the brand's strongest voice.
- Do keep corner radii within the 8px, 12px, 20px, 9999px family.

### Don't
- Don't introduce warm colors or desaturated neutrals; they break the electric blue system.
- Don't use box-shadow glows in colors other than blue; off-color glows dilute the brand signal.
- Don't use light backgrounds inside cards; the dark canvas is the identity.
- Don't reduce display type weight below 700; the brand reads forceful, not editorial light.

## Motion

Motion is slick and precise: quick transitions that communicate system speed and digital confidence. Page reveals use staggered fade-up. No heavy parallax or scroll choreography.

**Motion Level:** slick / precise

**Durations:** 150ms, 200ms, 300ms

**Easings:** ease-out, cubic-bezier(0.2, 0, 0, 1)

**Hover Patterns:** opacity, transform translateY(-2px), border-color glow

**Scroll Patterns:** staggered fade-up (no parallax)